Markdown Preview
Your data never leaves your browserWrite Markdown and see a live rendered preview side-by-side. Supports GitHub Flavored Markdown, tables, code blocks, task lists, and more.
Hello, Markdown!
This is a live preview editor. Changes appear instantly on the right.
Features
- Bold and italic text
Strikethroughinline code- Links
Code Blocks
function greet(name: string): string {
return `Hello, ${name}!`
}Table
| Tool | Category | Status | | ---- | -------- | ------ | | JSON Formatter | JSON | ✅ Ready | | Base64 Encoder | Encoding | ✅ Ready | | JWT Generator | Auth | ✅ Ready |
Note: All tools run 100% in your browser. No data is ever sent to a server.
- Write your markdown on the left
- See the rendered output on the right
- Copy either the markdown or the HTML
Share this tool
Found it useful? Help a fellow developer discover it.
Supported syntax
| Element | Syntax | Output |
|---|---|---|
| Heading | # H1 ## H2 ### H3 | <h1> through <h3> tags |
| Bold | **text** or __text__ | Bold text |
| Italic | *text* or _text_ | Italic text |
| Strikethrough | ~~text~~ | Struck-through text |
| Inline code | `code` | Monospace code span |
| Code block | ```lang\ncode\n``` | Fenced code block with lang class |
| Link | [text](url) | Clickable hyperlink |
| Image |  | <img> tag |
| Blockquote | > text | Indented quote block |
| Unordered list | - item * item | <ul> list |
| Ordered list | 1. item 2. item | <ol> list |
| Table | | col | col |\n|---|---| | GFM table |
| HR | --- *** ___ | Horizontal rule |
What is Markdown?
Markdown is a lightweight markup language created by John Gruber in 2004. It uses plain-text formatting conventions that are readable as-is and can be converted to HTML. GitHub Flavored Markdown (GFM) extends the original spec with tables and strikethrough. It also adds fenced code blocks with syntax highlighting and task lists. Today, Markdown is used for README files, documentation, blog posts, wikis, and developer notes. It shows up across virtually every platform, including GitHub, GitLab, Notion, Obsidian, Jira, and Confluence.
When to use a live Markdown preview
- Writing a README. Draft and preview your GitHub README before pushing. See exactly how headings, code blocks, tables, and task lists will render without leaving the browser.
- Technical documentation. Authors writing docs for GitHub Pages, Docusaurus, or MkDocs can draft and preview the rendered output in one tab before committing the file.
- Verifying converted Markdown. After converting HTML to Markdown with the HTML to Markdown tool, paste the output here to confirm headings, bold, links, and tables rendered correctly.
- Blog post drafting. Platforms like Ghost, Hashnode, and Dev.to accept Markdown. Draft and preview your post here to check length, structure, and formatting before publishing.
- Copy as HTML. Use the Copy HTML button to get the rendered HTML output from your Markdown. Useful for embedding formatted content in email templates or CMS fields that accept HTML.
Frequently Asked Questions
What is GitHub Flavored Markdown (GFM)?
GFM is GitHub's extension of standard CommonMark Markdown. It adds tables (with | pipe syntax), fenced code blocks with language identifiers, strikethrough (~~text~~), and task list items (- [ ] and - [x]). GFM is now the de-facto standard for developer documentation because GitHub renders it natively in READMEs, issues, and pull requests.
How do I add syntax highlighting to code blocks?
In GFM, you can specify a language after the opening fence: ```javascript, ```python, ```bash, etc. The language identifier is added as a class (language-javascript) on the <code> element. This tool renders the class for post-processing but does not bundle a syntax highlighter. In actual rendered pages (GitHub, VS Code preview), the language class triggers the platform's own highlighter.
Can I use HTML inside Markdown?
Standard Markdown allows inline HTML, but this tool sanitizes HTML entities in plain text to prevent XSS. For a developer tool where you control the input, this is a reasonable trade-off. GitHub's own renderer allows a limited whitelist of HTML tags in Markdown.
What is the difference between Markdown and MDX?
MDX is Markdown with embedded JSX components. It extends standard Markdown to allow React components to be imported and used directly inside .mdx files. MDX is popular for documentation sites built with Next.js, Gatsby, or Astro. This tool previews standard Markdown and GFM, not MDX.
How do I preview Markdown online?
Paste or type your Markdown in the editor panel on the left. The rendered preview updates live on the right as you type. You can toggle between editor and preview views, copy the rendered HTML, or download the Markdown file. No sign-up or login required.
How do I create a table in Markdown?
Use GFM pipe table syntax. A two-column table: the first row is the header (| Name | Role |), the second row is the separator (| --- | --- |), then one data row per line (| Alice | Engineer |). The separator row controls alignment: colon on the left for left-align (:---), colons on both sides for center (:---:), colon on the right for right-align (---:).
What is the difference between CommonMark and GFM?
CommonMark is a standardized, unambiguous specification for the core Markdown syntax. GitHub Flavored Markdown (GFM) extends CommonMark with tables, strikethrough (~~text~~), task list items (. [ ] and . [x]), and autolinks. This editor renders GFM, which is the format used by GitHub READMEs, issues, and pull requests.
How do I copy my Markdown as HTML?
Click the Copy HTML button in the toolbar to copy the fully rendered HTML output to your clipboard. This is useful when you need to paste Markdown-authored content into a CMS, email template, or any system that accepts HTML but not Markdown syntax.
Related Tools
HTML to Markdown
Convert HTML or pasted rich text to GitHub Flavored Markdown. Tables, strikethrough, task lists supported.
HTML Viewer
View HTML online with a live preview at desktop, tablet or phone width. Format and beautify messy or minified HTML. Remote images and scripts stay blocked.
Text / Code Diff
Compare two text blocks and highlight line-by-line differences.
Code to Image
Turn any code snippet into a beautiful screenshot. Pick a theme, font, and background, then download a shareable PNG. Runs fully in your browser.