LiveEvalJS — Real-time JS/TS Evaluation for VS Code

LiveEvalJS is a production-ready VS Code extension that provides instant real-time feedback for JavaScript and TypeScript code. Write code with // ? markers and get inline results instantly — no console jumping, no REPL switching, just live evaluation in your editor.

Supports JavaScript, TypeScript, JSX, and TSX files.

💡 Think of it as a lighter, faster alternative to Quokka.js with support for advanced features like code coverage tracking, Recursion Tree Visualization, debug expressions, and multiple runtimes.

⚡ Quick Start

1. Install from VS Code Marketplace (search LiveEvalJS)
2. Open any .js, .ts, .jsx, or .tsx file
3. Add // ? marker to any line to evaluate it
4. Results appear inline instantly with auto-refresh

Example

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

function factorial(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
}
factorial(6);                           // ? ⇒ 720

🎯 How It Works

LiveEvalJS evaluates your entire file sequentially on every save (with configurable debounce). Variables and functions declared above a // ? marker are fully available in the evaluation context. This is true stateful evaluation, not isolated snippets.

// Full TypeScript support with type annotations
interface User { 
  name: string; 
  age: number; 
}

const user: User = { name: 'Alice', age: 30 };
user.name;                              // ? ⇒ "Alice"

const doubled = [1, 2, 3].map(x => x * 2);
doubled;                                // ? ⇒ [2, 4, 6]

🔍 Evaluation Markers

LiveEvalJS supports multiple marker types for different evaluation needs:

// ? — Value Display

Shows the value of any expression inline. The most common marker.

const x = Math.pow(2, 10);              // ? ⇒ 1024
[1, 2, 3].map(n => n * n);              // ? ⇒ [1, 4, 9]
"hello".toUpperCase();                  // ? ⇒ "HELLO"

/* ? */ — Multi-line Values

Use block comment syntax for expressions that need it:

const config = {
  api: 'https://api.example.com',
  timeout: 5000,
  retry: 3
}; /* ? */
// ⇒ { api: 'https://api.example.com', timeout: 5000, retry: 3 }

// trace — Function Tracing & Recursion Visualizer

Tracks every call to a function, including arguments, return values, and recursion depth.

🌲 New in 0.2.4: Click [▶ Visualize Recursion Tree] in the trace hover to open the Time-Travel Visualizer! Step through recursion call-by-call with a dynamic tree view.

function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
} // trace
// ⇒ fib  ×15 calls  ↓5 depth  4ms

// watch — Variable History

Tracks how a variable changes over time or across loop iterations. Includes sparklines for numeric data.

let count = 0;
for (let i = 0; i < 5; i++) {
  count += i; // watch
}
// ⇒ count: 0 → 1 → 3 → 6 → 10  ▁▂▃▄▅

// ?? — Deep Inspection

Provides a detailed breakdown of objects, arrays, and classes, including prototypes and constructor info.

const user = new User("Alice"); // ??
// ⇒ 📦 User { name: "Alice", ... } (2 keys · 1 proto)

🎛️ Commands

Access LiveEvalJS commands via Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Core Commands

Output Commands

Coverage Commands 🔒 PRO

Debug Commands 🔒 PRO

Utility Commands

⚙️ Configuration & Settings

All settings use the liveeval.* namespace. Update them in VS Code Settings (Ctrl+, / Cmd+,).

Execution Settings

Behavior Settings

Display Settings

Output Format

Theme & Colors

Feature Toggles 🎛️

Per-resource settings (can differ per folder/workspace):

License Settings

📝 Language & File Type Support

LiveEvalJS evaluates code in these file types:

• .js — JavaScript (ES2020+)
• .ts — TypeScript (all versions)

All features (evaluation, coverage, debugging) work identically across all supported file types.

Console Output

console.log(), console.error(), console.warn() are captured and displayed in the LiveEval Output panel, not the main debug console.

🎓 Examples

Basic Evaluation

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);    // ? ⇒ [2, 4, 6, 8, 10]
const sum = doubled.reduce((a, b) => a + b); // ? ⇒ 30

Working with Objects

interface Person {
  name: string;
  age: number;
  email?: string;
}

const person: Person = { 
  name: 'Alice', 
  age: 28, 
  email: 'alice@example.com' 
};

person.name;                              // ? ⇒ "Alice"
const {name, age} = person;               // ? ⇒ { name: "Alice", age: 28 }

Error Handling

try {
  throw new Error('Something went wrong');
} catch (e) {
  e.message;                              // ? ⇒ "Something went wrong" 🔴
}

Async & Promises

const promise = Promise.resolve(42);
await promise;                            // ? ⇒ 42

🐛 Troubleshooting

Results not appearing inline

Check:

1. Is auto-evaluation enabled? (liveeval.behavior.autoEvaluate)
2. Did you use // ? marker correctly (comment on same line)?
3. Is the file in a supported format (.js, .ts, .jsx, .tsx)?

Fix: Try manually running Evaluate Current File (Ctrl+Shift+Enter)

Extension not activating

Check:

1. Open a JavaScript or TypeScript file first
2. Check the LiveEval output panel for activation logs

Fix: Reload VS Code (Ctrl+Shift+P → Reload Window)

Performance is slow

Causes:

• evaluationDelay too low (increase to 500-1000ms)
• maxCallDepth too high (increase means more tracking overhead)
• Large files with many markers

Fix:

• Increase liveeval.behavior.evaluationDelay
• Reduce marker count in large files
• Check liveeval.execution.debug logs for bottlenecks

Memory growing over time

Cause: Old evaluation contexts not evicted

Fix:

• Close and reopen the file
• Restart VS Code
• Lower maxMemoryMB limit in settings

TypeScript errors shown in results

Note: This is normal. TypeScript type errors are ignored at runtime.

Fix: If you see type errors in the output panel, check your .ts file for actual type issues in your IDE.