Quokka.js: What Is It, How Does It Work, and Why You Should Use It
Quokka.JS for Sublime VSCode Atom v1.0.209: A Rapid Prototyping Playground for JavaScript and TypeScript
If you are a JavaScript or TypeScript developer, you probably know how frustrating it can be to write code without getting instant feedback. You have to save your file, switch to the browser or terminal, run your code, check the output, fix the errors, and repeat the process until you get the desired result. This can be time-consuming, tedious, and error-prone.
Quokka.JS for Sublime VSCode Atom v1.0.209
What if there was a way to run your code in your editor, with access to your project's files, inline reporting, code coverage, and rich output formatting? What if you could see the runtime values of your variables and expressions right next to your code, as you type? What if you could explore and manipulate complex objects in a real-time treeview? What if you could move forward and backwards through your code execution, edit-and-continue, and step into, over, and out of your code?
That's exactly what Quokka.JS can do for you. Quokka.JS is a developer productivity tool for rapid JavaScript / TypeScript prototyping. It is a playground in your editor that allows you to write and run code with instant feedback. It is compatible with VS Code, WebStorm, Sublime Text, and Atom editors.
In this article, we will introduce Quokka.JS and its features, compare its editions and pricing, and show you how to install and use it in your editor of choice.
What is Quokka.JS and why you should use it
Quokka.JS is a tool that turns your editor into a JavaScript / TypeScript playground. It runs your code in real-time, displays the results inline in your editor, and provides various features to help you explore, learn, test, and debug your code.
Quokka.JS is built on top of the same technology used in Wallaby.js , a powerful tool for testing JavaScript / TypeScript code with live feedback. Quokka.JS uses Wallaby.js core to instrument and execute your code, so you can benefit from years of research and development.
Quokka.JS is designed for rapid prototyping and experimentation. You can use it to try out new ideas, learn new language features, test snippets of code, or debug issues. You can also import and run files and modules from your project , so you can avoid context switching while benefiting from your familiar editor environment and its extensions.
Quokka.JS has many advantages over online REPL tools and standalone playgrounds. Here are some of them:
It runs in your editor , so you don't have to leave your comfortable workspace or lose focus.
It supports JavaScript , TypeScript , JSX , Vue , CoffeeScript , Pug , Markdown , CSS , SCSS , Less , Stylus , HTML , JSON , YAML , GraphQL , SQL , XML , C# (via Bridge.NET ), F# (via Fable ), Python (via Transcrypt ), Ruby (via Opal ), PHP (via Uniter ), Java (via JSweet ), Kotlin (via Kotlin/JS ), Scala (via Scala.js ), ReasonML (via BuckleScript ), ClojureScript , Elm , Emscripten , AssemblyScript , Svelte , Angular , React Native , Ionic Framework , and many more languages and frameworks.
It supports Node.js , browser , and Electron environments, so you can run your code in different contexts and platforms.
It supports ES modules , CommonJS modules , TypeScript modules , and dynamic imports, so you can use any module system and syntax you prefer.
It supports Babel , TypeScript , Webpack , Rollup , Parcel , Browserify , FuseBox , and other compilers and bundlers, so you can use any transpilation and bundling configuration you need.
It supports Jest , Mocha , Jasmine , AVA , Tape , QUnit , and other testing frameworks, so you can use any testing library and assertion style you like.
It supports npm , Yarn , pnpm , and other package managers, so you can install and use any dependencies from the npm registry or your local node_modules folder.
It supports live reloading , so you can see the changes in your code reflected in the output as soon as you save your file.
It supports live editing , so you can modify your code while it is running and see the results immediately.
It supports live coverage indicators , so you can see which lines of code have been executed and which have not.
It supports time machine , so you can move forward and backwards through your code execution, edit-and-continue, and step into, over, and out of your code.
It supports codeclip , so you can create and share interactive snippets of your code with others.
It supports code stories , so you can create and share rich documentation of your code with embedded live examples.
It supports value explorer , so you can inspect and manipulate complex objects in a real-time treeview.
As you can see, Quokka.JS is a powerful and versatile tool that can help you write better code faster and easier. It is not only a playground, but also a learning tool, a testing tool, a debugging tool, a documentation tool, and a collaboration tool. It is a must-have for any JavaScript or TypeScript developer who wants to improve their productivity and creativity.
Quokka.JS features and benefits
In this section, we will explore some of the main features and benefits of Quokka.JS in more detail. We will show you how Quokka.JS can help you write and run code with instant feedback, visualize and understand your code execution, test and debug your code, create and share code snippets and stories, and inspect and manipulate complex objects. We will also provide some screenshots and examples to illustrate how Quokka.JS works in practice.
Live execution and results
The core feature of Quokka.JS is live execution and results. This means that Quokka.JS runs your code in real-time, as you type, and displays the results inline in your editor. You can see the output of your console.log statements, the values of your variables and expressions, the errors and warnings in your code, the return values of your functions, the promises resolutions or rejections, the async/await results, the generator yields, the observable emissions, the DOM elements creation or manipulation, the HTTP requests or responses, the WebSocket messages, the WebAssembly calls, the SVG rendering, the Canvas drawing, the Audio playing, the Video streaming , and many more types of output, right next to your code, in your editor.
This feature allows you to write and run code with instant feedback, without having to switch to the browser or terminal, or wait for the code to compile or run. You can see the results of your code as you type, and quickly spot any errors or bugs. You can also experiment with different inputs, outputs, parameters, options, configurations, and scenarios, and see how they affect your code behavior and performance. You can also compare the results of different versions of your code, and easily revert to the previous state if needed.
Here is an example of how Quokka.JS displays live execution and results in VS Code:
As you can see, Quokka.JS shows the output of the console.log statements, the values of the variables and expressions, the errors and warnings in the code, and the return values of the functions, inline in the editor. You can also see the output in a separate panel at the bottom of the editor, where you can interact with it using commands or keyboard shortcuts.
Live coverage indicators
Another feature of Quokka.JS is live coverage indicators. This means that Quokka.JS shows you which lines of code have been executed and which have not, using different colors and symbols in your editor. You can see the coverage indicators in the gutter (left margin) of your editor, as well as in the status bar (bottom right corner) of your editor.
This feature allows you to see how much of your code is covered by your tests, and which parts are missing or redundant. You can also use this feature to identify dead or unreachable code, or code that is never used or invoked. You can also use this feature to optimize your code performance and memory usage, by removing unnecessary or duplicated code.
Here is an example of how Quokka.JS displays live coverage indicators in VS Code:
As you can see, Quokka.JS shows the coverage indicators using different colors and symbols:
Green: The line of code has been executed.
Yellow: The line of code has been executed partially (e.g. a conditional branch).
Red: The line of code has not been executed.
Gray: The line of code is not executable (e.g. a comment).
Cross: The line of code has thrown an error.
Dot: The line of code has produced an output.
You can also see the coverage percentage in the status bar, where you can click to toggle between different modes (e.g. file coverage, project coverage, uncovered lines).
Time machine
A third feature of Quokka.JS is time machine. This means that Quokka.JS allows you to move forward and backwards through your code execution, edit-and-continue, and step into, over, and out of your code. You can use this feature to explore different execution paths, inspect different states and values, modify your code while it is running , and see the results immediately.
This feature allows you to debug your code in a more interactive and intuitive way, without having to use breakpoints, watch expressions, or console commands. You can also use this feature to learn how your code works, by tracing the execution flow and observing the changes in the output. You can also use this feature to test different scenarios and edge cases, by changing the input or output values on the fly.
Here is an example of how Quokka.JS enables time machine in VS Code:
As you can see, Quokka.JS shows a timeline at the top of the editor, where you can see the execution history of your code. You can use the buttons or keyboard shortcuts to navigate through the timeline, and see the output and coverage indicators update accordingly. You can also edit your code while it is running, and see the changes reflected in the output and coverage indicators. You can also use the buttons or keyboard shortcuts to step into, over, and out of your code, and see the output and coverage indicators update accordingly.
Codeclip
A fourth feature of Quokka.JS is codeclip. This means that Quokka.JS allows you to create and share interactive snippets of your code with others. You can use this feature to demonstrate your code functionality, showcase your code skills, ask for help or feedback, or collaborate with other developers.
This feature allows you to share your code with live execution and results, live coverage indicators, live editing, and live reloading. You can also share your code with different environments, languages, frameworks, dependencies, and configurations. You can also embed your code in websites, blogs, social media, or other platforms.
Here is an example of how Quokka.JS creates and shares a codeclip in VS Code:
As you can see, Quokka.JS shows a button at the top right corner of the editor, where you can click to create a codeclip. You can also use a command or keyboard shortcut to create a codeclip. Quokka.JS will generate a unique URL for your codeclip, and copy it to your clipboard. You can then paste the URL in any browser or platform to view or edit your codeclip. You can also share the URL with anyone who wants to see or run your code.
Code stories
A fifth feature of Quokka.JS is code stories. This means that Quokka.JS allows you to create and share rich documentation of your code with embedded live examples. You can use this feature to explain your code logic, design, architecture, patterns, principles, best practices , or tutorials. You can also use this feature to create interactive articles, books, courses, or presentations of your code.
This feature allows you to write your code documentation in Markdown, and embed live code examples using Quokka.JS syntax. You can also format your documentation using HTML, CSS, or JavaScript. You can also add images, videos, audio, charts, graphs, tables, or other media to your documentation. You can also use Quokka.JS features such as live execution and results, live coverage indicators, live editing, live reloading, time machine, and value explorer in your documentation.
Here is an example of how Quokka.JS creates and shares a code story in VS Code:
As you can see, Quokka.JS shows a button at the top right corner of the editor, where you can click to create a code story. You can also use a command or keyboard shortcut to create a code story. Quokka.JS will generate a unique URL for your code story, and copy it to your clipboard. You can then paste the URL in any browser or platform to view or edit your code story. You can also share the URL with anyone who wants to see or run your code story.
Value explorer
A sixth feature of Quokka.JS is value explorer. This means that Quokka.JS allows you to inspect and manipulate complex objects in a real-time treeview. You can use this feature to explore the properties and methods of any object in your code, including arrays, functions, promises, observables, generators, iterators, maps, sets, weak maps, weak sets, symbols, proxies, dates, errors, regexes , buffers, typed arrays, data views, and more. You can also modify the values of any property or method, and see the changes reflected in your code output.
This feature allows you to debug and understand your code better, by inspecting the internal state and behavior of any object in your code. You can also use this feature to learn how different objects work, by exploring their properties and methods. You can also use this feature to test and experiment with different objects, by changing their values and seeing the results.
Here is an example of how Quokka.JS enables value explorer in VS Code:
As you can see, Quokka.JS shows a button at the top right corner of the editor, where you can click to open the value explorer. You can also use a command or keyboard shortcut to open the value explorer. Quokka.JS will show a treeview of the object that is currently selected in your code, with its properties and methods expanded. You can also select any other object in your code, and see its treeview in the value explorer. You can also edit any value in the treeview, and see the changes reflected in your code output.
Quokka.JS editions and pricing
Quokka.JS comes in two editions: Community and Pro. The Community edition is free and provides the basic features of Quokka.JS, such as live execution and results, live coverage indicators, live reloading, and live editing. The Pro edition is paid and provides the advanced features of Quokka.JS, such as time machine, codeclip, code stories, value explorer, project files support, TypeScript support, JSX support, Vue support, CoffeeScript support, Pug support, Markdown support, CSS support, SCSS support , and many more languages and frameworks.
It does not support Node.js, browser, or Electron environments. You can only run your code in the default Node.js environment provided by Quokka.JS.
It does not support Babel, TypeScript, Webpack, Rollup, Parcel, Browserify, FuseBox, or other compilers and bundlers. You can only run your code in the default JavaScript engine provided by Quokka.JS.
It does not support Jest, Mocha, Jasmine, AVA, Tape, QUnit, or other testing frameworks. You can only use the default console.assert method provided by Quokka.JS.
It does not support npm, Yarn, pnpm, or other package managers. You can only use the default dependencies provided by Quokka.JS.
It does not support live editing or time machine. You can only run your code once and see the results.
It does not support value explorer. You can only see the primitive values of your variables and expressions.
You can use the Community edition to get started with Quokka.JS and enjoy its basic features. However, if you want to unlock its full potential and access its advanced features, you will need to upgrade to the Pro edition.
Pro edition
The Pro edition of Quokka.JS is paid and provides the advanced features of Quokka.JS, such as time machine, codeclip, code stories, value explorer, project files support, TypeScript support, JSX support, Vue support, CoffeeScript support, Pug support , and many more languages and frameworks. You can also use the Pro edition to run your code in different environments, such as Node.js, browser, or Electron. You can also use the Pro edition to use different compilers and bundlers, such as Babel, TypeScript, Webpack, Rollup, Parcel, Browserify, FuseBox, or others. You can also use the Pro edition to use different testing frameworks, such as Jest, Mocha, Jasmine, AVA, Tape, QUnit, or others. You can also use the Pro edition to use different package managers, such as npm, Yarn, pnpm, or others.
It supports live editing and time machine. You can modify your code while it is running and see the results immediately. You can also move forward and backwards through your code execution, edit-and-continue, and step into, over, and out of your code.
It supports value explorer. You can inspect and manipulate complex objects in a real-time treeview.
The Pro edition of Quokka.JS is priced at $49 per year for a personal license , or $99 per year for a business license . You can also get a free trial of the Pro edition for 14 days , with no credit card required. You can purchase or activate the Pro edition from within your editor , by using the Quokka.js: Purchase/Activate License command.
You can use the Pro edition to unlock the full potential of Quokka.JS and access its advanced features. The Pro edition will help you write and run code with more flexibility and functionality, visualize and understand your code execution better, test and debug your code faster and easier, create and share code snippets and stories more effectively, and inspect and manipulate complex objects more conveniently.
How to install and use Quokka.JS in your editor
In this section, we will show you how to install and use Quokka.JS in your editor of choice. We will cover VS Code , JetBrains IDEs , Sublime Text , and Atom editors. We will assume that you have already downloaded and installed your editor on your machine.
VS Code
To install Quokka.JS in VS Code , follow these steps:
Open VS Code on your machine.
Click on the Extensions icon in the Activity Bar on the side of VS Code.
Search for Quokka in the Extensions Marketplace.
Select the Quokka.js extension from Wallaby.js.
Click on the Install button to install the extens