Markdown Previewer — Markdown-Vorschau

Editor

Vorschau

0 words 0 chars 0 min read

What is the Markdown Previewer?

A free, browser-based live previewer for GitHub Flavored Markdown — with syntax-highlighted code (highlight.js), KaTeX-rendered math, Mermaid diagrams, sanitised HTML output and one-click export to .html or .md. Nothing is uploaded; every keystroke renders in your browser using markdown-it and DOMPurify.

How do I preview GitHub Flavored Markdown live online with math, diagrams and syntax highlighting?

Type or paste markdown on the left and see the rendered HTML appear instantly on the right. The previewer supports tables, code blocks with highlight.js, KaTeX math ($E = mc^2$ inline or display), Mermaid diagrams (graph, sequenceDiagram, etc.), task lists, blockquotes and more. Output is sanitised by DOMPurify, so it is safe to copy into emails, blogs or static sites. The whole tool runs in your browser — nothing is uploaded.

Key features

Live GFM rendering

markdown-it with linkify, typographer and tables gives you instant GitHub Flavored Markdown — headings, lists, code, tables, blockquotes, footnotes and inline HTML escaped where unsafe.

highlight.js for code

Fenced code blocks pick up syntax colours from highlight.js for 190+ languages, with auto-detection if no language is specified.

KaTeX math inline + display

Wrap math in single or double dollar signs ($E = mc^2$ or $\int_0^1 f(x) dx$). KaTeX renders accurate, fast LaTeX in the browser with no MathJax round-trips.

Mermaid diagrams (lazy-loaded)

Use ```mermaid fenced code blocks for flowcharts, sequence diagrams, gantt charts and more. The 3 MB Mermaid bundle only downloads when you actually use a diagram.

Three view modes

Switch between Split, Editor-only and Preview-only modes with a single click. Fullscreen mode hides distractions for a focused writing session.

Sanitised output + export

Output goes through DOMPurify (with SVG/MathML allowlists) before insertion, so it is safe to embed. Copy the rendered HTML, copy the source markdown, or download either as a standalone file.

How to use it

Type or paste markdown into the left pane. The preview on the right updates live, debounced 80 ms. Use the toolbar to insert bold, italic, headings, links, code, blockquotes, lists and tables, or click "Example" to load a feature-showcase document. Switch view modes (Split / Editor / Preview), toggle fullscreen, and export the result as HTML or .md. Nothing is uploaded — markdown-it, DOMPurify, highlight.js, KaTeX and Mermaid all run in your browser.

Frequently asked questions

Is my markdown uploaded to a server?

No. The entire previewer runs in your browser using markdown-it (parser), DOMPurify (sanitiser), highlight.js (code colors), KaTeX (math) and Mermaid (diagrams). Pasted text never leaves your device, so it is safe to use with private drafts and unpublished posts.

Which markdown flavour does it support?

GitHub Flavored Markdown (CommonMark + tables, fenced code, autolinks, strikethrough, task lists) plus KaTeX math syntax and Mermaid diagrams in fenced ```mermaid blocks. URLs are auto-linked and typographic substitutions (em-dashes, smart quotes) are applied.

Is the rendered HTML safe to embed?

Yes. The output is sanitised by DOMPurify with an allowlist that permits KaTeX/Mermaid SVG output, so cross-site scripting attacks via crafted markdown are blocked. Raw HTML in the source is escaped, not executed.

How big are the libraries it loads?

markdown-it (~124 KB), DOMPurify (~27 KB), highlight.js (~127 KB) and KaTeX (~271 KB + 24 KB CSS) load on the first visit. Mermaid (3.3 MB) only downloads on demand when you use a diagram, keeping the initial page fast.

Can I export the rendered HTML?

Yes. Use "Copy HTML" to put the rendered markup on your clipboard, "Download HTML" to save a complete standalone document, or "Copy Markdown" / "Download .md" to keep your source.

Built by the Toolbox team using markdown-it (v14+), DOMPurify, highlight.js (v11+), KaTeX (v0.16+) and Mermaid (v11+) — all wrapped in vanilla JavaScript with zero analytics on the editor input, so the tool works offline once cached and respects your draft privacy.