Live GitHub-Flavored Markdown to safe HTML preview with copy-as-HTML and zero data uploads.
Updated
Markdown source
95 words • 685 chars • 43 lines • ~1 min read
Preview
Loading parser…
⌘EnterCopy HTML
⌘KClear source
Quick start
How to preview Markdown
Type Markdown, see HTML render live, copy the result.
Step 1
Type or paste Markdown
Use the GFM dialect: headings, bold/italic, lists, tables, task lists, code fences, links and images.
Step 2
Watch the preview
Every keystroke re-renders the HTML on the right. Raw HTML in the source is escaped; unsafe URLs are dropped.
Step 3
Copy HTML or source
Hit Copy HTML or ⌘/Ctrl+Enter to grab the rendered HTML. Use Copy MD to copy the Markdown source.
In-depth guide
Markdown preview: render GFM in your browser with safe HTML output
Type Markdown on the left, watch HTML render on the right. Supports the GitHub Flavored Markdown dialect — tables, task lists, strikethrough, autolinks — plus the standard CommonMark base. Inline HTML in the source is escaped, link/image URLs are filtered against an allow-list of protocols, so the preview is safe to use with untrusted input.
What gets rendered
The preview implements the GitHub Flavored Markdown spec via the marked parser, which is the most widely used CommonMark + GFM implementation in the JavaScript ecosystem. Supported features:
Headings — # … ######
Emphasis — *italic*, **bold**, ~~strike~~
Lists — bullet, ordered, nested, and GFM task lists
Tables — pipes + dashes with optional column alignment
Code — inline `code`, fenced ```blocks``` with a language hint
Line breaks — a single newline becomes a <br> (GFM "breaks" mode)
Why the preview is safe
Public Markdown previewers are a classic source of stored-XSS bugs because Markdown allows raw HTML by spec. This tool overrides marked's renderer in three places to close that gap:
Raw HTML tokens are escaped. Anything that looks like inline or block HTML (including <script>, <iframe>, <style>) is rendered as literal text. The "no raw HTML" stance trades a small amount of expressiveness for guaranteed-safe output.
Link URLs run through an allow-list. Only http, https, mailto, tel, ftp, relative paths and document fragments pass through. javascript:, data:, vbscript: etc. are stripped and the link is rendered as its anchor text.
External links get safe defaults.target="_blank" with rel="noopener noreferrer nofollow" — the OWASP-recommended attributes that prevent window.opener tab-nabbing and remove your page from the link graph.
The HTML produced by these guarantees is safe to pass to dangerouslySetInnerHTML without a separate DOMPurify pass.
When this is useful
READMEs and docs — write locally, sanity-check the rendering before pushing.
Issue/PR drafting — preview GitHub-flavoured comments without sending half-finished prose to a public thread.
Email composition — write the email in Markdown, copy the HTML, paste into a rich-text client (Gmail, Outlook).
CMS authoring — many headless CMSes accept HTML but not Markdown. Author in MD, paste HTML.
Known limitations
No syntax highlighting. Code fences render as plain <pre><code class="language-xxx">. Bring your own highlighter downstream if you need colours.
No raw HTML escape hatch. If you need a literal <kbd> tag in your preview, this tool can't help — it always escapes. Use a more permissive renderer (with DOMPurify) for that case.
No KaTeX / Mermaid. Math and diagram extensions aren't installed; the preview is intentionally minimal.
Task list checkboxes are non-interactive. Clicking them doesn't update the source. Edit the [ ] / [x] in the textarea instead.
Previewing Markdown accurately
When to reach for it. Use it to see how your Markdown renders before pasting it into a README, issue or blog.
When something else is better. Flavours differ — GitHub, CommonMark and your blog engine each handle tables, task lists and raw HTML slightly differently.
The pitfall to watch. A missing blank line before a list or code fence is the number-one reason Markdown “doesn’t render” as expected.
Everything runs on your device. The values you enter are processed locally in this browser tab — EpitomeTool does not send your input to a server, store it, or log it. That means you can use the tool offline once the page has loaded, and refreshing the tab wipes the slate.
Frequently asked questions
Does this tool send my Markdown anywhere?
No. The parser runs entirely in your browser. We dynamic-import marked the first time you open the page; after that, every keystroke is rendered locally with zero network traffic.
Which Markdown flavour does the preview support?
GitHub Flavored Markdown (GFM): the CommonMark core (headings, lists, links, code, emphasis) plus tables, strikethrough, task lists and autolinks. Line breaks render as <br> for the readable WYSIWYG feel; turn off `breaks` in lib.ts if you need strict CommonMark.
Is raw HTML in my Markdown rendered?
No. Inline and block HTML tokens are escaped at the renderer level, so `<script>` (or `<iframe>`, `<object>` etc.) appears as literal text in the preview. This makes the tool safe to use with untrusted Markdown — there is no way for an input string to execute code in your browser.
What protocols are allowed in links and images?
http, https, mailto, tel, ftp, plus relative URLs and document fragments (`#section`). Everything else — including `javascript:` and `data:` — is dropped and the link is rendered as plain text. External http(s) links also get `rel="noopener noreferrer nofollow"` and `target="_blank"` automatically.
How are task lists rendered?
GFM task lists (`- [ ]` and `- [x]`) become unordered list items with disabled checkboxes. The checkboxes are interactive-looking but don't fire events — change them in the source if you want a different state.
What's the difference between Copy MD and Copy HTML?
Copy MD puts the textarea source on your clipboard exactly as typed. Copy HTML puts the rendered HTML on your clipboard — useful for pasting into a CMS that accepts HTML but not Markdown, or into an email.
Does it support syntax highlighting in code fences?
No, the tool ships an unhighlighted code block (`<pre><code>` with the language as a class). Add Prism, Shiki or highlight.js to your downstream renderer if you need actual colouring; the class name is preserved on the `<code>` element to make that easy.
How accurate is the reading-time estimate?
Reading time uses the common 200 words-per-minute heuristic, rounded up to at least one minute. It's deliberately optimistic for casual reading; technical content with code snippets and diagrams reads more slowly in practice.
Keep exploring
More tools you'll like
Hand-picked utilities that pair well with the one you're on — all
free, client-side, and zero-signup.