Live Eval — Inline JavaScript & TypeScript

See JavaScript & TypeScript values inline as you type.

Live Eval evaluates your code as you write it and shows the result of any expression right next to it — no terminal, no run button, no REPL, no context switching. It's a free, no-friction way to eval, debug, and inspect JS/TS, with built-in recursion and Event Loop & Promise visualizers you won't find elsewhere.

Why Live Eval?

• See values inline next to your code with // ?
• Inspect objects and prototype chains with // ??
• Visualize recursion as an interactive call tree, DAG, and timeline
• Visualize the Event Loop & Promises step-by-step in a built-in panel
• See coverage in the gutter — executed-line counts and dead-code highlighting on every run
• Track branch coverage, variable history, assertions, and performance — without a terminal
• Works across .js, .ts, top-level await, and multi-file projects (relative imports + tsconfig path aliases)

Quick Example

const prices = [12.5, 8.0, 24.99, 5.5];
prices.filter(p => p > 10);   // ? → [12.5, 24.99] • 2 items
prices.reduce((a, b) => a + b, 0); // ? → 50.989999999999995

Works with .js and .ts files.

Screenshots

Live Eval shows results inline as you type — no run button, no separate console.

Inline results for // ?, // assert, // watch, and loop sparklines

Step-by-step visualization of the call stack, microtask queue, and Promise states

Event Loop view: watch setTimeout sit in Web APIs while the call stack unwinds

Timeline view: the same run told as a story — synchronous run, macrotasks, and microtask queue, each event stamped with its real +ms offset

Get Started in 30 Seconds

1. Install from the VS Code Marketplace
2. Open a .js or .ts file
3. Add // ? to any line — results appear immediately

Tip: Run LiveEval: New JavaScript Scratchpad (JS) or LiveEval: New TypeScript Scratchpad (TS) from the Command Palette to open a pre-loaded example file.

Tutorials

Step-by-step guides with screenshots — every output in them was produced by running the snippet through Live Eval's real evaluation pipeline.

Browse them all in the tutorial index.

Marker Reference

Markers are plain comments. They don't change how your code runs — they just tell Live Eval what to show.

What You Can Do

Visualize recursion

Add // trace to any recursive function, then open LiveEval: Visualize Recursion Tree from the Command Palette:

function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
} // trace
fib(8);
// → fib  ×67 calls  ↓8 depth

The interactive visualizer shows every call, argument, return value, depth, and timing. Switch between a call tree, a DAG (collapsed duplicate subtrees), a timeline (calls plotted by entry time), or a minimap overview. Step through calls one at a time, animate playback, and see a memoization estimate showing how many redundant calls could be eliminated.

Visualize the Event Loop & Promises

Open LiveEval: Visualize Promises from the Command Palette while a file with async/await, Promises, or setTimeout is open. The panel shows a step-by-step animation of:

• Call Stack — synchronous execution frames
• Web APIs — pending timers and async operations
• Microtask Queue — resolved .then() callbacks
• Callback Queue — fired macrotask callbacks (setTimeout, setInterval)
• Promise states — create → pending → fulfilled/rejected for every Promise.all, Promise.race, Promise.allSettled, Promise.any, and individual promises

Step forward/back through events or press Play to animate at adjustable speed. Switch between the Event Loop view (live call stack / queues / Promise states) and the Timeline view (the whole run as a phase-grouped story with real millisecond offsets).

Visualize prototype chains

