Markdown Previewer
Write and preview Markdown with live rendering. Supports GFM, syntax highlighting, and HTML export.
Preview will appear here.
About this tool
A live Markdown editor with split-view preview. Write Markdown on the left, see formatted output on the right. Supports GitHub Flavoured Markdown — tables, task lists, strikethrough, autolinking — plus syntax-highlighted code blocks and inline HTML.
The toolbar inserts common formatting at the cursor: bold, italic, headings, links, images, code blocks, lists, blockquotes, and tables. Selection-aware — if text is highlighted, the toolbar wraps it; otherwise it inserts a placeholder you can type over.
Two export options: Copy Markdown (the source) or Export HTML (the rendered output, ready to paste into a CMS, email tool, or static-site generator).
How to use the previewer
The previewer is a split-view editor: write Markdown on the left, see formatted output on the right. The two panes scroll-sync so you can navigate long documents without losing your place. You can switch to editor-only or preview-only mode with the toggle above the panes.
GitHub Flavoured Markdown (GFM) is enabled by default — tables, task lists, strikethrough, autolinks, and syntax-highlighted code fences all work out of the box. Inline HTML is allowed and passes through to the preview, with one safety constraint: scripts and event handlers are stripped via rehype-sanitize, so pasted untrusted content can't execute code.
The formatting toolbar
The toolbar inserts common Markdown at the cursor. If text is selected, the toolbar wraps it; otherwise it inserts a placeholder you can type over.
| Button | Inserts | Markdown produced |
|---|---|---|
| B | Bold | **text** |
| I | Italic | *text* |
| H1 | Heading 1 | # Heading |
| H2 | Heading 2 | ## Heading |
| 🔗 | Link | [label](url) |
| 🖼 | Image |  |
</> | Inline code | Wraps with backticks |
| Fence | Code block | Triple-fenced block |
| • | Bullet list | - item |
| " | Blockquote | > quote |
| ⊞ | Table | Pre-filled GFM table |
The "Load sample" button inserts a representative document that exercises the main formatting features — useful for seeing how your typography setup renders the full Markdown surface.
GFM features at a glance
- Tables: pipe-separated columns with a dash row for the header. Alignment per column via colons in the dash row (
| ---: |right-aligns). - Task lists:
- [ ]and- [x]produce checkable items. - Strikethrough:
~~deleted~~producesdeleted. - Autolinks: bare URLs and email addresses become clickable without explicit Markdown.
- Fenced code with language: triple-backtick followed by a language name produces syntax-highlighted output (highlighting via rehype-highlight, supporting ~190 languages).
Export options
- Copy Markdown copies the source as you wrote it — useful when pasting into another Markdown-aware editor.
- Export HTML copies the rendered output as HTML — useful when pasting into a CMS, email tool, or static-site generator that expects HTML rather than Markdown.
When to use Markdown vs WYSIWYG
Markdown is best for documents that outlive a single editing session: blog posts, documentation, anything that benefits from version control. WYSIWYG editors (Word, Google Docs) are better for collaborative real-time editing and for working with non-technical contributors. For the full trade-off breakdown, see our guide on Markdown vs WYSIWYG.
Privacy
Everything runs in your browser. The Markdown source and rendered preview never reach our servers.
Frequently asked questions
What is Markdown?
A lightweight plain-text formatting syntax invented by John Gruber in 2004. You write text decorated with simple symbols (**bold**, # heading, - list) that render as styled HTML. Used widely for documentation, blog posts, and chat platforms.How do you create a table in Markdown?
Use pipes (|) to separate columns and a row of dashes for the header divider. Tables require the GitHub Flavoured Markdown (GFM) extension; this previewer enables GFM by default.What is GitHub Flavoured Markdown?
GitHub's superset of Markdown, adding tables, task lists (- [x]), strikethrough (~~text~~), autolinking, syntax-highlighted code fences, and emoji shortcodes. Most modern Markdown processors (this one included) support GFM by default.How do you add images in Markdown?
Use . The alt text is required for accessibility. URLs can be local or remote. For HTML control over sizing and alignment, use a raw <img> tag — this previewer allows raw HTML but sanitises it.Can I use HTML inside Markdown?
Yes. Markdown is a superset of HTML by design — any HTML you write passes through. This previewer renders raw HTML but runs it through rehype-sanitize first, so script tags and event handlers are stripped.