Pega HTML y míralo renderizado en el visor HTML: vistas de dispositivo, una consola en vivo, exportación a PNG y PDF, y enlaces que llevan el documento dentro de la propia URL. Eso es todo el sitio.

¿Qué es un visor HTML?

Un visor HTML es una herramienta que toma marcado HTML en bruto y lo renderiza como una página web viva, sin obligarte a guardar el marcado en un archivo y abrirlo en el navegador. La forma más habitual es una caja de texto de pegar y renderizar: pegas el HTML a la izquierda, el resultado aparece a la derecha y cualquier cambio actualiza la vista previa mientras escribes. Se usan sobre todo para revisar HTML generado por IA, depurar plantillas de email, comprobar qué produce un componente de React y compartir maquetas visuales por URL.

Cómo funciona un visor HTML

Los visores HTML modernos se ejecutan enteros en el navegador. El HTML que pega el usuario se escribe dentro de un elemento <iframe srcDoc="..."> de la página, lo que hace que el navegador lo renderice como si fuera un documento aparte cargado desde otro origen. El atributo sandbox del iframe limita lo que ese HTML puede hacer: normalmente se permiten los scripts, para que los componentes interactivos funcionen, pero el iframe no puede navegar la página padre ni leer sus cookies.

Como el renderizado ocurre en el cliente, el HTML de origen nunca tiene que salir del navegador. No hay subida, no hay analizador en el servidor y no hay riesgo de que quien opera el sitio lea tu código. A cambio, un visor basado en el navegador no puede renderizar nada que dependa de recursos del servidor — tus endpoints locales, por ejemplo, no son accesibles desde el iframe — y el formato de compartir por fragmento de URL se queda en unos pocos kilobytes; a partir de ahí conviene pasar el HTML a un archivo.

Visor HTML frente a CodePen, JSFiddle o tu archivo local

Cada herramienta es buena en una escala distinta. CodePen y JSFiddle son la opción correcta cuando necesitas compartir una demo completa y persistente entre varias sesiones: guardan el fragmento en su servidor, le dan una URL estable y ofrecen funciones de colaboración en los planes de pago. Esperan que inicies sesión, que asocies el fragmento a tu cuenta y que lo trates como un pequeño proyecto. El precio es que tu código vive en la infraestructura de otro, que el editor añade interfaz alrededor (colecciones, ajustes, comentarios) y que la página pesa más que una simple vista previa.

Abrir un archivo HTML directamente en el navegador es la opción más ligera para renderizar algo una sola vez, sin que intervenga ningún sitio de terceros. El precio es que antes tienes que guardar el archivo, que tu navegador puede tratarlo como un origen distinto de localhost y que no puedes compartirlo sin enviar el archivo o alojarlo en algún sitio.

Un visor HTML de pegar y renderizar se sitúa entre los dos. No hay que guardar, ni crear una cuenta, ni gestionar un archivo de proyecto: pegas, lo ves renderizado y lo compartes con un fragmento de URL si quieres. Es la herramienta a la que recurrir cuando el HTML es efímero: un fragmento salido de una IA, la vista previa de una plantilla de email, la comprobación rápida de un componente. Cuando el fragmento empieza a parecerse a un proyecto de verdad — control de versiones, colaboradores, persistencia — es el momento de pasar a CodePen o a un archivo local.

Por qué una sola herramienta

Antes eran cuatro. Junto al visor había un editor de Markdown, un visor de JSON y una página aparte de HTML a PDF; nadie llegaba buscándolos, así que se retiraron y la exportación a PDF se integró en el propio visor. Lo que queda es aquello por lo que la gente venía de verdad. Se gana su sitio: si no se puede explicar en una frase, no se publica.

Cómo funciona

Importan tres cosas: velocidad, seguridad y anchos realistas. Velocidad significa que la vista previa se actualiza mientras escribes, no al pulsar un botón. Seguridad significa que todo lo que pegas se ejecuta dentro de un iframe con sandbox, así que no puede leer tus cookies ni redirigir tu pestaña. Anchos realistas significa que puedes pasar de escritorio a tablet y a móvil con un clic, en lugar de redimensionar el navegador.

El editor es una instancia completa de CodeMirror con resaltado de sintaxis, emparejado de corchetes, números de línea y atajos de teclado. La vista previa es un iframe con sandbox y los scripts activados, para que los componentes interactivos se comporten como deben. La división entre editor y vista previa se arrastra y recuerda su posición entre visitas. Los borradores se guardan solos en localStorage, y el botón de compartir codifica tu HTML en base64 dentro de un fragmento de URL (#s=…), de modo que el enlace lleva el contenido consigo: nada toca un servidor.

Lo que no va a cambiar

Gratis. Sin registro, sin cuenta y sin muro de correo electrónico.
Se ejecuta en tu navegador. Tu HTML no sale de tu equipo salvo que compartas un enlace.
No se guarda nada en tu dispositivo salvo que lo aceptes. Si lo rechazas seguimos contando la visita, pero de forma anónima y sin cookie.
Sin acumulación de funciones. Si algo no se puede explicar en una frase, no se publica.

Creado y mantenido por Axel, desarrollador independiente en Noruega.