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.

For prose with live preview rather than code, use the Markdown editor; to work out a pattern before pasting it into your JavaScript, the regex tester shows every match as you type.

To turn a finished snippet into a picture for a slide or a post, code to image renders it with syntax colouring.

questions

How is the preview isolated from the rest of the page?

It runs in a sandboxed iframe with scripts allowed but same-origin access deliberately withheld, so code in the preview cannot read this page, its storage or your other tabs. Granting same-origin alongside scripts would undo the sandbox, which is why it is not.

Where does console output go?

To the console panel below the preview. Calls to log, info, warn, error and debug are forwarded out of the iframe, so you can see values without opening browser developer tools.

Can I share what I have written?

Yes, the share link encodes the HTML, CSS and JavaScript into the URL itself. Nothing is saved on a server, which also means a long document makes a long link, and the link is the only copy.

Is my code saved if I close the tab?

No. There is no account and no server, so take the share link if you want to keep something. That is the trade-off for a tool that stores nothing about you.

Can I load a library such as React or a CSS framework?

Yes, add an ordinary script or link tag pointing at a CDN in the HTML pane and the preview will fetch it, exactly as a real page would.