ZapKit

Markdown Previewer

Write Markdown on the left and see it rendered on the right as you type, with tables, lists and code blocks, then take the HTML.

What is Markdown?

Markdown is a lightweight way to format text using plain characters: # for headings, asterisks for bold and italic, dashes for lists and brackets for links. Created by John Gruber in 2004, it's now used for README files, documentation, notes apps, chat messages and blogs, because it's readable even before it's rendered.

This previewer shows your Markdown rendered live beside the source, so you can check formatting before committing a README, posting to a forum or publishing documentation. The HTML view gives sanitized markup you can paste into a website or CMS.

How to use the Markdown Previewer

  1. 1.Write Markdown

    Headings with #, **bold**, _italic_, lists, links, tables and fenced code blocks.

  2. 2.Watch the preview

    It renders as you type, the way GitHub-flavoured Markdown does.

  3. 3.Export HTML

    Switch to HTML to copy or download clean, sanitized markup.

Example: what the sample becomes

The sample document uses most common features:

# Project notes
<h1>
**plain text**
<strong>
| Tool | Category |
<table> with a header row
```js … ```
<pre><code class="language-js">

The language name after the backticks becomes a class that syntax highlighters pick up.

Rendering and safety

Markdown is converted with the marked library using GitHub-flavoured Markdown, which adds tables, strikethrough and fenced code blocks to the original syntax. The HTML is then cleaned by DOMPurify, which strips scripts and dangerous attributes, so pasted Markdown can't run code in the preview.

The output is plain semantic HTML without styling, so it takes on your site's own CSS when you paste it in.

Frequently asked questions

Is this the same as GitHub's Markdown?

It supports GitHub-flavoured Markdown's tables, task lists and code blocks. GitHub adds extras such as mentions and emoji shortcodes.

Can Markdown contain HTML?

Yes, raw HTML is allowed, but scripts and event handlers are removed for safety.

How do I make a table?

Separate columns with |, and put a row of --- under the header row. The sample shows one.

Is my document saved?

No. It stays in this page only; copy or download it before closing the tab.

Related tools

More Developer tools

All Developer toolsEvery ZapKit tool