Quokka - Snippets & Expanded TypeScript Support

  07 May 2025   3 min read

Quokka’s mission is simple: enhance your productivity and keep you in flow. Our recent changes continue to deliver on that mission with two productivity boosting updates: Snippets and Expanded TypeScript Compiler Support.

  • Quokka Snippets – are reusable templates that spin up a ready‑to‑run file, complete with autolog.
  • Blazing‑fast TypeScript — switch from ts-node to tsx or @swc-node/register for faster starts and lower memory use.

Quokka Snippets

What are Quokka Snippets?

Think VS Code snippets, but tuned for experimentation:

  • Available at Quokka creation time – pick a snippet when you run Quokka.js: New File and your new file is pre‑populated and live.
  • Autolog out‑of‑the‑box – snippets enable autolog for the session, so you see values without adding console.log(), logpoints, or live comments.
  • One home for all templates – Quokka stores every snippet in a single, comment‑friendly JSONC file.

Three new commands

  • Quokka.js: New File - Choose a snippet → Quokka creates a new file, inserts the snippet content, and turns on autolog.
  • Quokka.js: Create Snippet from Selection - Highlight code → convert it into a snippet entry in the snippets file.
  • Quokka.js: Edit Quokka Snippets - Open the snippets file directly for hand‑editing (JSONC: comments allowed, custom formatting may be normalized).

Why you’ll care

  • Start faster – spin up a runnable playground in seconds.
  • See results instantly – built‑in autolog shows runtime values as you type, no extra logging required.
  • Stay consistent – provides the ability to curate snippets to reuse across a team and across projects.

Ideal use cases

  • Setup‑heavy frameworks (React, Vue, Svelte) where a ready scaffold beats copy‑paste.
  • Recurring utility test beds (e.g. date helpers, regex checks, data‑format converters).
  • Teaching & demos - create a library of pre‑baked scenarios that run at the press of a button.

Please Note: Quokka Snippets are a PRO feature.

Expanded TypeScript compiler support

When Quokka first launched, ts-node was the only practical way to run TypeScript directly in Node.js, so we built a tight integration around it. Over time, however, the ecosystem moved forward:

  • Performance pressures grew – larger module graphs made for longer cold‑start times and increased memory use.
  • New compilers emerged – tools like tsx (esbuild‑powered) and @swc-node/register (SWC‑powered) rewrote the rule‑book on speed, ESM support, and resource footprint.

While ts-node is still reliable, it’s no longer the fastest (or the most memory‑efficient) option. It also no longer receives regular updates like tsx and @swc-node/register.

By adding first‑class support for tsx and swc‑node, Quokka lets you use the tool that best fits your project.

Getting started

If your project already uses tsx or @swc-node/register, Quokka will automatically detect and use the appropriate compiler. When multiple compilers are installed, Quokka will use them in order: tsx, @swc-node/register, and then ts-node as a fallback.

If you don’t have a compiler installed in your projects and don’t want to use ts-node then you can install a compiler to be used instead by running one of the following commands in your ~/.quokka directory:

  • tsx: npm install tsx
  • swc: npm install @swc-node/register

Find more details in the Quokka TypeScript docs.

Tweet us at @wallabyjs or drop a line at hello@wallabyjs.com.

Thanks for coding with Quokka! 🚀