En este artículo
¿Qué es la vista previa HTML en vivo?
La vista previa HTML en vivo es un editor de código en el navegador que renderiza su HTML, CSS y JavaScript en tiempo real. Mientras escribe, el panel de salida se actualiza al instante, brindándole retroalimentación visual inmediata sin cambiar entre un editor y una pestaña del navegador.
La vista previa se ejecuta dentro de un iframe sandbox con estrictas restricciones de seguridad. Esto significa que su código se ejecuta en un entorno aislado — no puede acceder a la página principal, cookies ni almacenamiento local. Obtiene un espacio seguro para experimentar sin ningún riesgo para la aplicación host.
Cómo funciona la vista previa en vivo
El editor combina su HTML, CSS y JavaScript en un solo documento y lo inyecta en un iframe sandbox. Las actualizaciones se temporalizan para mantener la vista previa receptiva sin sobrecargar el navegador.
- Iframe sandbox — la vista previa funciona solo con sandbox="allow-scripts", bloqueando el acceso a la página principal, cookies, formularios y navegación para aislamiento total
- Pestañas de código separadas — escriba HTML, CSS y JavaScript en paneles dedicados, cada uno con edición apropiada para la sintaxis, combinados automáticamente al renderizar
- Actualizaciones temporizadas — los cambios se aplican después de una breve pausa al escribir, manteniendo la vista previa fluida y evitando re-renderizados constantes con cada pulsación de tecla
Pruébalo gratis — sin registro
Probar vista previa HTML en vivo →Cuándo usar la vista previa HTML en vivo
La vista previa en vivo es ideal cuando necesita retroalimentación visual rápida sobre HTML y CSS sin un entorno de desarrollo completo.
- Prototipado rápido — pruebe ideas de diseño, esquemas de colores y diseños de componentes al instante sin configurar herramientas de compilación ni servidor de desarrollo
- Aprendizaje de HTML y CSS — los principiantes pueden ver el efecto de cada etiqueta y propiedad inmediatamente, haciendo el ciclo de aprendizaje mucho más rápido
- Pruebas de plantillas de email — previsualice diseños de email HTML con estilos inline para verificar la renderización antes de enviar, ya que los clientes de email tienen soporte CSS limitado
Preguntas frecuentes
¿Es segura la vista previa? ¿Puede mi código acceder a la página principal?
La vista previa está completamente en sandbox. El iframe usa sandbox="allow-scripts" sin allow-same-origin, lo que significa que su código puede ejecutar JavaScript pero no puede acceder al DOM de la página principal, cookies, localStorage ni datos de sesión. Es el mismo modelo de seguridad usado por plataformas como CodePen y JSFiddle.
¿Por qué no se incluye allow-same-origin en el sandbox?
Incluir allow-same-origin con allow-scripts permitiría al código previsualizado escapar completamente del sandbox — podría acceder a las cookies de la página principal, modificar el DOM o leer datos sensibles. Omitirlo garantiza aislamiento completo. La contrapartida es que localStorage y sessionStorage no están disponibles dentro de la vista previa, pero es una decisión de seguridad deliberada.
¿Puedo cargar bibliotecas externas de CSS o JavaScript en la vista previa?
Sí. Puede agregar etiquetas link y script que referencien URLs de CDN (ej. Bootstrap, Tailwind, jQuery) en su panel HTML. El iframe sandbox permite solicitudes de red para cargar recursos externos. Solo tenga en cuenta que los scripts externos también funcionan bajo las restricciones del sandbox — tampoco pueden acceder a la página principal.