HTML, CSS & JS playground
Three panels and a live preview that updates as you type. For layouts, DOM experiments and bug reproductions.
Loading editor…
A code playground for the front end
Use it to try a CSS layout before committing it, reproduce a bug in isolation, or teach someone how the DOM works. The preview is a sandboxed iframe that rebuilds 450 ms after you stop typing; turn off Auto-run for heavy scripts and press Run yourself.
Layout reference: the Flexbox cheat sheet and CSS Grid cheat sheet. For JavaScript without the page around it, the JavaScript playground has a fuller console.
Frequently asked questions
Is this like CodePen or JSFiddle?
Yes, for quick experiments: three panels (HTML, CSS, JavaScript) and a live preview that updates as you type. There are no accounts; your work is kept in this browser and can be shared as a link.
Is the preview sandboxed?
Yes. The preview is an iframe with the sandbox attribute and no access to this site, so scripts in it can’t read your other data.
Can I load libraries from a CDN?
You can add a script tag pointing to a CDN in the HTML panel. Whether it loads depends on your network; the playground itself needs no external resources.
Where do console.log messages go?
They appear in the console strip under the preview, along with uncaught errors.