Live Execution and Results
Code runs immediately as you type, on unsaved changes; no need to do anything manually or switch context. Error messages are displayed right next to the code that caused them. Console logs and identifier expression values are displayed inline as well.
Indicators in the gutter of your code editor are constantly updated in realtime to display code coverage so you can quickly see which lines of code are the source of an error, which are fully covered, only partially covered or not covered at all.
Move forward and backwards through your code to understand how your code executes. Time Machine allows you to auto-play or jump to a specific line of code, view runtime values, edit-and-continue and step into, over and out of your code.
Share feature allows you to share code that you run with Quokka, as well as its output and time machine recording with the world. After upload, you have a chance to review it and change some settings before publishing. Check out our example at Codeclip.io.
Inspect the code that Quokka is executing in a single continuous view. Simply select a variable or expression to see its runtime value. The continuous view of executing code reduces both context switching and the time taken to understand what code is doing.
Value Explorer allows non-primitive runtime values to be viewed and explored in an easy-to-navigate real-time treeview. This feature is great for exploring larger objects and makes debugging easier and faster. Opened paths / values can be copied directly to the clipboard.
Live Comments and Values
Show and copy expression values by selecting them in your editor or with editor commands, accessible using keyboard shortcuts. A special comment format can also be used to evaluate any expressions and includes the ability to measure code execution times.
Project Files Import
Import any files from your project into your Quokka file. Quokka will watch project files for changes and automatically update when dependent files change. Babel or TypeScript may be used for imported files compilation.
CPU Profiler allows you to quickly record the CPU usage profile of your code to analyze its runtime performance. Any links that are provided that reference your project files will be opened in your editor when you click them.
Quick Package Install
Quickly install any node package, without switching away from your editor, and without having to type the package name. When you install, choose whether to install just for the active Quokka session or for your entire project.
500,000+ individual users and companies all over the world have increased their productivity and output by using Quokka.js.
Just found out about Quokka.js for prototyping js in VS Code. Sure beats fiddling around in the browser console. https://t.co/VR01n1OdxD— John Graham (@RobotsPlay) September 23, 2020
Install the Quokka.js plugin and see the output of your JS with every keystroke!
(Used by @mpjme on Fun Fun Function) pic.twitter.com/PGyCyjGhwp
Quokka.js— Kent C. Dodds 🧢 (@kentcdodds) October 18, 2019
I found this extension on VSCode called Quokka.js. Instead of having to check functions in a console, anything I console.log will appear right in my editor. Game CHANGER. And yes, I know it's a Saturday night. Also, Quokka is the name of the CUTEST ANIMAL ALIVE pic.twitter.com/2poe9aynKN— Leya Hatoum (@leyahatoum) January 27, 2019
I found a cool VS Code extension called Quokka.js created by @wallabyjs. It lets you see the console.log statements in your IDE.
Everyone learning JS should check it out. pic.twitter.com/dR8VAU7r3U
Just did the Diamond kata in less than 10 minutes, with no tests, in QuokkaJs from @wallabyjs and GitHub Copilot.— David Whitney (@david_whitney) July 8, 2021
Just out of curiosity really. I obviously edited the code on the way to make it actually work but took most of the code hints and left them as-is. pic.twitter.com/rtwGJURNYA
Blogged: "Using Quokka.js for Real-Time Feedback in TypeScript" https://t.co/GE0fZ3K5Xy— Allen Conway (@AllenConway) April 2, 2019
Impressive, it’s not even the focus of the tweet - but you can see how quokka logs to the REPL whatever is under the cursor towards the end of this gif. What a great idea.https://t.co/5x0o8w8yFj— ./orta --black-lives-matter (@orta) July 8, 2021
Just ordered a @wallabyjs + Quokka.js licence after a 15 days trial 🥳. These tools are so good ! How can we work without them 🙃 ?— Raphaël Moreau 🚀 (@rphlmr) March 12, 2020
https://t.co/YlmtPsxvxu A really nice feature I testing right now for debugging (prototyping) your code for JS/TS, I just recently bought the PRO license.— Cristian Echeverria (@cecheverri4) March 4, 2020
Not enough people know about https://t.co/YibJd041YG! For the longest time I'd boot up codesandbox/codepen for a notepad to test out functions or ideas; Quokka let's you do it in your own editor and is _super_ fast and really convenient.— Chris Dhanaraj (@chrisdhanaraj) February 12, 2020
Quokka.js is a dope VS Code extension! Runtime values are updated and displayed right in your editor. pic.twitter.com/MJL07CVI7m— Jeremiah Peoples (@We_The_Peoples) October 6, 2021
I really love Quokka.js https://t.co/heqQK8NTj5 especially with the VSCode extension. Makes me so productive and I get immediate *inline* feedback for code I write.— Dominic Elm ⚡️🚴♂️ (@elmd_) January 12, 2022
Same goes for Wallaby.js https://t.co/FT1KREwnNX
If you do serious JS/TS development you need to checkout QuokkaJS by @wallabyjs— Saša 🤠🌍📈 (@SasaCocic) December 7, 2021
it'll speed up your dev. time a bunch
How? It gives you immediate feedback when coding.
Here's a taste of some of the things you can do pic.twitter.com/FtlJ0vEe1B
One of my favorite extensions so far! pic.twitter.com/iPlUIbcKHL
Introduced myself to Quokka JS extension on Visual Studio Code Editor so that I can get the live feedback of the Developer Console inside the editor. It's very helpful for Typescript and writing JS logic.#365CodingPhaseChallenge #CodingPhase #TheCodingWay pic.twitter.com/Z00hZDpYWo— William Randolph (@William52821032) December 7, 2019
Quokka.js, hands down. Couldn’t live without it! https://t.co/hR4v9agrot— Luke Bayliss (@lpbayliss) August 14, 2019
My new favorite VSCode extension is Quokka.js which allows you to see your console logs in the file you're writing as you're writing without having to run anything in the terminal or browser. Recommended— Kudzanayi (@codename_kd) May 11, 2020
⚡️ Tooling Tip: Quokka.js is an amazing extension that allows you to run code directly in your editor. I use it all the time to prototype or when I live code in presentations. https://t.co/HG5kVmYQ2T pic.twitter.com/AUHwQ3XC8h— Anton Gunnarsson (@Awnton) February 21, 2019
Day 49 @ #100DaysOfCode— Michael Jäkel (@michaeljaekel) December 2, 2018
Still busy with functional programming at #freecodeCamp. By that I found a very usefull #JS plugin for #VisualStudioCode: #Quokka!
I'm using the free community edition and it's great!
Just install and start a new file.https://t.co/vUwDbIKiwv#vsc #coder pic.twitter.com/MJ1oPKQrFc
My favorite scratchpad for code demos ;-) https://t.co/PuUl0xH3iI— Nick 🇪🇺 (@NickDinges) October 13, 2018
As I work more heavily with JS in VS Code, Quokka has become my favorite extension.https://t.co/WINT7Jm9fK— Doug Linley (@douglinley) September 27, 2018
Why having a short feedback loop when you can have an immediate feedback on your code? This I'm pretty sure, is how the future of programming looks like https://t.co/7TXTNAHfmR— Karl (@NiebuhrKarl) August 14, 2018
Quakka.js by @wallabyjs should be one of your editor (I use VS @code) extensions installed. It’s the best scratchpad tool out there when you’re manipulating and transforming data in #js. #webdev #SickPickhttps://t.co/LBwZI4yxxK— Sean Groff (@_SeanGroff) August 10, 2018
I keep finding uses for Quokka.js, like debugging production issues, as I continue exploring it. It's feedback cycle is awesome, take a peek at their Community edition to wet your appetite https://t.co/EAspFp2x9O . A big thank you to the @wallabyjs team... good work!— Cory Wheeler (@corywheeler1) June 1, 2018
Finally got around to upgrading to the full pro version of @wallabyjs’s excellent Quokka tool. Happy to be supporting a great product by Australian devs.— Peplexa Zestybus (@gilfer) April 10, 2021
Trying out Quokka on some TypeScript. Pretty nifty that it shows you the value as you type the code, nice hybrid between an editor and console pic.twitter.com/6ZvDDZhYrk— Wes Bos (@wesbos) April 2, 2021
https://t.co/MMPyXWr5tR is just awesome. As well as wallaby.js. Big part of my workflow these days.— Nawal 'Deshi' Rahim (@deshiknaves) September 24, 2017
QuokkaJS, such an awesome tool. https://t.co/AZ3T8gPhFd. JS/TS Scratchpad in your editor.— Jake Ginnivan (@JakeGinnivan) August 6, 2017
Just discovered Quokka.js and I absolutely ❤️ it! It’s most definitely in 5 tools I’m using for JS programinghttps://t.co/arIBBjVgQS— gozala (@gozala) July 27, 2017
Just found Quokka and am in love. https://t.co/dnzIEXuF14— Julian Torres (@macintacos) July 19, 2017
Just installed https://t.co/Jx4BPQMNaz in VS Code. Probably the most useful extension I'll ever install.— Sunny Singh (@sunnysinghio) June 24, 2017
With quokka.js I can practice without needing to get out my editor... 😍😍😍— • Oly, O Nerd • (@olimpioadolfo) January 8, 2020