HTML Playground
Live HTML/CSS/JS sandbox. Write code in three panes, see instant preview in a sandboxed iframe, capture console output, share via deep-link.
About this tool
An HTML playground lets you write HTML, CSS, and JavaScript in separate editors and see the combined result rendered instantly in a sandboxed preview pane — like a tiny version of CodePen or JSFiddle that runs entirely in your browser.
It is the fastest way to reproduce a CSS bug, sketch a component before dropping it into a framework, or test a snippet of vanilla JS against live DOM. Example: put a button tag in the HTML pane, a color rule in CSS, and a console.log in JS — the preview shows the button and the console panel prints the message.
Auto-run re-renders on every keystroke; toggling it off lets you make several edits before manually hitting Run. The deep-link encodes the full sketch in the URL, so you can bookmark or share a repro without a server.
FAQ
Is my code uploaded anywhere? ›
No. The preview is generated by writing your code into a sandboxed iframe using the browser srcdoc mechanism. Nothing leaves your machine unless you choose to open the share link, which encodes the sketch in the URL itself.
Can I use external libraries? ›
Yes — add a script tag with a CDN src inside the HTML pane. The sandbox allows network requests, so CDN-hosted libraries such as React, Vue, or D3 load normally.
Why does console.log not appear? ›
Make sure Auto-run is on (or hit Run) — the console panel only captures output from the most recent render. Messages logged before a reload are cleared.
What is the difference between this and the Tailwind Playground? ›
This HTML Playground is a full HTML+CSS+JS sandbox with three separate editors, a console panel, layout modes (split/tabs/stack), and external library support via CDN. The <a href="/tools/tailwind-playground/">Tailwind Playground</a> loads Tailwind CSS automatically and is tuned for rapid prototyping of UI components with utility classes — ideal when you only need HTML + Tailwind and want a smaller, faster editor.