A simple split-pane Markdown editor and live preview.
Paste Markdown on the left. See a styled result on the right after a short delay (300ms) so typing stays smooth.
- Two full-height panes — source editor + reading preview (both follow theme)
- Dark mode — toggle in the nav; defaults to system preference and remembers your choice
- Debounced live preview — updates 300ms after you stop typing
- Vercel-inspired design — tokens and typography from
DESIGN.md(Geist, ink/canvas palette) - Safe rendering — Markdown is sanitized with DOMPurify before display
- Sample / Clear / Copy — quick actions in the top bar
- Download as HTML or PDF — export the preview as a self-contained HTML page, or open a print dialog to save as PDF
- RTL-aware — Arabic / Persian / Hebrew content switches both panes to RTL and uses Vazirmatn; code blocks stay LTR
No build step. Open the page in a browser:
# Option A — open directly
open index.html
# Option B — local server (recommended; avoids some clipboard / module quirks)
python3 -m http.server 5173
# then visit http://localhost:5173| Piece | Choice |
|---|---|
| Markup | Single-page HTML |
| Styling | Plain CSS (design tokens) |
| Logic | Vanilla JS |
| Markdown | marked |
| Sanitization | DOMPurify |
| Fonts | Geist Sans + Geist Mono (CDN) |
index.html # shell + layout
styles.css # design tokens + pane + prose styles
app.js # debounce, render, actions
DESIGN.md # visual design system
images/ # favicon + brand icons
- Tab in the editor inserts two spaces
- Focus rings are visible for keyboard navigation
