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
Funciones que van más allá de pegar código y pulsar «ejecutar».
Resaltado de sintaxis + marca de rango enlazado
Los tres paneles usan resaltado léxico real para HTML, CSS y JavaScript. Encima de eso, al interactuar con la vista previa o con el código, se aplica una capa visual que señala el fragmento correspondiente. Así es más fácil ver html con contexto: no adivinas a ojo qué regla mueve un bloque.
- 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
Tres pasos
Clases y tutoriales
Ver html online mientras el profesor explica: el alumno reproduce el ejemplo y comprueba el efecto al momento.
Revisión rápida de un snippet
Copias un fragmento de foro o documentación y quieres ver html sin montar un proyecto local: pegas, previsualizas y listo.
Comparar maquetación y marcado
Cuando el diseño no cuadra, el enlace bidireccional acorta el camino entre lo que ves y la línea que lo provoca.
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