19 / 20Product UX
Markdown Editor
A Notion-flavored editor with slash commands, live preview and a hand-written parser.
- Parsing
- Text editing UX
- Slash commands
- Command palettes
stirling.lab/markdown-editor Live demo
Loading demo…
What to notice
- A Markdown parser written from scratch: headings, lists, code, tables, quotes
- A slash-command menu with fuzzy search and keyboard navigation
- Split, editor and preview modes with synced scrolling
- Word count, reading time, outline and autosave
How it's built
- The parser is two-phase (block tokenization, then inline), with HTML escaping to prevent XSS.
- Fuzzy matching scores consecutive and word-start matches higher.
Hand-built in React 19 + TypeScript, with no UI or chart libraries.