About the HTML/CSS/JS Playground
The preview is an <iframe sandbox="allow-scripts"> loaded through srcdoc. Your script runs in a unique opaque origin, so it cannot read this page, its cookies or local storage. Pop-ups, alerts, form submission and top-level navigation are blocked by the sandbox, which keeps experiments harmless.
console.log, info, warn, error and debug are forwarded to the Console panel with postMessage, together with uncaught errors and unhandled promise rejections. Objects are shown as JSON and error line numbers refer to the JavaScript editor. Your browser's DevTools still show the originals if you need to inspect live objects.
With auto-run on, the preview reloads 0.7 seconds after you stop typing. Code is kept in this browser's local storage between visits and never uploaded. Download produces a single self-contained HTML file with your CSS in a <style> tag and JavaScript at the end of the body, ready to open locally or host anywhere. It is meant for quick experiments, bug reproductions and teaching snippets rather than full projects.
How to use it
- Edit the HTML, CSS and JavaScript panes; Tab inserts two spaces.
- Watch the preview update, or turn off Auto-run and press Run.
- Read logs and errors in the Console panel.
- Switch layout if you want wider editors.
- Download the result as a single HTML file or copy it.