Editor HTML Online
Escribe en un lado y míralo en el otro
Este editor HTML online junta dos paneles de código con una vista previa en vivo. Escribes marcado y CSS, ves aparecer el resultado mientras tecleas y lo pruebas en anchos de móvil, tableta y escritorio. Nada de lo que escribes sale del navegador.
- GratisPrecio
- DosPaneles
- NingunoRegistro
- NingunoSubidas
Editor HTML online
HTML y CSS a un lado, una vista previa en vivo al otro
Listo. Escribe en cualquiera de los paneles y la vista previa se redibuja un momento después.
Qué hace un editor HTML online
Un editor HTML online te deja escribir una página web y verla al momento. Escribes HTML en un panel y CSS en el otro. Un momento después, el editor vuelve a dibujar la página. Así nunca guardas un archivo, cambias de ventana y recargas solo para revisar un cambio.
Los paneles están a la izquierda y la vista previa a la derecha. En una pantalla estrecha, se apilan. Encima, una fila de botones fija el ancho de la vista, para que veas la misma página como la mostraría un móvil, una tableta o un escritorio.
No hace falta instalar nada. Abres una pestaña en lugar de un editor de código y la cierras cuando el diseño queda bien. Además, todo el borrador se queda en este navegador. Una página sin publicar o la maqueta de un cliente nunca llega a nuestro servidor, porque no hay ningún paso de servidor.
Debajo del resultado, el editor muestra un panel de informe que lee tu trabajo. Cuenta los elementos y las reglas CSS. Nombra las reglas que no afectan a nada y lista los fallos de accesibilidad que puede detectar. Por último, lista todo lo que bloqueó. Así, una página que se ve bien pero se lee mal aparece aquí, y no en una revisión posterior.
Cómo la vista previa se mantiene aparte de esta página
La vista previa no se pega dentro de esta página. En cambio, el editor la dibuja dentro de un shadow root, que funciona como un jardín amurallado dentro del navegador.
Un shadow root separa los estilos en las dos direcciones, como describe la especificación HTML. Así, tu regla para h1 no llega al encabezado de arriba, y nuestra hoja de estilos no aplasta la tarjeta que estás creando.
Gracias a ese muro, el editor es honesto. Lo que ves es tu marcado con tus reglas, sin nada nuestro mezclado.
El editor también convierte tu texto en elementos reales. Por eso el navegador coloca tu página igual que colocaría un archivo guardado. Eso importa en una rejilla o una fila flex, porque una vista falsa suele esconder el punto donde una fila salta.
Por qué los scripts no se ejecutan aquí
El editor apaga los scripts. Es una decisión, no una carencia. Quita las etiquetas script, elimina onclick y cualquier otro atributo de evento, y rechaza los enlaces javascript:.
Hay dos motivos detrás. Primero, una página que ejecuta tu script puede usarse para actuar en nombre de quien te envió el fragmento. Segundo, un editor que ejecuta código no puede prometer que nada salga de tu navegador.
Por eso el informe lista cada controlador y cada etiqueta script que quitó. Como resultado, nunca te preguntas por qué un botón no hizo nada.
Si necesitas un entorno para probar JavaScript, esta no es la página. En su lugar, crea aquí la estructura y los estilos, y luego añade el comportamiento en tu propio editor de código.
Los enlaces y los formularios están inactivos por la misma razón. Un clic dentro de la vista previa podría sacar la pestaña de tu trabajo, así que el editor muestra una nota corta.
Probar un diseño en tres anchos
El editor usa un ancho, no el nombre de un dispositivo. Los ajustes rápidos cubren 375 píxeles para un móvil, 768 para una tableta y 1280 para un escritorio. Además, el campo personalizado acepta cualquier ancho entre 200 y 2560.
Tus media queries responden a ese ancho. El editor convierte cada regla @media que solo mira el ancho en una container query sobre la caja de la vista previa. Así, un punto de corte en 600 píxeles se activa cuando la vista mide 600 píxeles, aunque esta página sea más ancha.
El ancho personalizado suele ser el más útil. Entre unos 320 y 900 píxeles, casi todas las rejillas se rompen en algún punto, y ese punto cae en un número raro que ningún ajuste rápido cubre.
Una página ancha cabe igualmente en tu pantalla. El editor la reduce al espacio disponible, pero mantiene el ancho real del diseño. Por eso el texto se ve pequeño a 1280, aunque salta de línea igual que en un escritorio.
Qué lista el panel del informe
El panel del informe convierte el editor en una herramienta de revisión rápida. Lee el marcado y la hoja de estilos tras cada redibujado y anota lo que encontró.
Primero vienen los recuentos: cuántos elementos tiene la página y cuántas reglas CSS. Después viene la lista de reglas que no afectaron a nada. Una errata en el nombre de una clase falla en silencio, porque el navegador simplemente ignora la regla. Por eso el panel te nombra el selector.
Después vienen las notas de accesibilidad. Una imagen sin texto alternativo, un campo sin etiqueta, un enlace que solo contiene una imagen y un encabezado que salta del nivel dos al cuatro reciben cada uno su línea.
Luego vienen las etiquetas que el navegador repararía por su cuenta, como un div que nunca se cierra o una etiqueta de cierre sin apertura. Por último, la lista de bloqueos nombra cada script, controlador de eventos, imagen remota, fuente web y @import que detuvo. Así, un logo que falta llega con una razón, no con un misterio.
Guía en vídeo: Editor HTML online
Un vídeo corto recorre cada paso. Luego elige tu idioma abajo y activa los subtítulos si quieres.
Cómo usar el editor HTML online
Cuatro pasos, y ninguno necesita cuenta.
- 1
Escribe el marcado
Escribe en el panel HTML o elige un ejemplo para empezar con código que funciona. El editor redibuja la página un momento después de que dejes de escribir.
- 2
Dale estilo en el segundo panel
Después escribe reglas en el panel CSS. Los dos paneles alimentan la misma vista, así que un cambio en cualquiera aparece en el mismo lugar.
- 3
Elige un ancho
A continuación, pasa por 375, 768 y 1280 píxeles, o escribe tu propio ancho. Así detectas el salto que solo ocurre a 420 píxeles antes que nadie.
- 4
Lee el informe y exporta
Por último, corrige las reglas muertas y las notas de accesibilidad. Después, copia cada panel o descarga un solo archivo HTML con los dos.
Por qué usar este editor HTML online
Cinco razones, y cada una te ahorra una vuelta.
La vista previa no puede tocar esta página
El editor dibuja tu página en un shadow root, así que una regla suelta tuya no puede cambiar el estilo de la página que la rodea. Incluso un selector comodín queda inofensivo.
Nada se carga desde otro servidor
Un fragmento copiado de una página desconocida no puede llamar a casa mientras lo miras. Como resultado, puedes abrir la maqueta de un cliente sin preocuparte por rastreadores.
Un informe, no una vista previa en blanco
Cuando la página se ve mal, el editor suele decir por qué. Por ejemplo, lista una imagen que falta como bloqueada, en lugar de dejarte con una caja vacía.
Anchos reales, media queries reales
El editor coloca tu página al ancho que eliges, así que tus puntos de corte se activan de verdad. Un diseño que aguanta a 375 y 768 probablemente aguantará en las pantallas que representan esos números.
Sale un solo archivo
La descarga junta el marcado y la hoja de estilos en un único archivo HTML. Así puedes pasárselo a un compañero o abrirlo sin conexión, sin ningún paso de compilación en medio.
Hábitos que hacen útil el editor
Seis hábitos que convierten un borrador en un flujo de trabajo real.
- Empieza con un ejemplo Carga la rejilla de tarjetas, el formulario o el artículo, y recórtalo. Un esqueleto que funciona es mejor que un panel en blanco cuando solo necesitas un componente.
- Escribe primero el marcado El HTML simple ya se lee bien en un navegador, así que la estructura aparece antes de que exista ninguna regla. Luego el CSS solo tiene que ordenar lo que ya está ahí.
- Dale un motivo a cada regla Borra una regla en cuanto no afecte a nada. El informe nombra esas reglas, y una hoja de estilos sin reglas muertas es mucho más fácil de mantener.
- Revisa primero el ancho estrecho Empieza en 375 píxeles y ensancha desde ahí. Un diseño que funciona estrecho suele estirarse bien, mientras que lo contrario rara vez ocurre.
- Nombra las clases según su función Escribe card-foot en lugar de grey-small. El nombre de una clase pasa al siguiente rediseño, y un nombre atado a un color o a un tamaño envejece mal.
- Completa los textos alternativos antes de exportar Rellena cada texto alternativo que pide el informe. Así, el marcado sale de la página en mejor estado del que llegó.
Seis formas en que una vista previa en vivo te engaña
Cada una se ve bien en el panel y te sorprende después.
Fiarte de una vista previa que no es la página real
Un fragmento que funciona solo puede romperse dentro de una plantilla, y toda vista previa tiene ese límite. Así que pégalo en el sitio real y revísalo allí antes de publicarlo.
Dejar scripts y esperar que se ejecuten
Este editor quita las etiquetas script y los controladores de eventos a propósito. Por eso un botón que aquí no hace nada no es un fallo, y el informe nombra lo que quitó.
Olvidar que los archivos remotos nunca cargan
Un logo, una fuente de iconos o un fondo de otro servidor no aparecerá. Así que usa un data URI mientras trabajas, o acepta el hueco y añade el archivo real después.
Dar estilo a un elemento que no existe
Una regla para una clase que tu marcado nunca usa no cambia nada. La página no dice nada al respecto, así que el informe es el único sitio donde aparece el error.
Probar solo en el ancho mayor
Una revisión solo de escritorio deja fuera a muchos lectores, ya que muchos navegan con el móvil. Por eso la fila de ajustes empieza con el ancho de móvil.
Cerrar la pestaña con la única copia
El borrador vive solo en este navegador, y borrar los datos del sitio lo elimina. Así que descarga el archivo cuando el diseño esté listo.
Preguntas sobre el editor HTML online
¿Este editor HTML online es gratis?
Sí. No hay cuenta, ni límite, ni plan de pago. Ábrelo tantas veces como quieras.
¿Qué es un editor HTML online?
Es una página donde escribes HTML y CSS y ves el resultado mientras escribes. En resumen, el editor convierte tu navegador en el resultado, así que dejas de cambiar de ventana para ver qué hizo un cambio.
¿Ejecuta mi JavaScript?
No. Se quitan las etiquetas script, los atributos de eventos y los enlaces javascript:, y el informe nombra cada uno. Así, un fragmento de un desconocido no puede actuar mientras lo lees.
¿Puede la vista previa romper esta página?
No. Se dibuja dentro de un shadow root, así que una regla tuya no llega a la página, y una regla nuestra no llega a tu marcado.
¿Puedo cargar una imagen de otro sitio?
No. El editor bloquea las peticiones a otros servidores, y el informe lo dice. Sin embargo, un data URI funciona, porque viaja dentro del marcado.
¿Qué anchos puedo probar?
Los ajustes rápidos cubren 375, 768 y 1280 píxeles, y el campo personalizado acepta cualquier ancho entre 200 y 2560. Por eso puedes quedarte justo en el número donde se rompe tu rejilla.
¿Funcionan mis media queries?
Sí, las de ancho. El editor convierte cada una en una container query sobre la caja de la vista previa, así que se activa con el ancho que elegiste en el editor. Las demás, como print o hover, mantienen su sentido normal.
¿Qué revisa el panel del informe?
Cuenta los elementos y las reglas CSS, y lista las reglas que no afectan a nada. Además, lista fallos de accesibilidad, etiquetas que el navegador repararía y todo lo que bloqueó.
¿Se guarda mi marcado en algún sitio?
Solo en este navegador, como borrador. Cuando vuelves, el editor lo carga de nuevo. Si borras los datos del sitio, se pierde, así que descarga el archivo para conservarlo.
¿Puedo pegar marcado que no escribí yo?
Sí. El editor quita las partes que podrían actuar en nombre de otro antes de dibujar nada. Por eso un fragmento desconocido se puede mirar aquí sin riesgo.
¿Puedo pegar una página entera?
Sí. Un documento completo funciona. El editor conserva los bloques style del head y dibuja el contenido del body dentro del editor.
¿Me dirá si mi HTML no es válido?
Señala una etiqueta que nunca se cierra y una etiqueta de cierre sin apertura. El navegador repara ambas en silencio, así que la página sola las escondería.
¿Admite grid y flexbox?
Sí. El editor dibuja una caja real en un navegador real, así que los dos modos de diseño se comportan igual que en producción.
¿Puedo copiar el código al terminar?
Sí. Cada panel tiene su propio botón de copiar. Además, la descarga junta los dos paneles en un solo archivo HTML.
¿Qué pasa con los scripts en la descarga?
El archivo conserva tu marcado y tus estilos. Sin embargo, las etiquetas script se convierten en comentarios cortos y se quitan los atributos de eventos, así que el archivo coincide con lo que viste.
¿Puedo deshacer un cambio?
Sí. Cada panel es un cuadro de texto normal, así que el deshacer de tu navegador funciona dentro. Para empezar de cero, elige un ejemplo y cárgalo otra vez.
¿Formatea o minifica el código?
No, y es a propósito. Cada panel guarda los espacios que escribiste. Cuando el marcado esté listo, pásalo por el minificador.
¿Funciona en el móvil?
Sí. Los paneles se apilan en una pantalla estrecha, y el editor mantiene la página con su propio ancho. Así puedes arreglar un salto de línea lejos de tu mesa.
¿De quién es el marcado que escribo?
Tuyo. No hay que dar crédito ni hay reclamación nuestra, así que puedes usarlo en trabajos de pago.
¿Necesito una cuenta o una extensión?
No. La página funciona sola, sin registro y sin nada que instalar.
Herramientas que van con esta
Cuatro páginas a las que suele llevar el mismo trabajo.
Prueba un selector sobre el marcado que pegues y mira qué atrapa. Un selector que no coincide con nada se escapa fácil a simple vista, así que esta página lo nombra.
Abrir herramienta →Cuando el diseño esté listo, quita los comentarios y los espacios de más. Así, el archivo que publicas lleva la estructura y no las notas que hay detrás.
Abrir herramienta →Antes de enviar marcado como correo, revísalo como lo lee un cliente de correo. Un cliente de correo quita mucho más que una vista previa web.
Abrir herramienta →Cuando una página necesita un icono o un diagrama pequeño, dibújalo y ordénalo allí. Después pega el código SVG limpio directamente en el panel HTML.
Abrir herramienta →
Escribe el marcado y mira cómo queda
Escribe el HTML, dale estilo en el panel de al lado, recorre los tres anchos y lee el informe. Nada se carga desde otro servidor, ningún script se ejecuta y todo el borrador se queda en tu navegador.