Run LiveEval: Visualize Prototype Chain (or add // ?? for inline deep inspection) to open an interactive panel showing an object's full prototype chain — its constructor, own properties, inherited properties, and each link up to Object.prototype. Great for understanding class hierarchies and why a property resolves the way it does.

See execution coverage in the gutter

Every evaluation tracks which lines actually ran. Executed lines get a subtle gutter mark with an execution-count badge; lines that never ran are highlighted so dead code jumps out. Choose how loud this is with liveeval.coverage.style:

• full (default) — count badges plus a whole-line highlight on never-executed lines
• quiet — gutter marks and badges only, no line highlight
• dead-only — only highlight never-executed lines

Branch badges (✓ taken / ✗ not taken on if/else) can be toggled with liveeval.features.branchHighlight.enabled.

Work across multiple files

Import your own .ts, .js, and .json files and get inline results in every file of the import graph — markers and coverage work in imported modules too, not just the file you're editing.

• Relative imports just work: import { helper } from './utils'
• tsconfig path aliases (@lib/db, @src/*) are auto-detected from the nearest tsconfig.json; override or extend with liveeval.pathAliases
• Editing a module? Live Eval finds the runnable entry point automatically and re-runs it so the module's inline results stay live. Pin the entry explicitly with liveeval.execution.entryPoints (e.g. ["src/app.ts"])
• On large projects, liveeval.execution.entryReevalBudgetMs keeps typing responsive by refreshing from the last run instead of re-executing the whole graph on every keystroke

Keep results steady while you type

Turn on liveeval.behavior.stickyResults to keep the last successful results visible while you're mid-edit — they're only replaced when the next successful evaluation completes, so transient syntax errors don't blank the screen.

Toggle visualizer panels individually

Every panel in the recursion visualizer (execution tree, timeline, call stack, backtrack animation, results pane) and the editor branch badges can be switched off independently via the liveeval.features.* settings — see the Configuration table below. All default to on.

Evaluate any expression instantly

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

const user = {
  name: "Alice",
  age: 30,
}; /* ? → {name: "Alice", age: 30} • 2 keys */

console.log() lines are annotated automatically — no marker needed.

Full TypeScript support

Types, interfaces, and generics are stripped at evaluation time. Results are remapped back to the original TypeScript line numbers via source maps, so decorations always land on the right line even when the compiler removes type-only declarations.

interface Point { x: number; y: number; }

const origin: Point = { x: 0, y: 0 }; // ? → {x: 0, y: 0} • 2 keys

function greet(name: string): string {
  return `Hello, ${name}!`;
}
greet("World"); // ? → "Hello, World!"

See loop values as sparklines

When a marked line runs multiple times, all values are shown in sequence with a sparkline:

for (let i = 1; i <= 5; i++) {
  i * i; // ? → 1  4  9  16  25  ▁▂▄▇█
}

Use await at the top level

No wrapper needed. Write async code and see results inline:

const res = await fetch('https://jsonplaceholder.typicode.com/todos/1'); // ?
const todo = await res.json(); // ?

Write inline assertions

Instant feedback without a test runner:

const sum = add(2, 3);
sum === 5;  // assert → ✅ pass
sum === 6;  // assert → ❌ fail · actual: 5

Track branch coverage

Know which paths your code actually takes:

function classify(n) {
  if (n > 0) return "pos";
  else if (n < 0) return "neg";
  else return "zero";
} // path
classify(5); classify(-3);
// → ⬡ 2/3 branches taken

Benchmark expressions

sumSqrt(); // perf
// → ⚡ 1.2M ops/s · avg 0.8µs · 100 runs

Sandbox & Security

Live Eval runs your code in an isolated sandbox — a dedicated Node.js vm context per document with its own global scope, no access to the extension host's globals, and hard limits on time and recursion depth. Nothing you evaluate can affect VS Code itself.

What works out of the box:

• Safe Node.js built-ins: path, crypto, util, url, querystring, events, buffer, stream, os — with or without the node: prefix (require('node:path') works too)
• Both CommonJS (require/module.exports) and ES module (import/export) syntax — ESM is automatically converted to CommonJS, including dynamic import()
• Relative imports — and @/… tsconfig path aliases — of your own .ts, .js, and .json files, instrumented for inline results across files (multi-file evaluation)
• fetch (HTTPS only, 4 s timeout, 512 KB cap — no credentials forwarded)
• Top-level await, async/await, Promises, timers
• Full ES2020+ syntax

Module access — one simple setting. Safe read-only builtins (above) and your own local files always work. Everything else — npm packages and powerful builtins like fs, child_process, net, http — is blocked until you add it to liveeval.execution.allowedModules. Listing a module is explicit consent, so you grant exactly what you trust and nothing more:

// .vscode/settings.json
"liveeval.execution.allowedModules": ["lodash", "dayjs", "fs"]

Requiring anything not listed returns a clear error telling you which setting to add it to.

What's intentionally blocked or limited:

• eval() and new Function() — disabled for safety
• globalThis, global, process — no access to the host runtime
• Browser APIs (document, window, localStorage, etc.) — this is a Node.js sandbox, so these are simply undefined (exactly as in real Node). typeof window === 'undefined' is true, so feature-detection code works; actually using window.foo throws ReferenceError: window is not defined.
• http:// URLs in fetch — HTTPS only
• import.meta and top-level module-scope await in imported files — not supported

Note: React / JSX / TSX (.jsx, .tsx) is not supported — Live Eval evaluates plain JavaScript and TypeScript only.

Execution limits (all configurable):

Commands

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Configuration

Settings are under liveeval.* in VS Code Settings (Ctrl+,). Changes apply live — no window reload needed.

Execution

Behavior

Markers & history

Multi-file projects

Console output

Coverage & editor decorations

Recursion visualizer

Troubleshooting

Results not appearing — check the status bar shows $(play) LiveEval. If it says LiveEval Disabled, click it or press Ctrl+Shift+L. Make sure the file is a supported language (.js or .ts) and add a // ? marker to a line.

Decorations look stale — run LiveEval: Clear Inline Results.

Slow typing — raise liveeval.behavior.evaluationDelay to 500–1000 ms.

Recursion visualizer is empty — make sure the function actually recurses, place // trace on the closing brace or definition line, and evaluate the file first.

require() not found — the sandbox scopes require to your workspace root. Open the file inside a VS Code workspace folder.

Imports fail in a multi-file project — check that the imported file is part of the workspace and that the relative file path is correct.

Feedback

Found a bug or have a suggestion? Submit feedback — include the code that triggered it, your VS Code version, and OS.

License

Copyright (c) 2026 LiveEvalJS Labs. All rights reserved.

This software is proprietary and confidential. The source code is not open source. You may install and use the extension binary distributed via the VS Code Marketplace for personal or internal business purposes only.

You may not copy, modify, distribute, sublicense, reverse-engineer, or create derivative works from this software without the prior explicit written permission of LiveEvalJS Labs.

See the LICENSE file for the full terms.

Terms & Conditions

By installing or using Live Eval you agree to the following:

1. Permitted use. You may install and use the extension on machines you own or control, solely for your own personal or internal business purposes.

2. Restrictions. You may not redistribute, resell, sublicense, reverse-engineer, decompile, or create derivative works based on this software without explicit written permission from LiveEvalJS Labs.

3. Code execution is your responsibility. Code you evaluate runs on your local machine under your own operating-system user permissions. You are solely responsible for the code you choose to evaluate, including any effects it may have on your system, files, or external services.

4. No warranty. This software is provided "as is", without warranty of any kind, express or implied — including but not limited to warranties of merchantability, fitness for a particular purpose, or non-infringement.

5. Limitation of liability. LiveEvalJS Labs shall not be liable for any direct, indirect, incidental, special, consequential, or punitive damages arising from the use or inability to use this software, even if advised of the possibility of such damages.

6. No warranty of continuity. The extension may be updated, changed, deprecated, or discontinued at any time without notice.

7. Security. While the sandbox is designed to isolate evaluated code, no sandboxing mechanism is unconditionally secure. Do not evaluate untrusted third-party code. Add modules to liveeval.execution.allowedModules only in workspaces you fully trust.

8. No responsibility for misuse. LiveEvalJS Labs accepts no liability for misuse, including unintended access to external services, leakage of sensitive data, or violations of applicable laws or third-party terms of service.