
hoppscotch
Vue LINK
A free, fast and beautiful API request builder
Helps you create requests faster, saving precious time on development - Subscribe
[](https://travis-ci.com/hoppscotch/hoppscotch) [](https://github.com/hoppscotch/hoppscotch/releases/latest) [](https://hoppscotch.io) [](CONTRIBUTING.md) [](https://opencollective.com/hoppscotch) [](https://www.paypal.me/liyascthomas) [](https://t.me/hoppscotch) [](https://discord.gg/GAMWxmR) [](https://twitter.com/intent/tweet?url=https%3A%2F%2Fhoppscotch.io&text=%F0%9F%91%BD%20hoppscotch%20%E2%80%A2%20API%20request%20builder%20-%20Helps%20you%20create%20your%20requests%20faster%2C%20saving%20you%20precious%20time%20on%20your%20development&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3D%25F0%259F%2591%25BD%2520hoppscotch%2520%25E2%2580%25A2%2520API%2520request%2520builder%2520-%2520Helps%2520you%2520create%2520your%2520requests%2520faster%2C%2520saving%2520you%2520precious%2520time%2520on%2520your%2520development%26url%3Dhttps%3A%2F%2Fhoppscotch.io%26hashtags%3Dhoppscotch%26via%3Dliyasthomas&via=liyasthomas&hashtags=hoppscotch)
Built with ❤︎ by liyasthomas and contributors
Donate: GitHub Sponsors, Open Collective, Patreon, PayPal
Table of contents --- - [Features](#features-) - [Demo](#demo--) - [Usage](#usage-) - [Built with](#built-with-) - [Developing](#developing-) - [Browser based development environment](#browser-based-development-environment) - [Local development environment](#local-development-environment) - [Docker compose](#docker-compose) - [Docker](#docker--) - [Releasing](#releasing-) - [Contributing](#contributing-) - [Continuous Integration](#continuous-integration--) - [Versioning](#versioning--) - [Change log](#change-log-) - [Authors](#authors-) - [Lead Developers](#lead-developers) - [Testing and Debugging](#testing-and-debugging) - [Collaborators](#collaborators-) - [Thanks](#thanks) - [Financial Contributors](#financial-contributors) - [Organizations](#organizations) - [Individuals](#individuals) - [Code Contributors](#code-contributors) - [License](#license-) - [Acknowledgements](#acknowledgements-) - [Badges](#badges-) ---Features ✨
❤️ Lightweight: Crafted with minimalistic UI design.
⚡️ Fast: Send requests and get/copy responses in real-time.
Methods:
GET
- Requests retrieve resource informationHEAD
- Retrieve response headers identical to those of a GET request, but without the response body.POST
- The server creates a new entry in a databasePUT
- Updates an existing resourceDELETE
- Deletes resource or related componentCONNECT
- Establishes a tunnel to the server identified by the target resourceOPTIONS
- Describe the communication options for the target resourceTRACE
- Performs a message loop-back test along the path to the target resourcePATCH
- Very similar toPUT
but makes a partial update on a resource<custom>
- Some APIs use custom request methods such asLIST
. Type in your custom methods.
? Make it yours: Customizable combinations for background, foreground and accent colors.
Theming: Customize now ✨
- Choose theme: Kinda Dark (default), Clearly White, Just Black and System theme
- Choose accent color: Green (default), Yellow, Pink, Red, Purple, Orange, Cyan and Blue
- Toggle multi-colored headings
- 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 for
JavaScript XHR
,Fetch
andcURL
- Import
cURL
- Label requests
? WebSocket: Establish full-duplex communication channels over a single TCP connection.
- Send and receive data
- Basic and Bearer Token authentication
? 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.
- 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
? Responses: Contains the status line, headers and the message/response body.
- Copy response to clipboard
- Download response as a file
- View preview of HTML 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.
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 Hoppscotch Proxy is hosted by Apollo Software - Privacy Policy
? Pre-Request Scripts β: Snippets of code associated with a request that are executed before the request is sent.
Use-cases:
- 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.
? i18n β: Experience the app in your own language.
- 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
Extensions fixes
CORS
issues.
Add-ons are developed and maintained under Official Hoppscotch Organization.
☁️ Auth + Sync: Sign in and sync in real-time.
Sign in with:
- 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.
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 ? 
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 (probablyhoppscotch
). - 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 ? 
#pull
docker pull liyasthomas/postwoman
#build
docker build -t postwoman:latest .
#run
docker run -p 3000:3000 postwoman:latest
Releasing ?
- Clone this repo with git.
- Install dependencies by running
npm install
within the directory that you cloned (probablyhoppscotch
). - Build the release files with
npm run build
. - Find the built project in
./dist
.
Contributing ?
Please read CONTRIBUTING
for details on our CODE OF
CONDUCT
, and the process for submitting pull requests to
us.
Continuous Integration ? 
We use Travis CI for continuous integration. Check out our Travis CI Status.
Versioning ? 
This project is developed by Liyas Thomas using the Semantic Versioning specification. For the versions available, see the releases on this repository.
Change log ?
See the CHANGELOG
file for details.
Authors ?
Lead Developers
- Liyas Thomas - Author
- John Harker - Lead developer
- Andrew Bastin - Lead developer
- James George - Lead maintainer
- Caneco - Logo and banner designer
Testing and Debugging
Collaborators
See the list of contributors who participated in this project.
Thanks
Financial Contributors
Become a financial contributor and help us sustain our community [Contribute].
GitHub Sponsors
<img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/zackify.png?size=128" alt="Zach Silveira" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/pantharshit00.png?size=128" alt="Harshit Pant" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/janpio.png?size=128" alt="Jan Piotrowski" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/ankumar.png?size=128" alt="Anil Kumar" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/gpeal.png?size=128" alt="Gabriel Peal" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/koddsson.png?size=128" alt="Kristján Oddsson" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/donokuda.png?size=128" alt="Don Okuda" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/ebrescia.png?size=128" alt="Erica Brescia" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/pedroapfilho.png?size=128" alt="Pedro Filho" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/peterp.png?size=128" alt="Peter Pistorius" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/mojombo.png?size=128" alt="Tom Preston-Werner" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/mlynch.png?size=128" alt="Max Lynch" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/rawkode.png?size=128" alt="David McKay" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/brianshaler.png?size=128" alt="Brian Shaler" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/mxstbr.png?size=128" alt="Max Stoiber" /> <img style="max-width: 64px; max-height: 64px; border-radius: 100%" src="https://github.com/jjcaine.png?size=128" alt="John Caine" />
Organizations
Support this project with your organization. Your logo will show up here with a link to your website [Contribute].
Individuals
Code Contributors
This project exists thanks to all the people who contribute [Contribute].
License ?
This project is licensed under the MIT
License - see the LICENSE
file for details.
Acknowledgements ?
- Hat tip to anyone whose code was used
- Inspirations: