Markdown Previewer

How to use the previewer

1. Type or paste Markdown in the left pane. The page loads with a small sample document so you can see every supported feature at once.
2. Watch the right pane render on every keystroke. There is no refresh button because there is no delay.
3. When the preview looks right, click Copy HTML to put the generated markup on your clipboard, ready for a CMS, an email template, or a static site.

A worked example: a formatted release note

Type this in the left pane:

## Version 2.1

Fixed the export bug. **Update recommended.**

| Area | Status |
| ---- | ------ |
| Export | Fixed |
| Import | Unchanged |

The preview shows an h2 heading, a paragraph with the second sentence bolded, and a real bordered table with a header row. Click Copy HTML and you get the corresponding <h2>, <p><strong>, and <table> markup. The table is the part people get wrong most often: the divider row of dashes under the header is mandatory, and if your table refuses to render, a missing or malformed divider is the cause nine times out of ten.

What the renderer supports, and how

This is a purpose-built renderer, not a wrapped library, covering the everyday core of Markdown: headings one through six, bold, italic, inline code, fenced code blocks, links, images, ordered and unordered lists, blockquotes, horizontal rules, and pipe tables. It escapes all raw HTML in your input before rendering, so a pasted <script> tag displays as text instead of running, and links in the output carry rel="nofollow noopener" automatically. Consecutive plain lines merge into a single paragraph, standard Markdown behavior that surprises people coming from plain text editors: to force a break, leave a blank line. Everything happens in your browser; drafts are never uploaded, which makes this a reasonable scratchpad for unannounced release notes or internal docs.

Honest limitations

The renderer covers the common core, not the full CommonMark spec. Nested lists render flat, reference-style links (the kind defined at the bottom of the file) are not supported, there is no strikethrough or task list syntax, and fenced code blocks are displayed without syntax highlighting. Underscore emphasis is also out: use asterisks for bold and italic. The Copy HTML output includes some inline styles on blockquotes, code blocks, and tables so the markup looks decent pasted anywhere, but if your site has its own stylesheet you may want to strip those attributes. For README files and blog posts this covers what you actually type; for documents that lean on deep nesting or footnotes, use a full CommonMark editor.