Markdown Preview
Live Markdown preview with GFM tables, fenced code and nested lists - plus copy or download the generated HTML.
Markdown looks simple until you need to check how a file actually renders - and the last thing you want is to publish something that turned a table into a wall of text. This preview renders the common Markdown subset to HTML live as you type, with GFM tables, fenced code blocks, nested lists and blockquotes, so you see the result before it ships.
The raw-HTML toggle controls trust: with it off, any HTML tag in your source is escaped and shown as text, which is the safe default for untrusted input. Turn it on and tags pass through, which is handy when you mix raw HTML into a page on purpose.
The rendered HTML can be copied or downloaded, so the preview doubles as a tiny Markdown-to-HTML converter. Everything renders locally in your browser.
Writers, engineers and docs maintainers share one problem: Markdown renders differently on every platform, and a subtle difference between two renderers turns a clean list into a mashed paragraph. Rendering with one consistent engine, this preview shows a faithful, predictable result you can rely on before the content ships.
Heading
Some bold, italic, inline code and a link.
- first item
- second item
- ordered one
- ordered two
A blockquote.
const greeting = "hello";| Name | Role |
|---|---|
| Ada | Dev |
Features
- Live preview that updates on every keystroke.
- Headings, ordered and unordered lists with nesting, blockquotes and horizontal rules.
- GFM tables with left, right and center column alignment.
- Fenced code blocks with language-classed code and HTML-escaped content.
- Links open in a new tab with rel="noopener noreferrer".
- Safe default: raw HTML is escaped until you enable it.
How to Use
- 1
Write or paste Markdown
Type in the left pane; the preview updates instantly as you go.
- 2
Toggle raw HTML
Leave it off for untrusted content, where tags render as text, or enable it to let real HTML through.
- 3
Review the result
Check tables, code blocks and lists in the rendered pane before publishing.
- 4
Copy or download
Grab the generated HTML to embed it anywhere, or download it as a file.
Example
Input
## Heading
Some **bold** and `inline code`.
| Name | Role |
| --- | --- |
| Ada | Dev |↓
<h2>Heading</h2>
<p>Some <strong>bold</strong> and <code>inline code</code>.</p>
<table>
<thead><tr><th>Name</th><th>Role</th></tr></thead>
<tbody><tr><td>Ada</td><td>Dev</td></tr></tbody>
</table>Common Problems
Escaped tags
With raw HTML off, a <div> in your source shows as text, which is the correct behavior for pasted content you do not trust.
Table alignment
Alignment is controlled by colons in the separator row - :--- left, ---: right, :---: center - and the preview honors it.
Nested lists
Indent a list item by two or more spaces to nest it; the preview reflects the depth you actually wrote.
Fenced code blocks
Three or more backticks with an optional language name render as a code element with a language class, and the content is HTML-escaped so a < is never interpreted.
Blank lines matter
Lists and paragraphs are separated by blank lines in Markdown; missing them merges content into one paragraph or list, and the preview shows exactly that.
Links in new tabs
Every link gets target="_blank" with rel="noopener noreferrer", so clicking through never leaks a referrer.
Raw HTML off is the safe default
If you see a literal <b> in the preview, raw HTML is simply off; enable the checkbox to pass tags through.
Inline code inside other spans
Backtick code is handled first, so code containing * or _ is not re-emphasized by the surrounding span rules.
Escaping special characters
To show a literal asterisk, underscore or backslash, prefix it with a backslash; the preview renders the escaped character as plain text instead of starting emphasis or inline code.
Technical Details
The renderer parses Markdown line by line into block elements - fenced code, headings, horizontal rules, blockquotes, tables, lists and paragraphs - then renders each block to HTML in order.
Lists are built into a tree keyed by indentation, so nested unordered and ordered lists become nested <ul> and <ol> elements, and consecutive same-type lists merge.
Tables follow GFM: a header row plus a separator row of dashes and colons, with alignment mapped to inline style attributes on the cells.
Inline spans are processed in a safe order: inline code first, parked with a runtime placeholder so its content is never reprocessed, then images, links, bold, italic and strikethrough.
When raw HTML is off, every &, <, > and " is escaped before any span processing; when it is on, tags pass through untouched.
Emphasis parsing requires the marker to be flanked correctly - an asterisk between two letters is treated as plain text, so email addresses and file paths do not accidentally turn bold.
Entities such as & are escaped along with every other ampersand when raw HTML is off, so the generated HTML is always safe to paste into a page.
Rendering is synchronous and fully client-side. No document is ever transmitted, stored or logged.
Frequently Asked Questions
What Markdown does it support?
Headings, ordered and unordered lists with nesting, GFM tables, fenced code blocks, blockquotes, links, images, bold, italic, strikethrough and inline code - the subset that covers the vast majority of everyday documents. Anything outside that subset is left as literal text, so nothing in your document silently disappears.
Why is my HTML showing as text?
Because raw HTML is off by default, which is the safe setting for untrusted input. Enable the checkbox to let tags through.
Can it convert Markdown to HTML for me?
Yes - the preview is the conversion. Copy the generated HTML to embed it anywhere.
Do links open in a new tab?
Yes. Every link is rendered with target="_blank" and rel="noopener noreferrer" so the destination cannot read your opener.
Does it support syntax highlighting?
Fenced code renders as a code element with a language class so your page CSS can highlight it; the tool itself does not ship a highlighter.
Is my document uploaded?
No. Rendering happens entirely in your browser.
Why did my nested list come out flat?
Nesting is driven by indentation - two or more spaces - plus a blank line before the nested list in most implementations. If the list still comes out flat, check that the parent item ends with a newline and that the nested items use a consistent bullet style. The preview shows exactly what your source produces.
Data & Privacy
Your data stays in your browser. Nothing is uploaded.
- Processing
- Local
- Upload
- None
- Server Storage
- None
- Account
- Not required
Related Tools
SQL Formatter
Beautify messy SQL with clause-aware indentation, choose UPPER or lower keywords, and minify a query to a single line.
Code & Formatting
HTML Formatter
Re-indent HTML by nesting depth, keep inline elements flowing, and minify without corrupting pre and script content.
Code & Formatting
CSS Formatter
Give every CSS declaration its own line, indent nested at-rules, normalize hex colors and minify without corrupting strings.
Code & Formatting
JavaScript Formatter
Normalize JS indentation, spacing and brace layout - or minify it - while preserving your semicolons, quotes and structure.
Code & Formatting
HTML Entity Encoder / Decoder
Convert HTML to its escaped entity form or decode entities back to readable markup.
Encoding & Conversion
Text Diff Checker
Line-by-line text comparison that shows every added, removed and unchanged line.
Regex & Text