MarkDown Live

Privacy-first markdown editor for turning raw markdown and AI output into professional, print-ready documents.

---

MarkDown Live is a privacy-first, open-source markdown editor designed to transform raw markdown and AI-generated content into professional, print-ready documents. It features robust support for LaTeX mathematics (KaTeX), technical diagrams (Mermaid), and advanced formatting, all with zero tracking and a lightning-fast live preview.

Highlights

• Live preview while typing
• Auto-save to localStorage (editor content + light/dark mode)
• Built-in sample loader from public/sample.md
• Open local .md, .markdown, or .txt files
• Table of Contents generated from headings
• Print-ready output
• Export to PDF (with print fallback)
• Export to standalone HTML document
• Mermaid diagram rendering with light/dark theme adaptation
• KaTeX formula rendering with robust delimiter normalization
• Security-focused rendered HTML sanitization via DOMPurify

Quick Start

Requirements

• Node.js >=20

Install and Run

npm install
npm run dev

Build and Preview Production

npm run build
npm run preview

Quality Checks

npm run lint
npm run check

How To Use

1. Write markdown in the Editor pane.
2. See formatted output in the Preview pane.
3. Use Sample to load the full demo document from public/sample.md.
4. Use Open to import your own markdown file.
5. Export via Print, PDF, or HTML in the top toolbar.

On mobile width, switch between editor and preview using the tab buttons.

Supported Markdown Features

• Headings, lists, quotes, links, images
• Tables, task lists, footnotes, definition lists
• Highlight (==text==), subscript (H~2~O), superscript (x^2^)
• Fenced code blocks with Highlight.js syntax coloring
• Mermaid in fenced blocks (```mermaid)
• KaTeX math:
  • Inline: $ ... $ or \( ... \)
  • Block: $$ ... $$ or \[ ... \]

Note: \(...\) and \[...\] are normalized internally to dollar delimiters before parsing, so AI-generated math is more tolerant to formatting variation.

AI Prompt Tips

Use these prompt instructions if you generate markdown from AI:

• "Output clean Markdown only, no extra explanation text."
• "Use heading hierarchy H1-H3 and keep sections print-ready."
• "Use fenced Mermaid blocks for diagrams."
• "Use KaTeX delimiters ($...$, $$...$$, \\(...\\), \\[...\\])."
• "Use GFM tables, tasks, and footnotes when needed."

Project Structure

markdown-live/
├── public/
│   ├── icon.svg
│   └── sample.md
├── src/
│   ├── components/
│   │   ├── EditorPane.jsx
│   │   ├── PreviewPane.jsx
│   │   └── Toolbar.jsx
│   ├── lib/
│   │   └── markdown.js
│   ├── styles/
│   │   └── app.css
│   ├── utils/
│   │   ├── constants.js
│   │   └── exporters.js
│   ├── App.jsx
│   └── main.jsx
├── CHANGELOG.md
├── eslint.config.js
├── index.html
├── package.json
└── vite.config.js

Tech Stack

React 19, Vite 8, markdown-it (+ plugins), KaTeX, Mermaid, Highlight.js, DOMPurify, html2canvas, jsPDF, react-icons.

Brand colors (from icon.svg):

• Primary: #003D99
• Accent: #80B3FF
• White: #FFFFFF

Release Workflow

Version bump helpers:

npm run tag:patch
npm run tag:minor
npm run tag:major

Then push commit and tag:

git push origin main --follow-tags

License

Licensed under MIT. See LICENSE.

---

© 2026 WanForge (wanforge.asia)