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!
hoppscotch
/
hoppscotch
๐ฝ Open source API development ecosystem - https://hoppscotch.io
How it all began
Liquid error: internal
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 ๐
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:
- Got first financial backer ๐ฅ on Open Collective
- Released badges ฮฒ
- Hoppscotch's icon got featured in simpleicons.org
- Created Telegram public community
- Started Discord server
- Caneco made new banner
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.
Top comments (46)
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...
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)
Now I even without glasses can read it :) Thanks :)
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? ๐
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 :-)
WebSocket support is already landed from v0.1.0 ๐
postwoman.io/websocket
Insomnia is the best such tool I've used - insomnia.rest
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.
but why would you do it from a smartphone? the other clients are multi platform too...
Handy feature isn't it?
Is there a suppor for environments? That would be awesome! :)
Pre-request scripts and Environment variables are deployed to production but experimental!
Full list of feature are here: github.com/liyasthomas/postwoman
Usage:
Open Pre-request scripts by clicking the "<>" icon button under request
MethodSet env variables with JavaScript notation:
pw.environment.set("key", "value");inside pre-request script textarea.<<key>>(including double angle brackets) anywhere inside request section as an env varScreenshots:
Other use cases are:
Full information can be found here: github.com/liyasthomas/postwoman/p...
cool. thanks for your work!
I'm thinking of something like environment in postman where you can easily change variables without modifying the request.
Actually this is cooking up! and will be deployed soon.
github.com/liyasthomas/postwoman/i...
wow. will be looking forward to this feature. You're awesome! :)
Glad you liked it! Star the project on GitHub, share among your friends/teams ๐๐ฝ๐ธโจ
No POSTLGBTQ+? JK. Awesome content!
lol
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
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 ๐ค
This looks interesting. Is the best way to develop with localhost to use Ngrok? Or is there something that I am missing?
localhost endpoints can be tested by installing a middleware browser extension. Links are in repo's readme.
Okay thanks
Congratulations on 1.0! The UI looks fantastic. I look forward to giving this a try ๐
Glad you liked it! ๐
Looking forward on how Postwoman could ease up your development! Do share among your friends/team โก
"I was that guy."
Funny, I always assumed you were a girl...unless you're using "guy" in the gender-agnostic form ;)
Yeah! I've heard this many times before.
i have been following postwomen since the DEV post. How did you fix it ?
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. ๐ฝโจ
Some comments may only be visible to logged-in visitors. Sign in to view all comments.