HTML Playground

What this is

Your markup rendered by the browser’s own engine in a sandboxed iframe. No tooling, no download, nothing uploaded — the page works offline.

Every Run renders a fresh document, so nothing leaks from one attempt to the next.

What works

• HTML structure, CSS, and inline <script> — the real engine.
• console.log from your page appears in the Console panel below the preview.
• A short fragment like <h1>Hi</h1> is wrapped into a full document for you.

What does not

• The preview is a sandbox: it cannot read or change the rest of the site, or your computer’s files.
• Keep images, styles and scripts inline — the preview makes no network guarantees, and inline assets always work.

How the preview works

Your markup is rendered in a sandboxed iframe. Scripts inside it run normally, so buttons, event handlers and DOM manipulation all behave as they would in a real page, but the sandbox means the preview cannot reach this page, read anything from it, or navigate it away.

Each Run replaces the preview with a fresh document, so state does not carry over between runs. That is deliberate: it means a run always starts from exactly what is in the editor, with nothing left behind from the last attempt.

CSS and layout

A <style> block works exactly as it would in a real document, and so do inline style attributes. Flexbox, grid, custom properties, media queries and transitions are all the browser's own implementations, so what you see here is what you would get in a file on disk.

Resizing the divider between the editor and the preview is a quick way to test a responsive layout: drag it narrow and watch a media query fire, without opening developer tools or changing your window size.

What the console catches

Anything the page logs appears below the preview, along with runtime errors from your scripts. That is often more useful than the preview itself when a handler is not firing: a ReferenceError for a function that was defined after it was used, or a TypeError from a querySelector that matched nothing and returned null.

External resources are blocked, so a page that loads a script, stylesheet, font or image from another site will render without it. Everything the preview needs has to be in the editor.

Things worth trying

• Build a small form and log what it submits, without a server anywhere.
• Write a flexbox or grid layout and drag the divider to see where it breaks.
• Query an element that does not exist and read the TypeError — it is the most common front-end error there is.
• Try semantic elements and a heading order, then check the structure reads sensibly from the markup alone.

Just the language?

The JavaScript lab runs code with no markup at all, and the Python compiler covers the other end of the stack.