Markdown Viewer & Previewer

About this tool

Supports common Markdown syntax: headings, bold, italic, links, and bulleted and numbered lists. Rendering happens instantly as you type, entirely in your browser.

How to use the Markdown Previewer

1. Type or paste Markdown into the left panel.
2. Watch the preview render live in the right panel.
3. Adjust your syntax until the rendered output looks the way you want.

Common use cases

• Previewing a README file before committing it to a repository
• Checking how a comment or forum post with Markdown formatting will look
• Drafting simple formatted notes without leaving the browser

Worked example

Type ## Setup followed by a blank line and 1. Install dependencies and you'll see it render as a level-2 heading followed by a numbered step — the same structure GitHub uses to render a project's README on its repository page. Wrap a word in double asterisks, like **required**, and it renders bold in the preview instantly, letting you check the emphasis reads correctly before pasting the raw Markdown into a GitHub issue, a Slack message (which uses similar but not identical syntax), or a static site generator's content file.

Things to watch out for

This previewer intentionally covers core, everyday Markdown — headings, bold, italic, links, and simple bulleted and numbered lists — rather than the full CommonMark or GitHub Flavored Markdown spec. Tables, fenced code blocks with syntax highlighting, nested lists, footnotes, and task list checkboxes aren't rendered here, so if your target platform (like GitHub) supports those and you rely on them, treat this preview as a check on the basics rather than a pixel-perfect match for the final rendered page. It's also worth remembering that Markdown "flavors" differ slightly between platforms — GitHub, Slack, Discord, and Reddit each extend or restrict base Markdown in their own ways (Slack, for instance, uses single asterisks for bold rather than the double-asterisk convention used almost everywhere else), so always spot-check the final rendered result on your actual target platform before assuming this preview is the final word.

What this previewer renders

This is a deliberately small renderer for quick checks. Here is exactly what it turns into formatting:

• # Title, ## Section and ### Subsection at the start of a line: three heading levels. #### and deeper show as plain text.
• - item or * item: a bulleted list. Consecutive lines join into one list.
• **bold** and *italic*.
• [text](https://example.com): a link, which opens in a new tab. Only http:, https:, mailto: and relative links such as #setup or docs/guide.md become clickable. Anything else, such as a javascript: or data: link, is shown as plain text.

Numbered lines such as 1. Step or 1) Step become a numbered list. Everything else appears as typed, including underscore emphasis (_word_), backtick code, block quotes (>), and tables. Images written as ![alt](url) display when the URL starts with http:// or https://; any other image URL is shown as plain text. Raw HTML is escaped and shown as text rather than run, so pasting <script> is harmless.

Why a preview can differ from GitHub

Most platforms follow CommonMark, a detailed specification of Markdown, and GitHub adds its own extensions on top, called GitHub Flavored Markdown (GFM). The main differences you'll notice:

• Line breaks. Here, every line becomes its own paragraph. In CommonMark, lines next to each other join into one paragraph. To force a line break there, end the line with two spaces or a backslash, or leave a blank line to start a new paragraph.
• Underscores. CommonMark treats _italic_ and __bold__ the same as the asterisk forms; this previewer supports asterisks only.
• GFM extras. Tables, strikethrough (~~text~~), task list items (- [ ]) and automatic links for bare URLs are GFM extensions, not core CommonMark, so other platforms may not render them either.

Common mistakes

• No space after the #. CommonMark requires a space, so #Heading is plain text, both here and on GitHub.
• Unclosed emphasis. A lone asterisk, as in 5 * 3, is fine, but two on one line can italicize the text between them. Put math inside backticks on platforms that support code spans.
• Spaces in link URLs. Write %20 for a space in a URL; the URL Encoder does this for you.

For tables, the Markdown Table Generator writes GFM table syntax you can paste into a README.