Categories
Markdown Preview
Preview Markdown in real time.
Overview
- Shows a real-time preview on the right as you type Markdown.
- Supports basic syntax such as headings, lists, tables, and links, as well as extensions beyond GitHub Flavored Markdown — LaTeX math (KaTeX), mermaid diagrams, footnotes, and emoji shortcodes.
- Safe HTML tags such as <details> and <br> are rendered, while script tags and event attributes are removed by DOMPurify, keeping the preview safe.
Usage
- Enter Markdown into the text area.
- The preview on the right updates in real time as you type.
- Common Markdown syntax is supported, including headings, lists, code blocks, tables, links, and emphasis.
- Task lists (- [x] / - [ ]) are displayed as checkboxes.
- LaTeX-style math ($formula$ / $$formula$$) is rendered by KaTeX.
- ```mermaid code blocks are rendered by mermaid as flowcharts and other diagrams.
- Footnotes (text[^1] and [^1]: note) and emoji shortcodes (such as :smile:) are also supported.
- Safe raw HTML tags such as <details> and <br> can also be used.
- Highlighting (==text==), superscript/subscript (^sup^ / ~sub~), and definition lists (Term / : Definition) are also supported.
Example
Input
# Title - item1 - item2 [link](https://example.com)
Output
A preview rendered as a heading, a list, and a link
Use Cases
- Checking the actual appearance on the spot while writing a README or document in Markdown
- Writing technical documentation that includes math formulas or flowcharts (mermaid) while checking the rendered result
- Previewing Markdown for syntax mistakes before publishing it, such as to GitHub
FAQ
Is the Markdown I enter sent anywhere?
No. Conversion and preview happen entirely in your browser, and nothing is sent to an external server.
What happens if I write HTML or script tags in the Markdown?
Safe HTML tags such as <details> and <br> are rendered as-is, but script tags, event attributes such as onclick, and form-related tags are removed by DOMPurify sanitization and never executed.
Are tables and links supported?
Yes. Common Markdown syntax such as tables, links, emphasis, and code blocks is supported.
Is LaTeX-style math supported?
Yes. Both $formula$ (inline) and $$formula$$ (block) notation are supported and rendered in your browser by KaTeX.
Are diagrams rendered by mermaid supported?
Yes. Flowcharts, sequence diagrams, and other diagrams written in ```mermaid code blocks are rendered as SVG in your browser by mermaid. An error message is shown if the syntax is invalid.
Are footnotes and emoji shortcodes supported?
Yes. You can create footnotes with text[^1] and [^1]: note, and emoji shortcodes such as :smile: are converted into the actual emoji.
Is syntax beyond GitHub Flavored Markdown supported?
Yes. Non-standard GitHub extensions such as ==highlighting==, ^superscript^, ~subscript~, and definition lists (Term / : Definition) are also supported.
Notes
- The KaTeX (math rendering) and mermaid (diagram rendering) libraries are lazily loaded only when that syntax is actually used, so the first render after using them may take a moment.
- HTML containing script tags or event attributes such as onclick is removed by DOMPurify and never executed.
- Previewing very long Markdown may take some time to render.
Related Tools
Format and normalize Markdown to make it easier to read.
Convert text to camelCase, snake_case, and other naming conventions.
Count the characters, words, and lines in your text.