How Run Code works
Click Run Code or press Ctrl + Enter (Cmd + Enter on Mac). The editor temporarily replaces console.log, console.warn, and console.error, runs your code with eval in strict mode, then prints what was captured into the Console Output panel: logs in green, warnings in yellow, errors in red. Objects and arrays are converted with JSON.stringify, so they print as JSON on a single line. The code also still logs to your browser's own developer console.
It runs in your browser's JavaScript engine, so you can use whatever modern syntax that browser supports (optional chaining, ??=, array methods like toSorted). The editor itself is CodeMirror 5: Ctrl + Space suggests keywords, browser globals, and variable names declared in your code, brackets close automatically, and functions can be folded from the gutter.
Worked example: summarizing an array of orders
This is the kind of quick check the editor is good for, such as confirming a filter and reduce chain before putting it in your app:
const orders = [
{ id: 101, status: 'paid', total: 49.5 },
{ id: 102, status: 'pending', total: 20 },
{ id: 103, status: 'paid', total: 12.25 }
];
const paid = orders.filter(o => o.status === 'paid');
const revenue = paid.reduce((sum, o) => sum + o.total, 0);
console.log('Paid orders:', paid.map(o => o.id));
console.log('Revenue:', revenue.toFixed(2));
console.log({ count: paid.length, revenue });
The Console Output panel shows:
Paid orders: [ 101, 103 ]
Revenue: 61.75
{ "count": 2, "revenue": 61.75 }
Note that the object prints with quoted keys, because it went through JSON.stringify. That also means undefined inside an array prints as null.
Common JavaScript mistakes and what the panel shows
Assigning an undeclared variable
total = 0;
// Error: total is not defined
Strict mode refuses to create globals by accident. Add let or const. This is also how your code behaves inside ES modules and classes, so it is worth fixing rather than working around.
Expecting async output
setTimeout(() => console.log('later'), 0);
fetch('/api/items').then(r => r.json()).then(console.log);
// Panel shows: // Code executed successfully (no console output)
Only synchronous logs are captured. Anything logged from a timer, promise, or event handler appears in the browser developer console (F12) instead. Top-level await is a syntax error here; wrap the code in (async () => { ... })().
Comparing with == instead of ===
console.log(0 == '', '1' == 1, null == undefined);
// true true true
console.log(0 === '', '1' === 1, null === undefined);
// false false false
Loose equality converts types before comparing. Use === unless you specifically want x == null to match both null and undefined.
Floating point surprises
console.log(0.1 + 0.2); // 0.30000000000000004
console.log((0.1 + 0.2).toFixed(2)); // 0.30
Round only for display with toFixed, or do money math in whole cents.
Limitations
- When an error is thrown, the panel shows only the error message. Lines logged before the error are not shown in the panel, and there is no line number. Check the developer console for the full stack trace.
console.table, console.info, and console.debug are not captured. Map and Set print as {}, and logging an object with a circular reference produces a "Converting circular structure to JSON" error.- The code is not sandboxed. It runs in this page, so
document refers to the editor page itself. Do not run code you have not read.
- There is no linter and no type checking. Syntax errors are reported only when you run the code.
- Minify JS is a text-replacement shortcut, not a real minifier. For example,
const total = price * qty // before tax followed by more lines becomes one line where everything after // is a comment.
When to use a different tool
- To minify safely for production, use the JavaScript Minifier, which uses Terser.
- To reformat code and keep the original beside it, use the JavaScript Beautifier.
- To test a script that manipulates a page, put it in a
<script> tag in the HTML Code Editor, where it runs inside a sandboxed preview.
- To check a JSON response you logged, paste it into the JSON Validator.
Frequently asked questions
Why does my setTimeout, fetch, or promise output not appear in the console panel?
The panel only captures console.log, console.warn, and console.error calls that happen while your code runs synchronously. Callbacks from setTimeout, promises, fetch, and event listeners run later, after capturing has stopped, so their output goes to your browser's developer console instead. Press F12 to see it.
Why do I get "await is only valid in async functions"?
Code is run as a classic script, not a module, so top-level await is not allowed. Wrap the code in an async function and call it, for example (async () => { ... })(). Remember that output produced after the first await will appear in the browser developer console, not in the panel.
Why is "x is not defined" thrown when I assign a variable?
Your code runs in strict mode. Assigning to a variable that was never declared, such as total = 5, throws a ReferenceError instead of creating a global. Declare it first with let, const, or var.
Is the code sandboxed?
No. Run Code evaluates your script directly in this page with eval, so it can read and change the page, including the editor itself. That is fine for your own code, but do not run code you do not trust, including code imported from an unknown URL.
Can I use the Minify JS button for production files?
Not safely. It removes comments and whitespace with simple text replacements. Code that relies on line breaks instead of semicolons, or has a // comment at the end of a line, will break. Use the JavaScript Minifier tool, which uses Terser, for real minification.
Why does a Map or Set print as {}?
The panel converts objects to text with JSON.stringify, which has no representation for Map, Set, functions, or class instances with private state. Convert first, for example console.log([...myMap]) or console.log(Object.fromEntries(myMap)).