About the Code Playground
A three-pane playground is the quickest way to test a CSS idea, debug a snippet from a tutorial, or show a colleague exactly what you mean. Your code runs in a sandboxed frame inside this page, so it behaves like a real browser page while staying isolated from the rest of the site.
How to use the Code Playground
- Write or paste markup in the HTML pane.
- Add styles in the CSS pane and behaviour in the JavaScript pane.
- Watch the preview refresh automatically, or turn auto-run off and press Run.
- Download the whole thing as one standalone HTML file when it works.
Why use this tool?
Live preview
The result re-renders shortly after you stop typing, so experiments are instant.
Sandboxed execution
Your script runs in an isolated iframe. It cannot touch this page or your other tabs.
One-file export
Download a single HTML file with styles and script inlined — easy to email or open offline.
Frequently asked questions
Can I use external libraries?
Yes. Add a normal script or link tag pointing at a CDN in the HTML pane and it loads like it would on any page.
Is my code saved?
No. Nothing is stored or uploaded, so download the file if you want to keep it.
Why doesn't my code run?
Open your browser console for the error. A common cause is script running before the element exists — the script tag is added at the end of the body here, but code inside a setTimeout or module may still race.