HTML Live Preview Tool

HTML Editor

Edit code below, and the preview on the right updates instantly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preview</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      background: #f8fafc;
    }
    .card {
      padding: 40px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
      text-align: center;
    }
    h1 { color: #2563eb; }
    button {
      background: #2563eb;
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
    }
    button:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello</h1>
    <button onclick="alert('OK')">Button</button>
  </div>
</body>
</html>

Live Preview

FAQ

What can this HTML Live Preview tool do?

It provides a split-pane editing and preview environment. Write HTML, CSS, and JavaScript on the left, and see the rendered result instantly on the right. You can also enter fullscreen mode to simulate a real browsing experience, or open the preview in a new tab for independent debugging and sharing.

Which frontend technologies are supported?

Full HTML5, CSS3, and JavaScript (ES6+). The preview runs inside an iframe with `sandbox` attributes that allow scripts, modals, pop-ups, and forms while keeping top‑level navigation and automatic downloads restricted – safe yet interactive.

How do I enter fullscreen mode?

Click the 'Fullscreen' button in the preview panel header. The preview will expand to fill the entire browser window. Press the `Esc` key to exit fullscreen anytime.

Why does 'Open in new tab' not work?

This is usually because the browser blocks pop‑ups. Check your browser’s address bar or settings to allow pop‑ups for this site, then try again.

What security restrictions does the preview iframe have?

The iframe uses `sandbox="allow-scripts allow-modals allow-popups allow-forms"`. It permits scripts, modal dialogs, pop‑ups, and form submissions, but blocks top‑level navigation and automatic downloads, balancing functionality with safety.

Can I preview pages that load external resources (CDN libraries)?

Yes. You can reference external CDN resources (e.g., Bootstrap, Vue, React) using `<script>` or `<link>` tags, and they will load and render normally in the preview.

The preview does not update after I type. What should I do?

The tool updates the preview automatically on each keystroke. If it doesn’t, check your code for syntax errors (browser console logs errors), or click 'Clear' and paste valid HTML again.

Is my code sent to a server?

No. All code processing and rendering happen entirely in your browser. Nothing is uploaded to any server, ensuring your code privacy and security.