Softonic

Visor de HTML Renderizado

Paso 1 / 2
Siguiente

Pega cualquier HTML (una plantilla de correo, un fragmento de página extraído, un ejemplo de la documentación) y pulsa Renderizar para verlo dibujado en un iframe aislado. El marco se ejecuta con el sandbox más estricto del navegador, así que los scripts no se ejecutan, los formularios no pueden enviarse y el marcado no puede navegar ni tocar la página que lo rodea. Es la forma más rápida de responder “¿cómo se ve realmente este marcado?” sin montar un servidor de pruebas.

Cómo previsualizar HTML

  1. 1

    Pega tu HTML

    Suelta un documento completo o un fragmento suelto en el cuadro de origen. Lo que pegues es exactamente lo que se renderiza, tal cual.

  2. 2

    Pulsa Renderizar

    El visor escribe tu HTML en un iframe aislado y muestra el resultado en la propia página.

  3. 3

    Lee la vista previa

    El marco dibuja tu marcado como lo haría un navegador: encabezados, tablas, listas, estilos en línea y SVG aparecen todos.

  4. 4

    Ajusta y vuelve a renderizar

    Retoca el origen y renderiza tantas veces como quieras para comparar cómo se ve cada versión.

Por qué el marco está aislado

El HTML pegado puede contener cualquier cosa: etiquetas <script>, un truco <img onerror="...">, un formulario que envía datos a algún sitio o un <iframe> que carga otra web. Para evitar que nada de eso toque la página, la vista previa se escribe en un <iframe sandbox> con el atributo sandbox vacío, el ajuste más restrictivo que existe. En ese modo, el navegador bloquea a la vez la ejecución de scripts, el envío de formularios, las ventanas emergentes, la navegación de nivel superior y el acceso al mismo origen. Ves el resultado visual sin dar ningún poder al marcado.

Como los scripts nunca se ejecutan, todo lo que dependa de JavaScript (un componente web que se hidrata al cargar, un gráfico que se dibuja solo, un framework que se monta en un <div> vacío) muestra solo su marcado estático, no su resultado con scripts. Es un compromiso deliberado: una vista previa segura y predecible antes que una interactiva.

Qué renderiza bien el visor

Tipo de contenido Notas
HTML de correo Los diseños basados en tablas y los estilos en línea se renderizan como los dibujan la mayoría de los clientes
Cuerpo de una entrada de blog Encabezados, listas, citas e imágenes se pintan sin ningún script
Fragmento extraído Muestra si el marcado que capturaste es lo bastante completo para sostenerse solo
SVG en línea Se dibuja a cualquier tamaño, lo que lo hace útil para revisar un icono
Marcado de componente estático El marcado se renderiza; el comportamiento en JavaScript no

Buenos usos para esta herramienta

  • QA de plantillas de correo. Pega la exportación de tu editor de correos y observa el diseño sin enviarte un mensaje de prueba.
  • Comprobaciones rápidas de datos extraídos. Capturaste algo de innerHTML de una página: ¿se vuelve a renderizar en algo con sentido? Si no, el fragmento probablemente esté incompleto.
  • Revisión de Markdown a HTML. Pasa un texto por un convertidor (la herramienta de HTML a Markdown lo convierte de ida y vuelta) y previsualiza aquí el HTML resultante.
  • Aprender y enseñar. Pega un ejemplo de la documentación y observa exactamente cómo lo distribuye un navegador.

Cosas a tener en cuenta

  • URLs relativas. Las imágenes y hojas de estilo referenciadas por una ruta relativa como /assets/logo.png no tienen ningún servidor contra el que resolverse, así que no se cargarán. Usa una URL absoluta https:// o un URI data: si necesitas que aparezca una imagen.
  • Recursos externos. Las fuentes, hojas de estilo e imágenes cargadas desde otros sitios dependen de que esos sitios lo permitan; algunos envían encabezados que bloquean la carga dentro de un marco.
  • Sin scripts. Si tu marcado solo cobra vida con JavaScript, la vista previa muestra su estado previo a los scripts. Es lo esperado, no un fallo.

Preguntas frecuentes

Sí. La vista previa se ejecuta en un iframe totalmente aislado sin permisos, así que los scripts no pueden ejecutarse y el marcado no puede alcanzar la página que lo rodea. Incluso el HTML malicioso solo puede dibujarse a sí mismo dentro del marco.

No. El sandbox bloquea por completo la ejecución de scripts, así que las etiquetas <script> y los controladores de eventos en línea se ignoran. Ves el marcado estático, que es precisamente lo que hace segura la vista previa.

Una ruta relativa no tiene nada contra lo que resolverse, y algunos hosts envían encabezados que impiden cargar sus imágenes dentro de un marco. Usa una URL absoluta https:// o incrusta la imagen como un URI data:.

Sí. Pega el documento entero (doctype, <head>, <body> y todo) y se renderiza tal cual. Un fragmento suelto también funciona; el navegador rellena el resto.

Esta herramienta renderiza el HTML que pegas como texto; nunca obtiene una URL. Tú controlas exactamente lo que se renderiza, algo útil para plantillas de correo, fragmentos extraídos y depuración rápida.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Generador de Formularios CSS

Genera el CSS de un formulario completo con estilo: una cuadrícula de formulario, etiquetas, entradas, áreas de texto, selectores y estados de foco claros. Elige el color de acento, el radio de las esquinas y la separación, y copia el código.

Generador de EditorConfig

Crea un .editorconfig con tus reglas de indentación, fin de línea y charset, y añade la sección correcta para cada lenguaje de tu repositorio: Python, Go, YAML, Makefile y más.

Herramienta disponible en otros idiomas