Code Playground. HTML, CSS & JS that runs live.

How to use the Code Playground

The Code Playground gives you three editors for HTML, CSS and JavaScript, a live preview and a console. It joins the three editors into one page and loads it into a sandboxed frame, so your code runs but cannot reach this site or your other tabs. Use it to test a snippet, debug a small layout or teach the basics without setting up a project.

Step by step

1. 1
   Write in the three editors

   Type or paste into the HTML, CSS and JavaScript editors. The first visit loads a small starter card with a button so you can see how it fits together. The Tab key inserts two spaces instead of leaving the editor. On a screen 860 pixels wide or narrower, one editor shows at a time and the HTML, CSS and JS tabs switch between them.

2. 2
   Watch the preview

   With Auto-run ticked, the Preview rebuilds about 0.4 seconds after you stop typing, and the badge next to Auto-run reads on input. Untick Auto-run to stop that; the badge then reads manual and the preview only changes when you press Run.

3. 3
   Read the Console

   Anything your code sends to console.log, info, warn, error or debug appears in the Console under the preview, with a running count. Uncaught errors and rejected promises show up there too. Press Clear to empty it. Every run starts with a clean console.

4. 4
   Resize the panes

   On a wide screen, drag the handle between the editors and the preview, or the one between the preview and the console. You can also focus a handle and use the arrow keys to move it in small steps.

5. 5
   Save or share your work

   Press Download .html to save a single file named playground.html with your CSS in a style tag and your JavaScript in a script tag. Press Copy HTML to copy that same combined page. Press Reset to bring back the starter code.

Reading the console

• Plain logs show with a small arrow, warnings in amber, errors and uncaught errors in red, and info lines in blue.
• Objects and arrays are written out as text, for example {a: 1, b: [2, 3]}, and a loop back to the same object prints [Circular].
• An error thrown while your script first runs shows only its message. Syntax errors and errors thrown later, for example inside a click handler, also show a line number. It counts from the top of the whole preview page, where your CSS and HTML sit above your script, so it is higher than the line in the JavaScript editor.
• The console keeps the last 600 lines, so very chatty loops drop their oldest output.

Tips and common mistakes

• Turn off Auto-run while you write code with an infinite loop risk, then press Run when you are ready.
• The exported file has no console capture added, so open it in a browser and use the browser's own developer tools to debug it.
• Reset replaces all three editors with the starter code straight away. Download your work first if you want to keep it.
• The preview sandbox has no origin of its own and does not allow forms. Code that reads localStorage or sessionStorage throws an error there, and a form submit does nothing. Test those parts in the downloaded file instead.

Privacy and limits

Your code runs in your browser inside a sandboxed frame. It is not uploaded. The three editors are saved to this browser's local storage after every change and reload on your next visit; clearing site data removes them. If your own code loads images, scripts or APIs from other sites, your browser makes those requests directly.

Back to the tool

Everything a playground should do.

Frequently asked questions.

More builder tools.

Browse the full free-tool library →