Developer tool
HTML, CSS and JavaScript Playground
Write HTML, CSS and JavaScript with a live sandboxed preview and console, start from templates, share by link or download a zip. Runs in your browser.
Free, no sign-up. Runs in your browser; nothing is uploaded.
Tab indents, Shift+Tab outdents. Your code is saved in this browser.
Console
How to use the html, css and javascript playground
A pocket editor for front-end experiments
This playground gives you three panes, HTML, CSS and JavaScript, and a live preview that refreshes a moment after you stop typing. It is meant for quick experiments: testing a layout idea, reproducing a bug, teaching a concept or sketching a small widget without creating a project folder.
How to use it
- Pick a starter template such as Hello world, Flexbox layout, CSS animation, To-do list, Canvas drawing or a digital clock. Each one is a complete working example you can change.
- Edit the panes. Switch between HTML, CSS and JavaScript with the tabs. Line numbers stay in step with your code, Tab indents and Shift+Tab outdents, and Enter keeps the indentation of the line above.
- Watch the console. Anything you log, every warning and error, and uncaught exceptions appear below the preview, so you can debug without opening developer tools.
- Change the layout. Show the editor and preview side by side, stacked, or preview only when you want a larger canvas.
Sharing and keeping your work
- Share link compresses all three panes into the address itself. Send the link and the other person sees exactly your code. Nothing is stored on a server, which also means a link is only as durable as the message you pasted it in.
- Download zip gives you index.html, style.css and script.js, wired together and ready to host anywhere.
- Copy all puts every pane on the clipboard in one block, handy for a forum question or a ticket.
- Your last session is restored automatically on the same browser.
About the sandbox
The preview frame is isolated from this page. It can run scripts but cannot read this site's cookies, storage or DOM, and it cannot navigate the parent window. That makes experiments safe to run, though you should still treat unknown code carefully because scripts can make network requests.
Tips for better experiments
- Keep the HTML pane to the body content only. The playground supplies the document, character set and viewport tag.
- Put the smallest failing example in the playground before asking for help. If it still shows the bug, the cause is in those few lines.
- Respect reduced-motion preferences in animations, as the animation template does.
When an experiment grows into a real product, DEV3 builds and maintains production front ends and web apps.
Frequently asked questions
Is my code uploaded anywhere?
No. The preview runs in your browser and your code is saved in your own local storage. A share link carries the code inside the link itself, so no server ever stores it.
Is it safe to run code I paste in?
The preview runs in a sandboxed frame that can run scripts but has no access to this page, its cookies or storage. Even so, only run code you trust, as a script can still make network requests.
How does the share link work?
The three panes are compressed and encoded into the part of the address after the hash. Anyone who opens the link sees the same code. Very large projects exceed the link limit, so use the zip download for those.
Can I use libraries such as React or Bootstrap?
Yes, add a script or link tag in the HTML pane that points to a CDN. The sandbox allows scripts and network requests, but not storage shared with this site.
Why does the console show my errors?
The preview forwards console.log, warn and error calls and uncaught exceptions to the console panel under it, with the line number where the browser gives one.
What does the zip contain?
An index.html that links style.css and script.js, ready to open from a folder or upload to any static host.