Hoppscotch-App

Explore the comprehensive Hoppscotch User Guide for deeper application knowledge.

Support Channels

Core Capabilities

❤️ Featherweight: Characterized by a minimalist aesthetic in its user interface.

⚡️ Rapid: Execute requests and retrieve outcomes instantaneously.

🗄️ HTTP Verbs: Request verbs dictate the operation requested from the endpoint.

• GET - Retrieves resource data
• POST - Instructs the server to establish a novel entity in storage
• PUT - Modifies a pre-existing resource completely
• PATCH - Implements a partial update to a resource, distinct from PUT
• DELETE - Removes a specified resource or associated component
• HEAD - Fetches only the response headers equivalent to GET, omitting the payload.
• CONNECT - Forges a dedicated conduit to the designated server resource.
• OPTIONS - Details the permissible communication methods for the target resource.
• TRACE - Executes a message echo test along the request path to the destination.
• <custom> - Supports user-defined methods, such as LIST, if required by the API specification.

🌈 Visual Customization: Adaptable themes enabling modifications to background, primary, and highlight colors — adjust here.

• Theme selection: System default, Bright, Dark, and Pure Black
• Accent hue choices: Green, Teal, Azure, Indigo, Violet, Gold, Coral, Crimson, and Rose
• Unobstructed Focus mode

Tailored visual schemes are synchronized across your cloud or local data persistence layers.

🔥 PWA Functionality: Deployable as a Progressive Web Application on various platforms.

• Immediate startup via Service Workers
• Capability for offline operation
• Minimal consumption of system memory and CPU resources
• Option to place on the device's Home Screen
• Desktop PWA support

🚀 Request Execution: Fetch the server's reply for an endpoint immediately.

1. Select the appropriate method verb
2. Input the target URL address

3. Initiate the transmission via "Send"

4. Ability to duplicate/share a publicly accessible "Share URL"

5. Generation and copying of code samples for over 10 programming languages/frameworks
6. Ingestion of requests defined in cURL format
7. Request labeling capability

🔌 WebSocket Support: Establishes persistent, bidirectional communication conduits over a singular TCP link.

📡 Server-Sent Events (SSE): Receive a continuous stream of server notifications over HTTP without recurring client polling.

🌩 Socket.IO Integration: Facilitates data exchange with servers utilizing the SocketIO protocol.

🦟 MQTT Connectivity: Capability to subscribe to and publish messages to designated topics on an MQTT broker.

🔮 GraphQL Handling: Supports GraphQL, a specification for querying APIs and executing those queries against existing data stores.

• Configure the service endpoint and retrieve the corresponding schema
• Multi-panel documentation view
• Provision for setting bespoke request headers
• Schema introspection
• Receipt and visualization of query results

🔐 Authentication Mechanisms: Tools for validating and confirming end-user identity.

• No authentication
• Basic authentication scheme
• Bearer Token authorization
• OAuth 2.0 flows
• OIDC Access Token/PKCE protocols

📢 Header Management: Define the anticipated format of the data being transmitted within the request payload.

📫 Query Parameters: Utilize request parameters to inject variable segments into simulated transactions.

📃 Payload Construction: Used for transmitting and receiving data within the context of RESTful interactions.

• Content Type specification
• Support for FormData, JSON, and various other formats
• Toggle between structured key-value input and raw data entry

📮 Response Interpretation: Contains the status line, response headers, and the resultant message body.

• Copy response content to the system clipboard
• Save the response data as a local file
• Inspect response metadata (headers)
• Render or view raw content for HTML, images, JSON, and XML formats

⏰ Interaction Log: Previous request invocations are persisted across synchronized local/cloud storage sessions.

📁 Request Bundles (Collections): Structure your API calls logically using collections and sub-folders. Re-execute saved workflows with minimal interaction.

• Infinite capacity for collections, folders, and individual requests
• Support for nested directory structures
• Export/import functionality via file or GitHub gist

Request bundles are synchronized across your persistent session storage.

📜 Pre-Request Logic: Executable JavaScript segments attached to a request, running prior to its dispatch.

• Dynamic setting of environment variables
• Injection of current timestamps into request headers
• Inclusion of randomly generated alphanumeric strings in URL parameters
• Utilization of arbitrary JavaScript functions

👨‍👩‍👧‍👦 Team Environments: Facilitate cross-functional teamwork for accelerated API specification, creation, and validation.

• Capacity for unlimited teams
• Capacity for unlimited shared request bundles
• Capacity for unlimited team participants
• Granular access control based on roles
• Cloud synchronization capabilities
• Multi-device consistency

👥 Contextual Workspaces: Organize personal and shared request libraries and variable sets into distinct operational contexts. Effortlessly switch between these contexts for various projects.

• Capacity for unlimited workspaces
• Seamless transition between individual and shared contexts

⌨️ Efficiency Enhancements (Shortcuts): Optimized input mechanisms for speed.

Review the Keyboard Shortcuts guide here: Hoppscotch Keyboard Shortcuts

🌐 Proxy Service: Activate Proxy Mode in settings to bypass network restrictions for API access.

