If you’ve ever used Quokka.js, you know the feeling — values appearing inline as you type, no terminal switching, no manual runs. It’s one of those tools that changes how you think about writing code.
The problem? Full access costs money. For solo developers, students, or open-source contributors, that’s a real barrier.
LiveEvalJS is the free, open-source answer. It brings the same instant-feedback workflow to VS Code — and then goes further.
What Makes Quokka.js Worth Replacing?
Quokka pioneered the inline-evaluation model: write code, see results. Its core strengths are:
- Inline results — variable values and return values appear right in the editor
- Real-time evaluation — updates on every keystroke
- Console capture —
console.logoutput shown inline - TypeScript and JSX support
It’s polished and it works. But for many developers, the subscription price is the sticking point.
LiveEvalJS: Same Idea, More Power, No Cost
LiveEvalJS covers everything Quokka does — and adds a layer of deeper tooling that paid alternatives don’t offer.
The Basics
Add // ? to any line and see its value inline. That’s it.
const x = 42; // ? ⇒ 42
const arr = [1, 2, 3, 4, 5]; // ? ⇒ [1, 2, 3, 4, 5]
const sum = arr.reduce((a, b) => a + b, 0); // ? ⇒ 15
` `` `
Works with `.js`, `.ts`, `.jsx`, and `.tsx` files. The entire file runs sequentially, so earlier variables and functions are always in scope — no partial state surprises.
### Advanced Markers
This is where LiveEvalJS pulls ahead. Beyond `// ?`, you get a full set of debugging and analysis markers:
| Marker | What it does |
|--------|--------------|
| `// ??` | Deep-inspect objects, arrays, and class instances |
| `// trace` | Track function calls, recursion depth, and timing |
| `// watch` | Monitor how a variable changes over time; numeric values get sparklines |
| `// assert` | Inline pass/fail tests — no test runner needed |
| `// path` | Show branch coverage inside a function |
| `// perf` | Benchmark a block of code |
| `// log` | Capture console output silently, without cluttering the panel |
### Recursion Visualizer
The `// trace` marker does more than log calls — it feeds a dedicated **Recursion Visualizer** panel that draws the call tree and execution history. If you've ever stared at a recursive algorithm trying to understand what's actually happening, this panel is the tool you wished you had.
### Code Coverage
LiveEvalJS highlights executed code paths automatically. Dead branches are immediately visible without any test setup or coverage tooling.
---
## LiveEvalJS vs. Quokka.js
| Feature | Quokka.js | LiveEvalJS |
|---------|-----------|------------|
| Price | Paid subscription | Free and open-source |
| Real-time evaluation | ✅ | ✅ |
| Inline results | ✅ | ✅ |
| Console integration | ✅ | ✅ |
| TypeScript / JSX support | ✅ | ✅ |
| Advanced markers | Limited | `trace`, `watch`, `assert`, `path`, `perf` |
| Recursion visualizer | Basic | Dedicated panel with call tree |
| Code coverage | ✗ | ✅ |
| Performance benchmarking | ✗ | ✅ |
| Open source | ✗ | ✅ |
---
## Getting Started
**1. Install from the VS Code Marketplace**
Search for *LiveEvalJS* or install directly:
ext install liveevaljs-labs.liveevaljs
``
2. Open any JavaScript or TypeScript file
The extension activates automatically.
3. Start evaluating
- Add
// ?to any line to see its value Ctrl+Shift+Enter— evaluate the file manuallyCtrl+Shift+L— toggle auto-evaluation
4. Go deeper
Try // trace on a recursive function. Try // perf on anything you’re about to optimise. Try // assert instead of reaching for a test runner.
Is It Right for You?
LiveEvalJS is a strong fit if you:
- Want the Quokka workflow without the subscription
- Debug or prototype directly in your editor
- Work with recursive algorithms and want to visualise them
- Want inline assertions without spinning up a test suite
- Want to understand code coverage without a build step
It may not be the right fit if you need deep IDE integration beyond VS Code, or if you’re working in a language outside JS/TS.
Where to Find It
- VS Code Marketplace: liveevaljs-labs.liveevaljs
- GitHub: github.com/santosh-singh/LiveEvalJS
Issues, PRs, and feedback are all welcome.
Tags: JavaScript · TypeScript · VS Code · Developer Tools · Open Source · Quokka alternative