¿Qué es el Visor HTML?
¿Necesitas ver cómo se ve tu HTML sin levantar un servidor? Eso es exactamente lo que hace esta herramienta. El Visor HTML toma tu HTML (HyperText Markup Language) y lo renderiza en vivo en un panel de vista previa junto a tu código.
Ya sea que estés prototipando una página de destino, depurando una plantilla de correo electrónico, o simplemente verificando si tu marcado es correcto, esta herramienta te da retroalimentación visual instantánea.
Todo se ejecuta en tu navegador. Tu HTML nunca toca nuestros servidores. Es rápido, gratuito y privado.
Cómo Usar el Visor HTML
Sigue estos pasos para previsualizar y trabajar con tu HTML.
Pega tu HTML o Carga un Ejemplo
Pega tu HTML en el editor izquierdo. Puede ser una página completa con etiquetas <html>, <head> y <body>, o solo un fragmento. Haz clic en Ejemplo para cargar HTML de muestra.
<div style="font-family: Arial, sans-serif; padding: 20px;">
<h1 style="color: #333;">Hola Mundo</h1>
<p>Esta es una <strong>página HTML de ejemplo</strong>.</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</div>La vista previa se actualiza automáticamente mientras escribes.
Ve la Vista Previa en Vivo
El panel derecho renderiza tu HTML instantáneamente. Verás exactamente cómo el navegador interpreta tu marcado — estilos, diseño, imágenes y todo lo demás.
Ajusta e Itera
Edita tu HTML en el panel izquierdo y observa cómo se actualiza la vista previa en tiempo real. Arrastra el divisor para ajustar los tamaños de los paneles.
Comparte tu Trabajo
Haz clic en Compartir para generar un enlace compartible de tu HTML.
Cuándo Usarías Esto
Prototipado de Fragmentos UI
¿Quieres probar rápidamente un estilo de botón, un diseño de tarjeta o una barra de navegación? Pega tu HTML aquí y mira cómo se renderiza al instante. Mucho más rápido que crear un archivo nuevo.
Depuración de Plantillas de Correo
El HTML para correos es notoriamente complicado — estilos inline, diseños con tablas, renderizado caprichoso. Pega tu plantilla aquí para ver cómo se ve antes de enviarla.
Aprendiendo HTML
Si estás aprendiendo HTML, esta herramienta es perfecta para experimentar. Escribe etiquetas, ve qué hacen. Prueba diferentes atributos, verifica el resultado al instante.
Revisando Fragmentos de Código
¿Alguien te envió un fragmento HTML por Slack o en un comentario de PR? Pégalo aquí para ver cómo se ve realmente.
Preguntas Frecuentes
¿Se almacena mi HTML en algún lugar?
No. Todo se ejecuta completamente en tu navegador usando JavaScript. Tu HTML nunca sale de tu computadora a menos que hagas clic en "Compartir".
¿Soporta CSS y JavaScript?
Sí. Los estilos inline y las etiquetas <style> se renderizan correctamente. JavaScript en etiquetas <script> se ejecuta dentro del iframe de vista previa aislado.
¿Es segura la vista previa?
La vista previa se renderiza dentro de un iframe aislado, que lo separa de la página principal.
¿Puedo usar documentos HTML completos?
Por supuesto. Puedes pegar un documento HTML completo con <!DOCTYPE html>, <html>, <head> y <body>, o solo un fragmento.
¿Cómo funciona la vista previa en vivo?
A medida que escribes en el editor, la herramienta actualiza el iframe de vista previa con tu contenido HTML después de un breve retraso de 300ms.
¿Puedo redimensionar los paneles?
Sí. Arrastra la barra divisora entre los dos paneles para ajustar sus tamaños. En móvil, los paneles se apilan verticalmente.
Otras Herramientas HTML y de Marcado
Este visor es ideal para previsualizar HTML, pero a veces necesitas otras cosas: