Skip to content
koducathome

Markdown Previewer

Write GitHub-flavoured Markdown and see a sanitised live preview, then copy or download the generated HTML.

How to use this tool

Steps for using the Markdown Previewer.

  1. Type or paste Markdown into the editor, or click Sample to load an example README.
  2. Watch the rendered Preview update as you type. On a phone, switch between Write, Preview and HTML with the buttons at the top.
  3. Tick Treat single line breaks as <br> if your Markdown relies on GitHub-comment-style line breaks.
  4. Open the HTML view to see the sanitised HTML that the preview shows.
  5. Use Copy HTML, Download .html for a standalone page with basic styling, or Download .md to save your Markdown.

Example

Task list and table

Markdown
## Todo

- [x] Write docs
- [ ] Ship v2

| Key | Value |
| --- | ----- |
| a   | 1     |
HTML
<h2>Todo</h2>
<ul>
<li><input checked="" disabled="" type="checkbox"> Write docs</li>
<li><input disabled="" type="checkbox"> Ship v2</li>
</ul>
<table>
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody><tr>
<td>a</td>
<td>1</td>
</tr>
</tbody></table>

Common use cases

  • Drafting and checking a README, CHANGELOG or CONTRIBUTING file before committing it.
  • Previewing release notes or documentation pages written in Markdown.
  • Converting Markdown to clean HTML for a CMS, newsletter or static page.
  • Checking that tables and task lists render correctly in GitHub-flavoured Markdown.
  • Estimating the length and reading time of a blog post draft.

How the Markdown preview is rendered

Markdown is converted to HTML with the marked library in GitHub-flavoured Markdown (GFM) mode. On top of standard Markdown — headings, emphasis, lists, links, images, block quotes and code — GFM adds pipe tables, task lists (- [x]), strikethrough (~~text~~), fenced code blocks with a language tag, and automatic links for bare URLs. Fenced code gets a language-… class, which syntax highlighters use, but no highlighting is applied in the preview.

By default a single newline inside a paragraph is treated as a space, as in the CommonMark specification and GitHub README files, so text wrapped at 80 columns still renders as one paragraph. GitHub issue and pull-request comments behave differently and turn each newline into a <br>; the line-breaks option switches to that behaviour.

Markdown allows raw HTML, so a document can contain <script> tags, onerror= handlers or javascript: links. Before anything is shown, the generated HTML is sanitised with DOMPurify: scripts, event-handler attributes, dangerous URLs, <style> blocks, inline style attributes, iframes, forms, buttons, selects and text areas are removed, any remaining inputs (the task-list checkboxes) are disabled, and every link gets rel="noopener noreferrer". The HTML view, Copy HTML and the downloaded file all contain this sanitised version.

The word count ignores tokens made only of Markdown syntax such as #, -, | or ---, and counts anything containing a letter or digit. Reading time is estimated at 200 words per minute and rounded to the nearest minute. Characters are counted as Unicode code points, so an emoji counts as one.

Limitations

  • Rendering follows marked's GFM implementation, which can differ from GitHub in edge cases; GitHub-specific features such as alerts (> [!NOTE]), emoji shortcodes, mentions, Mermaid diagrams and math are not rendered.
  • Code blocks are not syntax-highlighted.
  • Raw HTML is sanitised, so scripts, inline styles, iframes and forms are removed from the preview and the exported HTML.
  • Relative image and link paths are resolved against this page, so repository-relative images in a README will not display.
  • Your Markdown is not saved; download it before leaving the page.

Frequently asked questions

Is the HTML output safe to paste into my site?

It has been sanitised with DOMPurify, which removes scripts, event handlers and dangerous URLs. If your site renders untrusted user Markdown, you should still sanitise on your own server, because client-side output can be edited before it reaches you.

Why does my text appear on one line when I pressed Enter?

In standard Markdown a single line break is just a space. Leave a blank line to start a new paragraph, end the line with two spaces or a backslash for a hard break, or tick the line-breaks option.

What does the downloaded .html file contain?

A complete HTML5 document with a <title> taken from your first heading, a small embedded stylesheet for readable typography, tables and code blocks, and the sanitised HTML. It has no external dependencies and opens offline. You can tidy the markup further with the HTML Formatter.

Is my Markdown uploaded anywhere?

No. Rendering, sanitising and the exports all happen in your browser.