loading...
Cover image for Launching Hoppscotch v1.0 πŸ‘½ - free, fast & beautiful API request builder πŸŽ‰

Launching Hoppscotch v1.0 πŸ‘½ - free, fast & beautiful API request builder πŸŽ‰

liyasthomas profile image Liyas Thomas ・Updated on ・4 min read

So, here’s how Hoppscotch happened.

You know the drill. You’re developing an app for a client and you need to test every APIs and every APIs response in every method, on every requests.

Our team was already using Postman to test all the variations of an API, but my 7 year old PC couldn't afford to run another Electron app just to see the request responses in all of them. And that’s how it all started.

How about making a tool where you can test your APIs from your browser itself without switching between apps as you work? That would be neat, huh!

GitHub logo hoppscotch / hoppscotch

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

How it all began

The initial tweet about the idea got 250+ likes and 60+ retweets so people were definitely interested in this kind of tool.

I literally launched Hoppscotch on a dev.to article and wrote about it on Hacker News, HackerNoon, Medium, HashNode, Reddit, Twitter etc.

I saw a guy writing JavaScript today.
No frameworks.
No libraries.
No problems.
He just did it.
Writing JavaScript.
Like a Psychopath.

It was me πŸ™ƒ

I had some problems with CORS in deployment, but I found a quick workaround. I used Vue.js and apparently migrated to Nuxt.js.

At that point I started thinking that the tool can actually be published as a standalone web app, and the WebSocket testing feature can just be an addition. So I shifted my goal and starting working towards that.

I added few themes, polished up the UI a bit, struggled for 30 mins to come up with a name and..... drumroll Hoppscotch it is. I setup a GitHub repo for people who were interested to contribute.

After I open sourced the code, polished up the UI, and finished bunch of other smaller things, hoppscotch.io was live πŸŽ‰

I actually wrapped up work at 4:30 AM because I just couldn’t go to sleep without finishing that one thing πŸ˜…

Screenshot1

Features

  • πŸ’š Open Source
  • πŸ”₯ Runs online
  • πŸš€ Multi-platform & multi-device support
  • πŸ“± Progressive Web App
  • πŸ”Œ WebSocket testing
  • πŸ“‘ Server Sent Events testing
  • 🌩 Socket.IO testing
  • 🦟 MQTT testing
  • πŸ’« GraphQL testing
  • 🌈 Customizations
  • ⏰ History
  • πŸ“ Collections
  • 🌐 Proxy
  • πŸ“œ Pre-Request Scripts & environment variables Ξ²
  • 🐳 Docker
  • β›³ Keyboard Shortcuts
  • βœ… Post-Request Tests Ξ²
  • Full features

After the launch, analytics were going crazy! Got 17,700+ stars on GitHub, made it to GitHub Trending couple of times, became #2 product of the day on Product Hunt, got featured in Indie Hackers, Hacker news, Hacker noon, BetaList, YouTube & open source dev podcast etc.

Apart from the project development, there were other goodies happened since initial release:

I was solving my own problem with the hope that I'll also gonna solve other people’s problems. The most important thing about is that in the end, you get a lot of amazing and positive feedback, which is basically the only thing that drives you to do better and more awesome work! πŸŽ‰

If you think Hoppscotch is worthy of existing as a free, fast alternative to Postman, please consider giving us a confidence boost! Star the repo on GitHub, Tweet, share among your friends, teams and contacts!

Support

I want to thank everyone for your feedback and support. You can follow me on Twitter if you’re interested in future 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.

Discussion

pic
Editor guide
Collapse
jonrandy profile image
Jon Randy

Insomnia is the best such tool I've used - insomnia.rest

Collapse
liyasthomas profile image
Liyas Thomas Author

Postwoman is an online web app. No need to install or update build, because of this, there's no other overhead to system for using a testing tool. Moreover apps such as Postman and insomnia are built with electron which consumes a considerable amount of resources of the system.

+

Postwoman have multi platform, multi device support. API testing can be done even from your smartphone now.

Collapse
catalin560 profile image
catalin560

but why would you do it from a smartphone? the other clients are multi platform too...

Thread Thread
liyasthomas profile image
Liyas Thomas Author

Handy feature isn't it?

