How to use the HTML, CSS and JavaScript playground
- Write markup in the HTML tab, styles in CSS and code in JS. On a wide screen the editor and the live preview sit side by side; on a phone the preview appears below.
- With Auto-run on, the preview refreshes half a second after you stop typing. Turn it off for heavy scripts and press Run (or Ctrl/Cmd + Enter) when ready.
console.log, warnings, errors and unhandled promise rejections appear in the console panel, with line numbers for errors.- Your code is saved in your browser automatically. Use Download .html to save a single self-contained file you can open anywhere or host.
What it is good for
A quick sandbox like this is ideal for trying a CSS layout, reproducing a bug for a Stack Overflow question, testing a DOM API, teaching HTML basics or prototyping a small widget, without setting up a project, installing anything or creating an account. Tab inserts two spaces, so you can indent code naturally.
You can load libraries from a CDN with a normal <script src="…"> tag in the HTML tab, for example a pinned version of a charting library from jsDelivr or cdnjs.
Safety and privacy
The preview runs in a sandboxed iframe with no access to this page, its storage or your cookies. Nothing you write is sent to a server: the code lives only in your browser's local storage until you clear it. Network requests made by your own code go wherever you send them, as on any web page.
Can I use npm packages or imports?
Yes, via ES module CDNs: add <script type="module"> in the HTML tab and import from a URL such as https://esm.sh/package@version. There is no build step.
Why does localStorage not work inside my code?
The preview is sandboxed without same-origin access for safety, so storage APIs and cookies are blocked inside it. Everything else, including fetch, canvas and timers, works.
Is my code saved?
Yes, in this browser only. It is restored when you return. Download the HTML file to keep a permanent copy or move it to another device.