Desktop split-pane live preview

The desktop app has three render modes — View, Split, and Edit. Split is the default once a file is open: a textarea on the left, live preview on the right, separated by a draggable handle.

Modes

Toolbar	Behavior
📖 View	Read-only rendered preview, max-width centered.
⫶ Split (default)	Editor + preview side by side. Edits update preview after a 50 ms idle debounce.
✏️ Edit	Full-width editor only.

Loading a file from the sidebar or Cmd+O flips the active mode to Split (unless you're already in Edit, in which case it stays).

Resize handle

A 6 px column between the editor and preview is cursor: col-resize. Drag to change the split between 15% and 85%. Release to persist — the chosen splitRatio is written to state.json so the next launch reopens at the same proportion.

Synchronized scroll

Best-effort scroll sync: when the editor scrolls, the preview scrolls to the same percentage of its scrollable height. Heading-aware sync is intentionally out of scope for v1 — the percentage approach handles long files well enough.

Debounced rendering

Each input event schedules a 50 ms timer. Subsequent inputs reset it. When the timer fires, the preview is fully repopulated (markdown → HTML → highlight.js → mermaid → copy buttons → heading anchors → image lightbox). 50 ms keeps typing feeling instant while skipping multi-render storms during fast input.

State persistence

Field	Type	Default
splitRatio	number (0.15–0.85)	0.5

Stored alongside lastFolder in state.json. Patched via the new mid:patch-app-state IPC.

Files

• apps/electron/main.ts — mid:patch-app-state, splitRatio in AppState.
• apps/electron/preload.ts — patchAppState bridge.
• apps/electron/renderer/renderer.ts — Mode union, renderSplit, beginSplitDrag, scheduleSplitRender, populatePreview.
• apps/electron/renderer/renderer.css — .mid-split, .mid-split-editor, .mid-split-handle, .mid-split-preview.

Verifying

1. npm run dev:electron → open a folder → open a markdown file → app lands in Split mode.
2. Type in the left editor — preview updates after a brief pause.
3. Drag the handle — proportions change. Quit and relaunch — handle is back where you left it.
4. Click View — preview takes the full width. Click Edit — editor takes the full width. Click Split — back to side-by-side.