# Markdown Previewer - Live Preview and Copy as HTML, Free

Page: https://hirantha.me/tools/markdown-previewer
Part of: Hirantha Sandaruwan Lakshan free tools (https://hirantha.me/tools)
Updated: 2026-10-13

Type Markdown and see it rendered live: headings, lists, tables, task lists, links and code. A small safe parser, copy as HTML, nothing uploaded.

This is a free tool that runs in the browser: open the page to use it. File tools process files on the visitor's own device; files are never uploaded or stored. No account, sign-up, payment or watermark.

Type or paste Markdown on one side and see it rendered on the other as you type. The preview covers headings, bold and italic, lists including nested and task lists, links, code blocks, block quotes, tables and horizontal rules. The page uses its own small parser, builds the preview as React elements and never inserts raw HTML, so text such as <script> stays text. A Copy as HTML button gives you escaped, safe HTML for the same document.

What is supported. The parser follows the CommonMark specification for ATX and underlined headings, paragraphs, emphasis and strong emphasis, inline code, fenced and indented code blocks, block quotes, bullet and numbered lists (nested, tight or loose), links with titles, images, autolinks, hard line breaks, backslash escapes and character references. It adds the GitHub Flavored Markdown tables, task lists, strikethrough and bare http(s):// and www. links. Where it differs from the specification, the differences are listed in the next paragraph.

What is not supported. Raw HTML (it is shown as text), reference-style links and link reference definitions, footnotes, bare e-mail addresses (write <you@example.com> instead), math, front matter and HTML comments. Link schemes other than http, https and mailto are refused on purpose, so an autolink such as <ftp://example.com> stays text. It is a small parser, not a full CommonMark implementation, and a few corner cases of nested lists and tabs behave differently. For example, a tab after a block quote marker or a list marker is not expanded to columns. Limits: block quotes and lists stop nesting after 12 levels and the markers beyond that are shown as text, only the first 1,000,000 characters are used, and the live preview draws at most about 30,000 elements (a note appears when a document is cut short there; the copied HTML always holds the whole document). As a check, the parser was run on the specification examples: all 19 thematic break, 18 ATX heading, 27 setext heading, 12 indented code, 8 paragraph, 25 block quote and 48 list item examples of CommonMark 0.31.2 give the same HTML as the reference, apart from white space, and so do 129 of its 132 emphasis examples (the other three use raw HTML) and all 8 GFM table examples.

Safety. Nothing you type is ever inserted as HTML. The tool turns the Markdown into a tree of plain objects and renders that tree with React, so every piece of text is escaped. Link addresses are checked: only http, https, mailto and relative addresses are kept, so javascript:, data: and vbscript: links are dropped, including disguised ones such as java<tab>script: and addresses written with HTML entities. Links open in a new tab with rel="noopener noreferrer nofollow".

Images and privacy. A remote image makes your browser contact the image's server as soon as you type its address, which tells that server you opened this page. So the preview never loads images. It shows a box with the description and a link to open the image yourself. The copied HTML contains a normal img tag with the same checked address.

Copy as HTML. The button copies HTML built from the same tree. Text is escaped (& < > and the double quote become entities), only a fixed set of tags is written, and addresses are the checked ones. By default every link gets rel="noopener noreferrer nofollow". Untick the box to leave the rel attribute out. The words, characters and lines shown are counts of the Markdown source.

Markdown cheat sheet: what you type and what you get:
| You type | You get | Notes |
| --- | --- | --- |
| # Heading | Heading level 1 | Up to ###### for level 6. A space after the hashes is required |
| Heading, then ===== on the next line | Heading level 1 | A line of ----- instead gives level 2 |
| *italic* or _italic_ | Italic text | Use matching marks on both sides |
| **bold** or __bold__ | Bold text | ***both*** gives bold italic |
| ~~strike~~ | Strikethrough | GitHub extension |
| `code` | Inline code | Use two backticks around code that contains a backtick |
| Three backticks, code, three backticks | Code block | Put a language after the opening fence. Three tildes also work |
| > quote | Block quote | Quotes can contain lists, code and other quotes |
| - item, * item or + item | Bullet list | Indent two spaces to nest a list |
| 1. item | Numbered list | The first number sets where the count starts |
| - [ ] task or - [x] done | Task list with a box | GitHub extension. The boxes are not clickable |
| [text](https://example.com "title") | Link | The title is optional. Only http, https, mailto and relative addresses are kept |
| <https://example.com> | Link with the address as its text | Bare https:// and www. addresses also become links |
| ![alt](picture.png) | Image | Shown as a placeholder here, never loaded. The copied HTML has an img tag |
| --- or *** | Horizontal rule | On its own line, with a blank line before |
| | a | b |, then | --- | :---: | | Table | Colons in the second line set the alignment |
| Two spaces at the end of a line, or a backslash | Line break inside a paragraph | A single new line is only a space |
| \* | A literal asterisk | A backslash escapes any ASCII punctuation mark |

Q: Is it safe to paste untrusted Markdown?
A: Yes, for the preview and for the copied HTML. Text is escaped, raw HTML is never inserted, and link and image addresses are limited to http, https, mailto and relative ones. The preview is built from React elements, not from an HTML string. A site that accepts HTML from visitors should still clean it on the server.

Q: Why does my image not show?
A: On purpose. Loading a remote image would tell its server that someone opened this page, and the address would be requested on every keystroke. The preview shows a placeholder with the description and a link. In the copied HTML the image is a normal img tag.

Q: Which flavour of Markdown is this?
A: CommonMark, plus the GitHub Flavored Markdown tables, task lists, strikethrough and bare web addresses. It is not a complete implementation. Raw HTML, reference links, footnotes and math are not supported.

Q: Why is my link not clickable?
A: Its address is probably not allowed. Only http, https, mailto and relative addresses are kept, and an address with a space in it must be wrapped in angle brackets. The text of such a link is still shown, just without the link.

Q: How do I make a line break?
A: End the line with two or more spaces, or with a backslash. A single new line inside a paragraph is only a space, and a blank line starts a new paragraph.

Q: Why does the copied HTML have rel=nofollow on links?
A: Google lets a site mark a link with nofollow when it does not want Google to associate the site with the linked page, and asks for ugc or sponsored where those fit better. Pasted Markdown is often user-written, so the cautious value is the default. Untick the box to copy HTML without it.

Q: Is my Markdown uploaded or saved?
A: No. It is parsed in your browser tab and nothing is sent to a server or stored.

Sources: CommonMark Spec, version 0.31.2 (https://spec.commonmark.org/0.31.2/); GitHub Flavored Markdown Spec, version 0.29-gfm (https://github.github.com/gfm/); Cross Site Scripting Prevention Cheat Sheet, OWASP (https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html); Qualify your outbound links to Google, Google Search Central (https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links)

Related tools:

- [HTML entities encoder and decoder](https://hirantha.me/tools/html-entities-encoder.md): Encode text to HTML entities as names, decimal or hex and decode them back, with all 2,125 named references of the HTML standard and a table of the common ones.
- [Word & character counter](https://hirantha.me/tools/word-counter.md): Live word, character, sentence, and reading-time counts as you type.
- [Diff checker](https://hirantha.me/tools/diff-checker.md): Compare two blocks of text and see what changed, line by line.
- [JSON formatter & validator](https://hirantha.me/tools/json-formatter.md): Pretty-print, minify, and validate JSON with clear error locations.