loading...
Cover image for Hoppscotch πŸ‘½ - An open sourced, free, fast & beautiful API request builder

Hoppscotch πŸ‘½ - An open sourced, free, fast & beautiful API request builder

liyasthomas profile image Liyas Thomas Updated on ・5 min read

Hoppscotch πŸ‘½ - API request builder

Feel free to contribute on GitHub πŸ’š

GitHub logo hoppscotch / hoppscotch

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

Screenshot

When I did a background check on API request builders, Postman offered various Plans & Pricing, there were lot of other API request builders based on cURL etc. But none of them seems simple, minimal and efficient.

I wanted to make an API testing platform which is:

  • Open Sourced πŸ’š
  • Runs online
  • Have multi-platform support
  • Have multi-device support
  • Accessible from anywhere

That's why I created my own API request builder with pure JavaScript (Later I used Vue.js and apparently migrated to Nuxt.js) + HTML + CSS πŸ’–

Did I mention this service is all free of charge and 100% open source? Yes, It's free and always will be. The Hoppscotch API request builder helps you create your requests faster, saving you precious time on your development.

Features ✨

❀️ Lightweight: Crafted with minimalistic UI design - simple design is the best design.

⚑️ Fast: Send requests and get/copy responses in real-time - fast software is the best software.

Methods:

  • GET - Retrieve information about the REST API resource
  • HEAD - Retrieve response headers identical to those of a GET request, but without the response body.
  • POST - Create a REST API resource
  • PUT - Update a REST API resource
  • DELETE - Delete a REST API 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 - Apply partial modifications to a REST API 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: because customization is freedom. Customize now ✨.

Customizations:

  • 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

Customized themes are synced with local session storage

πŸ”₯ PWA: Install as a PWA on your device.

Features:

πŸš€ Request: Retrieve response from endpoint instantly.

  • Choose method
  • Enter URL and Path
  • Send

Features:

  • Copy/share public "Share URL"
  • Generate request code for JavaScript XHR, Fetch and cURL
  • Copy generated request code to clipboard
  • Import cURL
  • Label requests

πŸ”Œ WebSocket: Establish full-duplex communication channels over a single TCP connection.

  • Send and receive data
  • Basic authentication using username and password
  • Token based authentication

πŸ“‘ Server Sent Events: Receive a stream of updates from a server over a HTTP connection without resorting to polling.

🌍 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 authentication using username and password
  • Token based authentication

πŸ“’ Headers: Describes the format the body of your request is being sent as.

  • Add or remove Header list

πŸ“« 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 to as a file
  • View preview of HTML responses

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

Fields:

  • Star
  • Label
  • Method
  • Status code
  • URL
  • Path
  • Timestamp
  • Duration
  • Pre-request script

History entries can be sorted by any fields

Histories can be deleted one-by-one or all together

πŸ“ Collections: Keep your API requests organized with collections and folders. Reuse them with a single click.

Options:

  • Create infinite collections, folders and requests
  • Edit, delete, move, export, import and replace

Collections are synced with 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 ApolloTV - 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

Requests with Pre-Request Scripts are indicated in History entries

⌨️ Keyboard Shortcuts: Optimized for efficiency.

Shortcuts:

  • Send Request Ctrl + G
  • Save to Collections Ctrl + S
  • Copy Request Link Ctrl + K
  • Reset Request Ctrl + L

🌎 i18n: Internationalization β.

Demo πŸš€ Website

https://hoppscotch.io

Built with πŸ”§

  • Chromium - Thanks for being so fast!
  • HTML - For the web framework
  • CSS - For styling components
  • JavaScript - For magic!
  • Vue - To add to the JavaScript magic!
  • Nuxt - To add to the Vue magic!

We are continuously listening to your feedbacks, so please make sure you join us and share your ideas on:

or get in touch directly with me via email at liyascthomas@gmail.com or on Twitter @liysathomas

And if you really want to help us make Hoppscotch better, contribute to our GitHub repo!

Hoppscotch is free, and always will be.

Support us on:

Star the repo on GitHub, Tweet, share among your friends, teams and contacts! Follow me on Twitter to get the latest changes, improvements, and community updates!

