Markdown Preview

Write Markdown on the left, see the rendered HTML on the right — updated in real time. Supports GitHub Flavored Markdown, tables, task lists, and code highlighting.

Markdown Preview

Write your markdown here and see a live preview on the right.

Features

Bold, italic, ~~strikethrough~~
inline code and code blocks
Links
Lists, headings, blockquotes
Mermaid diagrams (see below!)

Code Block

function hello(name) {
  return `Hello, ${name}!`;
}

This is a blockquote.

Use it for callouts or citations.

Mermaid Diagram

Ordered List

First item
Second item
Third item

Frequently Asked Questions

What Markdown syntax is supported?

Headings (#-######), bold (**text**), italic (*text*), strikethrough (~~text~~), inline code (`code`), fenced code blocks (```lang), links ([text](url)), images (![alt](url)), unordered/ordered lists, blockquotes (>), horizontal rules (---), and Mermaid diagrams (```mermaid). GFM tables are not yet supported.

How do Mermaid diagrams work in the preview?

Wrap any Mermaid diagram code in a fenced code block tagged with 'mermaid' (```mermaid). The preview will automatically render it as an interactive SVG diagram, exactly as it would appear on GitHub.

Can I upload a Markdown file?

Yes — click 'Load File' to open a .md, .markdown, or .txt file from your computer. The file contents will load into the editor and the preview updates instantly.

Can I use the HTML output in my website?

Yes — use 'Copy HTML' to get the rendered HTML. However, sanitize user-provided Markdown before rendering to prevent XSS. Use a library like DOMPurify if rendering untrusted content.

Is this CommonMark compliant?

This is a lightweight client-side parser covering the most common Markdown elements. For production use, consider marked.js, markdown-it, or remark which are fully CommonMark compliant.