HTML CSS JS Playground Online
Write HTML, CSS, and JavaScript side-by-side and watch the live preview update as you type. No signup, runs entirely in your browser.
How the HTML CSS JS Playground Works
- 1Click the HTML, CSS, or JS tab to switch between the three editors.
- 2Type or paste your code into the editor. The live preview on the right refreshes automatically 500 ms after you stop typing.
- 3Click Run at any time to force an immediate refresh — useful for resetting JavaScript state or replaying animations.
- 4Click Copy to copy the current panel's code to your clipboard, ready to paste into your project.
Loading External Libraries
You can use any CDN-hosted library directly in the HTML panel. Add a <script src="..."></script> tag pointing to a CDN URL — for example, from jsDelivr, cdnjs, or unpkg — and the iframe will fetch and execute it. This lets you prototype with React, Vue, Alpine.js, Bootstrap, Tailwind CDN, Chart.js, Three.js, or any other library without a build step.
Tips for the Live Playground
Prototype fast
Skip project setup entirely. Open the playground, paste a snippet, and see it working in seconds. Ideal for testing a CSS trick or a quick JS function.
Use CDN libraries
Add any CDN <script> or <link> to the HTML panel. Bootstrap, Tailwind CDN, Chart.js, Alpine.js, and Vue all work instantly — no npm required.
Tab indentation
Press Tab inside the editor to insert two spaces. No accidental focus loss. Press Escape then Tab to move keyboard focus out of the editor.
Reset JS state with Run
JavaScript accumulates state inside the iframe. Click Run to reload the preview from scratch — useful when event listeners stack up or variables get stale.
Debug with console.log
Open your browser's DevTools (F12) and check the Console. console.log(), console.error(), and console.table() all output there from inside the iframe.
Share by copying code
Use the Copy button to extract your HTML, CSS, or JS. Paste it into a GitHub Gist, a CodePen, or your own project. No export format to worry about — it's plain text.
Frequently Asked Questions
How does the live preview work?
The playground combines your HTML, CSS, and JS into a complete HTML document and renders it inside a sandboxed iframe. The preview auto-refreshes 500 ms after you stop typing, so you see results without manual intervention.
Is my code stored anywhere?
No. All code runs and stays entirely in your browser. Nothing is sent to a server. If you close the tab or refresh the page, your code will reset to the default example.
Can I use console.log and alert()?
Yes. The preview iframe allows scripts, modals, and forms. console.log output appears in your browser's developer console (F12). alert(), confirm(), and prompt() modals work as expected.
Can I load external libraries like jQuery or Bootstrap?
Yes. In the HTML panel, add a <script> or <link> tag pointing to a CDN URL — for example, the Bootstrap CDN or the jQuery CDN. The iframe will fetch and execute them when the preview runs.
Why does the Tab key insert spaces instead of changing focus?
The editor intercepts the Tab key to insert two spaces, matching the standard coding experience. To move focus away from the editor, press Escape first, then Tab.
What is the difference between the Run button and auto-run?
Auto-run fires automatically 500 ms after you stop typing. The Run button forces an immediate refresh at any time — useful when you want to reset the JS state or re-run animations.
Are there any security restrictions?
The preview runs in a sandboxed iframe with scripts enabled. Same-origin access is blocked, so your code cannot read parent-page cookies, localStorage, or the DOM outside the iframe. This is intentional to keep the tool safe.