Markdown Viewer
Live Markdown preview with export to PDF (selectable text, via Save as PDF) or HTML. GitHub-flavoured Markdown is supported (tables, code blocks, autolinks) along with Mermaid diagrams in ```mermaid code fences. Your text is saved locally so it survives reloads — and never leaves your browser.
Your preview will appear here. Click Load example for a quick start.
0 words · 0 characters · 0 lines
How it works
Type or paste Markdown into the editor on the left and the rendered output appears live on the right. The viewer supports GitHub-Flavoured Markdown (GFM): headings, paragraphs, bold / italic / strikethrough, ordered and unordered lists, links, images, tables, fenced code blocks, blockquotes, horizontal rules, and inline HTML inside a sanitized whitelist.
Under the hood the parsing pipeline is straightforward and standards-based. The Markdown text is passed to marked (a fast, spec-compliant Markdown parser) with GFM extensions enabled. The HTML output is then run through DOMPurify, which strips unsafe markup (script tags, event handlers, javascript: URLs, suspicious attributes) before it is injected into the page. That second step matters: pasting a malicious .md file you got from a third party shouldn't be able to run JavaScript on this page.
Mermaid diagrams: fenced code blocks marked ```mermaid render as live SVG diagrams inline, covering flowcharts, sequence diagrams, class diagrams, and the rest of the Mermaid syntax. The Mermaid library is only downloaded the first time your document actually contains a mermaid block, so it costs nothing for documents that don't use it. If a diagram has a syntax error, the block shows a readable error message instead of breaking the rest of the preview.
Three view modes: • Split: editor and preview side by side (default on desktop). Best for active editing. • Preview: preview only, full-width. Best for reading or before exporting. • Source: editor only. Best when you want a distraction-free writing surface.
Exporting: • Export PDF generates a styled PDF directly via jsPDF + html2canvas. The output preserves your CSS exactly (headings, code blocks, tables, blockquotes), but text becomes part of an image and is not selectable. Best for visual fidelity. • Print opens your browser's print dialog with a dedicated print stylesheet that hides the toolbar and editor, leaving only the rendered preview. Pick "Save as PDF" in the dialog to produce a PDF with selectable text, a smaller file size, and clean page breaks. Best for reading or sharing. • Download .md saves your Markdown source as a .md file you can keep or commit to git. • Download .html saves the rendered HTML, wrapped in a minimal HTML5 document, for embedding or further editing. • Copy HTML copies the rendered HTML to the clipboard for pasting into a CMS or email.
Your text is automatically saved to localStorage as you type, so you can close the tab and come back later without losing work. The view-mode preference is saved the same way. Nothing is uploaded to any server: DevTools → Network confirms zero outbound requests during writing, rendering and exporting.
Frequently Asked Questions
What flavour of Markdown is supported?
- GitHub-Flavoured Markdown (GFM), via the marked library. That includes everything in CommonMark (headings, lists, links, images, code blocks, blockquotes) plus the GFM extensions: tables, autolinks, fenced code blocks, strikethrough, task lists. Inline HTML is parsed but sanitized; <script>, <iframe>, event handlers and javascript: URLs are stripped.
Is the Markdown safe to paste from random sources?
- Yes. After marked converts it to HTML, DOMPurify removes any element or attribute that is not on its safe whitelist before the result is injected into the page. So a .md file you got from a stranger can render maliciously-crafted content as text, but it cannot execute scripts in your browser.
How does Export PDF differ from Print → Save as PDF?
- Export PDF gives pixel-perfect styling with text you cannot select; Print gives a smaller file with text you can. Export PDF rasterises the preview through html2canvas and packages each canvas page as a JPEG inside a PDF. Print → Save as PDF goes through your browser's native print pipeline with a dedicated stylesheet, which produces selectable, searchable text and proper text-flow page breaks. Use Export PDF when fidelity matters, Print for readability and small files.
Can I save my work?
- Yes. Every keystroke is saved to localStorage automatically, so you can close the tab, come back tomorrow, and your text is still there. Click Clear to start clean. The view mode (Split / Preview / Source) is persisted the same way, so the editor opens how you like it.
Does it support tables and code blocks?
- Yes. Tables use GitHub-style pipe syntax with a header separator. Code blocks use either three backticks or a four-space indent, and inline code uses single backticks. The renderer styles them with a monospace font and a subtle background; syntax highlighting is not applied (pure styling, no language-aware colouring) to keep the bundle small.
What's the maximum document size?
- There's no hard limit, because everything runs in your browser. In practice marked + DOMPurify handle a 50,000-word document in under 200 ms on a modern laptop. PDF export gets slow with very long documents (over 30 pages) because html2canvas rasterises every page; for those, prefer Print → Save as PDF, which streams text directly to the PDF and stays fast at any length.
Does it support LaTeX / math equations?
- No. Shipping a maths renderer would add about 250 KB gzipped (KaTeX), which we keep out of the bundle. Inline maths like $x = a + b$ shows as literal text. If you need formula rendering for a document, use a dedicated tool like StackEdit or HackMD.
Does it render Mermaid diagrams?
- Yes. Wrap Mermaid syntax in a ```mermaid fenced code block and it renders as an inline SVG diagram: flowcharts, sequence diagrams, class diagrams, state diagrams, and more. The Mermaid library (a few hundred KB) is fetched only when your document actually has a mermaid block, so plain-text documents stay fast. Invalid Mermaid syntax shows an error message in place of the diagram rather than breaking the rest of the preview.
Is my text uploaded anywhere?
- No. The Markdown source, the rendered HTML and the PDF generation all run in your browser tab. DevTools → Network shows zero outbound requests during the entire workflow, and auto-save uses localStorage on your device only.
Common Markdown syntax
Quick reference of the most common Markdown patterns. Paste any of these into the editor to see the output live.
| Element | Markdown | Renders as |
|---|---|---|
| Heading 1 | # Title | Large title with bottom border |
| Heading 2 | ## Section | Section heading with thinner border |
| Bold | **bold** | **bold** |
| Italic | *italic* | *italic* |
| Strikethrough | ~~struck~~ | ~~struck~~ |
| Inline code | `code` | Monospace inline |
| Code block | ```js\ncode\n``` | Fenced code block |
| Link | [label](url) | Clickable link |
| Image |  | Inline image, max-width 100% |
| Unordered list | - item | Bullet list |
| Ordered list | 1. item | Numbered list |
| Blockquote | > quoted | Indented quote with side border |
| Horizontal rule | --- | Thin divider line |
| Table | | h1 | h2 |\n|----|----|\n| a | b | | Bordered table with header row |
| Task list | - [x] done | Checkbox + label |
| Mermaid diagram | ```mermaid\nflowchart LR\nA-->B\n``` | Rendered as an inline SVG diagram |
GitHub-Flavoured Markdown (GFM) is supported throughout. Inline HTML is allowed for advanced layouts but sanitized: script and iframe tags are stripped automatically. Mermaid diagrams (```mermaid fenced blocks) render as live SVG.