Arrastra y suelta
para subir tu archivo
Editor HTML
Escribe HTML, CSS y JavaScript online con vista previa en directo
Tres archivos en paralelo, una vista previa que se actualiza mientras escribes y tu trabajo guardado en tu propio navegador. Formatéalo, descárgalo o publícalo como sitio web. Sin registro para escribir ni descargar y sin nada que instalar.
index.html marcado
style.css estilos
script.js comportamiento
Consola
Tus tres archivos se guardan en este navegador mientras escribes, así que recargar no los perderá. No se envía nada a ninguna parte hasta que publiques. Hemos restaurado tu última sesión.
Vídeo tutorial (en inglés)
Aprende a usar el editor HTML online gratuito de Static.app.
Cómo usar este editor de código HTML
- Escribe tu código en el panel index.html. La hoja de estilos y el script ya están enlazados, así que no necesitas añadir tú las etiquetas link ni script.
- Añade tus estilos y tu comportamiento en style.css y script.js. Cada panel tiene su propio botón Formatear que ordena la sangría.
- Mira la vista previa justo debajo. Se vuelve a renderizar mientras escribes, y todo lo que tu script registre o lance aparece en la consola que hay debajo.
- Guarda el resultado. Descarga un único archivo .html autocontenido, descarga los tres archivos en un .zip o publica la página como sitio web con su propia dirección.
Un editor de verdad, no un simple cuadro donde pegar
-
Tres archivos reales
index.html, style.css y script.js se editan por separado y siguen separados cuando los descargas o publicas, así que lo que obtienes está estructurado como en un proyecto real.
-
Vista previa mientras escribes
Sin botón Ejecutar que recordar. La vista previa se actualiza un momento después de que dejes de escribir, y puedes verla a ancho completo, de tableta o de móvil sin salir de la página.
-
Consola integrada
console.log, avisos, errores y excepciones no capturadas de tu script aparecen debajo de la vista previa, para que veas qué ha fallado sin abrir las herramientas para desarrolladores del navegador.
-
Tu trabajo sobrevive a una recarga
Los tres paneles se guardan en tu navegador mientras escribes y se restauran cuando vuelves. Un botón Borrar visible los elimina de nuevo, algo importante en un equipo compartido.
-
Plantillas y bibliotecas
Empieza con una landing page, un formulario de contacto, un diseño con flexbox o grid, o un interruptor de modo oscuro. Añade Bootstrap, Tailwind, jQuery, Alpine o Chart.js con un clic.
-
Publica cuando esté listo
Convierte lo que has escrito en un sitio web con su propia dirección y un certificado SSL. Publicar es gratis durante 7 días en un subdominio gratuito, sin tarjeta de crédito, y mantenerlo online después necesita un plan de pago.
¿Por qué usar un editor de código HTML online?
No hay nada que instalar ni configurar, lo que lo convierte en la forma más rápida de probar una idea. Funciona en un equipo que no controlas, como un portátil del trabajo, un ordenador de una biblioteca o una cuenta escolar restringida, donde instalar un editor de escritorio no es posible. También es una buena forma de aprender: cambias una línea y ves al instante qué hace, sin un paso de compilación de por medio.
Encaja bien con una sola página. Una landing page, un portfolio, una página de documentación, una página de evento o una página de próximamente es HTML, CSS y JavaScript, justo lo que produce este editor. Para un sitio web grande con decenas de páginas, un framework y un paso de compilación, escríbelo en local y sube después el resultado de la compilación.
Editor de código o editor WYSIWYG: ¿cuál necesitas?
Son dos herramientas distintas que a menudo se confunden. Un editor de código, como este, es donde escribes tú el código y ves exactamente lo que has escrito. Un editor WYSIWYG te da un lienzo parecido a un procesador de textos y genera el código por ti, lo que es útil si no quieres escribir HTML, aunque el resultado suele ser más extenso que lo que escribirías a mano. Si buscabas un editor de HTML con la esperanza de pegar texto con formato y obtener etiquetas, necesitas el segundo tipo. Si quieres controlar el código, estás en el lugar adecuado.
Tu código nunca sale de tu navegador
El editor, la vista previa, el formateador y los dos botones de descarga se ejecutan como JavaScript en tu propio equipo. Nada de lo que escribes se envía a Static.app ni a ningún otro lugar, a menos que decidas publicarlo. La vista previa se ejecuta dentro de un marco aislado, deliberadamente separado del resto de la página, de modo que el código que pegues para probar no puede leer nada que pertenezca a este sitio web.
La copia que se conserva entre visitas vive en el almacenamiento de tu propio navegador, no en un servidor. Conviene saberlo en un ordenador compartido o público: usa el botón Borrar cuando termines y se eliminará.
Cómo conservar tu trabajo: autoguardado, descarga y publicación
Hay tres formas distintas de conservar lo que has escrito, y cada una responde a una necesidad diferente. El autoguardado cubre la recarga accidental: tus tres paneles vuelven tal como los dejaste, solo en este navegador. Descargar te da una copia permanente en tu equipo, ya sea como un único archivo .html autocontenido con los estilos y el script incrustados, o como un .zip con los tres archivos separados y enlazados entre sí. Publicar pone la página en la web en una dirección que puedes enviar a alguien.
El autoguardado es por navegador y por dispositivo, así que no te seguirá de tu portátil a tu móvil. Si tu trabajo importa, descárgalo o publícalo.
Del editor al sitio web
Publicar empaqueta index.html, style.css y script.js y los entrega al hosting de Static.app. Obtienes una dirección https pública con un certificado SSL incluido, y la página se sirve exactamente como la escribiste, sin paso de compilación y sin que se reescriba nada. Publicar es gratis durante 7 días: tienes un sitio web en un subdominio gratuito y no se necesita tarjeta de crédito. Mantener el sitio web online pasados esos 7 días y conectar un nombre de dominio que ya tengas requieren un plan de pago.
Si prefieres alojarlo en otro lugar, usa Descargar .zip y llévate los archivos. Nada de esto ata tu trabajo a Static.app.
Edición en el móvil o la tableta
En una pantalla estrecha, los tres paneles se convierten en pestañas, de modo que cada archivo ocupa todo el ancho en lugar de un tercio apretado, y la vista previa queda a un toque. Todas las acciones de la barra de herramientas siguen disponibles. Siendo sinceros: escribir código con el teclado del móvil es lento, así que esto sirve mucho mejor para corregir un error tipográfico, cambiar un color o enseñarle a alguien la vista previa que para escribir una página desde cero.
¿Necesitas algo más acotado? Usa el probador de HTML para comprobar y depurar un fragmento que ya tienes, o el visor HTML para abrir y leer un archivo .html existente.
Cómo se compara este editor de código HTML
Los editores gratuitos en el navegador se diferencian sobre todo en lo que ocurre cuando dejas de escribir: si tu trabajo sobrevive a una recarga, si puedes sacar el archivo y si puedes poner la página online. Se ha comprobado en las páginas reales, y los puntos donde los demás son simplemente mejores están señalados como tales.
| Static.app | W3Schools Tryit | CodePen | JSFiddle | Programiz | OneCompiler | |
|---|---|---|---|---|---|---|
| Usar el editor sin cuentaCodePen 2.0 envía a los visitantes sin sesión a una pantalla de inicio de sesión; su editor antiguo sigue abriéndose. | Sí | Sí | Solo el editor antiguo | Sí | Sin sistema de cuentas | Sí |
| Vista previa en directo sin pulsar EjecutarJSFiddle ofrece ejecución automática, pero la reserva para quienes han iniciado sesión. | Sí, mientras escribes | No, hay botón Ejecutar | Sí | Requiere iniciar sesión | Sí | Sí |
| Archivos HTML, CSS y JavaScript separadosProgramiz y OneCompiler van más allá de tres archivos, con carpetas y subidas. | Sí, tres archivos | No, un solo panel | Sí, 3 en el plan gratuito | Sí | Sí, y además carpetas | Sí, puedes añadir más |
| Tu trabajo sobrevive a una actualización de la páginaComprobado escribiendo, recargando y mirando de nuevo. OneCompiler coincide con nosotros en esto. | Sí, guardado en tu navegador | No | Las versiones son de pago | Requiere iniciar sesión | No, se reinicia | Sí |
| Descargar tu código | Sí, .html o .zip | No | Sí, exportar .zip | Oculto si no has iniciado sesión | Sí | Sí |
| Compartir un enlace al propio códigoAquí ganan ellos: CodePen y JSFiddle son mejores si quieres compartir el código fuente para recibir comentarios. | No, publica en su lugar | No | Sí, una vez guardado | Sí, y además incrustaciones | No | Guardar requiere una cuenta |
| Publicarlo como sitio webNo es una victoria total, y en el plan gratuito los demás pueden superarnos: W3Schools Spaces y OneCompiler publican ambos en un plan gratuito que no caduca, mientras que aquí publicar es gratis durante 7 días y después requiere un plan de pago. El plan gratuito de W3Schools se mide por peticiones al mes, así que el intercambio es un límite de tiempo frente a un límite de tráfico. | Sí, gratis durante 7 días | Sí, plan gratuito con límite de uso | Solo planes de pago | No | No | Sí, requiere cuenta |
| Conectar un nombre de dominio que ya tengasDe pago también en Static.app, y en los dos competidores que lo ofrecen. | Sí, en los planes de pago | Solo con plan de pago | Solo planes de pago | No | No | No documentado |
| Anuncios y muros de consentimiento de cookiesEl número de socios es el que cada cuadro de consentimiento declara sobre sí mismo. Static.app no lleva anuncios ni comparte nada con socios publicitarios, aunque sí muestra un aviso de cookies propio que se puede cerrar. | Sin anuncios, un aviso de cookies | Anuncios, 1730 socios | Anuncios, salvo que pagues | Anuncios | Anuncios, 690 socios | No se ha encontrado ninguno |
| Profundidad del propio editorAquí ganan ellos: CodePen y JSFiddle son editores más completos que este y no tenemos preprocesadores. | Autocompletado, formato, bibliotecas | Sin números de línea | Preprocesadores, el más completo | Muchas versiones de bibliotecas | Consola, carpetas | Muchos lenguajes |
| Comunidad y material de aprendizajeAquí ganan ellos: no competimos en esto ni lo pretendemos. | Una página de herramienta | Inigualable para aprender | Comunidad grande | Colaboración | Biblioteca de cursos | Referencia tipo wiki |
| Ideal para | Escribir una página y ponerla online | Aprender con ejemplos | Demos de front-end | Reproducir un error | Un bloc de notas | Muchos lenguajes |
El comportamiento de la competencia se comprobó en las páginas reales mientras se escribía esta. Estos productos cambian a menudo, así que toma los detalles como una instantánea y no como un hecho permanente.
Pon online la página que acabas de escribir
Suelta aquí tus archivos y obtén una dirección pública con un certificado SSL.
Seleccionar archivo
o suelta aquí tu archivo para subirlo
Preguntas frecuentes del editor de código HTML
¿Este editor de código HTML es gratis?
Sí. El editor es gratis, sin cuenta y sin límites de uso. Se ejecuta por completo en tu navegador, así que no hay nada que instalar ni que pagar. Publicar lo que escribes como sitio web es gratis durante 7 días, en un subdominio gratuito con certificado SSL y sin tarjeta de crédito, y después necesitas un plan de pago para mantener el sitio web online.
¿Necesito registrarme para usar el editor de código online?
No. Puedes abrir la página, escribir HTML, CSS y JavaScript, ver la vista previa en directo, formatear tu código y descargar tus archivos sin crear una cuenta. Solo necesitas una cuenta en el momento de publicar tu trabajo como sitio web.
¿Cómo guardo mi código HTML desde un editor online?
Este editor guarda los tres archivos en tu propio navegador mientras escribes, así que cerrar la pestaña o recargar la página no hace que pierdas tu trabajo. Para tener una copia permanente, usa Descargar .html para obtener un único archivo autocontenido o Descargar .zip para obtener los tres archivos tal como los escribiste. Para ponerlo en la web en una dirección real, usa Publicar.
¿Puedo publicar como sitio web real el HTML que escribo aquí?
Sí. El botón Publicar empaqueta index.html, style.css y script.js y los entrega al hosting de Static.app, que te da una dirección https pública. Es gratis durante 7 días, en un subdominio gratuito con certificado SSL y sin tarjeta de crédito. Para mantener el sitio web online pasados esos 7 días y para conectar tu propio nombre de dominio, necesitas un plan de pago.
¿Cómo descargo mi archivo HTML desde un editor de código online?
Usa el botón Descargar .html para obtener un único archivo con tu CSS y tu JavaScript incrustados, que se abre correctamente en cualquier lugar por sí solo. Usa Descargar .zip para obtener index.html, style.css y script.js como tres archivos separados con los enlaces entre ellos intactos.
¿Mi código se sube a un servidor o se queda en mi navegador?
Se queda en tu navegador. El editor, la vista previa, el formateador y los dos botones de descarga se ejecutan como JavaScript en tu propio equipo, y no se envía nada a ninguna parte. Tu trabajo solo se transmite si decides publicarlo como sitio web.
¿Puedo editar HTML, CSS y JavaScript en el mismo editor online?
Sí. Hay tres paneles separados, uno para cada archivo, y la vista previa los combina como lo haría un navegador. Así se refleja cómo se organiza un proyecto real, por lo que los archivos que descargas o publicas ya están bien estructurados en lugar de tenerlo todo metido en una sola página.
¿Cómo añado CSS y JavaScript a mi HTML?
En este editor no hace falta: los paneles style.css y script.js ya están enlazados desde index.html, así que todo lo que escribas en ellos se aplica de inmediato. Si escribes HTML en otro lugar, enlaza una hoja de estilos con una etiqueta link en el head y un script con una etiqueta script antes de la etiqueta de cierre del body.
¿Hay un editor de código online gratis sin registro?
Este. No hay ningún sistema de cuentas de por medio en el propio editor: abre la página y empieza a escribir. Varias alternativas te piden iniciar sesión antes de poder ejecutar tu código automáticamente, guardar un borrador o descargar un archivo, algo que conviene comprobar antes de depender de ellas.
¿Puedo usar un editor de HTML online en mi móvil o tableta?
Sí. En una pantalla estrecha, los paneles se apilan en pestañas de HTML, CSS, JavaScript y Vista previa para que cada uno ocupe todo el ancho, y todas las acciones de la barra de herramientas siguen a mano. Escribir código con el teclado del móvil es lento, así que sirve mejor para pequeños cambios y para ver el resultado que para escribir una página desde cero.
¿Qué diferencia hay entre un editor de HTML online y un editor de código como VS Code?
Un editor online no necesita instalación y funciona en cualquier equipo, incluso en uno con restricciones, lo que lo hace ideal para experimentos rápidos, para aprender y para pequeños arreglos. Un editor de escritorio como VS Code gestiona proyectos grandes con varias carpetas, extensiones, control de versiones y trabajo sin conexión, algo que una herramienta de navegador no pretende hacer.
¿Un editor de código online es suficiente para crear un sitio web de verdad?
Para una sola página, sí lo es de verdad: una landing page, un portfolio, una página de documentación o una página de evento es HTML, CSS y JavaScript, justo lo que produce este editor. Para un sitio web grande con muchas páginas y un paso de compilación, escríbelo en local y sube después los archivos terminados.
¿Puedo compartir un enlace al HTML que he escrito?
No como fragmento de código. Algunas herramientas te dan una URL que reabre tu código en su editor, y esta no. Lo que te ofrece en su lugar es la opción de publicar la página como sitio web, de modo que el enlace que compartes es la propia página en funcionamiento y no su código fuente.
¿El editor de HTML online funciona sin conexión?
En parte. La página tiene que cargarse una vez por internet, pero después la edición, la vista previa y las descargas se ejecutan en local, así que una desconexión breve no te interrumpe. Publicar requiere conexión, y si recargas con fuerza sin conexión, la página no se cargará en absoluto.