If you want a heads up on my next projects, or just want to chat about the web, make sure to follow me @liyasthomas πŸ’™. If any of my projects helped you please consider Buying me a coffee or making a donation on PayPal to help me pay my server bills and rent.

Happy Coding ❀︎

Posted on by:

Discussion

markdown guide
 

Did you know Postman has raised 58 million in venture funding? That shocked me when I found out. I always assumed it was more indy.

Perhaps this project is something you could turn into a business?

Anyway, I just sent you a Paypal donation. Keep up the great work!

 

Did you know Postman has raised 58 million in venture funding? That shocked me when I found out. I always assumed it was more indy.

Really? Someone should show these VCs curl or wget or ab - it'll blow their minds...

 

First things first: A huge thanks for dev.to You guys are the best πŸ‘Œ
A huge thanks for the donation. This means so much to me. You'll shine ✨

I took your advice to my heart, will work on it.

 

My DMs are open and I'm happy to provide more help along the way.

 
 

Why should boys have all the fun! 😜

 

Never thought of gender when I said postman. Also didn't know postman could only be used by males. (sarcasm aside) I think a unique name would make the service stand out more instead of making a statement.

I don't want to gender-ify this service. I believe a name doesn't have that much influence on determining its scope or sucess. If you would like to suggest an alternative name, go on. I'm all hears.

I would be mildly annoyed if someone complain about postMAN, is the same with postWOMAN so keep the name, keep the good work; and if someone complains, who cares, in the web always someone is offended by something. After years in classrooms with almost 1% females still makes me happy to be able to talk nerdy and to a girl at the same time. (without sighs and eye rolls that is)

Let's not make it into a gender thing ... The only reason I would probably have gone with a different name is to avoid potential legal issues. It's directly derived from the same name as the product you took the original idea from. They might not be happy as commercial product with - I say in their eyes - a clone with a similar name trying to take away their business... That Alone is way more risky than the potential gender discussion the name might be calling for

[deleted]

a clone

I look forward to lawyers trying to claim copyright over making an HTTP request in the browser...

That will be a more serious issue than I thought.

Rename to Postie? Or even Getperson... πŸ˜„

Let's see what future brings

I love the name Postwoman, it's awesome and really caught my attention.

That's exactly what I had in mind. Let it help you on your development period.

Me as an occasional user it's guaranteed i'll remember Postwoman. I don't like Postman because is using the gpu of my mac. But i'm wondering what are the limits, i know Postman is not web based because of some limitations.

Tuppence time: I think it's a cute pun, and works well as an homage. Plus it opens the door wide for a vast array of inappropriate puns and silly jokes about Postman and Postwoman.

Like, what if there's an acquisition offer? The Register would (will?) have a field day.

And I'll just leave this here:

Only downside I can see is there might be some faffing around over copyright or people who take themselves too seriously taking the name too seriously. E.g. be prepared for the suggestions of "postwomyn" and whatnot.

NuxtJS, NextJS, NestJS.

Just saying.

 

I think the names are not antagonist each other, and as I understood wasn't a "political statement" I believe was more a "cachi" name, at the end, I think in the real word postman and now postwoman will complement each other in the dev world, as should be with everything

I love positive people like you.

 

I don't want to gender-ify this service.

But you've just did...

I believe a name doesn't have that much influence on determining its scope or sucess.

Entire companies have been born for sole purpose of inventing product branding, which includes creating an appealing name.

For many people "postwoman" is just a swing in likes of "take that, MEN" which i find, how millenials are caling it, problematic.

P.s. I believe "man" in "postman" stands for "person", not as "male"

Thanks for sharing your thoughts on this.

I foresee a name change in your near future. If Postman has received significant venture capital then they’re obliged to protect their brand. And they could have chosen a gender neutral name like Postie so we’ll done for calling them out on their name, even if not deliberate. I habit been aware that Postman uses Electron - good to know, thank you.

I don't think there's a problem with this name.

Thanks for giving us all your perspective.

 
 

Hi there!
Just a side question:
what driving factors made you chose Vue instead of other front end frameworks?
I ask this because Postwoman seems promising and getting traction, so that it's interesting to learn about the tech choices behind it.
Thanks in advance!
P.S. "Postwoman" is really a funny and well thought name imho

 

