Case study
render-md
Overview
A Markdown editor that just gets out of your way. Live preview, 10 layouts, version history, vim mode, and everything saved in the browser. No account, no server.
Problem
Most Markdown editors are either too heavy (VS Code), locked to the cloud (Notion), or missing a live preview. I wanted something I could open and just write in, fully offline, no login, with diagrams, version history, templates, and a few layout options.
Approach
I built it as a client-side PWA with React 19 and CodeMirror 6. Everything lives in localStorage with a debounced save layer. There are 10 layout modes, from a three-column split to a bare zen editor. No backend, no accounts, the whole thing runs in the browser.
Architecture
Unidirectional state in App.jsx using a custom useLocalStorage hook with global quota warning. Sidebar, Editor, and Preview receive state via props. Preview debounced at 200ms via react-markdown with remark-gfm. Version history auto-snapshots every 5 min (max 10 per note) stored per-note in localStorage. Gist sync uses GitHub REST API for optional cloud backup.
Challenges
localStorage only gives you 5–10 MB, so I added a quota warning and Gist sync as an escape hatch. Mermaid needed dynamic imports, dark/light theming, and some SVG fixes. Version history uses a custom LCS diff instead of pulling in a diff library. Ten layouts also meant handling mobile sensibly.
Results
A fully offline editor that replaces the cloud-dependent ones: 10 layouts, Mermaid diagrams, version history with diff view, GitHub Gist sync, find-and-replace, vim mode, templates, and ZIP export, all in the browser with no backend.
