THE MARKDOWN EDITOR THAT'S A TEXTAREA

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

JUST A TEXTAREA

SEE IT IN ACTION

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

THE BEST OF BOTH WORLDS

SET UP

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

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

new OverType(".editor");

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