OverType - The Markdown Editor That's a Textarea

https://overtype.dev/ • Aug 17, 2025 19:55

Extracto

OverType is a transparent textarea over rendered markdown. Plain text simplicity, WYSIWYG beauty, zero complexity.

Resumen

Resumen Principal

OverType representa una innovación significativa en el ámbito de los editores WYSIWYG (What You See Is What You Get) para Markdown, destacándose por su enfoque radicalmente simplificado. Su arquitectura central es ingeniosamente minimalista: una caja de texto (textarea) transparente superpuesta sobre un div que muestra el Markdown renderizado. Este diseño "under-engineered" o "infra-diseñado" elimina la necesidad de las complejidades habituales de los editores modernos, como los DOM virtuales o las API de ContentEditable, que a menudo introducen bugs y altos requerimientos de recursos. Al depender de las capacidades nativas del navegador para la entrada de texto, OverType asegura que funcionalidades esenciales como deshacer/rehacer, la compatibilidad con teclados móviles y la selección de texto funcionen sin problemas y de forma nativa. El resultado es una experiencia de usuario que combina la simplicidad del texto plano con la belleza visual del formato renderizado, todo encapsulado en una solución extremadamente ligera (45KB) y fácil de integrar con una sola etiqueta de script, marcando un fuerte contraste con la pesadez de otros editores que demandan múltiples dependencias y procesos de compilación.

Elementos Clave

Arquitectura de Capas Transparente: La esencia de OverType reside en su diseño de "una sola capa de abstracción": una <textarea> estándar se coloca sobre un <div> que muestra el contenido Markdown ya renderizado. El truco clave implica hacer que el área de texto sea transparente (solo el caret o cursor permanece visible) y sincronizar el scroll y el contenido del preview div a medida que el usuario escribe. Esta técnica permite aprovechar todas las funciones nativas del navegador para la entrada de texto, como la selección, copiar/pegar y las operaciones de deshacer/rehacer, sin reingeniar la rueda.
Ligereza y Facilidad de Implementación: OverType se enorgullece de su tamaño mínimo (45KB) y su simplicidad de configuración. Requiere una sola etiqueta de script y no tiene dependencias externas, procesos de compilación (npm, webpack) ni archivos de configuración complejos. Su promesa de "Minutos para entender" y "Minutos para personalizar" resalta una filosofía de anti-complejidad que contrasta fuertemente con la vasta sobrecarga de otros editores que pueden superar los 300-500KB y requerir horas o días para su comprensión y adaptación.
Experiencia WYSIWYG Sin Compromisos: A diferencia de muchos editores modernos que luchan con las peculiaridades de ContentEditable o la complejidad de los DOM virtuales, OverType ofrece una experiencia WYSIWYG sin los dolores de cabeza asociados. Al utilizar un <textarea> para la entrada, garantiza una interacción robusta y predecible, al tiempo que proporciona una vista instantánea y hermosamente formateada del resultado. Esto ofrece lo mejor de ambos mundos: un control total sobre el editor, las interacciones nativas de

Contenido

OverType is a transparent textarea over rendered markdown.
Plain text simplicity, WYSIWYG beauty, zero complexity.

45KB TOTAL • ONE SCRIPT TAG • UNDERSTAND YOUR EDITOR

Hi HN! In my attempt to hack the standard WYSIWYG editor, I accidentally removed 90% of it and it still works ¯\_(ツ)_/¯

AN UNDER-ENGINEERED SOLUTION

A SINGLE LAYER OF ABSTRACTION - A textarea over a preview div
AN OPEN BOX - Read, understand, and modify the code
WYSIWYG WITHOUT THE HAIR-PULLING - Everything just works, it's native

"Simple request: Edit markdown. Reality: Install 50+ dependencies."

JUST A TEXTAREA

1. TYPE IN A TEXTAREA - All native browser features just work

2. SEE RENDERED OUTPUT - Beautiful formatted text appears beneath

3. THAT'S IT - No virtual DOM, no ContentEditable

SEE IT IN ACTION

Everything just works: undo/redo, mobile keyboards, native selection - because it's really a textarea.

THE BEST OF BOTH WORLDS

YOU GET:

✓ A beautiful WYSIWYG editor
✓ Native textarea interactions
✓ Total control

WITHOUT:

✗ Build steps
✗ Framework requirements
✗ ContentEditable bugs

SET UP

1. ADD THE SCRIPT

<script src="https://unpkg.com/overtype"></script>

2. ADD YOUR EDITORS

<div class="editor"></div>
<div class="editor"></div>

3. INITIALIZE

That's it. No npm. No build. No config.

A PEAK UNDER THE HOOD

// The entire trick:
layerElements(textarea, preview)           // Position textarea over preview
applyIdenticalSpacing(textarea, preview)   // Match fonts, padding, line-height exactly

// Make textarea invisible but keep the cursor
textarea.style.background = 'transparent'
textarea.style.color = 'transparent'
textarea.style.caretColor = 'black'

// Keep them in sync
textarea.addEventListener('input', () => {
  preview.innerHTML = parseMarkdown(textarea.value)
  syncScroll(textarea, preview)
})

// That's it. Everything else is polish.

That's it. A transparent textarea over a preview div. No virtual DOM. No ContentEditable. No magic.

ANTI-COMPLEXITY

OVERTYPE	OTHER EDITORS
45KB total	300-500KB + dependencies
Minutes to understand	Hours to understand
Minutes to customize	Days to customize
It's a textarea	12 pages of docs

START BUILDING

"Wonderfully boring."