Web Playground
Prototype HTML, CSS and JavaScript live.
The preview runs in an isolated sandbox in your browser. Auto-updates a moment after you stop typing.
Runs entirely in your browser — nothing you enter is uploaded or sent to a server.
Your code runs in an isolated in-browser sandbox — great for quick experiments, but it is a scratchpad, not a production or security-testing environment. Don't paste secrets or API keys, and expect it to behave differently from a real tab: no shared cookies or storage, and no access to this page. Read our full disclaimer.
About this tool
A three-pane editor for front-end code: markup goes in HTML, styles in CSS, behaviour in JS, and the preview stitches them together and runs them as you type. It's built for the quick loop — test a flexbox layout, check a snippet from the docs, or see how a bit of JavaScript behaves — without creating a project or a file on disk. The preview is a sandboxed frame, so your script runs but stays walled off from the rest of the site.
Try it
The starter renders a heading, a button, and a click handler that repaints the page. Change the h1 colour in the CSS pane, or make the button do something else in the JS pane, and the preview updates a beat later.
How to use
- 1Switch between the HTML, CSS, and JS tabs and edit each pane.
- 2The preview re-runs on its own a moment after you stop typing.
- 3Drag the divider to size the editor and preview, or go fullscreen for room.
- 4Hit Reset to drop back to the starter template.
Features
- Tabbed HTML, CSS, and JavaScript editors beside a resizable, fullscreen-able preview.
- Live preview that re-runs a moment after you stop typing.
- Your JavaScript runs in a sandboxed frame, isolated from the rest of the site.
- Reset to the starter template whenever you want a clean slate.
Frequently asked questions
Can the code I run reach the rest of the site?
No. The preview is an iframe sandboxed with scripts allowed but same-origin access denied, so your code runs in its own isolated origin and can't touch this page, its cookies, or its storage.
Does my JavaScript actually execute?
Yes — it runs for real inside the sandboxed preview, so DOM changes, event handlers, and timers all work. It just can't reach outside the frame.
Will my work still be here when I come back?
No — the playground starts fresh each time and Reset restores the sample. If you want to keep something, copy it out of the panes before you leave.
More developer tools
View allJSON Formatter
Paste raw JSON and get it neatly indented, minified, or validated — entirely in your browser.
Open toolRegex Tester
Test a regular expression against sample text with live match highlighting, a plain-English breakdown of your pattern, and a cheat sheet to learn from.
Open toolColor Converter
Convert a color between HEX, RGB, and HSL, with a live swatch preview and one-click copy — paste any of the three formats.
Open tool