Developer Tool

HTML Previewer

Paste an HTML block and see it come to life instantly in a secure, isolated preview.

Private, browser-only workspace

Your code is not sent to Ai and Sons. JavaScript runs inside an isolated preview.

Loading saved draft…

HTML input

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HTML Preview</title>
    <style>
      * { box-sizing: border-box; }
      body {
        min-height: 100vh;
        margin: 0;
        display: grid;
        place-items: center;
        padding: 2rem;
        font-family: system-ui, sans-serif;
        color: #1f2937;
        background: linear-gradient(135deg, #eef2ff, #fff7ed);
      }
      .card {
        width: min(100%, 32rem);
        padding: 2rem;
        border: 1px solid #dbe3ef;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 24px 70px rgba(34, 66, 122, 0.16);
      }
      h1 { margin-top: 0; color: #22427a; }
      button {
        border: 0;
        border-radius: 999px;
        padding: 0.75rem 1.1rem;
        color: white;
        background: #e57a4b;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <main class="card">
      <p>Live HTML preview</p>
      <h1>Build something useful.</h1>
      <p>Edit this document or replace it with your own HTML block.</p>
      <button id="demo-button" type="button">Try the JavaScript</button>
    </main>
    <script>
      document.querySelector('#demo-button').addEventListener('click', (event) => {
        event.currentTarget.textContent = 'JavaScript is running';
      });
    </script>
  </body>
</html>

Paste a complete document or an HTML fragment. The preview refreshes as you type.

Live preview

Sandboxed

For safety, the preview cannot access this page, submit forms, open popups, trigger downloads, or navigate the top-level window.