OverType – editor Markdown WYSIWYG basado únicamente en un área de texto

 (github.com/panphora)
13 puntos por GN⁺ 2025-08-18 | 2 comentarios | Compartir por WhatsApp
  • OverType es un editor WYSIWYG de código abierto diseñado para editar documentos Markdown de forma visual directamente
  • La característica más destacada de este editor es que está implementado usando únicamente HTML textarea, por lo que ofrece ligereza y carga rápida
  • No requiere instalación ni bibliotecas externas adicionales, así que puede usarse de inmediato incluso en entornos simples
  • En comparación con otros editores Markdown, tiene menos restricciones de entorno de ejecución, y su código es legible y fácil de mantener
  • Con vista previa en tiempo real y una UI intuitiva centrada en el usuario, incluso los desarrolladores principiantes pueden crear y editar documentos Markdown fácilmente

Funciones y ventajas clave

  • Ligero: no tiene código ni dependencias innecesarias, por lo que puede ejecutarse directamente en el navegador
  • Estructura simple: diseño basado en un solo textarea que facilita la depuración y la ampliación
  • Compatibilidad WYSIWYG: cuando el usuario escribe sintaxis Markdown, se ofrece una vista previa visual inmediata
  • Accesibilidad: cualquiera puede acceder sin procesos de instalación complejos
  • Fácil de usar: la estructura del proyecto es intuitiva, lo que permite aprenderlo e implementarlo rápidamente

Ventajas comparativas

  • En comparación con los editores WYSIWYG habituales, su tamaño es muy pequeño
  • Frente a editores basados en grandes frameworks, es más fácil de mantener y personalizar
  • Gracias a su carga rápida y bajo consumo de memoria, puede usarse con fluidez incluso en entornos de bajos recursos

Casos de uso

  • Un editor Markdown sencillo para tomar notas
  • Puede integrarse fácilmente en servicios que necesiten un editor de documentos embebido
  • Adecuado para fines educativos y entornos de desarrollo de prototipos

Lecturas relacionadas

2 comentarios

 
m00nlygreat 2025-08-18

¡Me encanta esto!
 
