Markdown Previewer

See your Markdown as a finished page

Markdown Previewer renders Markdown into HTML and shows you two things side by side: the rendered page as a reader would see it, and the HTML source that produced it. It is a quick way to check that a README, a blog draft, an issue comment or a set of notes will look right before you publish it, and to get clean HTML you can paste into a CMS or email template.

The previewer follows GitHub Flavored Markdown (GFM), the dialect most people already write in, and it strips raw HTML and unsafe links during conversion, which is why the output panel is labelled Sanitized.

The three panels

Input

The top editor, marked with a Markdown badge, is where you write or paste. Its header has a clipboard icon (Paste from clipboard), a trash icon (Clear all) and the main Preview button. The footer shows a running character count and the reminder "Supports GitHub Flavored Markdown".

Rendered Output

The middle panel, marked HTML, holds the generated HTML source in a read-only editor. Use Copy to copy that source, or Download to save it as a standalone HTML file. The footer shows the HTML character count and a Switch View button.

Preview

The bottom panel, marked Live, displays the HTML rendered in the page. A Refresh preview icon in its header renders the current input again.

How rendering works

Rendering is done on the server. When you click Preview, your Markdown is sent to the site's Markdown API, which converts it with the league/commonmark library using its GitHub Flavored Markdown converter, and the HTML is sent back and shown. The endpoint returns the HTML and does not store your text. Input is limited to 200,000 characters per request; larger documents are rejected with an error message.

Two safety settings in the converter shape the output:

• Raw HTML in your Markdown is stripped. Tags like <div> or <details> written directly in the Markdown are removed rather than passed through, so a pasted <script> never reaches the preview.
• Unsafe links are dropped. A link whose target uses a scheme such as javascript: keeps its text but loses its address.

If your document starts with a YAML front matter block between --- lines, that block is removed before rendering, so the preview shows only the body, as most static site generators would.

What GFM features you can use

Syntax highlighting colours are not applied; code blocks are shown in a plain monospaced style with the language noted as a class in the HTML.

Step-by-step preview

1. Type in the Input editor or click the clipboard icon. When you paste with that icon, the previewer renders automatically a moment later.
2. Click Preview to render what you typed. The button shows "Rendering" while it waits for the server, and a toast confirms when the preview is updated.
3. Scroll to the Preview panel to read the result. On a phone the page scrolls there for you.
4. If you only want to read the page, click Switch View. The HTML source panel collapses and the button changes to Split View; click it again to bring the source back.
5. After editing the input, click Preview again or the Refresh preview icon. The panel does not re-render on every keystroke.
6. Click Copy for the HTML source, or Download to save a file named like markdown-preview-2026-10-26T14-05-09.html, stamped with the date and time.
7. Click Clear all to empty everything.

About the downloaded HTML file

The downloaded file wraps the rendered HTML in a minimal document: a doctype, a <head> with a UTF-8 charset declaration, and your content inside <body>. It has no stylesheet, so when you open it in a browser it uses default browser styles. That makes it a clean starting point for pasting into another site, but it will not look exactly like the preview panel on this page.

Good uses for the previewer

• Checking that a table's columns line up before committing a README.
• Making sure list indentation produces the nesting you intended.
• Converting a Markdown draft to HTML for a CMS that only accepts HTML.
• Confirming that a document with front matter renders without the metadata showing.
• Reviewing user-submitted Markdown, since embedded HTML and script links are stripped during conversion.

What to watch out for

• Your platform may differ. GitHub, GitLab, Reddit and static site generators each add their own extensions. Footnotes, math, emoji shortcodes, diagrams and heading anchor links are not part of this previewer's output.
• Raw HTML will not show. If your document deliberately uses HTML blocks, they will be missing here even if your target platform allows them. Remove them deliberately with Markdown Remove HTML if you want the source to match what this preview shows.
• Task list checkboxes are read-only. They show the state written in your Markdown and cannot be clicked to change it.
• Images load from their original URLs. The preview shows images by pointing at the addresses in your Markdown; local file paths on your computer will not load.
• Requires a connection. Rendering is server-side, so it will not work offline.

Troubleshooting a preview that looks wrong

• A list renders as one paragraph. Add a blank line between the paragraph above and the first list item, and check that every item starts with a marker followed by a space.
• A table appears as plain text with pipes. The second row must be the separator row of dashes, and each row needs the same number of columns.
• Everything after a point turns into code. A fenced code block was opened and never closed. Add the missing closing fence.
• Your metadata shows at the top. Front matter is only recognised when the very first line is --- and the block is closed by another --- on its own line.
• An error toast appears. Check your connection and the size of the input; anything over 200,000 characters is refused.

Related Markdown tools

If the preview reveals long blank gaps, Markdown Remove Empty Lines can help, and if you need YAML front matter at the top of the file, Markdown Metadata Generator builds it from JSON.

Frequently Asked Questions