About Markdown Previewer
Markdown Previewer puts an editor and a live rendered preview side by side. Every keystroke re-renders, and the rendered HTML passes through a sanitizer that removes scripts, event handlers, and embedded frames before anything reaches the page, so you can paste a README or a release note from an unfamiliar source and still only see text.
There is no single Markdown. CommonMark fixed the ambiguities in the original syntax, GitHub Flavored Markdown added tables, task lists, strikethrough, and bare-URL autolinking, and most publishing platforms layer their own extensions on top. This preview renders GitHub Flavored Markdown with soft line breaks on, which matches a GitHub comment box rather than a rendered README. Knowing which dialect you are looking at is the difference between a preview that predicts the published page and one that quietly lies.
How to use this developer tool
- Write or paste Markdown into the left pane. The preview on the right updates as you type; there is no button to press.
- Check the structures that differ between dialects first: tables, task lists, strikethrough, and any bare URLs you expect to become links.
- Watch what happens to a single newline inside a paragraph. This preview turns it into a line break, so text wrapped at 80 columns will render as many short lines.
- If you pasted raw HTML, compare it against the preview. Elements and attributes the sanitizer removes simply do not appear, with no error message.
- Copy the Markdown source out of the editor when you are satisfied. The preview is a rendering, not an export; there is no HTML output pane.
Worked example: the soft line break that surprises people
The second and third lines of the paragraph below are written as two separate source lines with no blank line between them. CommonMark joins them into one paragraph with a space. This preview inserts a line break instead, because it renders with soft breaks enabled.
## Release 2.4
Fixes the retry loop and adds a `--dry-run` flag.
Ship on 2026-04-02.
- [x] migration reviewed
- [ ] changelog written
See the ~~old~~ guide at https://example.com/guide.<h2>Release 2.4</h2>
<p>Fixes the retry loop and adds a <code>--dry-run</code> flag.<br>Ship on 2026-04-02.</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> migration reviewed</li>
<li><input disabled="" type="checkbox"> changelog written</li>
</ul>
<p>See the <del>old</del> guide at <a href="https://example.com/guide">https://example.com/guide</a>.</p>The tool shows the rendered result, not this markup; it is reproduced here so the behaviour is checkable. Note the br between the two sentences, the disabled checkbox inputs produced by the task-list syntax, and the bare URL that became a link on its own. The first of those three is the one that differs from a README rendered on GitHub.
Dialect differences for the features people actually use
Only the last column describes this preview. The first two are there so you can predict what will happen when the same document is published somewhere else.
| Feature | CommonMark | GitHub Flavored Markdown | This preview |
|---|---|---|---|
| Pipe tables | Not supported | Supported | Supported |
| Task list, a dash then brackets | Renders as literal brackets | Renders a disabled checkbox | Renders a disabled checkbox |
| Strikethrough with double tildes | Not supported | Supported | Supported |
| Bare URL becomes a link | No, angle brackets required | Yes, and bare email addresses too | Yes, both |
| Single newline inside a paragraph | A space | A space in files, a line break in comment boxes | A line break, always |
| Heading anchor ids | Not generated | Generated, so #section links work | Not generated |
| Footnotes with a caret marker | Not supported | Supported | Not supported; the marker becomes a link |
| Raw HTML block | Passed through unchanged | Passed through, then filtered by GitHub's allowlist | Passed through, then filtered by the local sanitizer |
Troubleshooting
Raw HTML in the document partly disappears from the preview.
Why it happens The sanitizer runs after the Markdown is converted. It removes script, iframe, object, embed, link, meta, and base elements outright, and strips on-handlers, javascript: URLs, and srcdoc attributes from whatever survives.
Fix Nothing needs fixing if you only wanted to see the text. Expect a details element, a span with a style attribute, and an image with an https source to survive, and expect an embedded video iframe and an onclick handler not to.
A paragraph renders with a line break on every line.
Why it happens Soft breaks are enabled, so each newline inside a paragraph becomes a br. Prose hard-wrapped at a fixed column width therefore renders as a column of short lines.
Fix Write each paragraph as one long line and let the editor soft-wrap it. That form renders identically in every dialect, which makes it the safer way to write anything you will publish elsewhere.
Footnotes render as links pointing at nothing.
Why it happens Footnote syntax is a GitHub extension that this renderer does not implement. The caret marker is parsed as an ordinary reference link, and the definition line is consumed as that link's target.
Fix Use inline parentheses or a manually numbered notes section for a document previewed here. Check footnotes in the destination renderer, since even among platforms that support them the numbering and back-link markup differ.
YAML front matter shows up as a heading and a horizontal rule.
Why it happens Front matter is a convention of static-site generators, not of Markdown. The opening three dashes become a horizontal rule, and the first key line followed by the closing dashes is read as a setext heading.
Fix Delete the front matter block before previewing, or accept the two stray elements at the top. The block will be consumed correctly by the generator that actually builds the site.
When this tool is the right choice
- Checking a README, changelog, or release note for broken list nesting and malformed tables before committing it.
- Reading a Markdown file someone sent you, without trusting whatever HTML it may contain.
- Confirming that a table's column count matches its separator row, which is the most common reason a table renders as a paragraph.
- Drafting a comment or issue body where soft line breaks match the destination, since comment boxes on most platforms behave the same way.
When to use something else
- Getting HTML out. The preview renders the document but exposes no HTML output, so use your site generator or a build-time Markdown pipeline when you need the markup itself.
- Predicting exactly how a specific platform will publish the document. Dialects differ on headings anchors, footnotes, raw HTML, and embeds; render it where it will live.
- Previewing a standalone HTML page. The HTML Previewer renders markup in a sandboxed frame and is the right tool when the input is HTML rather than Markdown.
Privacy and data handling
The Markdown never leaves this browser tab. It is parsed locally, and the result is inserted only after the sanitizer strips script, iframe, object, embed, link, meta, and base elements, every attribute whose name begins with "on", every javascript: URL, and any srcdoc attribute. That protects the page you are looking at. It says nothing about how the system you publish to will treat the same document.
Related developer tools
Frequently asked questions
Which Markdown dialect does the preview use?
GitHub Flavored Markdown, with soft line breaks turned on. That gives you tables, task lists, strikethrough, and automatic links for bare URLs and email addresses. It does not give you footnotes, heading anchor ids, or front matter handling.
Can Markdown run JavaScript in this preview?
The rendered HTML is filtered before it is inserted: script elements, frames, embeds, on-handler attributes, and javascript: URLs are removed. That is a strong barrier for a preview, but treat untrusted Markdown as untrusted everywhere, because the next renderer it reaches may have different rules.
Why does my table render as a paragraph?
Almost always because the separator row is missing or has a different number of cells than the header row. Every column needs its own run of dashes in that second line, and the pipes have to line up in count, not in visual position.
Does the preview save my document?
No. Nothing is stored between visits and nothing is uploaded, so closing or reloading the tab discards what you wrote. Keep the source in your editor or repository and use this pane for checking, not for authoring anything you cannot afford to lose.
Why do my headings not produce anchor links?
Anchor ids on headings are added by publishing platforms, not by the Markdown specification. GitHub generates them from the heading text; this preview does not. A link to #my-section will therefore work on GitHub and do nothing here.
Is the preview styled the way my site will be?
No. The preview applies the site's own typography so the structure is legible. Spacing, code-block colours, and table borders will all differ from your destination. Judge structure here and appearance in the real theme.