Actually, this is my first Vue project. I wanted to learn Vue. And "learn by doing a project" is my way of learning. That why I choose Vue.

** The initial prototype was built in a night. And I didnt had a second thought on naming.

 

I get the name but be the bigger person, this should be post person πŸ˜…

 

In comparison to postman, I think the idea is to be the smaller one πŸ˜‰

No clue if that was intentional, but it definitely works lol

 

Minimalism and keeping things simple has been one of my prior concern.

 

That should be the SOAP version, why should rest APIs get all the love

 

I confess I have not really looked into SOAP at all... I must stink.

 

SOAP == 🀒

πŸ˜‚πŸ˜‰

 

Why not just change the HTTP verb?

 

This is pretty cool. I like the name a lot. I'm going to be diving more into the source code, and hopefully, I'll find some time to contribute.

Also, do you only intend to keep this super minimal or looking to add some few "minimal" bells and whistles in the future?

 

I'm always open to suggestions. Everyone's opinion counts. Feel free to contribute and share your thoughts on improving Postwoman.

 

You only changed half the name. What about the first part? We don't only use it for POST. We also use it for GET and PUT (and more). Getwoman sounds too out of place. So I would suggest Putwoman. That gets you out of trouble with the the Postman people.

Renaming the platform is currently scheduled for future. After stable release. Anyway suggestions are welcomed.

 

i sure will, maybe you should submit this app to Product hunt to get more eyes on it.

Actually, I made a post on Product Hunt. Share some love πŸ”₯✨

Lol I did too. Should I take mine down?

I hope you gave proper credit for me, and didn't changed any contents.

 

While I applaud the effort, this can't be more than just a toy until it drops browser sandbox like Postman or Insomnia did. You can't deal with CORS, browser hides cookies from you, applies HSTS and other cross-origin restrictions. Good luck!

 

Thanks for your concern, consider making a contribution or suggestions to make Postwoman better ❀️

 

this can't be more than just a toy until it drops browser sandbox like Postman or Insomnia did. You can't deal with CORS, browser hides cookies from you, applies HSTS and other cross-origin restrictions. Good luck!

Now hold your unicors, there, how sure are you that those restrictions aren't features?

 

So build a client that doesn't rely on Electron.

 

That's was my primary aim, but as you've noticed project Postwoman had gained momentum in GitHub and we rewrote a-z into Vue Nuxt which made it faster, lighter and efficient than any other projects in its category.

Oru kind supporters brought domains postwoman.net and postwoman.io which are currently serving GitHub pages directly and will be published to the world for free on Postwoman v1.0 stable release. We need support from guys like you for the next big thing to happen. Postwoman will be a fully transparent open source project, free of cost for all.

 

I love this! Here's a quick thought, I didn't research this but what are implications of having server side to proxy a http request? Like a free tier on zeit.co where a requests can be handled by a lambda function and results are sent back to the client side. Full disclaimer, I googled once and got this idea so it's not something I'm proud of.

 

Umm yeah, a proxy system is something this site might need at some point. As the client side CORS policies kinda break the app (just try sending a request to google.com).

There is an active discussion going on here.

I am really loving contributing to this project.

 

Will surely consider your advice. Stay tuned for future updates πŸ±β€πŸ’»

 

Star and contribute to the project on GitHub πŸ’š

UPDATE: Added History support with session storage πŸ‘Œ
UPDATE: Added URL validation πŸ”

Huge thanks to all the contributors πŸ€—

 

i will be glad to help in any way possible

 
 

Yes. I did a background check on prevailing such implementations. Insomnia is packed with similar features of Postman, but I want Postwoman to be minimal and beautiful.

 

Postman and Postwoman after living in for quite a while, had a big fight, and returned to their parent's house. Thus, the Boomerang was created. chrome.google.com/.../eipdnjedkpcn......

 

@liyasthomas I know I'm getting to this a bit late but I have to commend you, this is awesome work and I love the name. I'm not a lawyer but I don't think you need to be too worried about any potential legal issues if this is a FOSS project and the name falls under "satire" :D

