Visor HTML

Escribe o pega HTML y ve el renderizado al instante en el navegador.

Disposición:Los scripts están en sandbox y no pueden ejecutarse.

Código HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

Vista previa

Acerca de esta herramienta

El visor HTML te permite escribir o pegar código HTML y ver inmediatamente cómo se renderiza en el navegador. La vista previa se muestra en un iframe aislado con scripts desactivados, por lo que puedes previsualizar HTML de fuentes no confiables de forma segura.

Admite documentos HTML completos (con head, CSS en línea y bloques style) así como fragmentos HTML. Todo el procesamiento ocurre localmente en tu navegador.

Cómo usar

Escribe o pega tu HTML en el editor de código de la izquierda.
Haz clic en Renderizar para actualizar la vista previa.
Cambia al diseño Apilado para un área de vista previa más alta.
Usa Tab para indentar líneas en el editor.

Casos de uso

Los desarrolladores frontend prueban fragmentos HTML rápidamente. Los desarrolladores de email previsalizan plantillas HTML. Los estudiantes que aprenden HTML experimentan con etiquetas y ven resultados al instante. Los revisores de código verifican la salida renderizada visualmente.

Preguntas frecuentes

¿Por qué están desactivados los scripts? — El iframe de vista previa usa sandbox="allow-same-origin" para bloquear la ejecución de JavaScript, permitiendo previsualizar HTML de fuentes desconocidas de forma segura.
¿Puedo previsualizar CSS? — Sí. Incluye etiquetas style en tu HTML o usa estilos en línea. Las hojas de estilo externas de otros orígenes pueden ser bloqueadas por CSP.
¿Admite documentos HTML completos? — Sí. Puedes pegar un documento HTML completo incluidos los tags DOCTYPE, head y body.