Markdown Editor
Write Markdown with a live preview, tables made in a grid, and clean HTML to copy or download.
Write Markdown and read it rendered beside it, as GitHub or any CommonMark reader shows it: README files, docs pages, notes and posts. Tables are made in a grid rather than by lining up pipes, and the HTML is clean enough to paste into a CMS or an email.
Everything happens in your browser. Your draft is kept in this browser's storage, so it is still there when you come back, and is never uploaded. With External media on, images, video and audio the document links to load from their own servers, as they would on any page.
How to use it
- Flavour — GitHub, the default, reads what GitHub renders: the GFM spec's tables, task lists, strikethrough and autolinks, plus GitHub's own footnotes, alerts and heading anchors, which sit outside that spec. CommonMark reads the core standard alone.
- HTML in Markdown — Markdown allows raw HTML such as
<kbd>or<details>. Allow keeps it; Show as text prints it as written. - External media — on by default. Off, the preview loads nothing from another server and shows each image's alt text in its place; the HTML you copy or download keeps every link.
- Scroll sync — with the editor and preview side by side, each follows the other by source line.
The toolbar adds headings, bold, italics, links, images, code, quotes and lists around the selection, and a second press takes them off. Ctrl+B, Ctrl+I and Ctrl+K (⌘ on a Mac) do the same for bold, italics and links. The table button opens a grid: with the caret in a table it edits that table, otherwise it inserts a new one. Set each column's alignment, add or remove rows and columns, or paste cells copied from a spreadsheet. Pipes in a cell are written as \| and short rows are padded:
- Table from the grid
| Plan | Price | Notes | | ---- | ----: | --------------------- | | Free | ₹0 | 1 project | | Pro | ₹499 | Unlimited \| priority |
Words, characters and reading time count the rendered text, not the Markdown symbols, at 238 words a minute. Download saves the Markdown as .md; on the HTML tab it saves a standalone .html page with a plain stylesheet, while Copy copies the HTML alone, ready to paste into another page. Print prints the preview alone, or saves it as a PDF from the print dialog.
Examples
A README section
- Markdown
## Install | Step | Command | | ---- | -------------- | | 1 | `npm install` | | 2 | `npm test` | - [x] Works on Node 22 - [ ] Windows paths > [!WARNING] > Needs a `.env` file.
- HTML, default options
<h2 id="install">Install</h2> <table> <thead> <tr> <th>Step</th> <th>Command</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><code>npm install</code></td> </tr> <tr> <td>2</td> <td><code>npm test</code></td> </tr> </tbody> </table> <ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled checked> Works on Node 22</li> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled> Windows paths</li> </ul> <div class="markdown-alert markdown-alert-warning"> <p class="markdown-alert-title">Warning</p> <p>Needs a <code>.env</code> file.</p> </div>
The heading gets the anchor GitHub gives it, the task list becomes disabled checkboxes, and the alert a titled box.
Markdown syntax and the HTML it makes
| Markdown | HTML |
|---|---|
# Heading | <h1 id="heading">Heading</h1> |
**bold** and _italic_ | <p><strong>bold</strong> and <em>italic</em></p> |
~~struck~~ * | <p><s>struck</s></p> |
`code` | <p><code>code</code></p> |
[link](https://example.com) | <p><a href="https://example.com">link</a></p> |
 | <p><img src="logo.png" alt="alt text"></p> |
www.example.com * | <p><a href="http://www.example.com">www.example.com</a></p> |
> quoted | <blockquote>
<p>quoted</p>
</blockquote> |
- item | <ul>
<li>item</li>
</ul> |
1. item | <ol>
<li>item</li>
</ol> |
- [x] done * | <ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled checked> done</li>
</ul> |
Text[^1]
[^1]: The note. * | <p>Text<sup class="footnote-ref"><a href="#fn1" id="fnref1">1</a></sup></p>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>The note. <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section> |
> [!TIP]
> Advice. * | <div class="markdown-alert markdown-alert-tip">
<p class="markdown-alert-title">Tip</p>
<p>Advice.</p>
</div> |
--- | <hr> |
Standards and safety
Markdown is read by markdown-it, which follows the CommonMark specification. GitHub flavour adds the extensions of the GFM specification, footnotes as GitHub writes them, and the five alert types GitHub documents (NOTE, TIP, IMPORTANT, WARNING, CAUTION), written alone on a quote's first line; any other word there leaves a plain quote.
The preview and the HTML you copy go through the same sanitiser, DOMPurify: scripts, event handlers such as onclick and javascript: links are removed, and so are <style>, <link>, <meta>, <base>, <iframe>, <object>, <embed> and <form> elements. A note under the preview names anything removed. Links open in a new tab.
Sources
- CommonMark Spec, version 0.31.2 — CommonMark
- GitHub Flavored Markdown Spec — GitHub
- Basic writing and formatting syntax — GitHub Docs
Reviewed
Frequently asked questions
www. and bare URLs, and a filter on some raw HTML tags. Footnotes and alerts work on GitHub but are not in either specification, so other sites may show them as plain text.<style> elements, frames, forms and the like are removed so the preview cannot run code or restyle the page, and the HTML you copy is safe to paste. Inline styles stay, and the preview keeps them inside its own box. The note under the preview lists what went. If the HTML shows as text instead, HTML in Markdown is set to Show as text.docs/logo.png, belongs to the site the Markdown is published on, so the preview shows its alt text instead. An image with a full address loads while External media is on.See also
- HTML to Markdown Converter — to turn a web page, Google Doc or Word document into Markdown.
- HTML Viewer — to preview and format a whole HTML page.