Anyway, I love that you're using Nuxt.js...curious whether you have a back-end at all, and whether I can DM you? You of all people seem to know how to implement the Authorization grant token (oauth flow using Nuxt for social login) and I'd love to pick your brain on this.

 

I would love have a conversation with you. You can DM me here or I'm available on Twitter @liyasthomas.

Glad you liked the project. Thanks for your suggestions on legal issues. Later, I came to know that there are thousands of projects which even sounds similar and does pretty much the same thing.

Currently, we don't have a backend at all. I made it fully transparent, we don't even do analytics, logging or accept any user/client informations. I believe in "free for all" philosophy. Currently we're focusing on its growth. Adding essential features such as workspace sharing, auth, collections etc and encouraging people to use it. Making it popular or should I say, letting people know that there exists a service that has everything for API testing and its free and open source.

I believe your contributions to the project on GitHub will be an asset for us. Please consider contributing and share the love with a text, tweet or talk. Looking forward for your response.

 

Thanks @liyasthomas . I just starred the project on Github...amazing that you're focused on it's growth above all else. I will definitely be using postwoman and report any issues / improvements I find.

Right now I'm focused on a problem dealing with Auth in Nuxt (Social oAuth using the Authorization Grant token, to be specific). Is this something you would know about and can help point me in the right direction on? My DMs on DEV are also open if that's easier...do you want to follow me back / send a message so we can connect and talk further?

 

I can register a domain and donate that. I use a lot of VMs for development, so I don't like to use Electron apps too much. Haven't used it yet, but I do have hosting I don't really use for anything.

 

I would love to consider this offer 😍😍😍

Anyway, I love GitHub and believe a good open source project doesn't require a domain. People will love the service just the way it is. Right now, I'm really curious about Postwoman because of your support and love. Currently I need some time to figure out how much Postwoman can help my fellow devs. I would love to have a talk with you. I'm available on Twitter @liyasthomas.

I love open source. For more than 4 years I've been working on open source, while living off savings. I'm on PayPal now as my savings are slowly running out & I need your help to continue my efforts πŸ’–

 

I don't have Twitter anymore, but I went ahead and sent something via PayPal. My DMs here should be open, though.

Making a donation means a lot to me. Its because of guys like you, the world gets more smiles βœ¨πŸ’œ

I don't have Twitter anymore

May I ask why?

 

Cool stuff! For me personally, I find the history gets a bit in the way at the moment.

A history tab, or even just placing it below the current request/response I think would help. Tabs to sort it by request type and sorting options could be cool, too.

I would be happy to contribute some dev work if I can help! :)

 

Love your suggestions. Contribute to make it better.

 

Fixed History section interfering ease of use. Moved history section below response section.

 

For occasional use, a small chrome extension" Tabbed Postman - REST Client" works too:
chrome.google.com/webstore/detail/...

If you like to use the command line for quick testing, take a look of httpie.org

 

Its very good ,
Its open source i think its mean any one from anywhere can access it and used, But I can't open the site without a VPN
I residents in Sudan

 

Oh! I wonder why would that happen! May be some domains are excluded from your country (.io)? If you see an error code, please let me know. A screenshot would've been great!

 

It stuck like this but when I open a VPN it'll open,
I think its from the hosting company

i tried it now on pc and this is what chrome showed me

"This site can’t be reachedpoatwoman.io’s server IP address could not be found.
Search Google for postwoman io
ERR_NAME_NOT_RESOLVED"

 

This is awesome. Lately I went searching for a Postman alternative and didn't found anything, this was exactly what I was looking for:

  • Lightweight
  • Open source
  • Online

Congratulations on this project, it's very helpful! +10 for the name :D

 

Glad you liked it. Share it with your friends, star the project on GitHub thats how we spread love.

 

I was about to share it on my university open source group fanpage, I already starred it :D

That's great news! I'm a πŸ¦„ happie unicorn!

 

Hi, looks like a neat project! Nice job so far :)
Could you please help me understand how this is different from Postman? It appears to be functionally the same, with future features that will make it even more like Postman. My intention is not to be critical, I am just leery of investing (whether it be time or money) into something for which there already exists a viable product. That said, Facebook was not shy of MySpace! Curious to hear your thoughts/vision.

 

