Sandbox HTML

HTML Live Playground

Pega HTML, pulsa play y previsualiza el resultado al instante en un canvas live optimizado para smartphone.

HTML

Editor HTML

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

Vista móvil en vivo

Actualización live activa

La vista previa usa un iframe aislado para enseñarte el resultado de forma segura y simular un móvil.

Cómo usar HTML Live Playground

HTML Live Playground es un tool online que te ayuda a Pega HTML, pulsa play y mira el resultado en vivo en un espacio pensado para móvil. Todo vive en una página dedicada, así que puedes abrirlo de nuevo o compartirlo con un enlace directo.

Esta página está enlazada desde el índice Ver el índice completo de tools y desde herramientas relacionadas, lo que facilita el acceso tanto para usuarios como para crawlers. Si necesitas un flujo rápido, puedes usarlo sin registro.

La página mantiene contenido legible, URL estable y enlaces internos hacia otros tools del sitio. Esa es la base correcta para mejorar el descubrimiento y favorecer la indexación orgánica con el tiempo.

HTML Live Playground

Editor HTML

Vista móvil en vivo

Cómo usar HTML Live Playground

FAQ