How to preview Markdown
- Type or paste Markdown into the left pane, the rendered preview on the right updates live with every keystroke, no button required.
- Not sure of the syntax? Click Sample to load a document that exercises headings, emphasis, lists, a code block and a blockquote, then edit it to learn by doing.
- When the preview looks right, click Copy HTML to grab the underlying markup for a website, email template or CMS. Use Clear to start fresh.
What Markdown is for
Markdown lets you format text with ordinary punctuation instead of reaching for toolbar buttons, a # makes a heading, asterisks make things bold, a dash starts a list. That plain-text simplicity is why it turns up everywhere developers and writers work: README files, GitHub issues and pull requests, static-site blog posts, product docs, Reddit and Discord messages, and note apps like Obsidian and Notion. The catch is that the raw text and the rendered result look different, and small mistakes, a missing blank line, the wrong indentation, quietly break the output. A live preview closes that gap so you catch the problem before you publish, instead of after a colleague sees a mangled list.
This previewer renders the common CommonMark and GitHub-flavored basics and runs entirely on your device. Because nothing is uploaded, it is safe for release notes, private drafts, or internal docs you would never paste into an unknown online editor. For safety it also escapes any raw HTML you include rather than executing it, so a stray <script> shows up as visible text instead of running. Once you are happy with the copied HTML, tools like the HTML Entity Encoder can help if you then need to embed that markup somewhere that treats angle brackets literally.
Markdown syntax cheat basics
A handful of marks cover the vast majority of everyday writing:
- Headings, one to six
#characters followed by a space:# Title,## Section,### Subsection. - Emphasis,
*italic*or_italic_,**bold**,~~strikethrough~~. - Lists, start lines with
-or*for bullets, or1.2.for numbers; indent by two spaces to nest. - Links and images,
[text](https://example.com)for a link; add a leading!as infor an image. - Code, wrap a word in backticks for
`inline code`, or fence a block between triple backticks (```) on their own lines. - Quotes and rules, start a line with
>for a blockquote; put---on its own line for a horizontal rule.
The single rule that trips people up most: block elements usually need a blank line around them. A list or code fence pressed right up against a paragraph often refuses to render, and adding one empty line fixes it.
Frequently asked questions
What Markdown syntax is supported?
The common CommonMark and GitHub-flavored basics: headings, bold and italic, strikethrough, inline code and fenced code blocks, ordered and unordered (and nested) lists, links and images, blockquotes and horizontal rules.
Why isn't my list or code block rendering?
Almost always a missing blank line. Markdown wants an empty line between a paragraph and a list, heading or code fence. Add one above the block and it will render. Also check that ordered lists use 1. with the dot, and that fenced code uses three backticks on their own line.
Can I copy the generated HTML?
Yes, click Copy HTML to get the rendered markup, ready to paste into a website, email template or any CMS that accepts raw HTML. The preview and the copied HTML are the same output.
Is it safe to paste sensitive or draft content?
Yes. Rendering happens entirely in your browser, nothing you type is uploaded or stored, and any raw HTML in your Markdown is escaped rather than executed, so pasted content can't run scripts.
Does it work offline?
Yes. Once the page has loaded you can disconnect from the internet and the live preview keeps working, because all the rendering runs locally on your device.