Live JS Feedback in VSCode - Interactive Code

As a fun way to learn how your code executes, a great extension to add to your VSCode setup is Quokka.js.

It offers real-time feedback by showing the results of your code execution right next to the code as you type. This feature is particularly useful for learning, debugging, and experimenting with new ideas quickly without needing a separate testing environment.

Here's it running in my editor: Gif of the instant feedback while running Quokka.js in VSCode


It's free and you can install it through the extensions tab in VSCode by searching for "Quokka.js": Showing the VSCode extension tab with the search for "Quokka.js"

And as you see you should get a single result.

Install it and you are ready to go.

How to use it

Using it is just as easy.

Create a new file with the extension of .js or .ts, and then you can open up the command palette in VSCode with Ctrl+Shift+P or on Mac with Cmd+Shift+P.

Then search for the "Quokka.js: Start on current file": Showing the VSCode command palette with "Quokka.js: Start on current file" selected.

Once you select this option, a terminal will pop up, and you'll start seeing your interactive code. So start coding!

Quokka is very useful for quick experiments, debugging, and learning new JavaScript features by providing immediate feedback within your development environment.

For more detailed instructions and features, refer to their official website's Quokka.js documentation.

Avatar for Niall Maher

Written by Niall Maher

Founder of Codú - The web developer community! I've worked in nearly every corner of technology businesses; Lead Developer, Software Architect, Product Manager, CTO and now happily a Founder.


Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.