Markdown Editor & Live Preview
Write Markdown and see the rendered HTML as you type. A safe CommonMark-style parser with headings, lists, tables, task lists and code blocks — all local.
Markdown source
How it works
- Every keystroke re-renders the document locally — no network request, no upload, nothing leaves your device.
- The parser supports headings, bold, italic, strikethrough, inline code, fenced code blocks, blockquotes, ordered and unordered (nestable) lists, task lists, links, images, horizontal rules, and GitHub-style pipe tables.
- Raw HTML in your Markdown is escaped by default: tags are shown as plain text, so pasted markup can never execute.
- Copy HTML grabs the generated markup for reuse in emails, CMS fields, or documentation.
About Markdown Editor & Live Preview
Markdown is the de-facto format for READMEs, issue comments, chat messages, and docs. A live preview closes the loop between what you type and what readers see: formatting mistakes, broken table columns, and unclosed code fences become visible instantly instead of surfacing after you publish.
The renderer implements a pragmatic subset of CommonMark with the two safety rules that matter most: all raw HTML is escaped, and every construct (links, images, code) is rendered from your input alone. Because parsing happens in your browser, you can draft confidential notes or internal documentation here with the same comfort as any local editor.
How the parser is structured
Rendering happens in two passes. A block pass walks the source line by line, classifying each as a fence, heading, table, blockquote, list item, thematic break, or paragraph, accumulating consecutive lines into a buffer and flushing it into the accumulated block list. An inline pass then handles escaping and emphasis within each block.
HTML escaping runs before anything else in that inline pass, so no markup in the source can reach the preview as a live tag — a `<script>` tag in your Markdown renders as visible text. Inline code is protected by placeholder substitution: code spans are lifted out first, stored with null-delimited index markers, and restored after emphasis processing, which is why `**` inside backticks stays literal instead of becoming bold.
What the block pass recognises
Tables require a delimiter row matching `^:?-+:?$` in every cell, so a pipe table needs both a header and a separator before any rows render; cells short of the header count are padded with empty strings. List nesting depth comes from indentation divided by two, and both bullet and ordered markers are accepted at any level, with task-list items rendered as disabled checkboxes reflecting their `[x]` or `[ ]` marker.
Fenced code blocks capture the info string and emit it as a `lang-*` class, and an unclosed fence still renders its contents at end of input. Inline constructs are matched by deliberately ordered regular expressions — triple emphasis before double, double before single — which is why `***text***` renders as bold-italic rather than as a stray asterisk pair.
Where it diverges from a full implementation
This is a pragmatic subset, and the gaps matter if you are checking rendering fidelity against GitHub. Setext headings, reference-style links, footnotes, and raw HTML blocks are not supported. Nested emphasis inside a link, and images with title text or angle-bracket destinations, will not match. Autolinking of bare URLs is not implemented either, despite being common on the reference platform.
Line endings are normalised to ` ` before parsing, so CRLF input renders correctly. Word and character counts under the editor split on whitespace and measure raw string length, which makes them a drafting aid rather than a precise metric. Re-rendering is debounced by 150 milliseconds and always reparses the whole document, so a very large file will feel the pause on every keystroke that lands.
Frequently Asked Questions
How do I preview Markdown online?
Does it support GFM (GitHub Flavored Markdown)?
Is my data sent to a server?
Do I need an account or API key?
Can I use these tools offline?
All processing happens in your browser. No uploads, no tracking, no servers. Your API keys, configs, and private payloads stay private — 100% client-side.