The JavaScript Playground runs short snippets in a unique-origin, network-blocked sandbox: each execution uses a fresh Web Worker inside a per-run iframe, terminates after 1,500 milliseconds, and accepts up to 30,000 characters of source. The sandbox is purpose-built for self-contained snippets—array manipulation, string parsing, math, algorithms, and quick language experiments—rather than browser UI or server code. Every run wipes the previous sandbox, captures console messages and the final expression, and validates the response against a per-run token before reporting anything to the editor. Because the worker has no DOM, document, window, localStorage, cookies, or network access, a runaway loop cannot freeze your browser tab and a malformed output cannot leak into the parent page. The wall-clock guard is the ceiling on what the playground can measure, not a guarantee that any specific asynchronous workload will complete in that window. That isolation makes the playground a cheat sheet you can trust for everyday language checks without standing up a project, a build step, or a test runner.
What the JavaScript Playground Actually Runs
The Playground runs your snippet in a Web Worker spawned from a Blob URL, hosted inside a unique-origin iframe with scripts permitted and same-origin access denied. The iframe is given a deny-by-default Content Security Policy that allows only the inline bootstrap and the Blob worker, and explicitly sets connect-src 'none' so no HTTP, WebSocket, or fetch request can leave the page. Every run generates a fresh cryptographically random channel token, JSON-encodes your source code with script-breaking characters escaped, and accepts a result message only when the iframe window, a fixed marker, and the current token all match.
That construction produces three properties worth remembering: the parent page UI thread is isolated from the snippet, a malformed return value cannot break out of the iframe because the source is encoded before insertion, and one run cannot read state left behind by another because the sandbox is rebuilt from the ground up each click of Run. Per the MDN Web Workers API reference, a worker cannot access the DOM or the main thread's globals, which is exactly the boundary this Playground relies on for isolation.
Limits at a Glance
The Playground publishes a small set of hard limits. Memorize this cheat sheet before you start typing so you do not waste a run on something the sandbox cannot do.
| Setting | Capability |
|---|---|
| Editor source size | Up to 30,000 characters per snippet |
| Wall-clock timeout | 1,500 milliseconds per run |
| Runtime context | Web Worker, no document, window, or DOM |
| Origin per run | Unique, with same-origin access denied |
| Network access | Blocked by CSP (connect-src 'none') |
| Persistence | None, every run replaces the prior sandbox |
| Source encoding | JSON-encoded with < escaped to block script breakouts |
| Output format | JSON when possible, string fallback for circular structures |
| Promises | Awaited until settled or the timeout fires |
| Packages and imports | None provided |
| TypeScript and JSX | Not compiled |
| Debugging | No debugging breakpoints |
The 1,500 millisecond cap is a safety guard, not a benchmark. Browser scheduling is uneven, so an asynchronous workload may be terminated before it settles even if it would have completed at full speed.
What You Can and Cannot Do Inside the Sandbox
The Playground is great for language checks and weak for everything that needs the browser. Use the table below to decide quickly whether a snippet belongs here or in a real project.
| Use the Playground for | Skip the Playground for |
|---|---|
| Array, string, and object transforms | Anything that touches document, window, or the DOM |
| Algorithms, sorting, searching, recursion | Requests with fetch, XHR, or WebSocket |
| Arithmetic, BigInt, and numeric precision checks | Reading or writing localStorage, sessionStorage, or cookies |
| Parsing JSON, CSV, and regex patterns with RegExp | Importing npm packages or external scripts |
| async/await and Promise composition | Compiling TypeScript, JSX, or other transpiled dialects |
| try/catch error handling tests | Setting breakpoints or stepping through code |
| Quick reference on Map, Set, Date, and Math | File system access, downloads, forms, navigation |
| Logging via console.log and console.error | Node.js-specific globals such as require, process, or Buffer |
For regex work specifically, pair this with the Regex Cheat Sheet: API Alternative for JavaScript Tokens so you keep JavaScript RegExp syntax without mixing in POSIX classes.
Run a Snippet in the JavaScript Playground
Open the JavaScript Playground and follow these steps.
- Type a bounded JavaScript snippet into the editor. Keep it under 30,000 characters and avoid anything that needs document, window, fetch, or Node.js globals.
- Press Run JavaScript. The Playground generates a fresh cryptographically random token, JSON-encodes your source with script-breaking characters escaped, and spins up a unique-origin iframe plus a dedicated Web Worker.
- Read the output panel. The panel shows any console.log or console.error calls captured during the run, the final expression formatted as JSON when possible or as a string when not, and any thrown error or timeout message.
- Edit your snippet, then run it again. Each run replaces the previous sandbox, so old state, logs, and tokens are discarded before the next execution.
Quick Patterns Worth Trying
These short snippets illustrate what the sandbox is good at and what its output looks like.
Sum a small array
The expression [1, 2, 3, 4, 5].reduce((a, n) => a + n, 0) folds the array from the left with an initial value of zero. Step by step: start with 0, add 1 for 1, add 2 for 3, add 3 for 6, add 4 for 10, add 5 for 15. The Playground reports the final expression as the JSON value 15.
Normalize a string
Run " Hello, World ".trim().toLowerCase().replaceAll("world", "JavaScript") to see how chained string methods compose. The worker logs nothing unless you add a console.log, and the final expression becomes the JSON string "hello, JavaScript".
Group by key
Use Object.groupBy([{t:"a",v:1},{t:"b",v:2},{t:"a",v:3}], x => x.t) to bucket records by a property. The Playground JSON-formats the resulting map as {"a":[{"t":"a","v":1},{"t":"a","v":3}],"b":[{"t":"b","v":2}]}.
Await a resolved promise
Run await Promise.resolve("ready") and the Playground awaits the promise until it settles. If the worker timer fires first, you see a timeout message instead of the value.
What You Should Never Paste In
The sandbox isolates the Playground from your machine, but that is a defense boundary, not an invitation. The editor accepts whatever you give it, so treat it like any other online editor. Never paste passwords, API keys, session tokens, private customer data, or proprietary source into the snippet box. If you want to test a regex against real log lines or a string transform on real data, copy a sanitized sample rather than the original.
For real work, the Playground is a sketchpad. Production code belongs in a version-controlled local project that uses the runtime that will actually execute it, plus tests, linting, and dependency review. The Playground does not store projects, so any snippet you want to keep must be copied out before you navigate away. Treat the limits and capabilities above as the cheat sheet they are, and keep a real editor open for anything that needs persistence, packages, or the DOM.