Editor HTML online con vista previa en vivo — Numio

Escribe HTML, CSS y JavaScript y mira la vista previa mientras tecleas. Los mensajes de consola aparecen debajo. Gratis y en tu navegador.

Funciona en tu navegador · Sin registro

Código (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counter</title>
  <style>
    body { font-family: system-ui, sans-serif; display: grid; place-items: center; min-height: 90vh; margin: 0; background: #f5f7fb; }
    .card { padding: 24px 32px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); text-align: center; }
    button { font: inherit; padding: 10px 20px; border: 0; border-radius: 999px; background: #2563eb; color: #fff; cursor: pointer; }
    button:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello, HTML!</h1>
    <p>Clicked <strong id="count">0</strong> times</p>
    <button id="button" type="button">Click me</button>
  </div>
  <script>
    let count = 0;
    document.getElementById("button").addEventListener("click", () => {
      count += 1;
      document.getElementById("count").textContent = count;
      console.log("Button clicked", count);
    });
    console.log("Page ready");
  </script>
</body>
</html>

Ctrl/⌘ + Enter para ejecutar

Vista previa

Actualizar la vista previa automáticamente

Consola

Todavía no hay salida. Pulsa Ejecutar para ver aquí el resultado.

El código se ejecuta en tu navegador; no se sube a ningún servidor.

Cómo usarla

Escribe HTML, con el CSS en <style> y el JavaScript en <script>.
La vista previa se actualiza sola mientras escribes.
Revisa los mensajes de consola debajo de la vista previa.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 16px; }
  button { padding: 8px 16px; }
</style>
</head>
<body>
  <h1>¡Hola!</h1>
  <button id="btn">Haz clic</button>
  <p id="out"></p>
  <script>
    let n = 0;
    document.getElementById("btn").onclick = () => {
      n++;
      document.getElementById("out").textContent = "Clics: " + n;
      console.log("click", n);
    };
  </script>
</body>
</html>

Detalles y limitaciones

La vista previa se ejecuta en un marco aislado (sandbox). Sus scripts no pueden acceder a esta página ni a sus cookies.

¿Prefieres actualizar a mano? Desactiva la actualización automática y pulsa Ejecutar.

FAQ

¿Puedo usar CSS y JavaScript?

Sí. Pon el CSS en una etiqueta <style> y el JavaScript en una etiqueta <script> dentro del mismo documento.

¿Dónde aparece la salida de console.log?

Los mensajes de consola de la vista previa se muestran debajo de ella.

¿Se sube mi código?

No. La vista previa se genera en tu navegador y no se envía nada a ningún servidor.

Referencias de formatos

Página de la herramienta actualizada: 2026-10-22