GN⁺ 2025-08-18
Opiniones en Hacker News
  • Está realmente genial; si todo funciona de inmediato como una solución drop-in, creo que sería muy útil. Por ponerme un poco quisquilloso, decir que “renderiza” Markdown en realidad se parece más a un “resaltado de sintaxis”. Otro enfoque interesante sería usar la CSS Custom Highlight API; así ya no haría falta un div de vista previa, y además quizá se podrían aplicar fuentes no monoespaciadas o distintos tamaños de texto en encabezados, etc. Más información sobre la CSS Custom Highlight API
    • Me pregunto si también se puede aplicar resaltado al contenido de un textarea
    • Si ves la demo ampliada con animación, se nota que da formato de una manera claramente distinta al texto normal, como texto en negritas o símbolos convertidos en puntos
  • Me identifiqué por completo con eso de que “había un caos porque el CSS heredado de la página padre desajustaba márgenes, padding, line-height, etc.”; en casos así, usar Web Components y su Shadow DOM es justo la solución ideal. Si este componente envolviera un textarea en lugar de div.editor, se podría mejorar de forma progresiva la experiencia existente de textarea
  • Se ve realmente bien; comparto algunos enlaces que había guardado sobre este tipo de enfoque en el pasado
  • Explorando el sitio overtype.dev encontré un rabbit hole realmente increíble; recomiendo hyperclay.com, una app de HTML única, me divertí muchísimo
    • Creo que este enfoque está muy cerca de la dirección que originalmente buscaba la WWW. El primer navegador web de hecho también ofrecía funciones de edición. La app que Tim Berners-Lee creó en NeXT envolvía la clase de texto enriquecido integrada del sistema operativo (TextView, luego NSTextView, que todavía se usa en la app TextEdit de Mac). Pero la edición desapareció por dos razones: primero, como no existía HTTP PUT, el HTML modificado solo podía guardarse localmente; segundo, aunque Mosaic creó un navegador multiplataforma, implementar también la edición era demasiado complejo y por eso la quitaron. Al final, la mayoría de los usuarios se acostumbró a un entorno sin funciones de edición
    • No suelo reaccionar así de seguido, pero esta vez de verdad me impactó. No entiendo por qué este enfoque no se ha vuelto explosivamente popular como está; en una época como la actual, donde el vibe coding está tan en auge, me parece que esto sería mucho más eficiente y mejor
    • Me recuerda a los experimentos geniales que se intentaban en el desarrollo web de mediados de los 2000; creo que proyectos así elevan un escalón los estándares y las expectativas de los usuarios
  • Parece estar muy pulido; me pregunto si también se podría implementar una función como la de Cursor en los IDE, que muestra texto de autocompletado en color plateado delante del cursor actual y que al presionar TAB se refleje en .value
  • Está muy bien; creo que le quedaría mejor llamarlo un “resaltador de sintaxis transparente”. En una demo de aventura que hice también usé algo parecido con un <input text> oculto, para conservar funciones básicas como pegar y seleccionar, mientras integraba totalmente el estilo. Los input básicos son mucho más simples y por eso más atractivos que contentEditable. Si aquí además se renderizara Markdown real, manteniendo el textarea completamente oculto pero conservando el foco, y emulando tal cual en el textarea los eventos de selección del marcado renderizado, creo que se podría tener tanto la estabilidad de un cuadro de texto como un editor bonito
    • Un dato curioso: el resaltado de sintaxis se añadió así en el cuadro de búsqueda de GitHub. Antes, en Shortwave (cliente de correo), también se implementó de la misma manera (una vista montada sobre un input transparente). Y gracias a este blog se pudo llevar la UX de búsqueda a otro nivel
      Delightful Search: More Than Meets the Eye (blog de Superhuman)
  • Está buenísimo; me encanta esta clase de simplicidad. No parece tener desventajas frente a un textarea tradicional y al mismo tiempo ofrece más ventajas. Creo que llevó el textarea a un nivel completamente nuevo. Antes hice un proyecto parecido llamado contextarea.com, y creo que sería buena idea combinarlo con overtype
    • Considero que poder usar solo fuentes monoespaciadas sí es una desventaja. Si no eres desarrollador o programador, su utilidad en un producto baja bastante. Claro, el proyecto sigue siendo genial; solo quiero decir que sí tiene una limitación clara
  • Me pregunto si han considerado envolver esto como un Web Component para poder usarlo directamente sin div + llamada al constructor
  • Si fuera un editor WYSIWYG, debería tener vista previa de imágenes, pero en realidad parece ofrecer solo resaltado de sintaxis dentro del área de texto. El proyecto está bien, pero el texto promocional es un poco engañoso
    • Este es un ejemplo de uso incorrecto del término. Un verdadero editor WYSIWYG ni siquiera muestra el marcado de formato
    • Si escribes texto, seleccionas la parte a resaltar y presionas el botón “B” para ponerlo en negritas, entonces sí podría llamarse WYSIWYG, salvo por la vista previa de imágenes
    • No encontré la función de imágenes; me pregunto si se me escapó algo
  • Comparto la demo de spell, que funciona en 912 bytes
    • Esto está de locos, de verdad me impresionó muchísimo. No encaja exactamente con Markdown, pero parece un WYSIWYG que ofrece muchas más funciones que overtype (aunque overtype también es un proyecto realmente bueno). Me impacta que se pueda hacer tanto con 912 bytes. Siento que se podría crear una entrada de blog muy simple de menos de 14 kb, con soporte incluso para comentarios, y que aun así cargara rapidísimo. De verdad no me alcanzan las palabras para expresar lo impresionado que estoy