What This Tool Does

This bidirectional converter transforms Markdown into clean HTML and HTML back into Markdown. It supports all standard GitHub Flavored Markdown (GFM) features: headings, bold/italic, lists, tables, fenced code blocks, links, images, blockquotes, and horizontal rules. The live preview updates as you type. Both directions run entirely in your browser — perfect for blog writing, README files, documentation, and content migration.

Inputs Explained

How It Works

Markdown → HTML: a line-by-line parser handles headings (# ## ###), emphasis (**bold**, *italic*), lists (nested), fenced code blocks, tables, blockquotes, links, images, and horizontal rules. HTML → Markdown: the browser parses HTML with DOMParser, then a tree walker emits equivalent Markdown syntax for every supported element.

Formula / Logic Used

MD → HTML: parse blocks (heading/list/code/table/para) → render tags HTML → MD: DOMParser → walk DOM → emit '#'/'**'/'`' syntax

Markdown to HTML & HTML to Markdown Converter

Write Markdown, see HTML (or vice versa) — with live preview and copy-ready output.

Markdown Input

HTML Output

Live Rendered Preview

Step-by-Step Example

Input Markdown:

# Hello
This is **bold** and *italic*.
- item 1
- item 2

Output HTML:

<h1>Hello</h1>
<p>This is <strong>bold</strong> and <em>italic</em>.</p>
<ul><li>item 1</li><li>item 2</li></ul>

The rendered preview shows exactly how your HTML will display when pasted into a blog or webpage.

Use Cases

Assumptions and Limitations

Disclaimer: Both conversions run entirely in your browser using a custom parser for Markdown and the browser's native DOMParser for HTML. Your content never leaves your device.

Frequently Asked Questions

How do I add YouTube embeds in Markdown?

Pure Markdown doesn't natively support video embeds, but you have two clean options. Easiest: paste a Markdown image link to the video thumbnail, wrapped in a regular link to the video — clicking takes the user to YouTube. Most parsers also accept raw HTML inside Markdown, so an <iframe src="https://www.youtube.com/embed/VIDEO_ID"> block works in tools like GitHub README files, MkDocs, and Hugo. Some static-site generators have shortcodes ({{< youtube VIDEO_ID >}} in Hugo) that compile to a clean responsive embed. Our converter passes through HTML, so iframes carry over to the HTML output untouched.

How do I include images in Markdown and convert to HTML?

Markdown image syntax is ![alt text](path/to/image.jpg). The square brackets contain alt text for accessibility, and the parentheses contain the path — relative, absolute, or full URL. For example, ![Taj Mahal](images/taj.jpg) converts to <img src="images/taj.jpg" alt="Taj Mahal">. Want to set a title (tooltip)? ![alt](url "Title here"). For sizing, plain Markdown doesn't support width or height, so drop in raw HTML when you need it: <img src="..." alt="..." width="600">. Our converter preserves both styles. Always write meaningful alt text — it helps screen readers, SEO, and broken-image fallback.

How do I preview Markdown in real time?

Our Markdown converter has a split-pane live preview — type on the left, see HTML render on the right, instantly. No save button, no refresh required. For local editing, VS Code with the built-in Markdown preview (Ctrl+Shift+V) is excellent. Apps like Typora and Obsidian render WYSIWYG-style. If you need to publish, GitHub renders .md files in the browser with live preview during edits. For Indian devs writing technical docs in Devanagari or Tamil, all these tools handle Unicode perfectly — just make sure your file is saved as UTF-8 and not Windows-1252.

How do I escape special characters in Markdown?

Use a backslash before the character you want to render literally. The list of escapable characters: backslash, backtick, asterisk, underscore, curly braces, square brackets, parentheses, hash, plus, minus, dot, exclamation mark, and pipe. So \*not italic\* shows as *not italic* instead of becoming italic. For code-heavy content, wrap the whole snippet in backticks — anything inside is treated as literal text. For HTML entities (like & becoming &amp;), Markdown leaves those alone, so write &amp; if you need a literal ampersand in your output. Our converter follows the CommonMark spec for predictable escaping.

How do I write a footnote in Markdown?

Footnotes aren't in core Markdown but are supported by GitHub Flavored Markdown, MultiMarkdown, and most modern parsers. The syntax: Here's some text with a footnote.[^1] [^1]: This is the footnote content. The [^1] becomes a superscript link in the output, and the [^1]: definition can sit anywhere in the document — the parser auto-numbers them. You can use named labels too: [^note-india] is more readable than numeric IDs in long documents. Our converter supports footnotes by default, rendering them as a numbered list at the bottom with backlinks.

How do I convert Markdown task lists (- [ ]) to HTML checkboxes?

The task list syntax is - [ ] for unchecked and - [x] for checked. The output is a <ul> of <li> elements containing <input type="checkbox" disabled> — disabled because Markdown is a static format. GitHub renders these as interactive checkboxes only inside issues and PRs. To make them clickable in your own site, post-process the HTML to remove the disabled attribute and add a small JavaScript handler. Our converter outputs the standard GFM-compatible HTML so it works everywhere — GitHub, MkDocs, Docusaurus, Hugo, and most other static site generators. Great for project READMEs and todo notes.

Why are my Markdown line breaks not converting to HTML <br>?

Markdown is strict about line breaks. A single newline gets ignored — paragraphs require a blank line between them. To force a <br> within the same paragraph, end the line with two trailing spaces (often called the "two-space rule") or a backslash. So a line ending in two spaces followed by another line becomes First line<br>Second line. GitHub Flavored Markdown is more lenient and converts single newlines to <br> automatically, which is why behaviour seems to vary between parsers. Our converter has a "GFM line breaks" toggle so you can pick whichever style your destination expects.

Sources and References

Related Calculators

HTML EntitiesURL EncoderCase ConverterWord CounterLorem IpsumFun Ipsum Generator