A private, local-first Markdown editor that turns rough notes into
print-ready PDFs, portable HTML pages, and high-resolution PNGs
entirely in your browser. No account. No uploads. No tracking.
✦ Open QuietMarkdown · Export studio · Quick start · Shortcuts
Most Markdown tools force a tradeoff: bare browser utilities with fragile exports, or heavy workspaces that make a blank page feel like setup. QuietMarkdown stays calm on the surface and capable underneath.
- 🔒 Private by design. No account, backend, database, analytics, or uploads. Words never leave your device.
- 📚 A library, not a lone note. Create, switch, duplicate, and delete documents in one workspace.
- ⚡ Fast where it matters. Live split preview, instant find & replace, honest autosave state.
- 📄 Files you own. Open, drag & drop, paste images into, and download plain
.mdfiles. Markdown is the source of truth. - 🎨 Export with confidence. Real typeset PDFs, standalone HTML, and PNGs rasterized from the PDF itself. All with full typographic control.
The heart of QuietMarkdown. Three tabs, one shared design language, guided steps on every tab.
| Tab | What you get |
|---|---|
A real, selectable document typeset with pdf-lib. True paper sizes in PDF points, line-aware page breaks, per-template chrome (top bars, letterheads, folio rules), optional watermark as PDF text |
|
| HTML | A portable standalone webpage with your styling baked in. Always clean, never watermarked |
| PNG | High-resolution (2×) pictures of the PDF pages, rasterized with pdf.js. Splits match the downloaded PDF page-for-page. Multi-page docs download as one numbered ZIP |
| Template | Best for | What makes it distinct |
|---|---|---|
| Novel | Book-style long reads | Warm paper, indented paragraphs, quiet centered folio |
| Brief | One-page business summaries | Blue top bar, uppercase headings, right-aligned folio |
| Thesis | Formal papers | Centered H1, deep first-line indent, centered folio |
| Memo | Short internal notes | Orange bar, compact type, no page numbers |
| Field Notes | Typewritten drafts | Cream paper, monospace body, no chrome |
| Letter | Correspondence | Letterhead rules, generous margins, US Letter paper |
| Technical | Specs & write-ups | Grey-blue paper, ruled H2s, right folio |
| Magazine | Feature stories | Folio rules top + bottom, biggest display H1, ruled H2 |
Picking a template syncs colours and paper so the change is immediately visible. Full descriptions live in hover tooltips; cards stay clean single-line rows.
Each tab carries the same fine-tune panel:
- Body: Searchable font picker (60 Google Fonts, live
Aapreviews, loaded on demand) + colour - Headings: Separate font picker + All the same / Each level toggle (one colour, or per-level H1/H2/H3 colours)
- Links: Colour
- Page layout: Paper size (A5 / A4 / A3 / Letter / Legal / Tabloid), margins (Narrow 48px / Normal 72px / Wide 96px), orientation (Portrait / Landscape), page-numbers toggle
Fonts load from Google Fonts on first pick (display=swap, cached after) with system-stack fallbacks offline. The PDF typesetter maps each font to its closest base family (serif / sans / mono) so downloads stay faithful.
Text, position (center / corners / tiled), opacity, size, rotation, and colour. Previewed live on every page. Printed as real PDF text on PDF/PNG exports; HTML and Markdown downloads stay clean.
Downloads are named from your content, not the library title: the first # H1 wins, otherwise the first real line (formatting stripped), capped at 6 words / 60 characters. # QuietMarkdown editor field guide → quietmarkdown-editor-field-guide.pdf.
- Write / Split / Preview modes that adapt from desktop to portrait mobile
- Document library: Create (
⌘/Ctrl+Alt+N), switch, duplicate, delete, clear-page with undo restore - Find & Replace: Match counts, wrap-around, match-case (
⌘/Ctrl+F,⌘/Ctrl+H) - Embedded images: Paste or drop screenshots; downscaled to 1600px and stored as local data URLs
- Page-break preview: See the paginated HTML flow on any paper size before exporting
- Themes: Light & dark, word count, reading time, reduced-motion support, accessible controls
- Welcome tour: Four-scene animated intro on first visit (reopen anytime via the Q logo)
Headings, bold, italic, strikethrough, links, lists, blockquotes, dividers, tables, task lists, inline code, and fenced code blocks, with syntax highlighting for Bash, CSS, HTML, JavaScript, JSON, Markdown, Python, and TypeScript. All output sanitized through DOMPurify. A built-in field guide demonstrates everything on first launch.
Prerequisites: Node.js 20+, npm 10+
git clone https://github.com/GautamVhavle/QuietMarkdown.git
cd QuietMarkdown
npm install
npm run devOpen the URL Vite prints. That's it. No env vars, no backend.
| Command | Purpose |
|---|---|
npm run dev |
Start the Vite development server |
npm run lint |
Lint TypeScript and React source (zero warnings) |
npm run build |
Type-check + production bundle in dist |
npm run test:e2e |
Playwright suite: desktop, tablet, mobile |
npm run preview |
Serve the production bundle locally |
npm run assets:generate |
Rebuild branded icons and social images |
Works identically on macOS (⌘) and Windows/Linux (Ctrl). The app listens for both metaKey and ctrlKey; only the displayed label changes.
| Action | macOS | Windows / Linux |
|---|---|---|
| Bold / Italic | ⌘B / ⌘I |
Ctrl+B / Ctrl+I |
| Link / Inline code | ⌘K / ⌘E |
Ctrl+K / Ctrl+E |
| Undo / Redo | ⌘Z / ⌘⇧Z |
Ctrl+Z / Ctrl+Y |
| Find / Find & Replace | ⌘F / ⌘H |
Ctrl+F / Ctrl+H |
| New document | ⌘⌥N |
Ctrl+Alt+N |
| Open file | ⌘O |
Ctrl+O |
| Download Markdown | ⌘⇧S |
Ctrl+Shift+S |
| Export studio | ⌘⇧E |
Ctrl+Shift+E |
| Shortcut cheat sheet | ⌘⇧/ |
Ctrl+Shift+/ |
Ctrl+Hmay collide with browser history in Chrome/Edge. The toolbar search icon always works as a fallback.
src/
├── App.tsx # Editor shell, document library, Export Studio
├── components/
│ ├── ErrorBoundary.tsx # Crash guard keeping drafts recoverable
│ ├── FineTunePanel.tsx # Shared font/colour/layout controls + font picker
│ ├── PagedPreview.tsx # HTML page-break preview (editor pane)
│ ├── PdfPreview.tsx # Pagewise PDF-template preview (export studio)
│ ├── PdfPngPages.tsx # PDF-rasterized PNG preview (export studio)
│ └── WelcomeTour.tsx # First-run animated intro
├── lib/
│ ├── markdown.ts # Sanitized Markdown rendering
│ ├── export.ts # HTML export, page geometry, filenames, presets
│ ├── fonts.ts # 60-font library, on-demand Google Fonts loading
│ ├── pagination.ts # Element-aware page-break computation
│ ├── pdf-document.ts # Markdown → real selectable PDF (pdf-lib)
│ ├── pdf-raster.ts # PDF bytes → PNG images (pdf.js)
│ ├── pdf-templates.ts # Eight distinct PDF templates
│ └── storage.ts # Quota-safe localStorage wrapper
├── styles.css # Design tokens, responsive UI, export styling
└── types.ts # Shared editor/export/fine-tune types
public/ # PWA shell: service worker, manifest, icons, SEO files
scripts/ # Reproducible brand-asset generator
tests/ # Playwright desktop/tablet/mobile workflows
- React + TypeScript + Vite: Fast static client, zero backend
- markdown-it + markdown-it-task-lists: Focused GFM rendering
- DOMPurify: Every rendered string sanitized, including exports
- Highlight.js: Small deliberate language set
- pdf-lib: Real selectable PDFs (not screenshots)
- pdf.js: PNGs rasterized from actual PDF bytes
- JSZip: Multi-page PNG downloads as one ZIP
- Playwright: Responsive end-to-end coverage on every change
Markdown is parsed into headings, paragraphs, lists, tables, code, and images, then laid out from the chosen template in PDF points on the selected paper (orientation-aware). Fine-tune colours and fonts apply throughout; watermarks print as PDF text on every page. The studio's PDF tab previews the same pagination so there are no surprises.
Everything runs in the browser. Drafts, preferences, and embedded images live in localStorage on your device. No accounts, uploads, analytics, or telemetry of any kind.
Practical notes:
- Clearing site data removes autosaved drafts. Download the
.mdwhen it matters. - Remote image URLs can hit CORS limits during export. Paste images directly (they become local data URLs) for dependable private exports.
- Google Fonts load on demand when you pick a non-system font; offline, the system-stack fallback applies.
- Very large image-heavy documents need extra browser memory during PDF/PNG generation.
A service worker caches the app shell after your first visit. QuietMarkdown opens and keeps working without a network connection. Drafts persist in browser storage either way.
Technical SEO as a product feature:
- Starter field guide prerendered into served HTML. Crawlers without JS still index real content
- Structured data (
SoftwareApplication,WebSite,FAQPage) for rich results - Keyword-first title/description, self-referencing canonicals, absolute OG/Twitter images
sitemap.xml,robots.txt,llms.txt, HSTS, strict CSP validated against the bundle- Lighthouse: 100 SEO · 100 Accessibility · 100 Best Practices
tests/seo.spec.tsasserts the crawler view on every CI run
One rule: everything must keep working offline and privately. Roughly in order:
- Document folders & tagging within local storage
- Optional end-to-end encrypted sync (user-supplied storage, opt-in only)
- Footnote and math syntax support
- Version snapshots beyond undo history
- Team export branding (custom fonts, logos)
Ideas welcome via issues. Especially ones that fit the local-first philosophy.
Where are my documents stored?
In this browser's localStorage, on this device only. Nothing is transmitted anywhere.
What if I clear browser data?
Autosaved drafts go with it. Use Save .md (⌘/Ctrl+Shift+S) for anything you can't afford to lose.
Does it work on my phone? Yes. Portrait layouts with focused Write/Preview modes, zero measured overflow at 390px, and PWA install support.
Do embedded images bloat storage? They're downscaled to 1600px and compressed on paste; the save indicator tells you honestly if storage refuses writes.
Why do PNG and PDF page breaks match? Because PNGs are rendered from the PDF bytes themselves. Not from a separate HTML screenshot path.
Static app on Vercel. vercel.json sets the Vite build, dist output, security headers (CSP, frame protection, no-sniff), clean URLs, and immutable asset caching.
npm run build
npx vercel --prodLive at https://quietmarkdown.vercel.app (also aliased: quietmark.vercel.app). For a custom domain, set VITE_SITE_URL so canonicals and OG images follow it. See .env.example.
Small, thoughtful improvements welcome. Read CONTRIBUTING.md, keep it local-first (no uploads, no accounts), and run npm run lint && npm run build && npm run test:e2e before opening a PR.
Security issues: follow SECURITY.md, not a public issue.
MIT. See LICENSE.
Designed and built with care by Gautam Vhavle.