Editor HTML y Ejecutor de Código en Línea con Vista Previa en Vivo
Escribe HTML, CSS y JavaScript y ve cómo la página se actualiza mientras escribes. Gratis y sin registro.
Edición local — los recursos externos pueden enviar datos
Espacio de trabajo del editor HTML
ListoCambios pendientesEjecutando…Vista previa actualizadaActualizada con erroresVista previa no actualizadaEjecución automática pausadaLa página tardó demasiado en cargar, por lo que la vista previa no se actualizó. Comprueba si hay un bucle infinito y luego pulsa Ejecutar.La página intentó abrir otra dirección. La navegación está bloqueada en la vista previa, por lo que todavía se muestra la versión anterior.Tu código supera los 2 MB, un tamaño demasiado grande para previsualizar o guardar en este navegador. Descárgalo y ábrelo en Phoenix Code en su lugar.La ejecución automática está desactivada para código de más de 1 MB. Pulsa Ejecutar para actualizar la vista previa.La última ejecución no finalizó, posiblemente debido a un bucle infinito. La ejecución automática está pausada: corrige el código y luego pulsa Ejecutar.La salida de la consola de tu página aparecerá aquí.Editor de código de index.htmlEditor de código de style.cssEditor de código de script.jsEste archivo es muy grande, por lo que el resaltado y el autocompletado están desactivados para que la escritura sea rápida.Código copiado como un solo archivo HTML.No se pudo copiar. Descarga index.html en su lugar, o selecciona el código y cópialo.Código copiado. En Phoenix Code, cierra la pantalla de bienvenida si se muestra, reemplaza index.html con tu página copiada, guarda y abre Live Preview.Copiar código para continuarAbrir Phoenix CodeCopiando código…Tu código ha cambiado. Cópialo de nuevo antes de continuar.index.html descargado, con tu CSS y JavaScript incluidos.No se pudo crear la descarga. Usa Copiar todo en su lugar.Archivos de inicio restaurados.Este navegador no está guardando tu borrador. Descarga tu código para conservarlo.alert() de tu páginaconfirm() devolvió false en la vista previaprompt() devolvió null en la vista previaLas solicitudes de red como fetch están bloqueadas en la vista previa.Los enlaces no se abren en la vista previa:El envío de formularios está bloqueado en la vista previa. Maneja el evento submit en script.js para probar tu formulario.Las ventanas emergentes están bloqueadas en la vista previa.No se pudo cargar:La salida de la consola se ha limitado para mantener la vista previa con buena respuesta.La página informó de un error desconocido.Se detuvo un bucle que se ejecutó durante más de un segundo sin pausa. Es posible que no termine nunca.Vista previa en vivo de tu página
HTML, CSS y JavaScriptTu borrador está guardado en este navegador
Listo
CSS y JS se cargan automáticamenteEsc, luego Tab, para salir del editor
Pulsa Control o Comando más Intro para ejecutar. Cuando Tab inserte sangría, pulsa Escape y luego Tab para mover el foco fuera del editor.
Vista previa en vivo
Tu página aparecerá aquí
Escribe en el editor o pulsa Ejecutar para renderizarla.
Consola
Cómo crear un archivo HTML
Un archivo HTML es un archivo de texto plano guardado con la extensión .html. Para crear uno, abre un editor de texto, escribe el esqueleto de página de abajo, guarda el archivo como index.html y ábrelo en un navegador. La página de inicio en el editor de arriba ya contiene este esqueleto, así que también puedes editarla ahí y pulsar Descargar.
Abre un editor de texto plano: el Bloc de notas en Windows, TextEdit en Mac (primero, elige Formato y luego Convertir a texto normal), o un editor de código como Phoenix Code o VS Code (Archivo y luego Archivo nuevo).
Escribe el esqueleto HTML: la línea doctype, luego las etiquetas html, head y body, con un title dentro del head y tu texto dentro del body. Copia el ejemplo de abajo para empezar.
Guárdalo como index.html. En el Bloc de notas, primero establece el Tipo como Todos los archivos, o el archivo se convertirá en index.html.txt y se abrirá como texto plano en lugar de como una página web. Cualquier nombre funciona siempre que termine en .html y no tenga espacios.
Abre el archivo: haz doble clic en él y tu navegador renderizará la página. Para crear un archivo HTML sin guardar nada en tu ordenador, pega el esqueleto en el editor de arriba y pulsa Descargar.
Los mismos pasos sirven para todas las formas de plantear la pregunta. Crear un archivo en HTML, hacer un documento HTML o empezar un nuevo archivo .html, todo consiste en escribir este esqueleto y guardarlo con la extensión .html.
<!doctype html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world</h1>
<p>This is my first web page.</p>
</body>
</html>
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.
Característica
Este editor en línea
Phoenix Code
Archivos
index.html, style.css y script.js
Proyectos completos, con carpetas y cualquier número de archivos
Vista previa
Vista previa en vivo en un sandbox en esta página
Vista previa en vivo que resalta el elemento que estás editando
Guardado
Un borrador en este navegador y un archivo HTML para descargar
Tus archivos, guardados en la carpeta de tu proyecto
Ayuda para codificar
Autocompletado y una consola
Sugerencias de código, Emmet y validación de HTML, además de Git en la aplicación de escritorio
Coste
Gratis, sin registro
Community Edition gratuita, con características opcionales de Phoenix Pro.
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.
¿Cómo creo un archivo index.html?
Crea un nuevo archivo de texto plano, pega el esqueleto HTML y guárdalo con el nombre exacto index.html. En el Bloc de notas, establece el Tipo como Todos los archivos para que no se convierta en index.html.txt. Los servidores web abren primero el archivo index.html, motivo por el cual la página de inicio de un sitio usa ese nombre. En este editor, el archivo de inicio ya se llama index.html, así que al pulsar Descargar obtendrás uno.
Última actualización:
Crea tu sitio web completo en Phoenix Code
Trabaja con proyectos completos y Live Preview en la Community Edition gratuita. Phoenix Pro añade edición visual de texto, imágenes y estilos. La aplicación de escritorio incluye una prueba de 7 días de Pro; Community sigue siendo gratuita después.