hoppscotch

Vue LINK

? A free, fast and beautiful API request builder used by 75k+ developers. https://hoppscotch.io

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}

Chat: Telegram, Discord

Donate: GitHub Sponsors, Open Collective, Patreon, PayPal

Features ✨

❤️ Lightweight: Crafted with minimalistic UI design.

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

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.

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 and cURL
• 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:

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

⌨️ Keyboard Shortcuts: Optimized for efficiency.

Shortcuts WIki

? i18n β: Experience the app in your own language.

1. Scroll down to the footer
2. Click "Choose Language" icon button
3. 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.

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.

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 ?

1. Choose method
2. Enter URL
3. Send request
4. Get response

Built with ?

• HTML - For the web framework
• CSS - For styling components
• JavaScript - For magic!
• Vue
• Nuxt

Developing ?

0. 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

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

Docker compose

1. Clone this repo with git.
2. Run docker-compose up
3. 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 ?

1. Clone this repo with git.
2. Install dependencies by running npm install within the directory that you cloned (probably hoppscotch).
3. Build the release files with npm run build.
4. 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

• Contributors

Collaborators

Liyas Thomas ? ?	John Harker ? ?	Nicholas La Roux ?	Thomas Yuba ?	Nick Palenchar ?	Andrew Bastin ?	Vladislav ?
izerozlu ?	Jacob Anavisca ?	Nityananda Gohain ?	Hossein Nedaee ?	James George ?	Dmitry Yankowski ?	Samir Boulema ?

See the list of contributors who participated in this project.

Thanks

• dev.to ?‍??‍?

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:
  • Dribbble

Badges ?

Preview	Markdown code
Default	[](https://hoppscotch.io)
Success	[](https://hoppscotch.io)
Critical	[](https://hoppscotch.io)
Custom	[](https://hoppscotch.io)
Customize	[](https://hoppscotch.io)

Happy Coding ❤︎