Cómo funciona
el visor HTML.
Edita HTML y ve el resultado en el navegador. Así funcionan la vista previa, los borradores y los enlaces compartidos.
El visor HTML reúne el editor y la vista previa en un mismo espacio. Abre un archivo, pega un fragmento, revisa la consola y descarga o comparte el código.
¿Qué es un visor HTML?
Un visor HTML muestra HTML como una página web. Este se actualiza mientras escribes para que puedas revisar un fragmento sin crear un proyecto. Admite CSS en <style> y JavaScript en <script>; JSX y los lenguajes de servidor deben convertirse primero en HTML.
Cómo funciona un visor HTML
El documento se renderiza en un iframe aislado. Puede ejecutar scripts, pero no leer la página principal ni redirigir su pestaña. Las imágenes, los estilos, los scripts y las solicitudes externas pueden contactar con sus propios servidores.
El renderizado no nos envía el código fuente. Las solicitudes del documento siguen las reglas del navegador, como CORS. Los enlaces contienen HTML comprimido y su longitud depende del documento; si son muy largos, conviene compartir un archivo.
Visor HTML frente a CodePen, JSFiddle o tu archivo local
CodePen y JSFiddle ofrecen entornos de prueba alojados. Compara sus opciones para guardar proyectos y separar el código si necesitas más que un documento HTML.
Abrir un archivo HTML local es práctico si ya tienes el archivo. Las imágenes y los estilos relativos deben estar en las rutas indicadas. Para proyectos con compilación o API, utiliza su servidor de desarrollo.
HTML Viewer Cat sirve para editar y previsualizar rápidamente. No requiere cuenta. El borrador local conserva el trabajo en este navegador; la descarga HTML permite guardar una copia en otro lugar.
El espacio de trabajo
El editor y la vista previa ocupan la ventana. Abre la consola para leer mensajes y errores, o elige un ejemplo en la barra inferior.
Edición y pruebas
Activa la vista en vivo para ver los cambios mientras escribes, o pónla en pausa y pulsa Ejecutar cuando el script esté listo. En pantallas anchas, los marcos prueban distintos anchos; no emulan otro navegador ni un cliente de correo.
El editor incluye resaltado de sintaxis, búsqueda, plegado de código y Deshacer. Formatear usa Prettier. Arrastra el separador para ajustar los paneles. Los enlaces contienen la fuente HTML; no guardan valores de formularios ni el estado JavaScript de la vista previa.
Uso y almacenamiento
- Gratis y sin cuenta.
- El renderizado ocurre en tu navegador; los recursos externos pueden hacer solicitudes.
- Los borradores y las preferencias se guardan localmente. La analítica no usa cookies por defecto; aceptar el aviso habilita una cookie de analítica.
- Los archivos importados tienen un límite de 10 MB. Descarga el HTML para conservar una copia aparte.
Creado y mantenido por Axel, desarrollador independiente en Noruega.