🔧 Programming ✅ 100% Free ⚡ Live Preview

Markdown Previewer

Write Markdown and see a live HTML preview side by side. Supports tables, code blocks, task lists, and full GitHub Flavored Markdown (GFM). Export the rendered output as HTML.

Markdown

Preview

📊 Document Stats

—

Words

—

Characters

—

Lines

—

Read time

📝 Syntax Cheatsheet

# H1Heading levels 1–6 (use more #)

**bold**Bold text

*italic*Italic text

`code`Inline code

```langFenced code block with syntax

- itemBullet list

1. itemNumbered list

- [ ]Task list checkbox

[text](url)Link

![alt](url)Image

> quoteBlockquote

| a | b |Table (GFM)

---Horizontal rule

🔗 Related Tools

What is a Markdown Previewer?

A Markdown previewer renders Markdown syntax as formatted HTML in real time as you type. Markdown is a lightweight markup language used for README files, documentation, blog posts, GitHub/GitLab issues and pull requests, Notion pages, Discord and Slack messages, and static site generators. Writing in Markdown is faster than writing raw HTML, but it helps to see exactly how your formatting will render — that's what this tool provides, with full support for GitHub Flavored Markdown (GFM) extensions like tables and task lists.

This tool runs entirely in your browser using the marked.js parser with DOMPurify sanitisation — your content never leaves your device.

What is GitHub Flavored Markdown (GFM)?

GFM is GitHub's extended version of standard Markdown, adding several features not in the original specification:

Tables — create tables using pipes | and dashes --- for the header separator.
Task lists — checkboxes using - [ ] (unchecked) and - [x] (checked), commonly used in issue tracking.
Strikethrough — wrap text in double tildes: ~~deleted text~~.
Fenced code blocks with language hints — triple backticks followed by a language name enable syntax highlighting: ```python.
Automatic URL linking — bare URLs are automatically converted to clickable links.
Emoji shortcodes — codes like :smile: render as emoji on platforms that support them.

How to Use This Tool

Type or paste Markdown in the left pane — the preview updates instantly as you type.
Use the formatting toolbar — bold, italic, code, headings, lists, links, and tables can be inserted with one click.
Switch views — toggle between Split, Edit-only, and Preview-only modes for different screen sizes.
Export — copy the rendered HTML to your clipboard or download it as a standalone .html file.

Frequently Asked Questions

Yes — the HTML output is sanitised with DOMPurify before being displayed or exported, which strips potentially dangerous elements like <script> tags or event handler attributes. This makes it safe to copy the output into a CMS or website without introducing XSS vulnerabilities from untrusted Markdown content.

GFM tables require a header row, a separator row of dashes (|---|---|), and at least one data row. Each row must use pipe | characters to separate columns, and the separator row must have at least three dashes per column (or fewer with colons for alignment: :--- left, :---: center, ---: right).

Code blocks render with the language name attached as a CSS class (e.g. language-python), following the standard convention used by highlight.js and Prism.js. To see actual colour syntax highlighting, you would need to load a highlighting library like Prism.js or highlight.js on the page where you embed the exported HTML.

Markdown is a simplified syntax that compiles to HTML — **bold** becomes <strong>bold</strong>, # Heading becomes <h1>Heading</h1>, and so on. Markdown is faster to write and more readable as plain text, while HTML offers more precise control and supports elements Markdown doesn't have a syntax for (like <div> with custom classes). Most Markdown parsers also allow inline raw HTML for cases the syntax doesn't cover.

In standard Markdown, end a line with two or more spaces before the line break to force a <br>. In GFM (used by GitHub), a single newline within a paragraph is also rendered as a line break. To create a new paragraph (with spacing), leave a completely blank line between blocks of text.

Yes — this previewer renders the same GFM syntax GitHub uses to display README files, so you can write and preview your README content here, then copy the raw Markdown text (not the HTML) into your README.md file in your repository. The preview gives you a close approximation of how it will look on GitHub.

Copied!