Real-Time HTML Playground

Why an HTML playground helps you learn

Reading about a tag or a CSS property is one thing; changing it and watching the page react is how it sticks. This HTML playground gives you an editor and a live rendering side by side, with nothing to install and no files to manage, so you can test a guess in seconds. It runs the same engine as the HTML Viewer, which is the better choice when you simply want to look at an existing file, and the Online HTML Editor, which is organised around producing a finished document. Use this page when the goal is to experiment and understand.

What "real time" means in this playground

The preview does not redraw in the middle of a word. It waits until you have stopped typing for about 350 milliseconds, then renders the whole document again. That short pause keeps the preview from flashing broken, half-typed tags. Two consequences are worth knowing early:

• Every refresh is a fresh page. Scripts run again from the top, so counters, toggled classes and text typed into inputs reset after each edit.
• You can pause the live mode. Untick Auto update to stop automatic refreshes, then press Run or Ctrl/⌘ + Enter whenever you want to see the result.

Exercises for beginners

Start from this small document and try each change in turn. Predict what will happen before the preview updates, then compare.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    .box { background: #dbeafe; padding: 10px; margin: 10px; border: 2px solid #1d4ed8; }
  </style>
</head>
<body>
  <h1>My practice page</h1>
  <div class="box">First box</div>
  <div class="box">Second box</div>
  <button id="more">Add a box</button>
  <script>
    document.getElementById('more').addEventListener('click', () => {
      const b = document.createElement('div');
      b.className = 'box';
      b.textContent = 'New box';
      document.body.appendChild(b);
    });
  </script>
</body>
</html>

1. Headings: change h1 to h4 and notice the default size and spacing that browsers apply.
2. Block and inline: change one div to a span. Padding still shows, but the element no longer takes the full width.
3. Box model: add width: 200px to .box, then add box-sizing: border-box and watch the total width shrink by the padding and border.
4. Flexbox: wrap both boxes in a div with display: flex; gap: 8px, then try justify-content: space-between.
5. Events: click the button a few times, then edit any text in the code. The added boxes disappear because the page was rebuilt.
6. Forms: add <label for="n">Name</label> <input id="n"> and click the label text; the input receives focus because for matches id.

Running JavaScript in the playground

The preview is an <iframe> with the sandbox flags allow-scripts, allow-modals, allow-popups and allow-forms, but without same-origin access. In practice:

• alert(), confirm() and prompt() work, which is handy for first experiments with variables and input.
• localStorage, sessionStorage and cookies throw a SecurityError, because the frame has an opaque origin.
• Submitting a form navigates the preview frame away from your page. Listen for the submit event and call event.preventDefault() while practising form handling.
• A script placed above the elements it looks for finds null. Put scripts at the end of body, as in the example.

Messages from console.log and error details appear in your browser's developer tools, not on the page.

Surprises beginners often meet

• Missing doctype: the preview renders in standards mode even without <!DOCTYPE html>, because the HTML standard treats srcdoc frames that way. The same file opened from disk would fall back to quirks mode, so always keep the doctype in files you save.
• Fragments are fine: a single paragraph renders without html, head or body; the browser adds them for you.
• Images from your computer: a path like photo.jpg cannot load, because the playground has no access to your files. Use an image with a full https address.

Where to go next

For JavaScript that does not need a page at all, the JavaScript Tester shows logs and errors directly. To explore layout properties visually, try the CSS Flexbox Generator and the CSS Grid Generator, then paste the generated CSS back here and see how it behaves with your own markup.