Preview HTML en vivo (HTML, CSS y JS)
Edita HTML/CSS/JS y ve el resultado al instante en un iframe sandbox.
Para qué sirve un preview de HTML en el navegador
Un editor con vista previa instantánea es la forma más rápida de validar una idea visual o un snippet de código sin abrir un proyecto. Pegas el HTML que te ha pasado un compañero, le añades un par de reglas CSS, comprueba que el botón funciona con un trozo de JavaScript, y todo en una sola pestaña del navegador. Es lo mismo que hacen herramientas como CodePen, JSFiddle o JS Bin, pero sin necesidad de cuenta, sin guardar nada en servidores externos y sin dependencias de red más allá de las que tú decidas importar explícitamente.
El núcleo técnico es un iframe con el atributo srcdoc: el navegador acepta una cadena de HTML completa y renderiza ese contenido como si fuera un documento independiente, servido desde el origen virtual about:srcdoc. Combinado con sandbox="allow-scripts", conseguimos un entorno donde el JavaScript de tu snippet se ejecuta normalmente, pero el código no puede acceder a la ventana padre, leer cookies, hacer redirecciones top-level, ni romper la página principal.
Casos de uso prácticos
Plantillas de email HTML: las plantillas de email se editan a mano en HTML 4.01 con tablas anidadas y CSS inline. Tener un preview rápido a mano para iterar diseños y comprobar que las imágenes, los botones y la jerarquía tipográfica se renderizan bien ahorra muchísimo tiempo durante la fase de redacción del template.
Aprender HTML/CSS/JS: si estás siguiendo un curso online o un tutorial, copiar el ejemplo a un editor online te da el feedback inmediato que ningún PDF te ofrece. Cambiar valores, comentar líneas, ver qué pasa, es la forma más eficaz de aprender maquetación y JavaScript básico.
Demos y propuestas a cliente: cuando un diseño está en revisión, mandar un mockup vivo (incluso aunque sea un único componente) supera con creces a una captura estática. Genera tu snippet, descárgalo como un único archivo .html y envíalo por email o súbelo a un servidor estático. Funciona en cualquier navegador, sin instalación.
Reproducir bugs de Stack Overflow: probablemente el caso de uso más universal entre desarrolladores. Encuentras una respuesta interesante en SO, copias el snippet, lo pegas aquí y compruebas en 10 segundos si funciona en tu navegador antes de dedicarle tiempo a integrarlo en tu proyecto real.
Cómo se construye el documento internamente
Cuando escribes en cualquiera de las tres pestañas, internamente concatenamos los bloques en un documento HTML5 completo:
- el CSS se inyecta dentro de un
<style>en la cabecera; - el HTML se coloca dentro de
<body>; - el JavaScript se ejecuta tras el HTML envuelto en un
try/catchque captura cualquier error de runtime y lo muestra como un bloque rojo en el preview, sin romper la herramienta.
Ese documento se asigna al atributo srcDoc del iframe, que se vuelve a renderizar cada vez que el contenido cambia (con un debounce de 400 ms para no recompilar mientras escribes). Si prefieres control manual, desmarca «Actualizar al escribir» y pulsa el botón Ejecutar cuando quieras forzar el render.
Privacidad: nada sale de tu navegador
Esta herramienta no envía tu código a ningún servidor. No hay backend, no hay logs, no hay cookies asociadas al contenido del editor. Si abres la pestaña Network de DevTools mientras escribes, verás que ninguna petición HTTP se dispara como consecuencia de tus cambios. Los recursos externos que importes explícitamente (CDNs como Tailwind, Bootstrap, jQuery o cualquier <link> y <script> con URL absoluta) sí harán sus propias peticiones desde el iframe, pero eso es comportamiento normal del HTML que tú escribiste.
Limitaciones honestas
Este preview no es un entorno de desarrollo completo. Si tu proyecto necesita módulos ES con resolución de dependencias, TypeScript, JSX, importar archivos locales, hot module replacement o cualquier feature avanzada de un bundler, vas a necesitar un dev server real (Vite, Next.js, Astro, etc.). Aquí encajan especialmente bien snippets autocontenidos: HTML+CSS+JS sin builder, plantillas de email, demos visuales, ejercicios pequeños y experimentos rápidos. Para todo lo demás, sigue siendo más rápido abrir tu IDE.
Atajos útiles
- Cargar ejemplo rellena los tres bloques con un snippet base que ilustra el ciclo HTML→CSS→JS y un botón que incrementa un contador. Útil como punto de partida.
- Vaciar todo resetea los tres editores con comentarios placeholder mínimos.
- Copiar copia al portapapeles el documento HTML completo (el que ves renderizado en el iframe), listo para pegar en otro editor o enviar por email.
- Descargar .html guarda en tu equipo el documento empaquetado como un único archivo, abrible directamente con doble click.
Preguntas frecuentes
Te permite escribir HTML, CSS y JavaScript en tres pestañas separadas y ver el resultado renderizado al instante en un iframe sandboxed dentro de la misma página. Está pensado para probar snippets, fragmentos de plantillas de email, ejercicios de clase, demos rápidas de componentes o cualquier código que quieras evaluar sin abrir VS Code, sin crear un proyecto y sin dependencias externas. Por defecto la vista previa se actualiza automáticamente con un debounce de 400 ms; si prefieres control manual, puedes desmarcar «Actualizar al escribir» y pulsar Ejecutar cuando quieras.
No. El preview se construye íntegramente con un atributo srcdoc del iframe, que es un mecanismo del propio navegador para inyectar HTML sin necesidad de servir el documento desde un servidor. Tu código nunca sale de la pestaña: ni viaja por la red, ni se guarda en ninguna base de datos, ni se transmite a herramientas de analítica. Puedes verificarlo abriendo la pestaña Network de DevTools mientras escribes — verás cero peticiones nuevas asociadas al preview.
Sí. El iframe tiene el atributo sandbox="allow-scripts", lo que significa que el JS de tu snippet puede ejecutarse dentro del iframe pero NO puede acceder a esta página padre, leer cookies del usuario, hacer redirecciones top-level, ni cargar formularios fuera del iframe. Es la misma técnica que usan editores online como CodePen o JSFiddle. Si tu código produce un error de runtime, lo capturamos con un try/catch dentro del iframe y mostramos el mensaje en un bloque rojo en la parte inferior del preview, sin romper la herramienta.
Sí, pero con una matización: el iframe se sirve desde origen about:srcdoc, así que las CDN públicas funcionan vía URL absoluta (https://cdn.jsdelivr.net/...) si las añades como <link> o <script> dentro de tu HTML. Tailwind por CDN, Bootstrap por CDN, jQuery, Alpine.js, htmx, todos funcionan sin problema. Lo que NO podemos cargar son recursos que requieran servir el documento desde un origen específico (por ejemplo, módulos ES con import maps complejos suelen necesitar un dev server real).
Para que escribas cada bloque con su propia sintaxis sin mezclar fragmentos. Cuando trabajas con HTML, CSS y JS por separado, te cuesta menos enfocarte y se evita el clásico error de meter una llave de CSS dentro de un bloque HTML por descuido. Internamente combinamos los tres bloques en un único documento HTML antes de enviarlo al iframe, así que puedes copiar el resultado completo en cualquier momento desde el botón «Copiar» o descargarlo como un archivo .html con todo embebido.
Las dos grandes diferencias son privacidad y registro. CodePen y JSFiddle requieren cuenta para guardar y publicar, y guardan tu código en sus servidores. Esta herramienta es 100% local, no necesita registro ni cookies, no almacena nada y se puede usar sin conexión a internet (después de cargar la página inicial) si las dependencias externas que importes lo permiten. La contrapartida: aquí no hay biblioteca de pens, ni colaboración, ni versionado en la nube. Es un block de notas con render en vivo, no una red social de código.
Sí, y es uno de los casos de uso más prácticos. Las plantillas de email se basan en HTML antiguo con tablas anidadas y CSS inline. Pegar tu plantilla en el panel HTML y previsualizarla en el iframe te da una idea muy fiel de cómo se verá en clientes modernos como Gmail web o Apple Mail. Recuerda que cada cliente de email tiene sus propias rarezas (Outlook usa el motor de Word para renderizar, por ejemplo), así que para validación final usa Litmus o Email on Acid, pero para iteración rápida este preview ahorra muchísimo tiempo.
No imponemos un límite artificial — depende del navegador. En la práctica, snippets de hasta varios cientos de KB de HTML+CSS+JS funcionan sin problema. Para proyectos grandes (varios megabytes de assets, librerías locales, etc.) probablemente necesitarías un servidor de desarrollo real (Vite, Next.js, etc.) y no este tipo de preview-en-iframe.