HTML, CSS & JS Playground

about this tool

How the preview is isolated

The preview is an iframe with sandbox="allow-scripts" and, importantly, without allow-same-origin. That combination gives the frame an opaque origin: your code runs normally, but it cannot read this page, its storage or its cookies, and it cannot navigate the tab away.

Those two attributes together are the detail worth knowing if you ever build something similar. Adding allow-same-origin next to allow-scripts looks harmless and quietly removes the sandbox altogether, because the frame can then reach into the parent document and strip its own restrictions.

Nothing runs until you ask

There is no auto-run. A playground that executes on every keystroke will happily run while ( the moment you type it and take the tab with it. Press Run, or Command and Enter, when the code is ready.

Each run replaces the frame rather than reloading it, so any interval, listener or animation left over from the previous attempt stops. Without that, pressing Run three times on a setInterval leaves three of them going.

The console

Anything the page logs appears underneath, along with uncaught errors and rejected promises that nothing handled. Values are rendered rather than shown as [object Object], and a structure that refers to itself is marked instead of hanging the browser.

The frame's own console still works too, so the browser devtools show everything as usual.

Sharing

Copy link puts the whole playground into the address itself, compressed. There is no server and nothing is stored: the link carries the code, so it works offline and cannot expire, but it does get long for a large document.

One wrinkle worth mentioning, since it catches people out: the compressed text can contain a plus sign, and a plus in a query string means a space to anything reading it as form data. The link is built and read through the browser's own URL handling so that the plus survives the round trip.