Markdown Preview
Write Markdown on one side and see the formatted result on the other, updated instantly as you type.
What does this Markdown Preview tool do?
This tool lets you write Markdown in one pane and see the formatted result in another, updating as you type. Nothing is pre-filled, so you start with a blank editor and an empty preview. As soon as you type a heading, a list, a link or a code block, the preview shows how it will look. A small toolbar inserts common Markdown symbols for you, and you can copy your text or download it as a .md file when you are done. Your text stays in your browser, and the tool does not send it to a server.
How to Use This Markdown Preview Tool?
- Start typing in the editor. Click the left pane (labelled editor.md) and write or paste your Markdown. On phones and small screens the editor sits above the preview instead of beside it.
- Watch the preview update. The preview pane renders your text instantly. Until you type something, it shows a short “No content yet” message.
- Use the toolbar when you need it. Select some text and click Bold, Italic, Link or Inline Code to wrap it. With nothing selected, the tool inserts a placeholder you can type over.
- Check the counters. The word and character counts in the top bar update with every change to your text.
- Copy or download your work. Click Copy to place the raw Markdown on your clipboard, or Download to save it as a file named document.md.
- Clear the editor. Click Clear to empty the editor and start again. You will be asked to confirm first, because the action cannot be undone.
Built-In Features
Live Side-by-Side Preview
The preview refreshes on every keystroke, so you see headings, lists, tables and code blocks take shape while you write.
Formatting Toolbar
Buttons for bold, italic, heading, link, inline code, code block, bullet list, numbered list and blockquote add the Markdown symbols for you.
Keyboard Shortcuts
Press Ctrl+B for bold, Ctrl+I for italic and Ctrl+K for a link. On a Mac, use the Command key instead of Ctrl. The Tab key inserts two spaces rather than leaving the editor.
Word and Character Count
Two counters in the top bar track the total words and characters in your Markdown source text. They are hidden on narrow screens to save space and keep the interface clean.
Copy, Download and Clear
Copy the Markdown to your clipboard, save it as document.md, or wipe the editor with a confirmation prompt so you do not clear it by accident.
Resizable Panes
On desktop, drag the divider between the editor and the preview to give either side more room when needed. On mobile, the two panes stack vertically.
How the Preview Works
The tool turns your Markdown into formatted HTML using the open source marked library, then cleans that output with DOMPurify before showing it. The two steps run one after the other every time your text changes.
Markdown to Formatted Text
Your text is parsed with GitHub Flavored Markdown turned on, which is why tables and strikethrough work alongside the basics. The result is styled inside the preview pane with clear headings, lists, quotes and dark code blocks.
Sanitized Output
Before anything appears in the preview, the generated HTML is carefully sanitized. Script, iframe, object and embed tags are removed, and links in the preview open in a new tab with safe link settings.
One detail worth knowing: this preview treats a single line break as a real line break. Some Markdown renderers ignore single line breaks and merge those lines into one paragraph, so spacing can look slightly different once you publish elsewhere.
Markdown Syntax Cheat Sheet
New to Markdown? Every item below can be typed into the editor and will render in the preview. Some of them have toolbar buttons, and the rest you simply type by hand.
| Element | What You Type | What You Get |
|---|---|---|
| Heading | # Title or ## Section | A heading, larger with more hashes removed |
| Bold | **text** | Bold text |
| Italic | *text* | Italic text |
| Strikethrough | ~~text~~ | Crossed out text |
| Link | [label](https://example.com) | A clickable link |
| Image |  | An image, sized to fit the pane |
| Inline code | `code` | Code inside a sentence |
| Code block | Three backticks on their own line, before and after your code | A dark, scrollable code block |
| Bullet list | - item | A bulleted list |
| Numbered list | 1. item | A numbered list |
| Blockquote | > quote | An indented, highlighted quote |
| Table | | A | B | followed by a row of |---|---| | A formatted table |
| Divider | --- | A horizontal line |
Can You Preview a README or GitHub Markdown Here?
Yes, it is a handy way to check a README draft before you commit it. The tool uses GitHub Flavored Markdown rules, so tables, strikethrough, fenced code blocks and lists behave the way most README files expect. Paste your draft into the editor, scan the preview for broken lists or misplaced headings, then use Copy to take the corrected Markdown back to your repository.
Keep one limit in mind. The preview shows how this tool renders your text, and its styling is its own. GitHub, blog platforms and documentation sites each add their own theme and sometimes their own extra features, so treat this as a reliable check of your structure rather than a pixel-exact copy of another site.
Common Reasons to Use a Markdown Previewer
Drafting Project Documentation
Write README files, changelogs and setup notes, and confirm that headings, code blocks and lists read cleanly before you publish them.
Writing Posts and Notes
Many writing apps and publishing platforms accept Markdown. Draft here with a live view, then copy the source into wherever it is going.
Learning Markdown
Seeing each symbol turn into formatting right away is the fastest way to learn the syntax. Try the cheat sheet above line by line.
Fixing Formatting Problems
If a list will not render or a table looks broken somewhere else, paste it here to spot the missing blank line, space or pipe.
Useful Tips
Download Before You Close the Tab
Your text is not stored between visits. The editor starts empty every time the page loads, so save a .md file or copy the text before you leave.
Select Text First
Highlight a word or phrase before clicking Bold, Italic, Link or Inline Code and the tool wraps your selection instead of inserting placeholder text.
Tidy JSON Before Pasting It
Documenting an API? Run your sample response through the JSON Formatter first, then paste it inside a code block so it stays clean, organized, and easy to read.
Keep Headings Consistent
If your headings mix capitalization styles, the Case Converter can switch them to title case or sentence case in one click before you paste them here.
Frequently Asked Questions
How do I preview Markdown online?
Type or paste your Markdown into the editor on the left. The formatted result appears in the preview pane and updates as you type, so there is no button to press.
Is this Markdown preview tool free?
Yes. The tool is free to use and does not require an account or sign-up.
Is my text uploaded to a server?
No. Your Markdown is rendered inside your browser and is not sent anywhere by the tool.
Does the tool save my text?
No. The editor is empty each time the page loads, and closing or refreshing the tab discards what you wrote. Use Copy or Download to keep your work.
Does it support GitHub Flavored Markdown?
Yes. GitHub Flavored Markdown is turned on, so tables, strikethrough and fenced code blocks render as expected. Other sites may style them differently, since each platform uses its own theme.
Why does a single line break show as a new line in the preview?
The preview is set to treat every line break as a break in the text. Standard Markdown often merges lines that are separated by only one line break, so the same text may flow together on other platforms. Leave a blank line between paragraphs if you want them to separate everywhere.
Can I run HTML or scripts in the preview?
Basic HTML that is safe to display may render, but script, iframe, object and embed tags are stripped out for security. The preview is meant for viewing formatted Markdown, not for running code.
How do I save my Markdown as a .md file?
Click the Download button in the top bar. The tool saves your text as a file named document.md, which you can rename after it downloads.
Does the Copy button copy the formatted text or the Markdown?
It copies the raw Markdown from the editor, not the rendered preview. That is the version you want when pasting into a README, a repository or a Markdown-based editor.
What are the keyboard shortcuts?
Press Ctrl+B for bold, Ctrl+I for italic and Ctrl+K to insert a link. On a Mac, use the Command key instead of Ctrl. The Tab key adds two spaces inside the editor.
How are the words and characters counted?
Words are counted by splitting your Markdown source on spaces and line breaks, and characters are the total length of the text including spaces. Both counts include Markdown symbols such as hashes and asterisks, because they measure the source, not the rendered result.
Does this tool work on mobile devices?
Yes. On phones and small tablets the editor and preview stack vertically, and the toolbar scrolls sideways if it does not fit. The word and character counters are hidden on small screens.