DEV Community

aurel kurtula
aurel kurtula

Posted on

14 2

Using your editor as a JavaScript playground with Quokka.js

I was watching a video from the fantastic youtube show Fun Fun Function and mpj was using Quokka.js and I thought it was amazing. I still find myself opening an index.html file in a browser or more often then not I navigate to jsbin.com just to test some JavaScript - not anymore!

On it's documentation Quokka describes itself as so:

Quokka.js is a rapid prototyping playground in your editor, with access to your project’s files, inline reporting, code coverage and rich output formatting.

This is what it does:

The blue output looks like a comment that I wrote but it's Quokka. And when you make a mistake it tells you

And lastly, if the output doesn't show inline as above, you can see it in the editor's console.

This plugin can be installed in VS Code, JetBrains IDE, and Atom. The above screenshots are from my VS Code editor.

To get started (at least in VS code) you open the Command Palette (shift+cmd+P) and Quokka.js: Start on Current File or Quokka.js: New File. There are other commands that can be explored. One of the options is to stop Quokka from watching your files, if it gets annoying.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (2)

Collapse
 
prodesed profile image
Prodesed

How can you configure it so that you can use it with react?

Collapse
 
nur_uddin_shohan profile image
NurUddinShohan

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay