JavaScript Online Runner

About this tool

JavaScript Online Runner executes JavaScript code in a sandboxed iframe with no external dependencies. It uses a native browser Blob URL approach — your code is wrapped in a minimal console-override shim, loaded into a hidden iframe with the 'allow-scripts' sandbox flag, and output is relayed back via postMessage. Console.log, console.error, console.warn, and console.info calls are all captured and displayed with colour-coded labels. Runtime errors are caught by a window error listener. Because the tool uses no CDN or bundler, it loads instantly on any connection. The Share Link feature encodes your snippet as a base64 URL fragment so you can share runnable code directly from the address bar without any backend. This tool is ideal for quickly testing JavaScript expressions, DOM-free algorithms, async flows, and JSON transformations.

Why use it

• Zero dependencies — no CDN, no bundler, starts instantly

• Sandboxed execution — code runs isolated from the parent page

• Captures all console methods with colour-coded output

• Shareable snippets via encoded URL fragment

• Works entirely in the browser — no server needed

• Zero dependencies — no CDN, no bundler, no npm install, starts instantly on the slowest connection

How to use

1. Type or paste JavaScript into the editor.
2. Click Run to execute — output appears in the Console Output panel below.
3. Use console.log(), console.error(), console.warn(), and console.info() to inspect values.
4. Click Share Link to encode your snippet in the URL and share it with others.
5. Click Clear to wipe the console and start a new session.
6. Type or paste JavaScript ES2020 code into the editor — Tab indents two spaces, Shift-Tab dedents.
7. Click Run to execute — the code runs in a sandboxed iframe and output appears in the Console Output panel below.

When it helps

• Quickly testing a JavaScript expression or algorithm
• Demonstrating a code snippet to someone without a shared editor
• Debugging logic before adding it to a larger project
• Teaching JavaScript to students with an instant feedback loop
• Validating async/await flows or Promise chains
• Quickly testing a JavaScript expression, regex, or one-line algorithm

Examples

const nums = [1, 2, 3, 4, 5, 6];
const evenSquares = nums.filter(n => n % 2 === 0).map(n => n * n);
console.log(evenSquares);

[4, 16, 36]

const wait = ms => new Promise(r => setTimeout(r, ms));
(async () => {
  console.log('start');
  await wait(500);
  console.log('after 500ms');
})();

start
after 500ms

const user = { name: 'Ada', roles: ['admin', 'editor'], meta: { last: '2026-01-01' } };
const { name, roles: [primary] } = user;
console.log(JSON.stringify({ name, primary }, null, 2));

{
  "name": "Ada",
  "primary": "admin"
}

Tips

• Wrap top-level await calls in an async IIFE: (async () => { /* code */ })() — top-level await is not supported in script-mode iframes.
• Use console.table(arr) to print arrays of objects as formatted tables for easy scanning.
• JSON.stringify(obj, null, 2) gives readable nested output when console.log shows '[object Object]'.
• Each Run resets the iframe — use it to clear stuck timers or intervals from a previous run.
• URL-shared snippets travel in the fragment (#...) so they never hit the server, even when shared via chat or email.
• Combine setTimeout with console.log to trace event-loop ordering and microtask vs macrotask behaviour.
• Use performance.now() to benchmark small algorithms — the iframe has full access to the standard timing API.

Frequently Asked Questions

Glossary

Sandboxed iframe

An HTML iframe with the sandbox attribute that restricts access to the parent page's DOM, cookies, top-level navigation, and form submission.

Blob URL

A URL of the form blob:... that points to in-memory data created via URL.createObjectURL — used here to load the user's code into the iframe without a network request.

postMessage

A browser API for cross-origin communication between windows or iframes, used here to relay console output from the sandbox back to the runner UI.

REPL

Read-Eval-Print Loop — an interactive evaluator. This tool is a script-mode REPL where each Run evaluates the full editor contents.

ES2020

The 11th edition of the ECMAScript standard, adding optional chaining (?.), nullish coalescing (??), BigInt, and dynamic import among other features.

Microtask vs Macrotask

Promise callbacks run on the microtask queue (immediately after current code), while setTimeout uses the macrotask queue (next event-loop tick).

Unhandled promise rejection

A rejected Promise without a .catch handler — caught by the window 'unhandledrejection' event and surfaced in the output panel.

URL fragment

The portion of a URL after the # character; never sent to the server, making it safe for embedding shareable code without backend storage.