Skip to content
LocalOnly

Markdown Editor & Live Preview

New

A full Markdown editor with live preview: format with a toolbar, draw Mermaid diagrams, share by private link or save as PDF.

Everything is processed locally in your browser

Write Markdown in a full code editor built on Monaco, the editor inside VS Code, and see the rendered result beside it as you type. The toolbar adds headings, emphasis, links, lists, quotes, code and tables, and the preview supports GitHub Flavored Markdown (GFM) tables, task lists and fenced code, plus Mermaid diagrams. When the document is ready, share it with a link that carries the text inside it, optionally protected with a password, print it or save it as PDF, or copy it as Markdown, HTML or formatted text. Everything runs in your browser, and nothing is saved or uploaded.

Features

  • Full code editor built on Monaco, the editor inside VS Code: syntax highlighting, undo history and word wrap
  • Live preview as you type, side by side on desktop and in tabs on phones
  • Share by link: the text travels inside the link, with an optional password and expiry, and is never stored on a server
  • GitHub Flavored Markdown: tables, task lists, strikethrough, fenced code and autolinks
  • Mermaid diagrams: flowcharts, sequence, class, state, Gantt, pie and more
  • Sync scroll keeps the preview level with the editor, and full screen gives both panes the whole window
  • Formatting toolbar, plus Ctrl+B and Ctrl+I (Cmd on a Mac) for the current selection
  • Copy as Markdown, HTML or formatted text for Docs, Confluence and email
  • Download a .md file or a standalone .html file, or print the preview to PDF
  • Sanitised output: scripts, styles, iframes, forms and event handlers are removed
  • Images from other sites stay blocked until you choose to load them
  • Word count, character count and reading time
  • Nothing is saved: no local storage, no cookies, no uploads

How to use it

  1. 1

    Write or paste Markdown

    Start from the sample, type in the editor, or open a .md file. The preview updates as you type.

  2. 2

    Format with the toolbar

    Select text and choose Bold, Link, List or Table. The toolbar wraps the selection or inserts a template, and Ctrl+Z undoes it.

  3. 3

    Export the result

    Copy the Markdown, the HTML or formatted text, download a .md or .html file, or print the preview to PDF.

Examples

Table with column alignment

Colons in the delimiter row set left and right alignment.

Input

| Tool | Runs in |
| :--- | ------: |
| Markdown Preview | Your browser |

Output

<table>
<thead>
<tr>
<th align="left">Tool</th>
<th align="right">Runs in</th>
</tr>
</thead>
<tbody><tr>
<td align="left">Markdown Preview</td>
<td align="right">Your browser</td>
</tr>
</tbody></table>

Task list

Checkboxes render read-only, the same way GitHub shows them in files.

Input

- [x] Write the README
- [ ] Add screenshots

Output

<ul>
<li><input checked="" disabled="" type="checkbox"> Write the README</li>
<li><input disabled="" type="checkbox"> Add screenshots</li>
</ul>

Fenced code block with a language

The language name becomes a class that syntax highlighters look for.

Input

```js
const total = items.length;
```

Output

<pre><code class="language-js">const total = items.length;
</code></pre>

How this Markdown preview renders and sanitises

From Markdown to HTML in your browser

The editor passes your text to marked, a GitHub Flavored Markdown parser that ships with the page, and marked turns it into HTML. The HTML then goes through DOMPurify before it is shown. Both run in the browser tab, so the text never travels over the network.

GFM adds five extensions to CommonMark: tables, task lists, strikethrough, extended autolinks and a filter for unsafe raw HTML. This preview supports the first four, and replaces the fifth with a stricter allow-list. Everything else, from emphasis to lists and code blocks, follows CommonMark.

Why the HTML is sanitised before it is shown

Markdown allows raw HTML, and marked passes it through untouched. A link to `javascript:alert(1)` or an image with an `onerror` handler would run code in this page if it were inserted as it is. That matters most when the text comes from someone else, for example through a share link.

DOMPurify parses the HTML in an inert document and keeps only an allow-list: text formatting, headings, lists, tables, links, images, code, details and summary, and read-only task-list checkboxes. Scripts, styles, iframes, forms, event handlers, style and class attributes, and links with `javascript:` or `data:` addresses are removed. Links open in a new tab, so a click never replaces your unsaved document.

Sharing a document without a server

A share link holds the document itself. The text is compressed and placed after the # in the address, and browsers never send that part of an address to a web server, so the document travels only inside the link you send.

With a password, the text is encrypted in your browser with AES-256-GCM before it goes into the link, using a key derived from the password with 600,000 rounds of PBKDF2. Without the password the link is unreadable. Because there is no server, a link cannot be revoked once it is sent, and an expiry time is checked by the browser that opens the link.

Why images from other sites are blocked at first

An image in Markdown is a request to whatever server its URL names. That server learns your IP address and when you opened the document, which is how tracking pixels in email work, and a document from someone else could carry one.

