devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoría web

Editor en línea de HTML, CSS y JavaScript

Un playground de código ligero: edita HTML, CSS y JavaScript lado a lado, mira el resultado al instante, revisa la salida de la consola y descarga tu página como un único archivo HTML.

Actualizado el
Plantilla
Consola

Tu código se guarda automáticamente en este navegador. La vista previa se ejecuta en un marco aislado sin acceso a este sitio.

Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

Cómo usar: Editor HTML en línea

  1. Escribe el marcado en HTML, los estilos en CSS y los scripts en JavaScript.
  2. La vista previa se actualiza mientras escribes (desactiva Ejecución automática para scripts pesados y pulsa Ejecutar o Ctrl+Intro).
  3. Revisa la salida de console.log y los errores debajo de la vista previa.
  4. Haz clic en Descargar .html para guardar todo en un solo archivo.

Un playground de HTML rápido

A veces solo necesitas probar un fragmento: comprobar cómo se comporta una propiedad CSS, depurar un diseño, prototipar un componente o probar código de un tutorial. Este editor te ofrece los tres paneles clásicos y una vista previa en vivo, sin cuentas, proyectos ni pasos de compilación. Tu trabajo se guarda en el navegador (almacenamiento local), así que seguirá ahí cuando vuelvas.

Cómo se aísla la vista previa

El resultado se ejecuta en un <iframe sandbox> sin el permiso allow-same-origin. Así, la página tiene su propio origen único: los scripts pueden ejecutarse, usar alertas y formularios, pero no pueden leer las cookies ni el almacenamiento de este sitio. Es el mismo enfoque que usan CodePen y JSFiddle.

Consejos

  • Tab inserta dos espacios en lugar de sacarte del editor.
  • Carga librerías desde un CDN con una etiqueta normal en el panel HTML, por ejemplo <script src="https://cdn.jsdelivr.net/npm/…"></script>.
  • Los errores en tiempo de ejecución y las promesas rechazadas aparecen en el panel de consola con su número de línea.
  • El archivo descargado contiene tu HTML, CSS y JS en un único documento, listo para abrir en local o subir.

Más allá del playground

Ordena tu código con el formateador de HTML, el formateador de CSS y el formateador de JavaScript, o reduce su tamaño para producción con el minificador de HTML y el minificador de JavaScript.

También se busca como: html online, vista previa html, probar código html online, editor html css javascript, previsualizar html online, playground html, renderizar html online, alternativa a jsfiddle.

Herramientas que combinan con: Editor HTML en línea

  • Markdown a HTML — Escribe o pega Markdown y obtén HTML limpio al instante, con vista previa saneada en vivo, tablas GFM, listas de tareas y bloques de código delimitados.
  • Minificador CSS — Pega una hoja de estilos para reducirla al instante.
  • Formateador SQL — Pega una consulta o una migración completa y obtén SQL legible, con una cláusula por línea, joins alineados y mayúsculas coherentes, siguiendo la gramática de tu base de datos.
  • Probador de expresiones regulares — Escribe un patrón y observa cómo se resaltan las coincidencias en tiempo real en tu texto de prueba.

Preguntas frecuentes

¿Se guarda mi código?
Sí, automáticamente en el almacenamiento local de este navegador. No se sube a ningún sitio; borra los datos del sitio o haz clic en una plantilla para empezar de nuevo.
¿Puedo usar librerías externas?
Sí: añade etiquetas <script> o <link> que apunten a un CDN en el panel HTML.
¿Es seguro ejecutar código no confiable aquí?
La vista previa se ejecuta en un iframe con sandbox y su propio origen, así que no puede acceder a este sitio. Aun así, se ejecuta en tu navegador, por lo que solo debes ejecutar código que estés dispuesto a correr.
¿Admite TypeScript, SCSS o JSX de React?
No: la vista previa solo ejecuta HTML, CSS y JavaScript puros. Compila antes otros lenguajes.
¿Puedo instalar Editor HTML en línea como aplicación web y utilizarla sin conexión?
Sí. Editor HTML en línea es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

Herramientas relacionadas

localFormateador HTMLPega HTML minificado o desordenado y obtén HTML limpio y con sangría coherente, incluidos los bloques…localFormateador de JavaScriptDesminifica y da formato a JavaScript, JSON o JSX con la sangría y el estilo de llaves que prefieras, o…localFormateador de CSSConvierte una hoja de estilos minificada en CSS legible, con una propiedad por línea y bloques @media…localMinificador de HTMLReduce páginas y plantillas HTML eliminando comentarios y espacios en blanco innecesarios, minificando el…localMarkdown a HTMLEscribe o pega Markdown y obtén HTML limpio al instante, con vista previa saneada en vivo, tablas GFM,…localMinificador CSSPega una hoja de estilos para reducirla al instante. Verás el tamaño original y el minificado, el…