hoppscotch: A Vue repository from MrHanson

Hoppscotch - Open source API development ecosystem

Helps you create requests faster, saving precious time on development - Subscribe

_{Built with ❤︎ by
liyasthomas and
contributors}

Sponsored by

Powered by

Contact

Support

Table of contents

Features
Demo
Usage
Built with
Developing
Docker
Releasing
Contributing
Continuous Integration
Changelog
Authors
License

Features

❤️ Lightweight: Crafted with minimalistic UI design.

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

HTTP Methods

GET - Requests retrieve resource information
HEAD - Retrieve response headers identical to those of a GET request, but without the response body.
POST - The server creates a new entry in a database
PUT - Updates an existing resource
DELETE - Deletes resource or related component
CONNECT - Establishes a tunnel to the server identified by the target resource
OPTIONS - Describe the communication options for the target resource
TRACE - Performs a message loop-back test along the path to the target resource
PATCH - Very similar to PUT but makes a partial update on a resource
<custom> - Some APIs use custom request methods such as LIST. Type in your custom methods.

🌈 Make it yours: Customizable combinations for background, foreground and accent colors. Customize now ✨

Theming

Choose theme: System, Light, Dark (default) and Black
Choose accent color: Blue, Green (default), Teal, Indigo, Purple, Orange, Pink, Red, and Yellow
Toggle auto-scroll to response

Customized themes are synced with local session storage

🔥 PWA: Install as a PWA on your device.

Features

Instant loading with Service Workers
Offline support
Low RAM/memory and CPU usage
Add to Home Screen
Desktop PWA

🚀 Request: Retrieve response from endpoint instantly.

Choose method
Enter URL
Send

Features

Copy/share public "Share URL"
Generate/copy request code snippets for 10+ languages and frameworks
Import cURL
Label requests

🔌 WebSocket: Establish full-duplex communication channels over a single TCP connection.

📡 Server Sent Events: Receive a stream of updates from a server over a HTTP connection without resorting to polling.

🌩 Socket.IO: Send and Receive data with SocketIO server.

🦟 MQTT: Subscribe and Publish to topics of a MQTT Broker.

🔮 GraphQL: GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

Features

Set endpoint and get schemas
Multi-column docs
Set custom request headers
Query schema
Get query response

🔐 Authentication: Allows to identify the end user.

Types

None
Basic
Bearer Token
OAuth 2.0
OIDC Access Token/PKCE

📢 Headers: Describes the format the body of your request is being sent as.

📫 Parameters: Use request parameters to set varying parts in simulated requests.

📃 Request Body: Used to send and receive data via the REST API.

Options

Set Content Type
Add or remove Parameter list
Toggle between key-value and RAW input parameter list

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

Features

Copy response to clipboard
Download response as a file
View response headers
View raw and preview of HTML, image, JSON, XML responses

⏰ History: Request entries are synced with cloud / local session storage to restore with a single click.

📁 Collections: Keep your API requests organized with collections and folders. Reuse them with a single click.

Features

Unlimited collections, folders and requests
Nested folders
Export as / import from GitHub gist

Collections are synced with cloud / local session storage

🌐 Proxy: Enable Proxy Mode from Settings to access blocked APIs.

Features

Hide your IP address
Fixes CORS (Cross Origin Resource Sharing) issues
Access APIs served in non-HTTPS (http://)
Use custom Proxy URL

Official proxy server is hosted by Hoppscotch - GitHub - Privacy Policy

📜 Pre-Request Scripts β: Snippets of code associated with a request that are executed before the request is sent.

Use-cases

Initialize environment variables
Include timestamp in the request headers
Send a random alphanumeric string in the URL parameters

📄 API Documentation: Create and share dynamic API documentation easily, quickly.

Usage

Add your requests to Collections and Folders
Export Collections and easily share your APIs with the rest of your team
Import Collections and Generate Documentation on-the-go

⌨️ Keyboard Shortcuts: Optimized for efficiency.

Shortcuts WIki

🌎 i18n: Experience the app in your own language.

Usage

Scroll down to the footer
Click "Choose Language" icon button
Select your language from the menu

Keep in mind: Translations aren't available for all source and target language combinations

To provide a localized experience for users around the world, you can add you own translations.

All i18n contributions are welcome to i18n branch only!

📦 Add-ons: Official add-ons for hoppscotch.

Proxy - A simple proxy server created for Hoppscotch
CLI β - A CLI solution for Hoppscotch
Browser Extensions - Browser extensions that simplifies access to Hoppscotch

Firefox | Chrome

Extensions fixes CORS issues.
Hopp-Doc-Gen - An API doc generator CLI for Hoppscotch

Add-ons are developed and maintained under Official Hoppscotch Organization.

☁️ Auth + Sync: Sign in and sync in real-time.

Sign in with

Google
GitHub

Sync

History
Collections
Environments
Notes

✅ Post-Request Tests β: Write tests associated with a request that are executed after the request response.

Use-cases

Check the status code as an integer
Filter response headers
Parse the response data

📝 Notes : Instantly jot down notes, tasks or whatever you feel like as they come to your mind.

Notes are only available for signed-in users

🌱 Environments : Environment variables allow you to store and reuse values in your requests and scripts.

Features

Unlimited environments and variables
Initialize through pre-request script
Export as / import from GitHub gist

Use-cases

By storing a value in a variable, you can reference it throughout your request section
If you need to update the value, you only have to change it in one place
Using variables increases your ability to work efficiently and minimizes the likelihood of error

To find out more, please check out Hoppscotch Wiki.

Demo

hoppscotch.io

Usage

Choose method
Enter URL
Send request
Get response

Built with

Developing

Update .env.example file found in repository's root directory with your own keys and rename it to .env.

Sample keys only works with the production build.

Browser based development environment

Local development environment

Clone this repo with git.
Install dependencies by running npm install within the directory that you cloned (probably hoppscotch).
Start the development server with npm run dev.
Open development site by going to http://localhost:3000 in your browser.

Docker compose

Clone this repo with git.
Run docker-compose up
Open development site by going to http://localhost:3000 in your browser.

Docker

Official container

#pull
docker pull hoppscotch/hoppscotch

#build
docker build -t hoppscotch/hoppscotch:latest .

#run
docker run -p 3000:3000 hoppscotch/hoppscotch:latest

Legacy container

Legacy container

#pull
docker pull liyasthomas/postwoman

#build
docker build -t liyasthomas/postwoman:latest .

#run
docker run -p 3000:3000 liyasthomas/postwoman:latest

Releasing

Clone this repo with git.
Install dependencies by running npm install within the directory that you cloned (probably hoppscotch).
Build the release files with npm run generate.
Find the built project in ./dist.