Markdown Editor

Write Markdown with live preview and download as HTML

Editor

Preview

How it works

Markdown Editor — Write Markdown with live preview and download as HTML. All processing happens in your browser — no upload, no signup, no email required. Free forever.

Last updated: 2026-05-06

Editor's note

We built this because we wanted to draft blog posts and READMEs without committing every comma fix through git just to see how a heading rendered. Local Markdown previewers exist, but the install-a-VS-Code-extension dance is heavier than the actual writing on a quick post. A browser tab that shows the preview the second you type matches our real writing habit — type left, glance right, repeat — and the split-pane is on purpose, not a feature we forgot to make collapsible.

The two export buttons exist because they serve genuinely different jobs in our own workflow. Copy HTML is what we use to ship — paste into a CMS, attach to an email, drop into a static site — and DOMPurify is in the middle of that pipe so we are not the people who introduced an XSS hole into a marketing site. The Markdown copy is for archiving the source, the version you actually want to keep when the rendered HTML inevitably needs to be regenerated against a new stylesheet six months later.

About Markdown Editor

This Markdown Editor is a live two-pane writing environment: type Markdown on the left, watch the rendered HTML preview update in real time on the right. When you are happy with the output you can copy the Markdown, copy the rendered HTML, or download the HTML as a standalone file ready to drop into a website or share by email.

It supports GitHub-flavored Markdown — headings, lists, tables, fenced code blocks, blockquotes, links, images, inline HTML and soft line breaks — through the marked library, with output sanitised by DOMPurify so the HTML you copy is safe to embed without introducing XSS holes.

Everything runs in your browser. There is no account, no autosave to a server and no file upload — your draft notes, blog posts, READMEs and meeting minutes never leave your machine. Refreshing the page clears the editor, so treat it as a scratchpad rather than long-term storage.

How to use Markdown Editor

Click in the editor pane and start writing Markdown. A starter document is provided so you can see how each construct renders.
Glance at the preview pane to verify headings, links, lists and images look the way you intended.
Switch the layout between Both, Editor only and Preview only depending on whether you are writing, reviewing or presenting.
Use Copy Markdown to grab the raw source, or Copy HTML to grab the rendered, sanitised HTML.
Click Download HTML to save the preview as a standalone .html file you can attach to an email or open in a browser.
Refresh the page to start a brand new document — there is no autosave, on purpose.

Common use cases

Drafting GitHub README files, issue descriptions or pull request bodies away from the GitHub UI.
Writing blog posts in Markdown and exporting clean HTML for a static site or newsletter platform that does not understand Markdown directly.
Preparing release notes or changelogs and previewing exactly how the formatting will land before pasting into Slack, Notion or a CMS.
Teaching Markdown — students can experiment with syntax and see the rendered result side by side without installing anything.
Quickly converting a Markdown snippet pulled from documentation into HTML for use in a help centre article or knowledge base.

Tips & common mistakes

Use four spaces or a tab to nest list items; an indentation mismatch is the most common reason a nested list collapses to a flat one in the preview.
Fenced code blocks (```language) get language-tagged class names in the HTML output — wire those up to a syntax highlighter like Prism or highlight.js on your own site for coloured code.
Inline HTML is allowed and rendered, so you can drop in <kbd>, <details> or any other tag Markdown does not cover natively. DOMPurify still strips dangerous attributes and script tags from the output.
When you copy HTML, you get a fragment, not a full document. Wrap it in a <html><body> shell with your own stylesheet before saving as a polished page.

Frequently asked questions

Which Markdown flavour is supported?

GitHub-flavored Markdown via the marked library — headings, lists, tables, fenced code blocks, blockquotes, links, images, inline HTML, soft line breaks, and more.

Is the HTML output safe to embed in my site?

Yes. We sanitise it through DOMPurify, which strips dangerous attributes and scripts. You can paste the result into any web page without XSS risk.

Is my Markdown saved or uploaded?

No. Both rendering and download happen locally in your browser. Refreshing the page clears the editor.

Can I add my own CSS to the preview?

The in-app preview uses the site's default typography. To style the output for your own site, copy the HTML and pair it with whatever stylesheet you already use — the markup is plain semantic HTML, so any Markdown-friendly CSS will work.

Does the editor support tables and task lists?

Yes. GitHub-flavored Markdown tables (with pipes and dashes) and task list items (- [ ] / - [x]) both render correctly in the preview and survive into the exported HTML.

Can I import an existing Markdown file?

Open the file in any text editor, copy its contents and paste them into the editor pane. There is no file picker, which keeps the tool fully offline and avoids the friction of upload dialogs for short snippets.