Markdown Editor Patterns

Recipes for building split-pane editors, live previews, and toolbar-driven Markdown composition in React.

Split-Pane Layout

The classic pattern: a textarea on the left, a rendered preview on the right. Use CSS Grid with equal columns and a shared scroll container for synchronized scrolling.

<div className="grid grid-cols-2 h-screen">
  <textarea className="resize-none p-4 bg-transparent" />
  <div className="prose prose-invert p-4 overflow-y-auto" />
</div>

Toolbar-Driven Editing

Wrap selected text with Markdown syntax on toolbar button click. Track selection range via ref.selectionStart and ref.selectionEnd, then splice the prefix/suffix into the value string.

const wrap = (before: string, after: string) => {
  const { value, selectionStart, selectionEnd } = ref.current!
  const selected = value.slice(selectionStart, selectionEnd)
  const replaced = before + selected + after
  setValue(value.slice(0, selectionStart) + replaced + value.slice(selectionEnd))
}

Debounced Live Preview

Parse Markdown to HTML in a Web Worker or debounced effect (150ms) to avoid blocking the main thread on every keystroke. Use a lightweight parser like marked or micromark for sub-millisecond renders.

← All recipes