The Hoppscotch featured in this issue is an open source API development ecosystem.

Hoppscotch characteristics

Lightweight: Refined with simple UI design.

Fast: Send requests and get/copy responses in real time.

HTTP method

• GET- request to retrieve resource information
• POST- server creates a new entry in the database
• PUT- Update existing resources
• PATCH- very similar to PUT but with partial updates to the resource
• DELETE- Delete a resource or related component
• HEAD- Retrieves the same response header as the GET request, but without the response body.
• CONNECT- Establishes a tunnel to the server identified by the target resource
• OPTIONS- Describes communication options for the target resource
• TRACE- Perform message loopback tests along the path to the target resource
• < custom> – Some apis use custom request methods, such as LIST. Enter your custom method.

Topicalization

• Select theme: System (default), light, Dark, and black
• Select accent colors: green (default), teal, blue, Indigo, purple, yellow, orange, red, and pink
• Zen mode without distractions

Sync custom topics with cloud/local sessions

PWA: Install PWA on your device.

• Instant loading with Service Worker
• Offline support
• Low RAM/ memory and CPU usage
• Add to main screen
• Desktop PWA

Request: Retrieves the response immediately from the endpoint.

1. Select method
2. Enter the URL
3. Send

• Copy/share public “share URL”
• Generate/copy request snippets for more than 10 languages and frameworks
• Import cURL
• Tag request

WebSocket: Establishes a full-duplex communication channel over a single TCP connection.

Events sent by the server: receives an update stream from the server over an HTTP connection without resorting to polling.

Socket.IO: Use the SocketIO server to send and receive data.

MQTT: Subscribe and publish topics to the MQTT broker.

GraphQL: GraphQL is a query language for apis and a runtime that uses existing data to complete these queries.

• Set the endpoint and get the schema
• Multi-column document
• Set the custom request header
• Query structure
• Get query response

Authorization: Allows identification of end users.

• No
• Basic
• Bearer token
• OAuth 2.0
• OIDC Access token /PKCE

Header: Describes the format for sending the request body.

Parameters: Uses the request parameters to set the different parts in the mock request.

Request body: Used to send and receive data through the REST API.

• Play Content Type
• FormData, JSON, etc.
• Toggle between key values and RAW input parameter list

Response: Contains the status line, header, and message/response body.

• Copy response to clipboard
• Download the response as a file
• View response header
• View raw and previews of HTML, images, JSON, XML responses

History: Request entries are synchronized with cloud/local session storage and can be restored with a single click.

Collections: Use collections and folders to organize your API requests. Reuse them with a single click.

• Unlimited favorites, folders, and requests
• Nested folder
• Export and import as file or GitHub gist

Sync collection with cloud/local session storage

Proxy: Enables proxy mode from Settings to access blocked apis.

• Hide your IP address
• Fix CORS (Cross-Domain Resource Sharing) problem
• Access the API provided in a non-HTTPS (http://)) endpoint
• Use your proxy URL

Quick Start Guide

Hoppscotch UI consists of the following components:

• The top bar allows you to view our repository, log in with your account and provide useful links.
• The left sidebar provides access to a suite of tools available for Web development.
• You can change your preferred language in the lower right corner.

< REST API Platform

• The central area is where you build and process API requests.
• In the left sidebar above the divider line are ICONS that direct you to specific panes of requests, options, and responses.
• The right panel allows you to view recent API request history, collections, and environments.

History

Displays your most recent API requests, allowing you to pick up where you left off.
Collection

Hoppscotch allows you to use collections and folders to organize API requests.
Environment

Store variables and reuse values in your requests and scripts To set up an environment, select from the drop-down list of available environments.

GraphQL editor

• The center area is where you query using graphql.
• In the left sidebar on the side of the separator line are ICONS that direct you to specific panes for Schema, Query, and Response.
• The right panel contains tabs for schema documents, queries, histories, and collections. You can hide this panel for convenience.

API Document Generator

You can import the collection. Or select an existing collection you made in Hoppscotch from the right panel. Click Generate Document to get API documentation.

Interceptor and add-ons

Use proxyscotch/ custom middleware or the Hoppscotch Web extension to access apis blocked by CORS restrictions.

Using a proxy

Enable proxy in Settings.

How ProxyScotch works

< Using custom middleware

Since CORS is as simple as adding some HTTP headers, and it’s the only browser that’s blocked, you can build some proxy-like component that will basically make the call for you, get the response from the required API, add those headers to the top, And send it back to Hopscotch.

Using Hoppscotch Network extension

• Download the Hoppscotch Browser extension here.
• Enable it in Settings.
• Open extension and add new source

The Hoppscotch extension routes all added sources to the proxy.

API documentation

Generate documentation for your API anytime, anywhere. Use apis in collections or import local collections and get API documentation as secrets that gist can share between collaborators.

—END—

Open Source protocol: MIT license