Markdown Previewer - Live Markdown Editor

🔗 Related Tools

What is a Markdown Previewer?

A Markdown previewer shows you how Markdown text will look once it is formatted. Markdown is a plain text format where simple symbols control the layout: a # makes a heading, **text** makes bold text and - item makes a list. The previewer reads those symbols and shows the finished page next to your editor, so you can fix mistakes while you write.

It is useful for writing README files, project documentation, blog posts and notes, and for checking the syntax of tables and code blocks before you publish them.

How to Use the Markdown Previewer

1. Type or paste your Markdown into the editor, or upload a .md file.
2. Check the live preview. Use the toolbar or keyboard shortcuts to add formatting.
3. Use Copy HTML or Download HTML to get the converted result, or Download .md to keep the Markdown.
4. To make a PDF, click Print and choose Save as PDF in your browser.

Markdown Syntax Cheat Sheet

Element	Markdown	Result
Heading 1	# Heading	Largest heading
Heading 2	## Heading	Second level heading
Heading 3	### Heading	Third level heading
Bold	**bold text**	bold text
Italic	*italic text*	italic text
Strikethrough	~~removed~~	removed
Link	[text](https://example.com)	Clickable link
Image		Image
Bulleted list	- item	Bullet list
Numbered list	1. item	Numbered list
Task list	- [x] done and - [ ] to do	Checkboxes
Blockquote	> quote	Indented quote
Inline code	`code`	Monospace text
Horizontal rule	---	Divider line

Markdown Example

Markdown input:

# Project Notes

This is **important** and this is *optional*.

- [x] Write README
- [ ] Add screenshots

| Tool  | Type      |
| ----- | --------- |
| Cron  | Scheduler |
| JSON  | Data      |

HTML output:

<h1>Project Notes</h1>
<p>This is <strong>important</strong> and this is <em>optional</em>.</p>
<ul>
  <li><input type="checkbox" checked disabled> Write README</li>
  <li><input type="checkbox" disabled> Add screenshots</li>
</ul>
<table>
  <thead><tr><th>Tool</th><th>Type</th></tr></thead>
  <tbody>
    <tr><td>Cron</td><td>Scheduler</td></tr>
    <tr><td>JSON</td><td>Data</td></tr>
  </tbody>
</table>

The exact HTML can differ slightly between Markdown tools, for example in attributes and spacing. The meaning stays the same.

Code Blocks in Markdown

Wrap code in three backticks and add the language name after the opening backticks to get syntax highlighting.

```javascript
const total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total);
````

Text inside a code block is shown exactly as typed, so Markdown symbols inside it are not converted.

What is GitHub Flavored Markdown (GFM)?

GitHub Flavored Markdown is an extended version of the original Markdown. It adds tables, task lists, strikethrough, fenced code blocks and automatic links for plain URLs. This previewer supports that style, so a README written here should look very close on GitHub. GitHub also has features of its own, such as @mentions and issue links, that are not part of this preview.

Markdown vs HTML

Feature	Markdown	HTML
Ease of writing	Very easy, plain text	More typing with tags
Readability of the source	Easy to read as it is	Harder with many tags
Layout control	Limited, basic formatting	Full control with CSS
Best for	Docs, README, notes, blog posts	Web pages and complex layouts
Needs conversion	Yes, to HTML for the web	No, browsers read it directly

Where is Markdown Used?

Markdown is used for README files and documentation on code hosting sites, static site generators, note-taking apps, wikis, chat tools, forums and many blog platforms. Support for extra features such as tables or task lists can differ between these platforms, so it is a good habit to preview your text before you publish.

Tips for Writing Better Markdown

• Leave a blank line before and after headings, lists, tables and code blocks.
• Use one heading level at a time. Go from H2 to H3, not from H2 to H5.
• Add alt text to images so the content makes sense for people who cannot see them.
• Use descriptive link text such as "installation guide" instead of "click here".
• Add a language name to code blocks to get highlighting.
• Keep the structure consistent, for example always use - for bullets in the same file.

Common Markdown Mistakes

• No blank line before a list or table: The list or table may show as plain text.
• Missing space after #: #Heading may not become a heading, but # Heading does.
• Table separator row missing: A table needs a row of dashes under the header, such as | --- | --- |.
• Unequal columns in a table: Every row should have the same number of columns.
• A pipe inside a table cell: Escape it as \|.
• Inconsistent list indentation: Indent nested items with the same number of spaces each time.
• Unclosed code fence: If the closing backticks are missing, the rest of the document turns into code.

Privacy and Safety

• Your text is processed in your browser and is not sent to our server.
• A draft is saved only in your own browser so you do not lose it on refresh. Use Clear to remove it.
• The preview is sanitized, so scripts and unsafe links are removed.
• If your Markdown includes an image from another website, your browser requests that image from that site, as it does on any web page.

Frequently Asked Questions

What is Markdown?

Markdown is a simple way to format text using plain characters. For example, a # at the start of a line makes a heading, and text between double asterisks becomes bold. It is widely used for README files, documentation, notes and blog posts, and it can be converted to HTML.

How do I preview a README.md file?

Paste the content of your README into the editor, or upload the .md file. The preview on the right updates as you type. The preview follows GitHub-style Markdown, but it may not match GitHub exactly, so check important files on GitHub as well.

How do I convert Markdown to HTML?

Write or paste your Markdown, then click Copy HTML to copy the generated HTML, or Download HTML to save it as a file. The HTML is cleaned before it is shown, so unsafe elements such as scripts are removed.

How do I save my Markdown as a PDF?

Click Print and choose Save as PDF as the destination in your browser's print window. Only the preview is printed, not the editor or the toolbar.

Does the preview look exactly like GitHub?

It supports the same GitHub-style syntax, such as tables, task lists and fenced code blocks, but it is not an exact copy. GitHub adds its own features, such as user mentions and issue links, which are not shown here.

Is it safe to paste HTML or scripts in the editor?

The preview is sanitized, so scripts, event handlers such as onerror and javascript: links are removed. Even so, only paste content you trust, and do not paste passwords or secrets into any online tool.

Is my text saved or uploaded?

Your text is not sent to our server. The tool saves a draft only in your own browser so you do not lose it if you refresh the page. You can clear the saved draft at any time with the Clear button.

Why does my table or list not render correctly?

Tables need a header row followed by a separator row with dashes, and lists usually need a blank line before them. Check that the number of columns matches in every row and that nested list items are indented consistently.

Is this Markdown previewer free?

Yes. The tool is free, needs no signup and runs in your browser using JavaScript.