HTML Preview

Live-render markup in a safe sandbox

HTML Valid

<!doctype html>
<html>
  <head>
    <style>
      body { font-family: system-ui, sans-serif; padding: 2rem; color: #17171c; }
      h1 { color: #5b34d6; margin: 0 0 .5rem; }
      .card { border: 1px solid #e8e8ee; border-radius: 12px; padding: 1rem 1.25rem; margin-top: 1rem; }
    </style>
  </head>
  <body>
    <h1>Hello, world 👋</h1>
    <p>Edit the HTML on the left — this preview updates live.</p>
    <div class="card">Try changing this text or the styles above.</div>
    <script>console.log("Preview loaded ✓");</script>
  </body>
</html>

16 lines · 549 chars · 555 B

Preview

Examples

Live preview

Input

<h1>Hello 👋</h1>
<p>Edit on the left, see it render instantly.</p>

Output

A rendered heading and paragraph in the preview pane.

Beautify messy markup

Input

<ul><li>One</li><li>Two</li></ul>

Output

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

Frequently asked questions

Is the preview safe to run?

Yes. Your HTML renders inside a sandboxed iframe with no access to this page, your cookies or storage. Nothing is uploaded — it all runs locally in your browser.

Does JavaScript in my HTML run?

Yes — the sandbox allows scripts so interactive demos work, but they're isolated to the preview frame and can't touch the rest of the page.

What does Beautify do?

It re-indents your markup with consistent 2-space nesting, putting tags on their own lines. Contents of <pre>, <textarea>, <script> and <style> are preserved as-is.

Related tools

Popular

JSON Formatter

Beautify, minify & validate JSON

Open

JSON Compare

Diff two JSON objects side by side

Open

JWT Decoder

Inspect header, payload & signature

Open

Base64 Tool

Encode & decode Base64 — text and files

Open

Browse all tools