Thread Thread
mkimont profile image
Matt Kimek

If you need to start debugging your Rest from mobile is really useful. Online version can avoid instalation same software for all devs in your team and be easy updated with new collection, easy maintenance in different environments

Thread Thread
liyasthomas profile image
Liyas Thomas Author

Well said! πŸ”₯πŸ‘

Collapse
mbrtn profile image
Ruslan Shashkov

Fantastic! The UI looks very good. It would be awesome if you add WebSocket support.
And a light theme would be useful as well. Some people like me having trouble with using dark mode in UI. I have some kind of problem with my eyes and UIs looks blurry in dark mode :-(

UPD: Sorry didn't find customization screen before :-)

Collapse
andrewbastin profile image
Andrew Bastin

Hi there,

Postwoman does indeed feature WebSocket support, you can select it on the sidebar (a little cloud icon).

Have fun!!

Collapse
liyasthomas profile image
Liyas Thomas Author

WebSocket support is already landed from v0.1.0 πŸŽ‰

postwoman.io/websocket

Collapse
twoperkg profile image
twoperkg

It looks very good and promising. But I have readability problem of a response object when a light theme is activated. Yellow values on white background are barely seen, have to highlight text to see it. See attached picture.
P.S It looks like I am going to delete Postman from my machine. :)

thepracticaldev.s3.amazonaws.com/i...

Collapse
liyasthomas profile image
Liyas Thomas Author

I just pushed a quick fix for readability problem on light-themes.
Just do a hard refresh Ctrl + Shift + r to update to the latest version and boom! issues is fixed πŸ”₯

(if issues persists, clear cookies and refresh)

Collapse
twoperkg profile image
twoperkg

Now I even without glasses can read it :) Thanks :)

Collapse
liyasthomas profile image
Liyas Thomas Author

I'm obsessed with dark theme which why i concentrated on dark themes first. But now I'll work more on theme white mode. Thanks for pinging this. Next priority is light theme. If you'd like to suggest a theme pallet for light theme, shoot a DM, or perhaps a PR? 😌

Collapse
erikjonker_ profile image
Erik Jonker

This is a cool project! Well done! Just one thing though. It is quite difficult to take anyone serious using so many emoji's, especially a developer, especially in github commit messages. Besides my 2 cents, this seems like a fun alternative to postman

Collapse
liyasthomas profile image
Liyas Thomas Author

I don't think usage of emojis in commit messages limit the project's seriousness. Gitmoji (gitmoji.carloscuesta.me) is a highly appreciated project on GitHub supported by a huge community of devs πŸ€”

Collapse
seveneye profile image
seveneye

Is there a suppor for environments? That would be awesome! :)

Collapse
liyasthomas profile image
Liyas Thomas Author

Pre-request scripts and Environment variables are deployed to production but experimental!
Full list of feature are here: github.com/liyasthomas/postwoman

Usage:

  1. Open Pre-request scripts by clicking the "<>" icon button under request Method

  2. Set env variables with JavaScript notation: pw.environment.set("key", "value"); inside pre-request script textarea.

Ex: pw.environment.set("route", "/api/users");

  1. Use <<key>> (including double angle brackets) anywhere inside request section as an env var

Ex: <<route>> inside Path field

Screenshots:

1

2

Other use cases are:

  • Including the timestamp in the request headers
  • Sending a random alphanumeric string in the URL parameters
  • You can even chain requests in near future πŸ”₯

Full information can be found here: github.com/liyasthomas/postwoman/p...

Collapse
seveneye profile image
seveneye

cool. thanks for your work!

I'm thinking of something like environment in postman where you can easily change variables without modifying the request.

Thread Thread
liyasthomas profile image
Liyas Thomas Author

Actually this is cooking up! and will be deployed soon.
github.com/liyasthomas/postwoman/i...

Thread Thread
seveneye profile image
seveneye

wow. will be looking forward to this feature. You're awesome! :)

Thread Thread
liyasthomas profile image
Liyas Thomas Author

Glad you liked it! Star the project on GitHub, share among your friends/teams πŸ™πŸ‘½πŸ›Έβœ¨

Collapse
wobsoriano profile image
Robert

No POSTLGBTQ+? JK. Awesome content!

