Markdown Preview
Write Markdown on the left, watch the rendered result appear on the right, then copy or download the HTML. Nothing is uploaded — rendering happens in your browser.
How do you preview Markdown online?
Paste your Markdown into an online preview tool and it renders to HTML as you type — no install, no account. A good previewer handles GitHub Flavored Markdown: headings, emphasis, fenced code with syntax highlighting, tables, task lists and LaTeX math. You can then copy the generated HTML or download the file.
# Heading
**Bold**, *italic*, and `inline code`.
- List item
- [Link](https://example.com)
| Column | Value |
| ------ | ----- |
| Row | 1 |Renders as a level-one heading, a paragraph containing bold, italic and monospaced code, a bulleted list with a clickable link, and a two-column table with a header row.
Try the Markdown Preview
Markdown
Preview
Markdown Preview
Welcome to MDUtil's Markdown preview tool!
Features
- Real-time Markdown rendering
- Code syntax highlighting
- Support for tables, lists, and other elements
- One-click HTML code export
- LaTeX math formula support
- Export to Word document
Code Example
function greet() {
console.log("Hello, world!");
}
Table Example
| Element | Syntax | Example |
|---|---|---|
| Heading | # | # This is a heading |
| Bold | ** or __ | Bold text |
| Italic | * or _ | Italic text |
| Link | text | MDUtil |
| Code | code | const x = 1 |
| Image |  |
Tip: Edit the Markdown in the left panel and see the preview update in real-time on the right.
Math Formula Example
- Quadratic Formula:
- Einstein's Energy-Mass Equivalence:
Image Example
GitHub Flavored Markdown
This preview tool supports GitHub Flavored Markdown (GFM) which includes:
- Task lists
- Completed task
- Incomplete task
- Strikethrough:
strikethrough - Emoji: :rocket: :smile: :+1:
- Auto-linked references to issues and users
What the Markdown preview renders
The preview pane uses a GitHub Flavored Markdown parser, so what you see here is very close to what GitHub, GitLab and most static site generators will publish. These are the constructs worth testing before you commit a file.
Headings, emphasis and lists
The CommonMark core. Leave a blank line before a list, and put a space after the # characters — the single most common reason a heading renders as plain text.
# Document title
## Section
Text can be **bold**, *italic* or ***both***.
1. Ordered item
2. Another item
- Nested bulletAn h1 and an h2, a paragraph with strong and emphasis runs, and an ordered list containing a nested unordered list.
Fenced code blocks with highlighting
Three backticks open and close a block. The word after the opening fence is the language hint that drives syntax highlighting in the preview and on GitHub.
```ts
interface User {
id: number;
name: string;
}
```A monospaced block with TypeScript keywords, types and strings coloured. Without the language hint the code still renders, just unhighlighted.
Tables with column alignment
A GFM extension, not part of original Markdown. The separator row sets alignment: colons on the left, right or both sides of the dashes.
| Package | Version | Size |
| :------ | :-----: | ---: |
| react | 19.0 | 6 kB |
| next | 16.0 | 2 MB |A three-column table with the first column left aligned, the version centred and the size right aligned.
Task lists, strikethrough and autolinks
The GFM extras that make README and issue checklists work. A task list item is a normal list item whose text starts with [ ] or [x].
- [x] Write the spec
- [ ] Ship the feature
~~Deprecated~~ replaced by https://example.comTwo checkboxes, the first ticked, followed by a paragraph with struck-through text and a bare URL turned into a clickable link.
LaTeX math formulas
Single dollar signs wrap inline math, double dollar signs create a centred display block. Rendered with KaTeX here, and supported natively by GitHub since 2022.
Inline: $E = mc^2$
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$The inline formula sits in the sentence at text size; the block formula is centred on its own line with a full-height square root and fraction.
Images, links and raw HTML
Image syntax is a link with a leading exclamation mark. Raw HTML is allowed by CommonMark, but GitHub sanitises it — anything scripted or styled will be stripped when you publish.
<details>
<summary>Click to expand</summary>
Hidden content.
</details>The image loads inline with its alt text as fallback, and the details block becomes a collapsible section that GitHub also supports.
Will my Markdown look the same everywhere?
Every platform ships its own renderer, so the same file can look different depending on where you paste it. This preview follows GitHub Flavored Markdown, the closest thing to a de facto standard.
| Platform | Support | Notes |
|---|---|---|
| GitHub / GitLab | Full | Reference target for this preview: tables, task lists, strikethrough, autolinks and $...$ math. |
| VS Code | Full | Built-in preview opens with Cmd/Ctrl+K V. Mermaid and some extensions need a plugin. |
| Obsidian | Full | Adds wikilinks [[note]] and callouts, which other renderers show as literal text. |
| Notion | Partial | Converts pasted Markdown into native blocks on import; it does not render Markdown live. |
| Discord | Partial | Inline formatting, headings, lists and code blocks only. No tables, images or math. |
| Slack | Partial | Uses its own mrkdwn dialect: single *bold*, _italic_. No headings or tables. |
| Partial | Markdown mode covers tables, quotes and code blocks, but not LaTeX math. |
How to preview Markdown with this tool
Add your Markdown
Type in the left-hand editor, paste an existing document, or use the upload button to open a local .md, .markdown or .txt file.
Watch the live preview
The right-hand pane re-renders on every keystroke. Keep Sync Scroll enabled so the preview follows your cursor through long documents.
Switch to the HTML view
Use View HTML to see the generated markup as a complete, standalone HTML document rather than the rendered page.
Copy or download the result
Copy the Markdown or the HTML to your clipboard, download the HTML file, or export the Markdown source back to disk.
Frequently Asked Questions
What is a Markdown preview?
A Markdown preview is a rendered view of a Markdown file: the plain-text syntax is parsed and displayed as formatted HTML with real headings, bold text, lists, tables and code blocks. It lets you check the finished look before you commit or publish the file.
How do I preview a Markdown file without installing anything?
Open this page, then either paste the file contents into the editor or click the upload button and choose the .md file from your computer. The rendered result appears immediately in the right-hand pane. No installation, sign-up or extension is required.
Is my content uploaded to a server?
No. Parsing and rendering run entirely in your browser with JavaScript, so the document never leaves your machine. That makes the tool safe for drafts, internal documentation and anything else you would not want to send to a third party.
Does the preview support GitHub Flavored Markdown?
Yes. Tables, task list checkboxes, strikethrough, automatic URL linking and fenced code blocks with language hints all work, which is the same feature set GitHub applies to READMEs, issues and pull requests.
Can I preview LaTeX math formulas?
Yes. Wrap inline expressions in single dollar signs and display equations in double dollar signs. Formulas are typeset with KaTeX, the same engine used by many documentation sites, and GitHub has rendered this syntax natively since 2022.
Why is my Markdown table not rendering?
Three causes account for almost every broken table: the separator row of dashes under the header is missing, there is no blank line between the paragraph above and the table, or the number of pipe-separated cells differs between rows. Tables are also a GFM extension, so renderers that only implement original Markdown ignore them.
How do I export the preview as HTML?
Click View HTML to switch the right-hand pane to code mode. The tool builds a complete standalone HTML document, including styling for code blocks, tables and math, which you can copy to the clipboard or download as a .html file.
How do I preview Markdown in VS Code?
Open the file and press Cmd+K then V on macOS, or Ctrl+K then V on Windows and Linux, to open the preview beside the editor. Cmd/Ctrl+Shift+V opens it in a full tab instead. The built-in preview follows GitHub Flavored Markdown closely.
Why does my preview look different from GitHub?
Renderers differ in which extensions they enable and how they sanitise HTML. GitHub strips scripts, inline styles and most attributes for security, and applies its own stylesheet, so spacing and fonts will not match exactly even when the underlying HTML structure is identical.
What is the difference between a Markdown editor and a Markdown viewer?
A viewer only renders an existing file, while an editor also lets you write and change the source. This tool is both: the left pane is a full code editor with line numbers and syntax highlighting, and the right pane is the live viewer.