Visor HTML y editor HTML online

Pega HTML, abre un archivo o edita el ejemplo. La vista previa se actualiza mientras escribes y se ejecuta en un sandbox, así que el código no puede tocar esta página.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Entrada para el evento</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f4f4f8; margin: 0; padding: 32px; }
    .ticket { max-width: 340px; margin: 0 auto; background: #fff; border-radius: 16px;
              padding: 24px; box-shadow: 0 8px 24px rgba(20, 20, 60, .08); }
    .tag { color: #6d4aff; font-weight: 600; letter-spacing: .06em; font-size: 12px; }
    h1 { font-size: 26px; margin: 6px 0 4px; color: #16142b; }
    p { color: #55546a; margin: 0 0 16px; }
    .row { display: flex; justify-content: space-between; border-top: 1px dashed #d7d6e3;
           padding-top: 14px; font-size: 14px; color: #3c3b4f; }
    button { margin-top: 18px; width: 100%; border: 0; border-radius: 10px; padding: 12px;
             background: #6d4aff; color: #fff; font-size: 15px; cursor: pointer; }
    @media (min-width: 700px) { .ticket { max-width: 520px; } h1 { font-size: 32px; } }
  </style>
</head>
<body>
  <div class="ticket">
    <div class="tag">MEETUP FRONT-END</div>
    <h1>CSS Grid en la práctica</h1>
    <p>Jueves a las 19:00, sala 2. Trae el portátil.</p>
    <div class="row"><span>Asiento</span><strong>B-14</strong></div>
    <button onclick="this.textContent = 'Añadido al calendario'">Añadir al calendario</button>
  </div>
</body>
</html>

Cómo usar el visor HTML

Pega tu código en el editor o pulsa Abrir archivo para cargar un archivo .html de tu dispositivo.
Mira la vista previa de la derecha. Cambia entre Móvil (390px), Tablet (768px) y Escritorio para revisar la maquetación en cada ancho.
Edita hasta que quede bien y pulsa Descargar .html para guardar el resultado.

Desactiva Actualizar al escribir si trabajas con una página grande o con scripts que solo deben ejecutarse una vez; así la vista previa solo se refresca cuando pulsas Ejecutar.

Para qué se usa

Revisar un fragmento antes de pegarlo en un proyecto. El código de un chatbot, de una respuesta en un foro o de un compañero se ve aquí primero, sin tocar tu repositorio.
Leer un adjunto HTML en el móvil. Los clientes de correo suelen mostrar los .html como texto plano. Abre el archivo aquí y lo verás como una página.
Probar una maquetación responsive. Los botones Móvil y Tablet ajustan la vista previa a anchos reales de dispositivo, así que las media queries y los breakpoints de Tailwind cambian igual que en el dispositivo.

Qué permite el sandbox

La vista previa es un iframe con sandbox="allow-scripts" y nada más. Tu HTML, CSS y JavaScript se ejecutan, y los recursos externos como Google Fonts o el script CDN de Tailwind cargan con normalidad. El marco recibe un origen opaco, así que no puede leer cookies ni almacenamiento de img2html.com, ni enviar formularios, abrir ventanas emergentes o cambiar de página en esta pestaña. Lo que saques con console.log aparece en las herramientas para desarrolladores de tu navegador.

Preguntas sobre el visor HTML

¿Se sube mi HTML a algún sitio?

No. El código se queda en esta pestaña del navegador. La vista previa se construye a partir de una cadena local (el srcdoc de un iframe), así que no se envía nada a IMG2HTML ni a nadie más.

¿Se ejecuta JavaScript en la vista previa?

Sí, dentro de un iframe aislado con un origen único y opaco. Los scripts pueden modificar la vista previa, pero no pueden leer esta página, sus cookies ni su almacenamiento. Los formularios, las ventanas emergentes y la navegación de la página principal están bloqueados.

¿Por qué no salen mis imágenes o mis archivos CSS?

Las rutas relativas como images/logo.png o style.css no tienen contra qué resolverse cuando pegas código o abres un solo archivo. Usa URLs absolutas (https://...) o mete el CSS dentro de una etiqueta <style>.

¿Puedo abrir un archivo .html desde mi ordenador o mi móvil?

Sí. Pulsa Abrir archivo, elige el .html o .htm y se carga en el editor y en la vista previa. También es la forma más rápida de leer en el móvil un adjunto HTML de un correo.

¿Cómo guardo mis cambios?

Descargar .html guarda el código actual en un archivo. No se guarda nada entre visitas, así que descárgalo antes de cerrar la pestaña.