Quokkajs — Rapid prototying playground

Santhosh Raju
Jun 8, 2018 · 4 min read

No, this is not yet another Javascript framework that is new and shiny, which most people are talking about.

But what this is, a great tool for rapid prototyping. Which I personally think that all developers needs to have in their in developer toolbox, or at least should be aware of.

Overtime, we developers tend to forget pretty small concepts in our programming languages, so we quickly head over to many online playgrounds like JSFiddle, Codepen, Babel’s REPL etc. to test our knowledge on these concepts or learn something new which haven’t heard off.

When I’m stuck at anything or trying learn something new, I directly to jump onto Babel’s REPL, open up the chrome developer console, adjust the console panel to the right and start off. Yep that’s what I do, to immediately learn or do something. Pretty awkward right.

Image for post
Image for post
Babel’s REPL

Not anymore (sorry, babel I still love you), thanks to Quokkajs.

Quokka.js is available as extensions to major IDE’s like VSCode, Atom & Jetbrains.

For the sake of this article, I will demonstrating it with VSCode, but everything remains the same in all supported IDE’s, expect for installation part.

Let’s first install it in VSCode, click on the extensions icon on the left side of VSCode, search for Quokka.js and install the extension. Please do restart / reload your VSCode editor to have immediate effect. That’s it, you now have a full fledged offline playground.

Image for post
Image for post
Quokka.js extension on VSCode

To start press Ctrl/CMD + Shift + p, search and select Quokka.js: New Javascript file.

Image for post
Image for post
Opening Quokka.js javascript playground

Now lets talk about it’s awesome features


As soon as you open a new javascript playground, you will see a output terminal at the bottom of the editor like so. This is where all your outputs will be displayed.

Image for post
Image for post
Output terminal

Once you start writing your code, at some point in time you need to know what is the value of a particular variable, you just need to write the variable in the next line, this will output in the terminal.

Image for post
Image for post

If you decide to write console.log(arr) (which I do it so often), instead of variable in the next line, you get this.

Image for post
Image for post
Inline output

Isn’t that cool, output is displayed inline. This is awesomeness.

Code Coverage

Yes, you heard me right there is code coverage. And you see them on the left side of the editor like so.

Image for post
Image for post

As you see, if a particular statement is run, this is shown as green. If a statement is not run, this is shown as grey.

So if I’m writing an recursion function or practicing any algorithm, I get to know which statements would run based on a condition, or check if my condition is covered under certain condition.

And let me tell you all these things are live, and that is

There are other pretty cool features in Quokka.js like

  1. Project file Imports
  2. Live commenting
  3. Quick package install
  4. Live Performance Testing.

But these are available only in pro version, if you need to get more things done.

Just for a playground, community version of it plays really well for me.

To read more of its feature in detail, checkout their docs https://quokkajs.com/docs/

Thats it folks!!!

Thank you so much for reading, please do share and give a couple of claps. So it motivates me to write more awesome stuff, that I so love to share.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store