So the preview shows a placeholder with the alt text for images from other sites, and one click loads them for the rest of the visit. Images from this site and images embedded as `data:` URLs show straight away. Copy HTML and the downloads keep the original image addresses.

Where the preview differs from GitHub

GitHub adds features that are not part of GFM. Mermaid diagrams render here as they do on GitHub. Alert blocks such as `> [!NOTE]`, math, emoji shortcodes, footnotes, heading anchors and syntax highlighting in code blocks show as plain Markdown, so a `[!NOTE]` alert appears as a normal quote.

Line breaks also depend on where the text is shown. In GitHub issue and pull request comments a single newline becomes a break; in README files, and here, it does not. The guide linked at the end of this page covers this and other rendering surprises.

Reference

Markdown syntax supported

ElementMarkdownNote
Heading# H1 to ###### H6A space after # is required
Bold, italic**bold**, *italic*_ inside a word stays literal
Strikethrough~~text~~GFM
Link[text](https://example.com)Bare URLs link on their own
Image![alt text](image.png)Other sites load on request
Lists- item, 1. itemIndent children to the parent's text
Task list- [ ] todo, - [x] doneGFM, read-only
Block quote> quoted textNest with >>
Inline code`code`Use two backticks if the code has one
Code block```js on its own lineClose it with ```
Table| A | B | then | --- | --- |Delimiter row required
Horizontal rule---Blank line above, or it makes a heading
Line break\ or two spaces at line endA plain newline is a space
Escape\*not italic\*Backslash before punctuation

Which tool should you use?

You want to see how a README will look before you push it
Paste it here. Tables, task lists and code blocks render as they do in GitHub files, apart from GitHub-only extras such as alerts and math.
You need the HTML for a CMS, newsletter or static page
Write in Markdown, then use Copy HTML or Download HTML. The output is sanitised, so it is safe to paste into a page.
You want formatting to survive pasting into Docs, Confluence or email
Use Copy as rich text. Pasting the HTML source would show the tags instead of the formatting.
Your documentation needs a diagram
Markdown has no diagram syntax here. Draw it in the PlantUML Editor, export an SVG or PNG, and reference it as an image.

Use cases

  • Drafting a README before pushing it to GitHub
  • Checking a table or nested list that renders wrongly somewhere else
  • Turning Markdown notes into HTML for a CMS or a newsletter
  • Pasting formatted release notes into Confluence, Google Docs or email
  • Reading Markdown from a colleague without installing an editor
  • Saving documentation as a PDF

Troubleshooting common errors

An HTML tag you wrote does not appear

Why: It is not on the allow-list. Scripts, styles, iframes, forms, and style and class attributes are always removed.

Fix: Use Markdown syntax for the same effect, or keep that HTML for a page where you control the sanitiser.

Images show a grey placeholder

Why: They come from another site and are blocked until you allow them.

Fix: Click Load images above the preview. The choice lasts until you leave the page.

A relative image path shows a broken image

Why: A path such as `./docs/screenshot.png` points at a file in your repository, which this page cannot reach.

Fix: Use a full https URL to preview it, and keep the relative path in the file you commit.

The formatting buttons are greyed out

Why: The editor is still loading.

Fix: Wait a moment. The buttons turn on as soon as the editor is ready.

Copy as rich text is greyed out

Why: The browser cannot copy formatted content, as in Firefox versions before 127.

Fix: Use Copy HTML instead, or update the browser.

Limitations

  • Nothing is saved. Reloading or leaving the page discards the document unless you download it.
  • GitHub-only extras other than Mermaid are not rendered: alerts, math, footnotes, emoji shortcodes and heading anchors.
  • Mermaid diagrams use the light theme, and links inside a diagram are removed.
  • Code blocks are not syntax highlighted.
  • Raw HTML is limited to a safe allow-list, so HTML that relies on styles or scripts will not look the same.
  • With several cursors, toolbar actions apply to the main selection only.
  • Resizing the window across the desktop and phone layouts restarts the editor, which clears its undo history.
  • Pasted rich text keeps the structure but not this page's styles, so tables can lose their borders in some apps.

Frequently asked questions

Related tools

PlantUML Editor

Write, preview and export PlantUML diagrams in your browser - rendered 100% locally.

Lorem Ipsum Generator

Generate placeholder lorem ipsum text by paragraphs, sentences, or words.

Base64 Encode

Encode text or files to Base64, with an optional URL-safe variant.

URL Encoder

Percent-encode text for safe use in URLs and query strings.

Learn more

Markdown Not Rendering? Fix Line Breaks, Tables and ListsMost broken Markdown comes down to a few rules: line breaks, the table delimiter row, list indentation, underscores in words, unclosed code fences and HTML blocks. Here is each one with its fix.

Command Palette

Search for a tool or command