Collapse
liyasthomas profile image
Collapse
ajkachnic profile image
Andrew

This looks interesting. Is the best way to develop with localhost to use Ngrok? Or is there something that I am missing?

Collapse
liyasthomas profile image
Liyas Thomas Author

localhost endpoints can be tested by installing a middleware browser extension. Links are in repo's readme.

Collapse
ajkachnic profile image
Andrew

Okay thanks

Collapse
mitchartemis profile image
Mitch Stanley

Congratulations on 1.0! The UI looks fantastic. I look forward to giving this a try πŸ˜ƒ

Collapse
liyasthomas profile image
Liyas Thomas Author

Glad you liked it! πŸ’œ
Looking forward on how Postwoman could ease up your development! Do share among your friends/team ⚑

Collapse
kp profile image
KP

"I was that guy."

Funny, I always assumed you were a girl...unless you're using "guy" in the gender-agnostic form ;)

Collapse
liyasthomas profile image
Liyas Thomas Author

Yeah! I've heard this many times before.

Collapse
nijeesh4all profile image
Nijeesh Joshy

I had some problems with CORS in deployment, but I found a quick workaround.

i have been following postwomen since the DEV post. How did you fix it ?

Collapse
liyasthomas profile image
Liyas Thomas Author

We implemented Proxy mode. For requests having CORS issues, go to Settings > Turn on Proxy
That's it. But you don't want to do this at first. We'll prompt you to enable proxy only if the requests requires it. πŸ‘½βœ¨

Collapse
nikoheikkila profile image
Niko HeikkilΓ€

Congrats! I was briefly observing Postwoman when it was first published but didn't feel the urge to switch from Postman. Now then, the 1.0 feature list demands me to give it another spin.

Collapse
liyasthomas profile image
Liyas Thomas Author

You should look at our roadmap and stuffs we pipelined for future πŸ”₯πŸ‘½πŸ›Έ

Collapse
rohansawant profile image
Rohan Sawant

Great to finally meet the man behind the legend!

Collapse
liyasthomas profile image
Liyas Thomas Author

πŸ™πŸ˜ŒπŸ›ΈπŸ‘½

Collapse
steeve profile image
Steeve

Seems an awesome project, I going to try it out! Btw, Good Article Liyas ! πŸ¦„

Collapse
liyasthomas profile image
Liyas Thomas Author

Thanks you! ❀️

Collapse
galgreenfield profile image
Gal

I shared Postwoman on LinkedIn, glad to see that you're launching it!

Collapse
liyasthomas profile image
Liyas Thomas Author

Thanks. Let the world know Postwoman exists.

Collapse
harishankards profile image
Harishankar Ayandev

Hey Liyas,

You know, it was much needed. Thanks for giving us a great app. Will be grateful and I will try to contribute to the project as well.

Collapse
liyasthomas profile image
Liyas Thomas Author

Thats awesome! πŸ™ŒπŸΌ

Collapse
joppedc profile image
JoppeDC

Nice! It seems to have come a long way since i initially checked it out back when you first posted it!

Collapse
liyasthomas profile image
Liyas Thomas Author

Yes, there's been 650 commits since v0.1.0 πŸŽ‰

Collapse
neverendingqs profile image
Mark Tse

Curious - do you have any concerns around storing potentially sensitive information in local storage? My understanding is that any app can view what is in local storage.

Collapse
liyasthomas profile image
Liyas Thomas Author

Postwoman is a 100% client side application. PW just works even if you download the entire web page to system and opened from there, there's no client-server data transfer ever happening, except on Proxy mode, which is optional.

We uses localStorage for storing the History entries and the current state of request section. We stay compliant on Same origin policy throughout our implementation. Moreover, there's always an option to Clear/Disallow cookies.

When I first started working PW, I never wanted to have a Sign-up flow because it somehow seemed to decrease my testing flow. But as the project gained such traction & grew tremendously, having a Sign-in with GitHub/Google and storing data on a GitHub repo is pipelined for future with prime priority.

Collapse
catalin560 profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
catalin560

did you really had to plagiarize the original name of postman? couldn't you come up with something new and original?

Collapse
liyasthomas profile image
Liyas Thomas Author

Don't judge a book by it's cover