Editor HTML (vista previa en vivo)
Escribe HTML, CSS y JavaScript en paneles separados y mira cómo la página se actualiza mientras escribes. Tu código se ejecuta en un marco aislado, los mensajes de la consola aparecen debajo y tu trabajo se guarda automáticamente en este navegador.
Última actualización:
Consejo: Ctrl+Intro ejecuta el código. En el editor, Tab aplica sangría; pulsa Esc y luego Tab para salir del editor. Tu código se guarda automáticamente en este navegador.
Cómo usar Editor HTML (vista previa en vivo)
- Escribe tu HTML en el panel HTML. Añade estilos en el panel CSS y scripts en el panel JS: se combinan en una sola página.
- Mira la vista previa actualizarse mientras escribes. Desactiva la ejecución automática si tu script es pesado y haz clic en Ejecutar (o pulsa Ctrl+Intro).
- Revisa la consola bajo la vista previa para ver la salida de console.log y los mensajes de error con número de línea.
- Cambia el diseño a lado a lado o apilado, y cambia el ancho de la vista previa para probar tamaños de teléfono y tableta.
- Descarga la página como un único archivo .html. Tu código también se guarda automáticamente en este navegador.
Cómo se genera la vista previa en vivo
Cuando escribes, los tres paneles se combinan en un único documento HTML. Si el panel HTML contiene solo un fragmento (por ejemplo, unos cuantos elementos <div>), se coloca dentro de una página estándar con <!DOCTYPE html>, un charset UTF-8 y una etiqueta viewport para móviles. Tu CSS va en un elemento <style> en el head, y tu JavaScript en un elemento <script> al final del body, para que el DOM esté listo cuando se ejecute el script. Si pegas un documento completo, el CSS y el JS se insertan antes de </head> y </body>.
El resultado se muestra en un iframe con el atributo sandbox y sin allow-same-origin. Eso da a la vista previa un origen único y opaco: los scripts se ejecutan, pero no pueden leer esta página, sus cookies ni su almacenamiento local. Como efecto secundario, localStorage y document.cookie generan errores dentro de la vista previa.
Atajos de teclado
| Teclas | Acción |
|---|---|
Ctrl + Intro (⌘ + Intro en Mac) | Ejecutar el código ahora |
Tab / Shift + Tab | Aumentar / reducir la sangría de la línea o las líneas seleccionadas |
Esc y luego Tab | Sacar el foco del teclado del editor |
Intro | Nueva línea que mantiene la sangría actual (y añade un nivel después de { o de una etiqueta de apertura) |
> al final de una etiqueta de apertura | Añade la etiqueta de cierre correspondiente en el panel HTML |
Consejos para probar HTML, CSS y JavaScript
- Usa los anchos Teléfono y Tableta para comprobar las media queries a 375 px y 768 px sin cambiar el tamaño de la ventana.
- Carga bibliotecas desde un CDN con una URL completa, por ejemplo una etiqueta script cuyo src empiece por
https://cdn.jsdelivr.net/en el panel HTML. Las rutas de archivo relativas no funcionan porque no hay carpeta de proyecto. - Desactiva la ejecución automática al escribir bucles o temporizadores, para que un bucle
whilea medio escribir no congele la vista previa. Haz clic en Ejecutar cuando estés listo. - Lee los errores en la consola: el número de línea se refiere a tu panel JS, así que puedes ir directamente al problema.
Preguntas frecuentes
¿Este editor HTML es gratuito?
Sí. Es completamente gratis y sin registro. Todo se ejecuta en tu navegador.
¿Mi código se sube a algún sitio?
No. La vista previa se genera localmente a partir de tu código y se muestra en un iframe aislado. El guardado automático usa el almacenamiento local de tu navegador, así que el código se queda en este dispositivo.
¿Es seguro ejecutar JavaScript aquí?
La vista previa se ejecuta en un iframe aislado sin acceso a esta página, a su almacenamiento ni a sus cookies. Los scripts pueden seguir haciendo solicitudes de red o abrir ventanas emergentes como cualquier página web, así que ejecuta solo código de confianza.
¿Por qué no se carga mi script o fuente externa?
Los enlaces a CDN y a Google Fonts funcionan cuando tienes conexión. Las rutas relativas como images/logo.png no, porque la página no tiene una carpeta de archivos: usa URL https:// completas o data URI.
¿Cómo veo los errores de mi JavaScript?
Abre el panel Consola bajo la vista previa. Muestra los mensajes de console.log, console.warn y console.error y los errores no capturados con su número de línea en el panel JS.
¿Puedo editar un documento HTML completo?
Sí. Si el panel HTML contiene un documento completo con <html> o <body>, tu CSS se inserta antes de </head> y tu JavaScript antes de </body>. Si no, el HTML se coloca dentro de una página estándar.
¿Perderé mi trabajo si cierro la pestaña?
No. Tu código se guarda automáticamente en este navegador y se restaura cuando vuelves. Borrar los datos de navegación lo elimina, así que descarga el trabajo importante como archivo .html.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.