Markdown to HTML Converter
Convert Markdown into clean HTML with live preview. Use this converter for README files, documentation, blog drafts, release notes, and CMS content that needs semantic HTML output.
Last updated: July 1, 2026
Markdown workflow shortcuts
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat Makes This Markdown to HTML Converter Useful?
Plenty of tools convert Markdown to HTML — the difference here is what happens after the conversion. This tool adds GitHub-style heading IDs with automatic duplicate handling, a nested table of contents generator, four purpose-built output modes (Clean HTML, WordPress HTML, Full HTML Page, and Tailwind Typography), a sanitization toggle backed by an allowlist sanitizer, and a lightweight Markdown issue checker — all running client-side with live preview, so nothing you type ever leaves your browser.
Markdown to HTML Converter Features
Live Preview
See rendered HTML update as you type, with GFM tables, task lists, and images rendered inline.
Four Output Modes
Clean HTML, WordPress HTML, Full HTML Page, or Tailwind Typography — switch modes without re-parsing your Markdown.
Heading IDs
GitHub-style slug ids on every heading, with automatic -1/-2 suffixing for duplicates and an optional custom prefix.
Table of Contents
Generates a nested H2/H3 table of contents linked to your heading ids, copyable on its own.
HTML Sanitization
Strips script tags, event handlers, and other unsafe markup by default — toggle it off only for trusted content.
File Upload & Drag-and-Drop
Upload a .md file or drag one straight into the editor.
Markdown Issue Checker
Flags missing/duplicate H1s, empty links, missing image alt text, and raw or unsafe HTML in your source.
Client-Side Processing
Parsing, sanitizing, and rendering all happen in your browser. Your document is never uploaded.
Clean HTML vs WordPress HTML vs Full HTML Page vs Tailwind Typography
Clean HTML
Semantic markup only — no wrapper, no extra classes, no inline styles. The default mode, best for CMS and blog content.
WordPress HTML
The same semantic markup with presentational classes (like GFM's task-list classes) stripped, so it pastes cleanly into the WordPress block or classic editor.
Full HTML Page
Wraps the content in a complete <!DOCTYPE html> document with charset, viewport, and title tags — a self-contained file that opens correctly in any browser.
Tailwind Typography
Wraps the content in <article class="prose prose-slate max-w-none">, matching the @tailwindcss/typography plugin's expected markup.
How to Convert Markdown to HTML
Type or paste Markdown into the editor, or upload/drag-and-drop a .md file.
Toggle GFM, Sanitize HTML, Heading IDs, and Generate TOC in Options as needed.
Pick an output mode: Clean HTML, WordPress HTML, Full HTML Page, or Tailwind Typography.
Check the Preview, HTML, Full Page, and TOC tabs, and review any warnings on the Issues tab.
Copy the HTML (or the TOC) with one click, or download it as a file.
Markdown to HTML for WordPress
WordPress's editors don't need — and often mangle — extra class attributes on pasted-in HTML. Switch to the "WordPress HTML" output mode before copying: it keeps your headings, paragraphs, lists, blockquotes, and tables intact but strips the presentational classes GFM adds (like contains-task-list and language-* classes), so the paste-in stays clean in both the classic and block editors. Sanitization still applies if enabled, so any raw HTML in your source is stripped the same way as in Clean HTML mode.
How Heading IDs Work
Enabling "Heading IDs" assigns a GitHub-style slug id to every heading in the document — lowercase, spaces replaced with hyphens, punctuation stripped, exactly like the anchors GitHub generates for README headings. So `## Getting Started` becomes `<h2 id="getting-started">Getting Started</h2>`.
If the same heading text appears more than once — three "Installation" sub-sections, for example — later occurrences get a -1, -2 suffix (installation, installation-1, installation-2) so every id in the document stays unique and every anchor link keeps working. An optional custom prefix (e.g. doc-) is prepended to every generated id, which is useful when embedding the output alongside other content that might already use an id like "introduction".
How to Generate a Table of Contents from Markdown
Enable "Generate TOC" (this also turns on heading IDs automatically, since the TOC links to them) and open the TOC tab. The tool walks the document's H2 and H3 headings and builds a nested `<nav class="table-of-contents"><ul>…</ul></nav>` block — H3 headings nest inside a sub-`<ul>` under their parent H2, so the structure mirrors your document outline.
Use "Copy TOC HTML" in the toolbar to copy just the TOC markup, independent of whatever output mode or tab you're otherwise using — handy for pasting a TOC above a long article separately from the article body.
Why HTML Sanitization Matters
Markdown allows raw HTML blocks inline, so pasted-in content from an untrusted source can carry a <script> tag or an onerror/onclick handler straight through to your page. With "Sanitize HTML" enabled (the default), this tool strips script, style, iframe, object, and embed tags along with any on* event attribute before the HTML reaches the preview or the copyable output. Only disable sanitization for Markdown you or your team wrote yourselves — the Issues tab will still flag raw or unsafe HTML in your source either way, as a reminder of what sanitization would have removed.
GFM Support: Tables, Task Lists, and Strikethrough
Tables
| Column | Column | header row, then | --- | --- | as the separator, then data rows — renders to a standard <table>/<thead>/<tbody> structure.
Task Lists
- [x] done and - [ ] pending render as <input type="checkbox" checked disabled> / <input type="checkbox" disabled> list items.
Strikethrough
~~text~~ renders as <del>text</del>, useful for changelogs and crossed-out completed items.
Autolinks
Bare URLs like https://example.com become clickable <a> links automatically, without needing [text](url) syntax.
Common Use Cases
- Converting a GitHub README.md to HTML for embedding in a documentation website or email newsletter
- Converting Markdown blog posts to HTML for pasting into a CMS like WordPress, Ghost, or Webflow
- Generating static HTML from Markdown documentation for a project site or help center
- Previewing how Markdown will render on GitHub before pushing to the repository
- Converting Markdown meeting notes or project specs to an emailable HTML document
- Transforming Markdown content from a headless CMS into HTML for rendering in a React/Next.js app
- Producing clean semantic HTML from AI-generated Markdown responses for use in web UIs
- Converting Markdown API documentation (like Swagger descriptions) to HTML for developer portals
- Adding heading IDs and a table of contents to long-form Markdown documentation before publishing
Example: Table and Task List
Converting a GFM document section with a table and task list to HTML:
## Release Checklist
| Task | Owner | Status |
|------|-------|--------|
| Code review | @alice | ✅ |
| QA testing | @bob | 🔄 |
- [x] Write release notes
- [ ] Update changelog
- [ ] Tag release<h2 id="release-checklist">Release Checklist</h2>
<table>
<thead>
<tr><th>Task</th><th>Owner</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>Code review</td><td>@alice</td><td>✅</td></tr>
<tr><td>QA testing</td><td>@bob</td><td>🔄</td></tr>
</tbody>
</table>
<ul class="task-list">
<li class="task-list-item">
<input type="checkbox" checked disabled> Write release notes
</li>
<li class="task-list-item">
<input type="checkbox" disabled> Update changelog
</li>
<li class="task-list-item">
<input type="checkbox" disabled> Tag release
</li>
</ul>Example: Heading IDs and Table of Contents
Duplicate H2 headings get automatically suffixed, and the TOC generator nests them in document order:
# Guide
## Installation
## Installation
## Installation<h1 id="guide">Guide</h1>
<h2 id="installation">Installation</h2>
<h2 id="installation-1">Installation</h2>
<h2 id="installation-2">Installation</h2>Client-Side Processing
All Markdown parsing, sanitizing, and HTML generation runs in your browser using the unified/remark/rehype pipeline. Your document content is never transmitted to our servers.
Adding CSS to the Generated HTML
Raw HTML from Markdown has no styling. For a clean document look, add a typography stylesheet: GitHub's Primer CSS for GitHub-style Markdown rendering (@primer/css), Pico CSS for minimal elegant typography, or Pandoc's default CSS — or use the built-in Tailwind Typography output mode if your site already uses @tailwindcss/typography.
Server-Side Markdown Parsing
For production apps, parse Markdown server-side (not client-side) for better performance and centralized sanitization control. Recommended: remark/rehype (the unified ecosystem this tool is built on), marked (Node.js, fast), or pandoc (CLI, supports 50+ formats). Next.js + MDX (Markdown + JSX) is the modern standard for documentation sites, allowing React components inside Markdown files.
How This Tool Works
Markdown is parsed with `remark-parse` into an AST, extended with `remark-gfm` for tables, task lists, strikethrough, and autolinks, then converted to an HTML AST via `remark-rehype`. `rehype-raw` resolves any raw HTML blocks back into the tree, `rehype-sanitize` strips unsafe tags and attributes against an allowlist schema (when sanitization is enabled), and — when heading IDs are enabled — a `github-slugger`-backed step assigns unique heading ids after sanitization, so generated ids are never rewritten by the sanitizer's anti-clobbering rules. The table of contents is built from those same heading ids without re-parsing the Markdown. `rehype-stringify` produces the final HTML string, and output-mode wrapping (WordPress class-stripping, Tailwind Typography, or the full HTML page template) runs as a separate, cheap string transform so switching modes never re-parses your document.
Technical Stack