Editor HTML en vivo
Escribe HTML, CSS y JavaScript y observa cómo se actualiza la vista previa. Trabaja en el navegador sin instalar un entorno de desarrollo. El código se ejecuta en un iframe de vista previa aislado.
HTML · CSS · JS · vista previa
Vista previa del código en vivo
Escribe en los editores HTML, CSS y JS para actualizar la vista previa al instante.
Escribe HTML, CSS y JavaScript en sus editores para actualizar la vista previa aislada. El editor no sube tu código; las URL externas o los scripts incluidos pueden realizar peticiones de red.
Introduce código HTML, CSS o JavaScript.Guía del editor HTML en vivo
Este editor HTML en vivo permite escribir HTML, CSS y JavaScript juntos y comprobar el resultado mientras escribes. Abre el navegador y empieza a experimentar sin configurar un entorno de desarrollo. Ajusta colores, espacios y fuentes o prueba JavaScript sin guardar y recargar una página aparte continuamente. Es útil para aprender las bases de la web, preparar una interfaz pequeña o revisar un fragmento antes de incorporarlo a un proyecto mayor.
El código se ejecuta en un iframe aislado de la página del editor. El editor no lo sube ni lo guarda en el servidor de Toolvil. Sin embargo, las URL externas, las bibliotecas y los scripts incluidos pueden realizar peticiones de red. Revisa las direcciones y el comportamiento del código. Al recargar la página se pierde el trabajo, así que copia lo que necesites o descárgalo como archivo HTML.
Cuándo utilizar esta herramienta
- Aprender etiquetas HTML, CSS y JavaScript con pruebas inmediatas.
- Preparar un diseño, un botón o un banner antes de publicarlo en un blog o una tienda.
- Probar rápidamente una animación CSS o un fragmento JavaScript.
Funciones principales
- Tres editores HTML, CSS y JS con una vista previa que se actualiza al instante
- Cargar ejemplos, copiar el documento HTML completo y descargar archivos .html
- Probar bibliotecas CDN externas, como Bootstrap y Tailwind
Antes de empezar
- Al recargar se borra el código. Copia lo que necesites o descarga antes un archivo HTML.
- Las URL externas, bibliotecas y scripts pueden realizar peticiones de red. Revisa sus direcciones y su código.
- Esta herramienta ejecuta HTML, CSS y JavaScript del navegador. No introduzcas código de servidor ni código que requiera claves secretas.
Modo de uso
- Escribe o pega el marcado en el editor HTML.
- Introduce reglas de estilo en el editor CSS.
- Escribe el comportamiento JavaScript en el editor JS.
- Observa cómo cambia la vista previa al modificar el código.
- Utiliza Ejecutar para recargar la vista previa o Cargar ejemplo para recuperar el código inicial.
Cómo funciona el aislamiento
El editor combina HTML, CSS y JavaScript en un documento y lo asigna al atributo srcdoc del iframe de vista previa. Su sandbox permite scripts y diálogos como alert mediante allow-scripts y allow-modals. No concede allow-same-origin, de modo que el código queda aislado de las cookies, el DOM y el almacenamiento de esta página. El código del usuario se ejecuta dentro de la vista previa, no directamente en la página principal.
Fuentes y criterios de revisión
El ensamblador utiliza directamente las tres entradas de código, sin un servicio de renderizado en el servidor ni una biblioteca externa obligatoria. Un bucle infinito o un script grande pueden ralentizar la vista previa. La lógica de ensamblado se revisó el 2026-06-25; las comprobaciones automáticas protegen el documento generado y sus estadísticas.
La vista previa se ejecuta en un iframe aislado. Las políticas del navegador pueden limitar las API externas y las peticiones que requieran CORS. Al recargar se borra el código; copia o descarga lo que necesites conservar.
FAQ
¿Puedo utilizar bibliotecas externas como Bootstrap o Tailwind?
Sí. Añade una URL de CDN mediante una etiqueta link o script en el editor HTML para probar bibliotecas como Bootstrap, Tailwind CSS o jQuery en la vista previa. Las políticas del navegador pueden limitar las peticiones que requieran CORS.
¿Se envía mi código a un servidor?
El editor no sube ni guarda el código en el servidor de Toolvil. La vista previa se ejecuta en un iframe aislado del navegador, pero las URL externas o los scripts incluidos pueden realizar peticiones de red. Al recargar se pierde el trabajo; copia el código o descarga un archivo HTML para conservarlo.
¿Funcionan console.log() y alert()?
Sí. El iframe de vista previa permite scripts, controladores de eventos y diálogos como alert. Utiliza las herramientas de desarrollo del navegador, que suelen abrirse con F12, para consultar la salida de console.log().
¿Puedo utilizarlo sin experiencia previa?
Sí. Los editores HTML, CSS y JS incluyen un ejemplo que puedes modificar línea a línea. Utiliza Cargar ejemplo cuando quieras recuperar el código inicial.
¿Funciona la vista previa en el móvil?
Sí. En pantallas estrechas, los editores y la vista previa se colocan uno debajo de otro. Puedes escribir código y revisar el resultado mediante controles táctiles para hacer pruebas sencillas fuera de casa.