JavaScript Playground Guide

A snippet’s return value and its console output are not always the same thing. JavaScript Playground displays both, with an optional Monaco editor for syntax highlighting, bracket matching, code folding and formatting. Write or paste a snippet, press Run, and see everything it logs, the value it returns and how long it took. Monaco is a large bundle, so it is fetched from a CDN only when you press Enable Monaco; until then, and if the fetch fails, the page uses a plain text area with the same run, copy, download and clear actions. Output streams live from a Web Worker. The tool does not save or upload code, but snippets can make network requests.

Run the sample snippet

The code editor opens with a snippet that doubles some numbers, logs the result and returns their sum. With the Plain editor badge showing, press Run (or Ctrl/Cmd + Enter). The Console below the editor should show a log line with the doubled array and a result line with 20. Timing separates preparation from the main code’s elapsed execution; timers can continue afterward until Stop. Waiting for input counts toward elapsed execution, not CPU time.

Delete the code and try await Promise.resolve('hi') on its own line. Because the snippet is wrapped in an async function, top-level await works and return hands back a value. Change the sample to throw, throw new Error('boom'), and read the error row; anything logged before the throw is still listed. Clear empties the editor and output, and Copy takes the code away as plain text.

Press Enable Monaco to fetch the real editor from a CDN; the badge changes to Monaco and highlighting, folding and Format become available. Suggestions enables automatic word and code completion; Ctrl + Space opens suggestions manually. Monaco underlines detected syntax and type errors, including many misspelled identifiers. These editor diagnostics do not block Run. If the CDN is blocked the status says so and the plain text area keeps working. Snippets run in a Web Worker: document, window and Node.js APIs are unavailable. They can still make network requests, so only run code you trust.

Distraction-free workspace

Press Full screen to fit the editor above the console within one viewport, without scrolling the workspace. Long code and output scroll inside their own panes. Examples, editor settings and prepared input remain available under Options; supporting text is hidden. Exit full screen or Esc returns to the page without resetting code, input or execution (Esc closes an open Options panel first). When browser fullscreen is unavailable or denied, the tool fills the page instead. No fullscreen preference is saved.

Interactive execution

Enable Auto-run to rerun 700 ms after edits. Stop terminates execution, even during an infinite loop. Execution outside input waits has a 30-second limit, with up to 2 minutes to answer each prompt. Timers continue logging after the main snippet returns, until stopped; output is capped at 500 rows.

Try interactive input:

const name = await prompt('Your name?', 'Ilham');
console.log(`Hello, ${name}!`);
await new Promise((resolve) => setTimeout(resolve, 500));
return 'Done';

This prompt returns a Promise, unlike window.prompt. Use await, one question at a time. Type in the console and press Enter; each answer is echoed without being persisted. EOF (or Ctrl + D) returns null, while Enter on an empty field sends an empty string. Clear output removes logs without clearing code.

Coding exercises and pyramid patterns

Use the Code example picker above the editor to choose arithmetic, conditions, odd/even numbers, primes, factorial, Fibonacci, FizzBuzz, palindrome, bubble sort, binary search, word counts or a class-based bank account. There are also right-triangle, centered-pyramid, inverted-pyramid, diamond, hollow-pyramid and number-pyramid patterns.

Selecting an example immediately replaces the editor and pauses Auto-run. If the editor contains more than one line, a confirmation warns that existing code will be deleted; cancel to keep it. Nothing runs until you press Run. Copy output preserves line breaks and the leading spaces used by pyramid patterns.

For instance, Find prime numbers prints primes from 2 through 30. The divisor loop stops at the square root; 1 is not a prime. Centered pyramid prints five rows, with star counts 1, 3, 5, 7 and 9, prefixed by decreasing spaces.

Other playgrounds

Try the TypeScript Playground or Python Playground. The Playgrounds index lists only implemented languages. Following these links does not transfer your code or load another language’s runtime.

Where your input goes

Processing runs in your browser. The tool does not upload your input to ilham.dev.

Related guide

For more background, read Browser Debugging Utilities.