Escriba HTML, CSS y JavaScript y vea una vista previa en vivo y en espacio aislado mientras escribe. Anchos de dispositivo responsivos, resaltado de sintaxis de Mónaco, formato más bonito, guardado automático local y exportación HTML, impresa o PDF. Gratis, sin registro.
Escriba y obtenga una vista previa de HTML en tiempo real
Este editor HTML en línea con vista previa en vivo muestra su HTML, CSS y JavaScript junto al código aproximadamente 300 ms después de dejar de escribir. Verifique el diseño en anchos de escritorio, tableta (768 px) y móvil (375 px), ordene el marcado con Prettier y exporte a .html o PDF. Su código se guarda automáticamente solo en este navegador y nunca se carga.
Este editor HTML en vivo muestra su marcado junto al código a medida que escribe, para que pueda crear prototipos de diseños, probar fragmentos y aprender experimentando sin configurar un proyecto. Utiliza Monaco (el motor de edición detrás de VS Code) para resaltar la sintaxis y completar automáticamente, y se ejecuta completamente en su navegador sin necesidad de registrarse.
Características
Vista previa en tiempo real en espacio aislado con modos División, Código y Vista previa
Anchos de dispositivos responsivos (escritorio, tableta de 768 px, móvil de 375 px)
Editor Mónaco con resaltado de sintaxis
Formato de código más bonito con un clic
Se guarda automáticamente en el almacenamiento local de este navegador, nunca se carga
Exporte como .html, imprima/guarde como PDF o PDF rápido de varias páginas
Cómo utilizar Editor HTML en vivo
1
Pega o escribe tu HTML
Escriba un documento completo o un fragmento. Coloque CSS en una etiqueta <style> y JavaScript en una etiqueta <script>, o cárguelos desde una CDN a través de https.
2
Mira la vista previa en vivo
El panel de vista previa se vuelve a representar aproximadamente 300 ms después de dejar de escribir. Utilice la vista Dividir, Código o Vista previa para organizar el espacio de trabajo.
3
Verifique los anchos responsivos
Cambie entre computadora de escritorio (ancho completo), tableta (768 px) y dispositivo móvil (375 px) para ver cómo cambia el diseño.
4
Embellecer el marcado
Haga clic en Prettify para volver a sangrar el documento con Prettier (sangría de 2 espacios, líneas de 100 caracteres).
5
Exporta tu trabajo
Descargue el código exacto como .html, use Imprimir → Guardar como PDF para obtener texto de varias páginas seleccionable o haga clic en PDF para capturar una imagen rápidamente.
Casos de uso comunes
Un principiante escribe una etiqueta HTML e inmediatamente ve lo que hace.
Un desarrollador aísla un fragmento roto y lo depura sin poner en marcha un proyecto.
Un especialista en marketing obtiene una vista previa de un correo electrónico HTML o un bloque de página de destino a 375 px antes de enviarlo para su revisión.
Un profesor muestra el código y el resultado renderizado uno al lado del otro en clase.
Un profesional independiente simula un componente y envía al cliente un archivo .html o PDF.
guía detallada
Cómo probar el código HTML en línea
Pegue su código en el editor y la vista previa se actualizará automáticamente, sin necesidad de presionar el botón Ejecutar. Puede pegar un documento completo con <!DOCTYPE html>, <head> y <body>, o simplemente un fragmento como un <div> con algunos estilos, y el navegador completará la estructura que falta. Cambie a la vista previa para ver el resultado en tamaño completo o a la vista Código cuando desee espacio para escribir. Si algo no se ve bien, primero haga clic en Embellecer: una sangría limpia hace que una etiqueta abierta o un </div> fuera de lugar sea mucho más fácil de detectar.
Escribe HTML, CSS y JavaScript juntos
El editor trabaja en un único documento HTML, por lo que CSS y JavaScript van dentro de él. Agregue estilos en un bloque <style> en <head> o como atributos de estilo en línea, y agregue comportamiento en un bloque <script> al final de <body> o como atributos de evento como onclick. También puede cargar una biblioteca o marco desde una CDN, como Google Font, Play CDN de Tailwind o una biblioteca de gráficos, con una etiqueta <link> o <script src> normal que apunte a una URL https. La vista previa ejecuta sus scripts en un motor de navegador real, por lo que los eventos DOM, los temporizadores, el lienzo y las llamadas de recuperación a las API habilitadas para CORS se comportan como lo harían en una página en vivo.
Pruebe diseños responsivos en el ancho de teléfono y tableta
Utilice los botones del dispositivo encima de la vista previa para limitar su ancho. Incluye <meta name="viewport" content="width=device-width, initial-scale=1"> en tu <head> para que las consultas de medios respondan al ancho de vista previa de la misma manera que lo harían en un teléfono.
Programar
Ancho de vista previa
Que comprobar
De oficina
Ancho de panel completo
Contenedores de ancho máximo, cuadrículas de varias columnas, estados de desplazamiento
Tableta
768px
El punto de interrupción común de md: colapso de navegación, diseños de 2 columnas
Móvil
375px
Ajuste de texto, tamaño de destino al tocar, imágenes desbordadas, desplazamiento horizontal
Lo que la vista previa en vivo puede y no puede hacer
La vista previa es un marco de espacio aislado cargado desde su código. Por seguridad, tiene un origen opaco: sus scripts no pueden leer las cookies ni el almacenamiento de este sitio, y este sitio no puede leer su página. Ese diseño conduce a algunos límites predecibles, que se enumeran a continuación para que no pierda tiempo depurando el editor en lugar de su código.
Obras
No funciona (y por qué)
<estilo> en línea, atributos de estilo y <script>
Rutas relativas como src="img/logo.png": no hay ninguna carpeta en un servidor para resolverlas. Utilice URL https completas o URI de datos
CSS y JS desde una CDN a través de https
localStorage, sessionStorage y cookies dentro de su script: el sandbox los bloquea (arrojan un SecurityError)
alert(), confirm(), formularios y enlaces que se abren en una nueva pestaña
fetch() a API que no envían encabezados CORS: el navegador bloquea la respuesta, tal como lo haría en un sitio real
Imágenes y fuentes de URL públicas
Múltiples archivos, importaciones de npm o pasos de compilación: es un editor de un solo documento, no un IDE de proyecto
Prettify ejecuta el formateador HTML de Prettier en su navegador. Vuelve a sangrar las etiquetas anidadas con 2 espacios, ajusta líneas largas a 100 caracteres y coloca atributos en sus propias líneas cuando una etiqueta se vuelve demasiado ancha. Está adaptado a la estructura HTML, por lo que el contenido de los bloques <style> y <script> se deja en gran medida tal como los escribiste. No cambia lo que representa su página. Si el marcado tiene un error de sintaxis que Prettier no puede analizar, verá un mensaje y su código quedará exactamente como estaba.
Exportar a HTML o PDF
Hay tres opciones de exportación, cada una adecuada para un trabajo diferente. La descarga .html es byte por byte del código en el editor, listo para abrir en un navegador o colocarlo en un proyecto. Imprimir envía la vista previa renderizada al cuadro de diálogo de impresión de su navegador: elija Guardar como PDF para obtener texto seleccionable, saltos de varias páginas y cualquier cosa que dibuje su JavaScript. El botón PDF es un acceso directo de un clic que captura el HTML y CSS estático como una imagen, lo divide en páginas A4 y lo descarga. Debido a que es una imagen, su texto no se puede seleccionar y el contenido creado con JavaScript no aparecerá. Si el PDF rápido falla, la causa habitual es una imagen externa sin encabezados CORS; utilice Imprimir en su lugar.
Vista previa de plantillas de correo electrónico HTML
Los clientes de correo electrónico admiten mucho menos HTML y CSS que los navegadores, por lo que las plantillas de correo electrónico siguen convenciones más antiguas: un diseño basado en tablas, una columna de contenido de aproximadamente 600 px de ancho, atributos de estilo en línea en lugar de bloques <estilo> e imágenes con atributos de ancho fijo. Construya de esa manera aquí y cambie al ajuste preestablecido de 375 px para verificar cómo se acumula el correo electrónico en un teléfono. La vista previa muestra cómo un navegador moderno procesa su correo electrónico, lo cual es una buena primera comprobación. Algunos clientes, especialmente Outlook en Windows, lo mostrarán de manera diferente, por lo que siempre envíe una prueba a bandejas de entrada reales antes de que se publique una campaña.
Fragmentos iniciales para pegar
Patrones cortos que puedes escribir y adaptar. Cada uno necesita sólo unas pocas líneas y muestra su resultado inmediatamente en la vista previa.
Nada de lo que escribe se envía a un servidor. Para conservar su trabajo entre visitas, el editor guarda automáticamente su código en el almacenamiento local de este navegador en este dispositivo, por lo que sigue allí después de una actualización, pero no se sincroniza con otros dispositivos ni con otros navegadores. Al hacer clic en Restablecer, se reemplaza su código con el documento de muestra. Al borrar los datos de este sitio en la configuración de su navegador, se elimina la copia guardada. En una computadora compartida, presione Restablecer antes de irse.
Cuándo utilizar en su lugar un área de juegos con código completo
Este editor está diseñado para trabajar de forma rápida, privada y con un solo archivo: probar un fragmento, aprender HTML, comprobar un diseño a lo ancho del teléfono o obtener una vista previa de un bloque de correo electrónico, sin necesidad de una cuenta. Si necesita varios archivos, paquetes npm, un paso de construcción del marco, un enlace para compartir o colaboración en tiempo real, un campo de juego completo como CodePen, JSFiddle o PlayCode es la mejor opción. Muchos desarrolladores utilizan ambos: un bloc de notas rápido para comprobaciones como estas y un área de juegos completa para proyectos que desean compartir.
¿Cómo pruebo el código HTML en línea de forma gratuita?
Escribe o pega tu HTML en el editor. La vista previa se vuelve a representar aproximadamente 300 ms después de dejar de escribir, lo que muestra cómo un navegador real muestra su código. No hay botón Ejecutar, ni instalación ni registro.
¿Puedo incluir CSS y JavaScript en el editor HTML?
Sí. Coloque CSS en un bloque <style> o atributos de estilo y JavaScript en un bloque <script> o atributos de evento como onclick. También puedes cargar bibliotecas y fuentes desde una CDN con una URL https. Es un editor de un solo documento, por lo que no se admiten archivos .css y .js separados.
¿Cómo embellezco el código HTML en línea?
Pega tu HTML desordenado o minimizado y haz clic en Prettify. Prettier vuelve a sangrar las etiquetas anidadas con 2 espacios y ajusta las líneas largas a 100 caracteres sin cambiar la forma en que se representa la página. Si el HTML tiene un error de sintaxis que Prettier no puede analizar, su código no se modifica y verá un mensaje.
¿Puedo exportar mi código HTML como PDF?
Sí, de dos maneras. Imprimir → Guardar como PDF utiliza el motor de impresión de su navegador, que proporciona texto seleccionable, salida de varias páginas y cualquier cosa que su JavaScript represente. El botón PDF es una captura de imagen rápida con un solo clic de HTML y CSS estáticos, dividida en páginas A4; su texto no se puede seleccionar y la salida de JavaScript no está incluida.
¿Mi código HTML está guardado en algún lugar?
Sólo en tu propio navegador. El editor se guarda automáticamente en el almacenamiento local de este navegador para que su trabajo sobreviva a una actualización, pero no se carga nada en un servidor y no se sincroniza con otros dispositivos. Haga clic en Restablecer o borre los datos de este sitio para eliminarlo.
¿Por qué mi imagen o archivo CSS externo no se carga en la vista previa?
Las rutas relativas como img/logo.png o estilos.css no tienen carpeta para resolver, porque la vista previa se crea a partir de su código en lugar de archivos en un servidor. Utilice una URL https completa, pegue el CSS en un bloque <style> o convierta una imagen pequeña en una URI de datos.
¿Por qué localStorage arroja un error en mi script?
La vista previa se ejecuta en un marco de espacio aislado con un origen opaco, por lo que no puede tocar los datos de este sitio. Como resultado, localStorage, sessionStorage y las cookies no están disponibles para su código allí y generan un SecurityError. Pruebe la lógica de almacenamiento en un archivo local o en un área de juegos completa.
¿Puedo utilizar este editor HTML para aprender HTML como principiante?
Sí. Escriba una etiqueta y vea el resultado inmediatamente. Comience con la estructura básica (<h1>, <p>, <a>, <img>), luego agregue un bloque <style> y experimente con colores y diseño. Esa retroalimentación instantánea es mucho más rápida que editar un archivo y actualizar una pestaña del navegador.
¿Funciona como vista previa responsiva?
Sí. Cambie la vista previa entre escritorio (ancho completo), tableta (768 px) y móvil (375 px). Agregue una metaetiqueta de ventana gráfica a su <head> para que sus consultas de medios respondan como lo harían en un teléfono real.
