🖼 Vista Previa de HTML

Pega HTML y se renderiza al instante en un iframe protegido. Ideal para maquetas de HTML email, compatibilidad Outlook y ancho de dispositivo.

100% Gratis Sin registro Solo navegador 5 idiomas Modo oscuro

🔒 Privacidad y seguridad

・Se ejecuta en un iframe local protegido (sandbox=allow-same-origin)
・Las etiquetas script NO se ejecutan (sandbox)
・Tu HTML nunca se envia a un servidor
・Sin librerias externas · JS puro

📝 Entrada HTML

📁 Archivos

0 caracteres

👁 Vista previa

Fondo:

📖 Dónde se suele tropezar

Dibuja el HTML pegado en un iframe aislado mientras escribes, con anchos y fondos conmutables. <script> no se ejecuta y el HTML nunca se sube. Lo que ves aquí es sólo cómo lo pintaría un navegador moderno: si el destino es el correo HTML, parte de la base de que esta vista previa y la bandeja de entrada son dos cosas distintas, porque cada cliente de correo tiene su propia cadena de renderizado y reescribe el HTML antes de mostrarlo.

Caso	Qué ocurre	Qué hacer
Aquí se ve bien y sólo se rompe en Outlook	Outlook para escritorio en Windows renderiza el HTML con el motor de Word, no con uno de navegador. La consecuencia es que `float`, `position`, `max-width`, `background-image`, las esquinas redondeadas y las sombras se ignoran en bloque. Un diseño moderno a base de `<div>` se derrumbará casi con seguridad en una sola columna, y ninguna vista previa de aquí puede reproducirlo. Una parte considerable del mundo sigue abriendo el correo por esa vía.	Construye el HTML de correo con `<table>` anidadas y fija los anchos con el atributo `width`, no con CSS. Parece marcado de 2005 y sigue siendo el único enfoque fiable. 600px es el ancho total estándar de facto. Si de verdad necesitas una imagen de fondo, añade VML dentro de un condicional `<!--[if mso]>`. Confirma siempre en clientes reales: enviártelo y abrirlo en Outlook, Gmail e iOS Mail atrapa casi todas las roturas graves.
Las clases no hacen nada o desaparece toda la etiqueta style	Muchos clientes eliminan el `<head>` entero y con él tu `<style>` de lo que han recibido. Incrustan sólo el cuerpo en una página propia, así que nada del head sobrevive. Gmail conserva una parte, pero el comportamiento cambia según cliente y versión, de modo que funcione en la web y no en la aplicación móvil es de lo más corriente. Esta vista previa interpreta `<style>` con normalidad, así que aquí la diferencia es invisible.	Pon todos los estilos en línea, en atributos `style=`. Hacerlo a mano no es viable, así que mete un inliner como Premailer o juice en la compilación: expande el CSS que escribiste en `<style>` sobre cada elemento. Eso sí, las media queries y las pseudoclases no pueden ponerse en línea, de modo que resuelve la adaptabilidad no bifurcando por ancho sino construyendo algo que no pueda romperse a ningún ancho: una sola columna, imágenes al `width:100%` y texto de 14px o más.
Las imágenes no aparecen	Si en la vista previa no sale nada, casi siempre es una ruta relativa: `./img/logo.png` no tiene página base contra la que resolverse dentro del iframe. En el correo real, en cambio, ni siquiera una URL absoluta suele mostrarse al principio: Gmail y Outlook bloquean las imágenes externas por defecto y sólo las cargan cuando la persona pulsa para mostrarlas. Dicho de otro modo, lo primero que ven muchos destinatarios es tu correo sin las imágenes.	En la vista previa, usa una URL absoluta o un data URI. En producción, que el mensaje siga funcionando con las imágenes bloqueadas es en la práctica un requisito de diseño: escribe siempre el `alt` y pon un `bgcolor` de color parecido detrás de logotipos y botones para que el texto se lea sin ellas. Convertir todo el mensaje en una sola imagen es la peor opción posible: bloqueada, el contenido desaparece por completo y además sube tu puntuación de spam. Incrustar como data URI tampoco es una salida, porque Gmail no lo admite.

Los presets de ancho sólo cambian el ancho de la ventana; no emulan un dispositivo. El modo oscuro de iOS Mail y Gmail invierte automáticamente los colores del HTML que recibe: por eso un correo diseñado con texto oscuro sobre blanco llega como texto pálido sobre fondo oscuro, con un rectángulo blanco alrededor del logotipo (un PNG transparente lo evita). En cuanto a seguridad: sandbox detiene los scripts, pero no vuelve seguro el HTML pegado. Sólo con CSS se puede montar una pantalla de acceso falsa muy convincente, y <a href> sigue funcionando. Cuando previsualices HTML de origen desconocido, no pulses los enlaces que contenga: si lo que quieres es comprobar el aspecto, no tienes motivo para visitar los destinos.

📖 Cómo usar

1

Pegar HTML

Pega en el area izquierda o carga un .html.
2

Selecciona ancho

Elige Escritorio / Tableta / Email 600 / Movil 375.
3

Cambia fondo

Blanco / oscuro / damas. Email suele usar blanco.

❓ Preguntas frecuentes

Se ejecutan los scripts?

No. El sandbox bloquea scripts.

Puedo previsualizar HTML email?

Si. Usa Email 600 + fondo blanco. Prueba en clientes reales para QA final.

Se envia el HTML al servidor?

No. Se renderiza en un iframe local.

🔗 Herramientas relacionadas

🐛 ¿Encontró un problema con esta herramienta?

Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.