Does the live preview execute my code?

Yes, in a sandboxed iframe built with srcdoc. Scripts run in the preview, isolated from the parent page.

Why is HTML in Code Playgrounds?

It uses the same full-width editor-first layout as JS, TS, Dart and Ruby, with a live preview and console below the combined HTML document.

When should I use the JavaScript Playground instead?

When you want console.log output from a script without a page. Use this editor when you need HTML and CSS with a live DOM.

No. Markup stays in your browser and localStorage.

HTML Editor

Write HTML, CSS, and JavaScript with live preview

HTML Code

Auto-run

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 2rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
    }
    .card {
      background: white;
      padding: 2rem;
      border-radius: 1rem;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }
    h1 {
      color: #333;
      margin-bottom: 1rem;
    }
    .btn {
      background: #667eea;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      font-weight: 600;
    }
    .btn:hover {
      background: #5568d3;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello, World!</h1>
    <p>This is a live HTML editor with real-time preview.</p>
    <p>Start editing the code on the left and see changes instantly!</p>
    <br>
    <button class="btn" onclick="alert('Button clicked!')">
      Click Me
    </button>
  </div>

Templates

Tips

Edit HTML, CSS, and JavaScript in real-time
Preview updates automatically (toggle auto-run to manual)
Console output captured from iframe (click Console to expand)
Expand button for full-screen preview mode
Download your HTML as an index.html file

Live Preview

Console

About this tool

Write HTML, CSS and JavaScript and preview instantly in a sandbox. Free live HTML editor, no signup. HTML Editor runs in the browser on DevTools. There is no signup, and your input stays on this device unless the tool explicitly performs a live network lookup.

What this tool does not do

HTML Editor is a free in-browser utility, not a hosted API. It does not keep server-side history and is not a substitute for production verification in your own stack.

How do I use this tool?

How do I use HTML Editor?
Open HTML Editor, enter or paste your input, and copy the result. The page works without an account.

HTML Editor

HTML Code

Templates

Tips

Live Preview

About this tool

What this tool does not do

How do I use this tool?

How do I use HTML Editor?

Building Clean, Accessible HTML Tables

Dart Playground

JavaScript Playground

Ruby Playground

TypeScript Playground

HTML Code

Templates

Tips

Live Preview

About this tool

What this tool does not do

How do I use this tool?

How do I use HTML Editor?

Related guides

Building Clean, Accessible HTML Tables

Related tools

Dart Playground

JavaScript Playground

Ruby Playground

TypeScript Playground