Postman, insomnia etc stand solid in API testing market. Let them be. But the very idea behind Postwoman was to have an alternative open source platform where developers like me could share thoughts on improving the platform as well as collaborate with people with same interest. I believe every technology should be available for free of use whether its for a single dev or for an enterprise level team. Postwoman will be free and always transparent.

 

Open source is definitely a good thing! πŸ‘πŸ» There are so many FOSS tools out there that we take for granted.

I am cautious about the name though. Gender equality is more important than ever in tech, and change is finally starting to happen. As others have mentioned on this thread, though, this seems more like a terse gender equality statement than an open source alternative. Perhaps the name will help it spread, but it also may get you into legal troubles, so I would encourage you to look into that (especially if this takes off).

Anyway, great stuff, nice to see an alternative option out there.

Glad you liked it. I need support from all to help me build a better, open, and transparent platform.

 

Because Postman runs slowly on my laptop so I decided to test your Postwoman, and it's so light and cool.
Thank you. I hope it becomes better.
I'd like to contribute it, but I didn't contribute yet on any open source projects.

 

Everybody was once a beginner.
Fork it, make your contributions/fix current issues, make a pull request. Thats it.

There's always a first ✨

 
 

How about adding an import feature for existing requests on other clients? So that i can save my time from typing - a fellow kerala dev.

 

I'm a native Keralite. Thanks for your suggestion. Will look into it πŸ’œ

 
 

Haven't looked at it yet, but in my experience curl is better than dealing with postman. Frickin snap installs, massive project. GUI is acceptable but not worth the costs. Almost always have some wonky behavior happen and need to revert to using the soap UI project that my teammates setup forever ago.

This project at least sounds lightweight(which API rest calls/builders should be), plus dark theme is always welcomed. Great idea, definitely need to check this out.

 

Glad you liked it πŸ’œ
Help me make it better by contributing to the project on GitHub

 

Awesome stuff! Love it.

One tiny nit pick (of course).. the teeny tiny little arrows for the Parameters and Authentication headers box are so small that I didn't see them and thought the feature was disabled or a work in progress.
Otherwise, many claps πŸ‘πŸ‘πŸ‘

 

Will surely update the UI to fix your issue. Follow the project and share you most valuable suggestions n GitHub.

 

I don't the name is an issue and it would be silly if postman sued over it. This term is an actual term used to refer to someone delivering the post.

web.archive.org/web/20111219060424...

 

Lol 🀣
Thanks for the quick look up πŸ™Œ

 

How do you handle secrets management, or incorporate it into your UX work flow?

Asking for a friend... <.<

 

PW is a 100% client side rendered application. Request is API calls are made and send from client machine unless Proxy mode is toggle on.

 

And how are the secrets / credentials / etc. handled on this client side rendered application?

E.g. if I want to use some sensitive authentication values in a header, is there a way for me to protect the protection afforded by my browser?

 

Hey, I'm at work right now so I can't look into this extensively, but would you be open to a desktop app version by using this recent project? I wanted to make an article about this so it could be fun.

blog.atulr.com/nodegui-intro/

I'm not fluent in Vue.js but willing to help and Node.js is probably helpful to the CORS issue. πŸ˜„

 

That would be awesome. CORS and HTTP request handling are our prime concern. Keep up the good work.

 

Wow!! I never knew I needed this! I'll surely contribute to make this more awesome!

 

Let the earth have more people like you πŸ’š

 

@Liyas your comments made me picture you as Lina Ginetti from Brooklyn 99 :)

I don't know who that is. And I never watched that show. Anyway I'll take it as a compliment.

 
 
 

I just checked and it seems everything's working fine here.
Try a hard refresh: Ctrl + Shift + r

 

ye, its my ISP blocking it because of safety settings. sorry about it

 

I can help test this new tool. The name intrigued me. I use Postman all the time but there are a few things which I do not like about it and they can become features for postwoman.

 

Glad you liked it πŸ’œ. Suggest you opinions and contribute on GitHub to make it better.

 

What is this sorcery? :) This is pure awesome.

Keep up the good work!

 

I see my fellow πŸ¦„ unicorn devs are happy, which makes me happie.

 

you should have called it Getwoman :D