Más que un visor: editor de HTML con resaltado cruzado
Escribes o pegas en el editor de HTML; a la derecha se actualiza la página. El resaltado de sintaxis distingue HTML, CSS y JavaScript como en un IDE ligero. Si haces clic en un bloque del resultado, el editor desplaza y marca el trozo de código relacionado; al revés, al tocar una línea, ves qué parte del diseño proviene de ahí. Hay notas breves sobre etiquetas y propiedades cuando las necesitas, sin relleno publicitario.
Sin registro obligatorio
Todo en tu navegador
Útil en cursos y trabajo
Un visualizador de código HTML orientado a la práctica
Mucha gente solo quiere ver html y entender qué línea afecta a qué caja. Un visor html básico muestra el render, pero no siempre ayuda a conectar la estructura con el código. Aquí el foco está en esa conexión: colores por lenguaje, selección en ambos sentidos y, si quieres, explicaciones cortas.
Cómo funciona el enlace código ↔ vista previa
Al elegir un elemento en la vista previa, el editor resalta el rango de texto que lo genera (no solo un número de línea suelto). Si seleccionas código, la zona equivalente en la página queda resaltada. Eso va más allá del típico «iframe + textarea»: es un comportamiento pensado para seguir el rastro del marcado y los estilos.
Además del resaltado léxico en cada panel, puedes abrir el código fuente en una pestaña nueva: el HTML se escapa para que sea seguro de leer, con tema oscuro y colores distintos para etiquetas, atributos, valores entre comillas y comentarios. Es un modo distinto de la vista previa: sirve para revisar la jerarquía del documento o compartir una lectura clara del código.
Probar en el tallerTres lenguajes, tres esquemas de color
El editor de HTML trata el marcado, las hojas de estilo y el script por separado: cada uno lleva su propia regla de resaltado, no un único bloque gris.
Anotaciones opcionales
Puedes consultar textos breves sobre etiquetas y propiedades CSS sin salir de la misma pantalla.
Plegado y atajos habituales
Secciones largas se pueden colapsar en el editor; deshacer y rehacer funcionan con las combinaciones que ya conoces.
Qué aporta de concreto
El punto clave es la sincronización bidireccional del resaltado: haz clic en el código para ver el elemento correspondiente en la vista previa, o haz clic en un elemento de la vista previa para ir a la línea correspondiente del código fuente.
Resaltado bidireccional (código ↔ vista previa)
Nuestro sistema de resaltado muestra la relación «código ↔ vista previa»: haz clic en una línea del código y el elemento correspondiente en la vista previa se iluminará; haz clic en un elemento de la vista previa y el editor saltará a la línea correspondiente del código y la resaltará también. Nota: en archivos muy largos, el salto tras el clic en la vista previa puede quedar un poco por encima de la línea resaltada con máxima precisión; en ese caso, desplázate un poco hacia abajo para verla.
- Vista previa al instante junto al código
- Clic en la página o en el editor: ambos se sincronizan
- Notas breves sobre etiquetas y CSS
- Sin registro en el navegador
Playground: funciones que conviene conocer
Modo edición y resaltado bidireccional
Por defecto, código y vista previa van unidos: al hacer clic en la vista previa se resalta el código correspondiente, y al hacer clic en el código se resalta la zona en la vista previa. Si vas a escribir mucho o pegar un bloque grande, pulsa «Editar»: en modo edición se desactivan el resaltado sincronizado y los saltos para que puedas concentrarte en escribir.
Formatear
«Formatear» ordena la pestaña activa (HTML, CSS o JavaScript) con sangría y saltos de línea coherentes para leer y revisar mejor.
Expandir todo / Contraer todo
En archivos largos el editor puede plegar regiones. «Expandir todo» abre todos los pliegues de una vez; «Contraer todo» los cierra para ver la estructura o centrarte en una parte.
Qué comentan quienes lo usan
Experiencias reales de estudiantes y desarrolladores (textos editados por brevedad).
Lo que más me gusta es el clic en la caja y que salte el código exacto. En otros sitios solo veía el resultado y tenía que buscar a mano en el textarea.
Laura G.
Estudiante de desarrollo web
"El modo fuente en pestaña nueva me sirve para mandar capturas legibles a compañeros; se nota que no es un simple copiar-pegar plano."
Carlos M.
Diseñador front-end / Lleva unos 3 meses usándolo
"Para enseñar HTML en un curso corto, este editor de html evita que la gente se pierda entre DevTools y el bloc de notas."
Ana R.
Formadora / Lo recomienda en sus talleres
"Los colores por lenguaje se notan; no es el típico visor html de una sola tonalidad."
Diego P.
Junior full-stack / Usuario ocasional
Preguntas frecuentes
Abre el taller ahora
Usa el editor de html en el navegador: ver html online con resaltado y vista previa, sin formulario de registro.
HTML Viewer
- Editor de html con HTML, CSS y JS separados
- Resaltado de sintaxis y enlace con la vista previa
- Vista de fuente en pestaña nueva, coloreada
- Sin cuenta; funciona en el navegador
