Markdown Preview — Live GFM Renderer

What it does & when you need it

You're editing a README, a GitHub issue, release notes, or a docs page, and you want to see how the Markdown will actually render before you commit or hit submit. This tool takes the Markdown you type on the left and shows the rendered result on the right, live, as you type. It parses the source with a GitHub-flavored engine, so the tables, task lists, and fenced code blocks you rely on in real projects all show up the way they will on GitHub or in most static-site generators.

The whole thing runs in your browser. The Markdown you paste is never uploaded to a server, which matters when you're previewing an internal changelog, a draft blog post, or notes that quote customer data. Close the tab and nothing was ever transmitted.

How to use

Type or paste Markdown into the markdown buffer, press Sample to load a document that exercises headings, lists, links, emphasis, and a code block, or Upload a .md / .markdown file.
The preview panel re-renders on every keystroke — no run step needed.
Press Copy HTML (or Ctrl/Cmd + Enter) to copy the generated, sanitized HTML to your clipboard, ready to paste into a CMS, an email template, or an .html file.

Things worth knowing

Markdown is not one language — it's a family. CommonMark is the strict, unambiguous core that most parsers agree on. GitHub-flavored Markdown (GFM) is a superset that adds the features developers actually reach for every day: pipe tables, - [ ] task lists, ~~strikethrough~~, and autolinks that turn a bare URL into a clickable link. This preview uses GFM, so what you see here lines up with what GitHub renders.

Rendered Markdown can carry an XSS payload. Markdown deliberately lets you drop raw HTML into a document, which means a pasted <script> tag or an onerror attribute on an <img> is a genuine cross-site-scripting risk if a tool renders it blindly. This preview sanitizes the generated HTML with DOMPurify before it ever touches the page, stripping dangerous tags and event handlers while leaving your real formatting intact. If you need to display a literal angle bracket instead of an HTML tag, escape it with the HTML entity encoder.

A single newline is not a line break. Markdown collapses a lone newline into a soft wrap, so two lines of source often render as one flowing paragraph. To force a hard break you need either two trailing spaces at the end of the line or a backslash before the newline. A blank line, by contrast, starts a new paragraph — this trips up almost everyone the first time an address or a poem comes out on one line.

Everything happens locally. Parsing, sanitizing, and rendering all run in your browser with no network calls, so your draft stays private and the preview keeps working offline. When you're done, you might want to tidy the copied markup with the HTML formatter, rewrite headings with the case converter, or check length against a limit with the word counter.

Examples

README with a table and code

# my-lib

A tiny utility.

## Install

```bash
npm i my-lib
```

| Option | Default |
| ------ | ------- |
| debug  | false   |

Shows GFM tables and fenced code blocks rendering together, like a real project README.

Task list and strikethrough

## Sprint

- [x] Ship preview
- [ ] Write docs
- [ ] ~~Rewrite parser~~ dropped

See https://example.com for details.

GFM task list checkboxes, strikethrough, and an autolinked bare URL.

Frequently asked questions

Which Markdown flavor does the preview use?

GitHub-flavored Markdown (GFM), a superset of CommonMark. On top of the standard core you get pipe tables, task lists, strikethrough with ~~text~~, and automatic linking of bare URLs, so the output matches what GitHub renders.

Is the rendered HTML safe from XSS?

Yes. Markdown allows raw HTML, so a pasted <script> tag or an onerror attribute is a real cross-site-scripting risk. The tool runs the generated HTML through DOMPurify in your browser, stripping dangerous tags and event handlers before displaying it.

Why did my two lines merge into one paragraph?

A single newline is treated as a soft wrap and collapses. For a hard line break, end the line with two trailing spaces or a backslash; to start a new paragraph, leave a blank line between the two blocks.

Is my Markdown uploaded anywhere?

No. Parsing, sanitizing, and rendering all happen locally in your browser with no network calls, so drafts and internal notes stay private and the preview keeps working offline.

Can I copy the generated HTML?

Yes. Press Copy HTML (or Ctrl/Cmd+Enter) to copy the sanitized markup to your clipboard, ready to paste into a CMS, an email template, or an .html file.

How to use Markdown Preview