Markdown Editor – Live Preview Online
Markdown
Preview
Welcome to Markdown Editor
Write bold, italic, or strikethrough text.
Code
Inline code and fenced blocks:
function hello(name) {
return `Hello, ${name}!`;
}
Lists
- Item one
- Item two
- Nested item
- First
- Second
Links & Images
Table
| Name | Score |
|---|---|
| Alice | 95 |
| Bob | 87 |
Blockquote: Less is more.
A distraction-free Markdown editor with a live HTML preview pane. Use the toolbar to insert headings, bold, italic, links, code blocks, tables, and horizontal rules. See word and character counts, copy the Markdown or rendered HTML, and download your document as a .md file.
Markdown Quick Reference
| Syntax | Result |
|---|---|
| # Heading 1 | Large heading |
| **bold** | bold |
| *italic* | italic |
| [text](url) | Hyperlink |
| `code` | Inline code |
| ```js ... ``` | Code block |
| - item | Unordered list |
| > quote | Blockquote |
Frequently Asked Questions
What is Markdown?
Markdown is a lightweight markup language that uses plain text symbols to add formatting. For example, **text** renders as bold, # Heading creates a heading, and [link](url) creates a hyperlink. It is widely used in README files, documentation, and content management systems.
How do I make text bold or italic in Markdown?
Wrap text with **double asterisks** or __double underscores__ for bold. Use *single asterisks* or _single underscores_ for italic. Combine for ***bold italic***. You can also select text in the editor and click the toolbar buttons.
How do I create a table in Markdown?
Use pipes (|) to separate columns and hyphens (---) for the header separator row. Example: | Name | Score | |------|-------| | Alice | 95 | Click the Table button in the toolbar to insert a template.
What is GitHub Flavored Markdown (GFM)?
GitHub Flavored Markdown is a Markdown dialect that adds tables, task lists (- [x] done), fenced code blocks with syntax highlighting, strikethrough (~~text~~), and autolinked URLs. This editor uses the marked.js library with GFM mode enabled.
Can I export my Markdown as HTML?
Yes. Click "Copy HTML" to copy the rendered HTML to your clipboard. You can then paste it into any HTML page. The HTML is generated by the marked.js library from your Markdown source.
How do I create a fenced code block?
Wrap your code with triple backticks (```). Add a language identifier after the opening backticks for syntax highlighting: ```js for JavaScript, ```python for Python, etc. The closing backticks go on their own line.
What does the Download .md button do?
It downloads your current Markdown source as a .md file named "document.md". The file contains the raw Markdown text exactly as you typed it — useful for saving your work or using it in a project.
Does my Markdown get saved?
The editor is stateless — content is only kept in your browser's memory while the page is open. Refreshing the page resets it to the sample content. Use the "Copy MD" or "Download .md" button to save your work before leaving the page.
Related Developer Tools
Base64 Encoder / Decoder
Encode and decode Base64 instantly.
Border Radius Generator
Generate CSS border-radius visually with live preview.
Box Shadow Generator
Generate CSS box shadows visually with live preview.
Color Palette Generator
Create harmonious color palettes from any color.
Color Picker
Pick colors and get HEX, RGB, HSL, CMYK instantly.
CSS Formatter / Beautifier
Format and beautify CSS code instantly.
CSS Gradient Generator
Generate linear, radial, and conic CSS gradients visually.
CSS Minifier
Minify CSS code instantly in browser.
HEX to RGBA Converter
Convert HEX colors to RGB/RGBA instantly.
HTML Minifier
Minify HTML to reduce page size instantly.
