Markdown Preview
Write and preview GitHub Flavored Markdown in real-time with split, edit, and preview modes.
Write and preview GitHub Flavored Markdown (GFM) in real time with split-pane editing and HTML source export.
Markdown Preview Example
Features
- Bold text and italic text
Strikethroughandinline code- Links
Code Block
function greet(name) {
return `Hello, ${name}!`;
}
Table
| Feature | Status |
|---|---|
| GFM Tables | ✅ Supported |
| Task Lists | ✅ Supported |
| Strikethrough | ✅ Supported |
Task List
- Write markdown
- Preview in real-time
- Export to HTML
Note: This preview supports GitHub Flavored Markdown (GFM).
How do I use Markdown Preview?
Write or paste GitHub Flavored Markdown into the left editor, or click 'Load Sample Data' to load a GFM template.
Switch between Split, Edit, and Preview workspace modes to inspect tables, task lists, and code blocks in real time.
Click 'Copy MD' to copy your Markdown source or 'Copy HTML' to grab the compiled HTML markup.
What features does Markdown Preview offer?
Real-time GitHub Flavored Markdown (GFM) live rendering
Support for tables, task lists, code syntax highlighting
HTML source view & 1-click HTML copy
100% client-side browser rendering
CommonMark & GitHub Flavored Markdown (GFM) AST Specification
Powered by `react-markdown` and `remark-gfm`, the parser builds a CommonMark syntax tree and applies GFM extensions for tables, task lists, strikethrough, and autolinks.
| GFM Feature | Markdown Syntax | Compiled HTML Element | CommonMark vs GFM |
|---|---|---|---|
| Pipe Tables | | Col A | Col B |\n|---|---| | <table><thead><tbody> | GFM Extension (remark-gfm) |
| Task Lists | - [x] Done\n- [ ] Todo | <input type="checkbox" disabled> | GFM Extension |
| Strikethrough | ~~deprecated~~ | <del>deprecated</del> | GFM Extension |
| Fenced Code Blocks | ```ts ... ``` | <pre><code class="language-ts"> | Core CommonMark Spec |
Frequently Asked Questions about Markdown Preview
Why isn't my Markdown table rendering as a `<table>`?
GFM pipe tables require a header row followed immediately by a delimiter row containing at least three hyphens per column (`| --- | --- |`), with no blank line between the header and delimiter.
Why does a single Enter key press in Markdown not create a line break in the preview?
According to the CommonMark specification, a single newline inside a paragraph is treated as a soft line wrap (rendered as a space). Press Enter twice for a new `<p>` paragraph, or end the line with two spaces or `\` for a `<br>` break.
Are raw `<script>` or `onerror` HTML attributes executed inside the Markdown preview?
No. `react-markdown` compiles Markdown syntax directly into virtual DOM React elements without using `dangerouslySetInnerHTML`, neutralizing XSS script injection by default.
Why does `<h1>` (`# Heading`) render as an `<h2>` inside the preview pane?
To preserve valid document heading hierarchy on the page (where the tool title itself is the single `<h1>`), top-level `#` headings inside the preview container are mapped to styled `<h2>` elements.
Explore Related Text Tools
Markdown to HTML & Printable A4 PDF Converter
Convert GFM Markdown text into styled HTML markup or print formatted documents to A4 PDF with custom themes.
Smart Text Cleaner
Deduplicate lines, strip HTML tags, unescape entities, and sort text lists alphabetically in real time.
Word Counter
Count words, characters, sentences, and paragraphs in real time with estimated reading time.
Case Converter
Convert text between UPPER, lower, Title, Sentence, camelCase, snake_case, kebab-case, and CONSTANT_CASE.
Text Diff
Compare two texts side by side and see differences highlighted line by line, like a GitHub diff.
Lorem Ipsum
Generate placeholder text in paragraphs, sentences, or words for your designs and prototypes.