Markdown Preview
Write Markdown and preview rendered HTML in real time.
How to Use Markdown Preview
- Type or paste Markdown in the left pane — the preview updates live on the right.
- Use the toolbar buttons to insert bold, italic, headings, links, code blocks, and more.
- Click ↓ .md to download your Markdown file or ↓ .html to download the rendered HTML.
- Click Copy HTML to copy the rendered HTML markup to your clipboard.
What is Markdown Preview?
Markdown Preview is a real-time editor that renders Markdown syntax as formatted HTML as you type. Markdown is a lightweight markup language that lets you write formatted documents using plain text — asterisks for bold, hashes for headings, dashes for lists. This tool renders your Markdown instantly in the right pane so you can see the final output without leaving the editor.
Your text is processed entirely in the browser — nothing is sent to any server. You can download the result as a .md file or a standalone .html file.
Common Use Cases
- README files: Write and preview GitHub README files before pushing to your repository
- Blog posts: Many blogging platforms (Ghost, Hashnode, Dev.to) accept Markdown natively
- GitHub issues and pull requests: GitHub renders Markdown in issues, PRs, and comments
- Documentation: Generate clean HTML documentation from Markdown source files
- Note-taking: Write structured notes in Markdown with instant visual feedback
FAQ
What is Markdown?
Markdown is a lightweight markup language created by John Gruber in 2004. It uses simple punctuation symbols to represent formatting: **bold**, *italic*, # Heading, - list item, [link](url), and so on. The plain text is easy to read and write, and can be converted to HTML, PDF, or other formats.
What is the difference between CommonMark and GitHub Flavored Markdown?
CommonMark is the standardized Markdown specification that resolves ambiguities in the original spec. GitHub Flavored Markdown (GFM) extends CommonMark with tables, task lists (- [ ] item), strikethrough (~~text~~), autolinks, and syntax highlighting for fenced code blocks. This tool uses the marked.js library which supports most GFM features.
How do I add a table in Markdown?
Markdown tables use pipes (|) and hyphens (-) to define columns and headers: | Column 1 | Column 2 | |----------|----------| | Cell 1 | Cell 2 | Align columns using colons in the separator row: |:---| for left, |:---:| for center, |---:| for right alignment.
How do I add code blocks in Markdown?
For inline code, wrap text in backticks: `code here`. For multi-line code blocks, use triple backticks on their own lines. Add a language identifier after the opening backticks for syntax highlighting: ```javascript. Fenced code blocks are rendered with a monospace font and preserved whitespace.
Can I use HTML in Markdown?
Yes. Most Markdown parsers allow inline HTML — you can add <div>, <span>, <table>, and other HTML elements directly in your Markdown. This is useful when Markdown syntax doesn't support the formatting you need. However, be cautious with raw HTML in user-generated content as it can introduce XSS vulnerabilities.