What is Live Preview in Markdown Editors?

Live preview (often called “in-place preview” or WYSIWYM—What You See Is What You Mean) is an editor interface architecture that merges raw Markdown editing with finished typographic document rendering into a single, seamless writing canvas.

In the early days of Markdown (2004–2015), users wrote in dual-pane editors: you typed raw syntax with asterisks and hashes in an editor pane on the left, while an HTML preview engine rendered the finished document in a preview pane on the right. While functional, split panes waste screen real estate, create visual dissonance, and force writers to constantly shift their gaze between two windows.

The mechanical engineering of live-preview editors

Modern live-preview editors (such as Typora, Obsidian Live Preview, and Oyma) are built on advanced text buffer architectures like CodeMirror 6:

[Raw Buffer on Disk: "# Heading 1
**bold**"]
                      ↓
  [Abstract Syntax Tree (AST) Parser]
                      ↓
 [Viewport Decoration Engine (Visible Lines Only)]
                      ↓
┌────────────────────────────────────────────────────────┐
│ Line 1 (Unfocused):   Heading 1 (Rendered in 28px bold)│
│ Line 2 (Cursor Inside): **bold** (Raw syntax revealed) │
└────────────────────────────────────────────────────────┘

1. Viewport decoration scanning

The editor maintains an abstract syntax tree (AST) of the document. Instead of parsing the entire 50,000-word file on every keystroke, the engine decorates only the visible lines in the current scroll viewport.

2. Syntax concealment and replacement

When your cursor is outside a formatted range:

• Bold markers (**) are hidden, and the text renders in bold weight.
• Links ([Anchor](url)) conceal the URL, rendering a clickable blue link.
• Table pipes (| - |) transform into an interactive visual spreadsheet grid.

3. Cursor proximity expansion

The moment your text cursor (caret) enters a decorated token, the concealment collapses: the raw Markdown delimiters appear instantly for precise character-level editing. When you move the cursor away, the clean visual styling returns.

Comparing Markdown editing modalities

Modality	Dual-Pane Split	Raw Monospace	Live Preview (Oyma)
Screen Space	Consumes 2x width	Compact 1x width	Compact 1x width
Visual Elegance	Cluttered on left	Monotonous code	Typographic beauty
Disk Integrity	Plain text on disk	Plain text on disk	100% Plain text on disk
Focus Flow	Disconnected	Rigid code mode	Fluid writing flow

Live preview in Oyma on macOS

In Oyma, the live-preview editor is hand-tuned for macOS typography:

• Headings, lists, and callouts render with native San Francisco and New York font metrics.
• Tables allow direct cell navigation with Tab and Enter, pasting cleanly from Apple Numbers and Microsoft Excel.
• Your files remain pure, untouched CommonMark on your Mac drive, ready for any text editor at any time.