Home Original page

OverType - 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

"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://cdn.jsdelivr.net/npm/overtype@latest"></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 PEEK 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
91KB 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."