Markdown Editor
A Markdown editor with a live preview, GitHub-flavoured tables and task lists, live word counts, and a formatting toolbar. The preview is sanitized, so pasted HTML can never execute scripts.
How Markdown Editor works
Write Markdown on the left, or use the toolbar for headings and lists.
See the rendered result update live on the right.
Switch to Editor or Preview only when you want the full width.
Download as .md, or copy the rendered text.
When to use Markdown Editor
- Drafting a README or documentation page and wanting to see the headings, code, tables, and lists render as you write them.
- Composing a GitHub comment or issue in GitHub-flavoured Markdown before pasting it into the destination.
- Previewing Markdown from an untrusted source safely, since the rendered output is sanitized before it appears.
- Keeping a running draft across sessions, since the text is saved in this browser and survives a refresh.
- Watching a live word count and reading-time estimate for a piece you are writing in Markdown.
Examples
Input
## Checklist - [x] Draft the headline - [ ] Rewrite the grid | Section | Status | | ------- | ------ | | Hero | Done |
Output
The preview shows a level-two heading, a checklist with the first box ticked and the second empty, and a two-column table with a header row and a “Hero / Done” row, all updating on the right as you type on the left.
Task lists, tables, strikethrough, and autolinked URLs come from the GitHub-flavoured Markdown extensions layered on top of CommonMark.
Input
Normal text <script>alert(1)</script> and a [link](javascript:alert(1)).
Output
The preview renders “Normal text and a link”, with the script element dropped and the unsafe javascript: URL stripped so the link cannot run anything.
The sanitiser removes scripts, inline event handlers, and dangerous URL schemes while keeping safe formatting.
How Markdown Editor works under the hood
The preview is produced by parsing your Markdown with a CommonMark engine extended by the GitHub-flavoured Markdown plugin, which adds tables, task lists, strikethrough, and automatically linked bare URLs. The result is not rendered raw: it passes through a sanitiser built on a hardened default schema that removes script elements, inline event handlers, iframes, and dangerous URL schemes such as javascript:, then re-adds only the specific things a document legitimately needs — task-list checkboxes, table-cell alignment, and the language class on fenced code blocks. Rendered links also open in a new tab with the safe rel attributes set.
The toolbar edits your selection in place rather than inserting boilerplate. The inline buttons — bold, italic, and code — wrap the selected text in the matching markers. The block buttons — heading, blockquote, bullet, and task list — add their prefix to the start of every selected line. The prefixing is idempotent: if a line already begins with that prefix, it is left as it is rather than doubled, so pressing the bullet button twice on the same lines does not stack two markers.
Your draft is held in this browser’s local storage under the site’s origin, so it survives a refresh and is still there when you return in the same browser. That persistence is per-browser and per-device, not an account, so clearing site data clears the draft — which is why Download, saving the Markdown source as a .md file, is the way to keep a lasting copy. There is also a layout control to switch between the split view, an editor-only view, and a preview-only view.
The word count and reading-time figure are computed from the Markdown source you are typing, not from the rendered HTML, and they update live. Because the count includes Markdown syntax as it is written and the reading estimate assumes an average silent-reading pace, both are best read as a working guide rather than an exact measure of the final rendered document.
Common mistakes
- Expecting pasted HTML with a script or an unsafe link to run in the preview. It will not — the sanitiser strips scripts, event handlers, and schemes like javascript: by design. That is a safety feature, not a rendering bug.
- Relying on the local-storage draft as permanent storage. It lives in this one browser and is erased if you clear site data or switch device or browser. Use Download to save a .md copy anything you need to keep.
- Assuming the word count matches the rendered text. It counts the Markdown source, so the syntax characters and any raw URLs are included; the rendered document will read a little shorter than the number suggests.
- Formatting text while the preview-only view is active. The toolbar acts on the editor’s selection, so switch to the Editor or Split view to use it — the toolbar area shows a hint when it is unavailable.