15 lines
1.1 KiB
Markdown
15 lines
1.1 KiB
Markdown
# Tip #30 — Markdown live-preview in editor
|
|
|
|
**Date:** 2026-07-11
|
|
**Category:** editor
|
|
**Source:** MC-Survival Wiki Daily Tip (backfilled from state.json)
|
|
## Markdown live-preview in editor
|
|
|
|
A markdown live-preview is a split-pane in the editor: a textarea on the left, the rendered HTML on the right, both scroll-synced and updated as the user types. It solves the friction of editors writing markdown, hitting save, switching to the public view, and only then realizing their formatting is wrong. The signal is editor churn: most edits on the wiki are small typo or formatting fixes rather than content additions, which suggests the current save→preview loop is a real drag on throughput. Debouncing the preview by ~150ms is enough to feel instant without thrashing the renderer on every keystroke.
|
|
|
|
## Implementation tips
|
|
|
|
1. Split-pane: textarea on the left, rendered HTML on the right, both scroll-synced.
|
|
2. Use the same markdown renderer the public route uses (likely already in the deps) to avoid two implementations.
|
|
3. Debounce the preview render by 150ms — no need to re-render on every keystroke.
|