HTML, CSS & JS Playground

What it does

This playground is a small online code editor for front-end experiments. Write HTML, CSS and JavaScript in three syntax-highlighted tabs and the preview updates as you type, like CodePen or JSFiddle but without an account. A built-in console shows console.log() output and errors with the line number in your JavaScript, so you can debug without opening developer tools. That makes it handy on a phone or a borrowed computer.

Use it to try a CSS layout, reproduce a bug for a colleague, test a snippet from Stack Overflow, teach a beginner, or sketch a quick prototype.

How to use

1. Type in the HTML, CSS and JS tabs, or press Sample to start from a small counter demo. A dot on a tab means it contains code.
2. The preview runs automatically 0.6 seconds after you stop typing. Turn off Auto-run for heavy scripts and press Run or Ctrl+Enter when you are ready.
3. Watch the Console for logs, warnings and errors; the newest line is always at the top. Objects, arrays, Maps, Sets and DOM elements are shown in a compact, readable form.
4. Share to send the code to someone. Download ZIP saves index.html, style.css and script.js as separate files ready for a real project; Download HTML saves everything as one index.html file that opens in any browser.

Your code is kept in this browser, so it is still there when you come back. The Tab key indents with two spaces.

Example

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

Each click adds a line to the console. If you misspell a name, the console shows a red ReferenceError with the line in the JS tab where it happened.

How it works

The three panes are combined into one HTML document and loaded into an iframe with the sandbox attribute, so the code cannot read this site’s cookies or storage. A tiny script added to the frame forwards console calls and uncaught errors to the page, and nothing leaves your device.