Ejecuta HTML, CSS y JavaScript online
Este editor HTML online te proporciona tres archivos, index.html, style.css y script.js, con una vista previa en vivo al lado. Escribe o pega código y la página se ejecuta automáticamente, o pulsa Ejecutar (Ctrl/Cmd + Intro) para ejecutarlo al instante. Hace lo que la gente busca en un compilador HTML o un ejecutor de código, aunque no se compila nada: tu navegador renderiza el HTML, aplica el CSS y ejecuta el JavaScript tal y como lo haría en una página web real.
Un editor HTML en tiempo real con vista previa en vivo
La vista previa se actualiza aproximadamente medio segundo después de que dejas de escribir. Cada nueva versión se carga en segundo plano y reemplaza la anterior solo cuando está lista. Cambia entre los anchos adaptable, de escritorio, de tableta y de móvil para comprobar un diseño. Abre la consola para ver la salida de console.log y los errores de JavaScript; haz clic en un archivo y línea cuando haya una ubicación disponible.
Prueba código HTML en un sandbox privado
Este editor procesa tu código y guarda tu borrador en tu navegador. No sube tu código. La vista previa bloquea enlaces, envíos de formularios, ventanas emergentes, fetch y XMLHttpRequest. Los scripts, hojas de estilo, imágenes y fuentes HTTPS aún pueden cargarse. El código y las librerías que ejecutas pueden enviar datos a través de esos recursos, incluyendo el contenido de la página. Ejecuta solo código en el que confíes.
Cómo ejecutar un archivo HTML
- Pega tu HTML en index.html o edita la página de inicio. Pon el CSS en style.css y el JavaScript en script.js; ambos se añaden a la página automáticamente.
- Observa cómo se actualiza la vista previa mientras escribes o pulsa Ejecutar (Ctrl/Cmd + Intro).
- Abre la consola para comprobar si hay errores. Haz clic en la ubicación de un error para ir a esa línea.
- Descarga index.html para obtener un único archivo con tu CSS y JavaScript incluidos. Ábrelo en cualquier navegador o en Phoenix Code para seguir desarrollando.
¿Editor de HTML en línea o Phoenix Code?
Esta página está pensada para experimentos rápidos y para aprender. Cuando una página se convierte en un proyecto, Phoenix Code es un editor de código gratuito y de código abierto para el desarrollo web. Funciona en tu navegador en web.phcode.dev y como aplicación de escritorio para Windows, Mac y Linux.
Preguntas sobre el editor HTML
¿Cómo ejecuto código HTML en línea?
Pega tu código en index.html. La vista previa lo ejecuta automáticamente cuando dejas de escribir, o puedes pulsar Ejecutar o Ctrl/Cmd + Intro para ejecutarlo inmediatamente. El CSS de style.css y el JavaScript de script.js se añaden a la página.
¿Es esto un compilador de HTML?
El HTML no se compila. La gente busca un compilador de HTML o un ejecutor de código cuando quiere ver lo que hace su código, y eso es lo que muestra este editor: tu navegador renderiza el HTML y ejecuta el JavaScript directamente. Los errores de JavaScript aparecen en la consola; no se comprueba la validez del HTML y el CSS.
¿Puedo usar frameworks de CSS y librerías de JavaScript?
Sí. Enlázalos desde una URL https, por ejemplo, un enlace CDN de Bootstrap o Tailwind en index.html. Las peticiones de red hechas por tu propio código, como fetch o XMLHttpRequest, se bloquean en la vista previa.
¿Es gratis y necesito una cuenta?
Es gratis y no requiere una cuenta. Esta herramienta no sube tu código. El código y los recursos externos que ejecutas pueden contactar con otros servidores y enviar datos. Se guarda un borrador en este navegador para que puedas retomarlo.
¿Cómo guardo mi código o sigo trabajando en Phoenix Code?
Descarga index.html para guardar un solo archivo con tu CSS y JavaScript incluidos, o usa Copiar todo. Para continuar en Phoenix Code, selecciona Copiar código para continuar, luego abre Phoenix Code una vez que la copia se haya completado. Cierra la pantalla de bienvenida si se muestra, abre index.html en un proyecto, reemplaza su contenido con el contenido copiado, guarda y abre la Vista Previa en Vivo. Tu código no se transfiere automáticamente.
¿Cuál es el mejor editor HTML gratuito para Windows, Mac o Linux?
El mejor es el que se adapta a tu forma de trabajar. Phoenix Code es un editor HTML gratuito y de código abierto para Windows, Mac y Linux que también funciona en el navegador. Es el sucesor de Adobe Brackets y viene con Vista Previa en Vivo, sugerencias de código y Emmet integrados.