HTML sandbox

HTML Live Playground

Paste HTML markup, press play, and instantly preview the result in a smartphone-friendly live canvas.

HTML

HTML editor

Auto play

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Live HTML Demo</title>
    <style>
      :root {
        color-scheme: light;
        font-family: Inter, system-ui, sans-serif;
      }

body {
        margin: 0;
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: radial-gradient(circle at top, #eef2ff, #c7d2fe 45%, #0f172a 100%);
        color: #0f172a;
      }

.card {
        width: min(92vw, 360px);
        padding: 24px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
      }

h1 {
        margin: 0 0 12px;
        font-size: 1.75rem;
      }

p {
        margin: 0 0 16px;
        line-height: 1.6;
      }

button {
        border: 0;
        border-radius: 999px;
        padding: 12px 16px;
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        color: white;
        font: inherit;
      }
    </style>
  </head>
  <body>
    <main class="card">
      <h1>Hello mobile web ✨</h1>
      <p>Paste your HTML on the left, press play, and test ideas instantly.</p>
      <button onclick="document.body.style.background='linear-gradient(135deg,#fef3c7,#fca5a5)'">
        Tap me
      </button>
    </main>
  </body>
</html>

Preview

Live mobile preview

Live updates on

The preview uses an isolated iframe so you can test output safely while mimicking a mobile device.