Quokkajs — Rapid prototying playground

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.

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.

Quokka.js extension on VSCode

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

Opening Quokka.js javascript playground

Now lets talk about it’s awesome features

Output

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.

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.

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

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.

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.