render-md
Overview
Distraction-free Markdown editor with live preview. CodeMirror 6, GitHub-style rendering, 10 layouts, version history, vim mode, and full localStorage persistence. No backend required.
Problem
Existing Markdown editors are either bloated (VS Code), cloud-dependent (Notion), or lack real-time preview. Writers want distraction-free editing with full offline support, no account, and a rich feature set (diagrams, version history, templates, multiple layouts).
Approach
Built as a fully client-side PWA with React 19 + CodeMirror 6. All data in localStorage with a debounced persistence layer. 10 layout modes from 3-column split to zen editor-only. No backend, no accounts, no server — the entire app 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 quota (5-10 MB) imposes a hard limit — solved with a quota warning banner and Gist sync as escape valve. Mermaid integration required dynamic import, dark/light theming via themeVariables, SVG DOM manipulation for padding/fixups, and in-memory caching. Custom LCS-based diff algorithm for version history (no external diff library). Ten layout modes with mobile-responsive fallback.
Results
A fully offline PWA that replaces cloud-dependent editors. Features 10 layouts, Mermaid diagrams, version history with diff view, GitHub Gist sync, find & replace, vim mode, templates, and ZIP export — all in the browser with zero backend.