Markdown Preview
Write Markdown on the left and watch the HTML take shape on the right. Copy the generated HTML when you're done. Everything runs in your browser, so your drafts and notes never leave the page.
How to Use Markdown Preview
Type Markdown into the box on the left and the HTML rendering appears live on the right. Switch to "Show HTML" to inspect and copy the generated HTML source.
- Preview: See how your Markdown will actually render.
- Show HTML: Display the converted HTML source. Use "Copy HTML" to paste it elsewhere.
- Sample: Load an example that covers the supported syntax — handy for a first look.
- Clear: Wipe the input and start over.
A Concrete Syntax Example
For instance, typing # Heading produces a large heading (<h1>), and - item produces a bulleted list item. So if you type:
# Getting started
- Get ready
- Write somethingthe preview on the right shows "Getting started" as a large heading, with "Get ready" and "Write something" listed below as bullet points. Switch to "Show HTML" and you get source like <h1>Getting started</h1><ul><li>Get ready</li><li>Write something</li></ul>, which you can drop anywhere with "Copy HTML".
Tips for Working Fast
The preview updates live the moment you paste. Paste your Markdown straight into the text area and you'll see the rendering immediately — no button to press. When you need the markup, switch to "Show HTML" and hit "Copy HTML".
When This Comes in Handy
- Checking how headings and lists will look before writing a README or docs
- Drafting Markdown for a GitHub issue or pull request body
- Generating HTML from Markdown to drop into a blog or CMS
- Practicing Markdown syntax while you learn it