• Concealment of the originating IP address
• Resolution of CORS (Cross-Origin Resource Sharing) impediments
• Ability to query endpoints using unencrypted (http://) protocols
• Utilization of a dedicated Proxy URL endpoint

The official relay server is maintained by the Hoppscotch project - GitHub Repository - Data Privacy Statement.

🌎 Multilingual Support (i18n): Access the application interface in your preferred language.

We welcome translation contributions. Refer to TRANSLATIONS for guidelines concerning our CODE OF CONDUCT and the procedure for submitting merge requests.

☁️ Authentication & Real-time Sync: Log in to ensure your data is harmonized across all active devices instantly.

Supported Sign-in Methods:

• GitHub credentials
• Google account
• Microsoft credentials
• Traditional Email/Password
• SSO (Single Sign-On)[^EE]

🔄 Data Unification: Seamlessly transition tasks across different devices for uninterrupted workflow.

• Operational Contexts (Workspaces)
• Interaction History
• Request Bundles (Collections)
• Variable Sets (Environments)
• Application Preferences (Settings)

✅ Post-Execution Validation (Tests): JavaScript assertions executed subsequent to receiving an API response.

• Verification of the numerical HTTP status code
• Filtering based on response headers
• Parsing of response payload data
• Assignment of values to environment variables
• Execution of arbitrary JavaScript logic

🌱 Environment Variables: Configuration variables facilitate the storage and reuse of dynamic values within requests and scripts.

• Infinite capacity for environments and variables
• Initialization capability via pre-request scripting
• Export/import options, including GitHub gist integration

Illustrative Use-cases

--- - By persisting a value in a named variable, you can reference it consistently across your entire request definition suite. - If the underlying value requires updating, modification is only necessary in that single variable definition point. - Employing variables enhances operational efficiency and drastically reduces the probability of human error. ---

🚚 Bulk Modification Tool: Efficiently edit sets of key-value pairs simultaneously.

• Input entries delimited by line breaks
• Separation between key and value established by a colon (:)
• Precede any line with # to temporarily disable its processing

🎛️ Administration Panel: Tools for overseeing team membership and access permissions.

• Operational statistics (Insights)
• User management interface
• Team administration controls

📦 Ecosystem Extensions (Add-ons): Officially supported auxiliary tools for Hoppscotch.

• Hoppscotch CLI - A terminal interface companion for Hoppscotch operations.
• ProxyScotch - A lightweight proxy server engineered specifically for Hoppscotch.
• Browser Integrations - Browser add-ons designed to augment the Hoppscotch user experience.

Firefox  |  Chrome

Browser extensions are effective for resolving CORS conflicts.

All auxiliary components are developed and managed under the Hoppscotch Organization umbrella.

For a comprehensive inventory of functionalities, consult our official documentation.

Demonstration

Access the live portal at hoppscotch.io

Operational Guide

1. Specify the target API endpoint within the address field.
2. Engage the "Send" button to simulate the API invocation.
3. Review and analyze the resulting server reply.

Development Setup

Follow our self-hosting instructions to configure your local development toolchain.

Contribution Guidelines

Please contribute following the established GitHub Flow methodology. Branch out, commit your modifications, and then propose a pull request.

Please familiarize yourself with CONTRIBUTING for details on our CODE OF CONDUCT and the submission protocol for new code contributions.

Automation and Testing

We leverage GitHub Actions for continuous integration pipelines. Review our current build processes.

Revision Log

Consult the CHANGELOG file for version history.

Project Originators

This creation is indebted to the combined efforts of every contributor — Join the effort.

Licensing

This software is distributed under the terms of the MIT License — see the accompanying LICENSE document for specifics.

[^EE]: Exclusive feature of the Enterprise tier. Learn more details here.

WIKIPEDIA: XMLHttpRequest (XHR) constitutes an API implemented as a JavaScript object, enabling methods for dispatching HTTP queries from a web browser to a remote web server. These methods permit browser-based software components to send requests after initial page load completion and receive data back. XMLHttpRequest is foundational to Ajax programming paradigms. Preceding Ajax, server interaction primarily relied on navigating hyperlinks or submitting forms, often resulting in a full page refresh.

== Historical Context == The foundational concept for XMLHttpRequest originated in 2000, conceived by developers working on Microsoft Outlook. This concept was subsequently integrated into Internet Explorer version 5 (released in 1999). Notably, the initial implementation did not utilize the explicit XMLHttpRequest identifier; instead, developers employed ActiveXObject("Msxml2.XMLHTTP") and ActiveXObject("Microsoft.XMLHTTP"). As of Internet Explorer version 7 (2006), standardized support for the XMLHttpRequest identifier is universal across all major browser engines, including Mozilla's Gecko (2002), Safari 1.2 (2004), and Opera 8.0 (2005).

=== Standardization Efforts === The World Wide Web Consortium (W3C) formalized the initial specification for the XMLHttpRequest object as a Working Draft on April 5, 2006. A subsequent Level 2 specification, introducing capabilities like event progress monitoring, cross-origin request facilitation, and byte stream handling, was released by the W3C on February 25, 2008. By the close of 2011, the Level 2 extensions were merged back into the primary specification document. Development oversight transitioned to the WHATWG consortium at the end of 2012, which maintains the living document using Web IDL notation.

== Operational Procedure == Generally, executing a request using XMLHttpRequest requires adherence to several distinct programming stages.

1. Instantiation of an XMLHttpRequest object via its constructor:
2. Invocation of the open method to define the request modality, target resource URI, and whether the operation should be synchronous or asynchronous:
3. For asynchronous operations, establishing an event handler to be notified upon state transitions:
4. Triggering the request transmission via the send method:
5. Responding to state changes within the designated event listener. If the server returns data, it is typically stored in the responseText attribute by default. When processing concludes, the state transitions to 4, the 'complete' status. Beyond these fundamental actions, XMLHttpRequest provides numerous controls over transmission behavior and response parsing. Custom header fields can be appended to tailor server processing requirements, and data payloads can be uploaded during the send call. The received response can be automatically deserialized from JSON into a native JavaScript object structure, or processed incrementally as data arrives rather than awaiting the full transmission. Furthermore, requests can be halted prematurely or assigned a timeout deadline.

== Inter-domain Communications == In the nascent stages of the World Wide Web, issues arose concerning cross-domain security restrictions, which severely limited the ability of scripts loaded from one origin to communicate with resources hosted on a different origin.