Markdown Preview
Live Markdown renderer with GFM, tables, task lists, and sanitized HTML — right in your browser.
How to use Markdown Preview
- Paste or type your Markdown into the left pane. The rendered HTML updates live on the right as you type.
- Toggle GFM to switch between GitHub Flavored Markdown and strict CommonMark. Tables, task lists, and strikethrough require GFM.
- Toggle Line breaks to treat single newlines as `<br>` — handy when previewing GitHub comments or chat messages.
- Click Copy HTML (or Copy sanitized) to grab the rendered HTML source for pasting into a blog post, email template, or static-site generator.
- Click Share to copy a URL that restores your current options (and, for inputs under 4 KB, your Markdown). The state lives in the URL hash, so the server never sees it.
- Watch the footer chips for word count, character count, and estimated reading time at 200 wpm.
Markdown Preview
A browser-local, keystroke-fast Markdown renderer that turns your Markdown into clean, sanitized HTML. Everything happens on-device: there is no server call, no upload, and no telemetry. Paste a README, a GitHub comment, a chat transcript, or a note written in your favourite editor — the right pane shows the rendered HTML in the same typographic style the rest of the site uses, with live word count and reading-time estimation in the footer.
Why yet another Markdown preview?
Most online Markdown previews fall into one of two buckets. The first bucket is the "try-our-editor" bucket: they render Markdown, but they also push you onto a signup flow, add a watermark to shared links, or send your text to a server "for AI suggestions." The second bucket is the thousand-deep "Markdown to HTML converter" results on Google — which typically POST your Markdown to an unknown backend, rely on outdated sanitizers, and still ship a full SPA to render a paragraph of text. Neither is what you want when you're pasting a half-finished README, a team retro, or a confidential changelog.
The Markdown Preview on dev101.io is a single pane that does one thing well. It uses marked v18 — already bundled for the site's own README rendering — with a set of custom renderer overrides that make the output safe to drop into any page. The whole tool, including the sanitizer, is about 250 lines of TypeScript, and you can read it on GitHub to verify exactly what's happening to your text. No iframe, no hidden fetch, no persistence — close the tab and your Markdown is gone.
What it does
- GitHub Flavored Markdown out of the box. Tables, task lists, strikethrough, autolinks, and fenced code blocks render immediately. Toggle GFM off to enforce strict CommonMark.
- Sanitized by construction. Raw HTML is escaped, never passed through. Link hrefs and image sources are filtered through a strict scheme allowlist (
https,http,mailto,tel, relative).javascript:,vbscript:,file:,about:, and arbitrarydata:URIs are rewritten to#or dropped. A final regex sweep stripson*=handlers as a defence-in-depth safety net. - Line-break toggle. Turn on "Line breaks" to render a single newline as
<br>, matching how GitHub comments behave. Turn it off for classic CommonMark paragraph semantics. - Live stats. Word count, character count, and estimated reading time at 200 wpm update on every keystroke. Reading time is rounded up — a ten-word note shows "1 min read", not "0 min".
- Copy real HTML. One button copies the exact rendered, sanitized HTML source, ready to paste into a Notion block, a marketing email, or a static-site generator's raw-HTML shortcode.
- URL-hash share. The Share button encodes your renderer options and — if the Markdown fits — your input into the URL fragment. Open the link in another tab or browser and the same preview restores.
What's not supported (yet)
- Syntax highlighting inside code fences. The preview emits a standard
class="language-xxx"on fenced code blocks so a downstream Prism or Shiki can pick them up, but this tool does not ship a highlighter itself. Doing so would add a large runtime dependency we are not ready to take on. - Custom renderer extensions — callouts (
> [!NOTE]), footnotes, math (KaTeX), or Mermaid diagrams. These are all on the radar; for now, the preview tracks the CommonMark + GFM baseline plus sanitized raw-HTML fallback (escaped to text). - Live collaborative editing. dev101.io tools are single-player by design. If you need collaborative Markdown editing, pair this preview with a platform like HackMD or Notion and use the Copy HTML button to export when you're done.
- Front-matter parsing. YAML front-matter is rendered verbatim as a horizontal rule plus heading, which is what CommonMark specifies. Dedicated front-matter preview is a future enhancement.
Related tools
- HTML Entities — encode and decode HTML entities when you need to hand-craft escape sequences before pasting into a sensitive context.
- Word Count — a standalone word, character, paragraph, and reading-time analyser for plain text, with additional metrics the preview footer doesn't surface.
- Case Converter — twelve case styles side by side for renaming headings, identifiers, and filenames when refactoring a Markdown doc.
Frequently asked questions
What dialect of Markdown does this preview support?
The default is GitHub Flavored Markdown (GFM), which adds tables, task lists (`- [ ]` / `- [x]`), strikethrough (`~~text~~`), autolinked URLs, and fenced code blocks on top of the CommonMark baseline. GFM is on by default; toggle it off to render strict CommonMark — which keeps `[ ]` literal, treats `~~text~~` as plain tildes, and skips table parsing. Single newlines also become `<br>` when the "Line breaks" option is enabled, matching how GitHub comments render.
Is it safe to paste untrusted Markdown into the preview?
Yes. Raw HTML inside the Markdown is escaped to literal text, so tags like `<script>`, `<iframe>`, and `<img onerror>` cannot execute. Link hrefs and image sources are filtered through a strict scheme allowlist — `javascript:`, `vbscript:`, `file:`, and arbitrary `data:` URIs are rewritten to `#` or dropped. A final regex pass strips surviving `on*=` event handlers as a safety net. The preview is designed to be safe even when the markdown comes from an unknown author or an untrusted clipboard.
Does my Markdown leave my browser?
No. The tokeniser and renderer run in your browser via the bundled `marked` package. There is no `/api/render` endpoint, no telemetry, and no outbound request triggered by the preview itself. External images inside your Markdown are still fetched by the browser when the preview mounts them — if you paste ``, the browser will load that URL from your IP as usual. Everything structural (tokenising, sanitizing, counting words) happens locally.
How does the word and reading-time counter work?
Word count splits the input on any run of whitespace and drops empties. Punctuation attached to a word counts with it, so "don't" is one word. Reading time assumes 200 words per minute — the broadly accepted adult average for prose — and is rounded up to the next whole minute. Empty input shows 0 minutes; anything else shows at least 1. Code blocks, front-matter, and Markdown syntax are included in the word count because they add roughly the same cognitive load when you read through a document.
Why does the preview show `<pre><code class="language-ts">` without syntax highlighting?
The preview emits a standard language class on fenced code blocks — the convention Prism, Highlight.js, and Shiki all consume — but does not ship a highlighter. Syntax highlighting would add a non-trivial dependency (50–250 KB even with minimal grammars), and devtools-box deliberately avoids new runtime deps for maintainability and supply-chain reasons. If you copy the Sanitized HTML and paste it somewhere with Prism or Shiki on the page, highlighting lights up automatically thanks to the language class.
What's the difference between "Copy HTML" and "Copy sanitized"?
They produce the same string. Both buttons export the already-sanitized HTML — raw HTML escaped, unsafe URLs neutralised. We ship two labels because users reasonably ask either question ("where's my HTML?" vs. "where's the sanitized HTML?") and we don't want them guessing which one is safe. Pasting into a trusted template, Notion, or a documentation page works the same either way.