Markdown to HTML Editor

Write Markdown on the left, see the rendered result and clean HTML on the right.

Markdown

Written and maintained by the KitYards team About KitYards Last reviewed:

A split-view Markdown editor with a live preview and a clean HTML export. Type on the left and the right pane updates as you go — switch it between the rendered document and the generated HTML source at any time. Headings, bold and italic text, links, images, lists, task lists, tables, blockquotes, horizontal rules and fenced code blocks are all supported. When you are done, copy the HTML into your CMS or download a self-contained .html file.

How to convert Markdown to HTML

  1. 1 Type or paste your Markdown into the left-hand editor.
  2. 2 Watch the live preview render on the right as you write.
  3. 3 Switch to the HTML tab to inspect the generated, indented markup.
  4. 4 Copy the HTML or download a ready-to-publish .html document.

How the conversion works, and why it is safe

The renderer is a small CommonMark subset written from scratch: headings, emphasis, inline and block code, ordered and unordered lists, blockquotes, tables, links, images and horizontal rules. Pulling in a full library like marked or markdown-it would cost more kilobytes than every other tool on this site combined, and the subset covers what people actually write in a README or a blog post.

The security design is worth stating plainly, because it is the part most Markdown converters get wrong. Your input is HTML-escaped before any inline parsing happens, and raw HTML in the source is never passed through to the output. That means a Markdown document containing a script tag produces visible, harmless text rather than an executing script. Link and image URLs are checked against an allowlist of protocols that cannot execute code — http, https, mailto, tel, fragments, relative paths and data URIs limited to images — so the classic javascript: link injection has nowhere to go.

The live preview is rendered with innerHTML, which is only defensible because of the escaping above. The "download .html" option wraps the same output in a complete HTML document with a title, so the file opens correctly in a browser rather than as a fragment.

What it is for

Pasting into a CMS

Many content systems accept HTML but not Markdown. Writing in Markdown and converting at the end is faster than fighting a WYSIWYG editor that reformats as you type.

Previewing a README

Checking how a README renders before pushing saves the commit that only fixes a broken table. The preview shows the structure the same way a renderer will.

Email and newsletters

Draft in Markdown, convert to HTML, paste into the newsletter tool. The result is clean semantic markup rather than the nested div soup a rich-text editor produces.

Learning Markdown

Typing on one side and watching the output on the other teaches the syntax faster than any reference table, especially for lists and tables where indentation matters.

Why use a browser-based Markdown editor

Markdown is the fastest way to write structured text — READMEs, documentation, blog drafts, release notes — but publishing usually needs HTML. This editor bridges the two without a build step, an account or a paste into someone else’s server. The renderer escapes your input before parsing it, so the preview is safe even if your text contains angle brackets or script tags, and the HTML it produces is plain semantic markup with no framework classes or tracking attached.

What this renderer does not support

This is a deliberate subset, not a full CommonMark implementation. The gaps are:

  • Raw HTML is not passed through. Embedding a video iframe or a custom widget by writing HTML inside your Markdown will show the tags as text — this is a security decision, not an oversight.
  • No GitHub-flavoured extensions beyond tables: task lists, strikethrough autolinks, footnotes and syntax highlighting inside code blocks are not implemented.
  • No front matter parsing. A YAML block at the top of the document is rendered as content rather than treated as metadata.
  • Deeply nested or unusual list structures may not match a full parser exactly. Straightforward nesting works; edge cases in the CommonMark specification are not all covered.
  • Non-image data URIs are rejected in links. Only data:image URIs are allowed through, since arbitrary data URIs are an injection vector.

Troubleshooting

My HTML tags appear as visible text
Working as intended. Raw HTML is escaped rather than passed through, so a document containing markup shows that markup. If you need HTML in the output, convert the Markdown here and then add the HTML by hand to the result.
My list is not nesting
Markdown nesting is driven by indentation, and the required amount depends on the parent marker. Indent the child item by at least two spaces — four is safest and works everywhere. A tab may be interpreted differently depending on width.
My table is not rendering
A table needs the separator row of dashes directly under the header, with at least three dashes per column, and the same number of pipe-separated cells in every row. A missing separator row is the usual cause; a row with one cell too few is the next.

Frequently asked questions

Which Markdown syntax is supported?

Headings, bold, italic, strikethrough, inline code, fenced code blocks, links, images, ordered and unordered lists, task lists, tables, blockquotes and horizontal rules.

Is the generated HTML clean?

Yes — it is plain semantic HTML, indented for readability, with no inline styles or framework-specific classes, so it drops straight into any CMS or template.

Is my draft stored anywhere?

No. The text lives only in the page while it is open. Nothing is uploaded and nothing is saved once you close the tab.

Is the output safe to publish?

The HTML this tool produces cannot contain script, because the input is escaped before parsing and dangerous URL protocols are filtered out. That said, treat any content you did not write yourself with the same caution you would apply anywhere else — the guarantee covers what this renderer emits, not what you paste in afterwards.

Does it support tables?

Yes. Use the pipe syntax with a separator row of dashes beneath the header. Column alignment with colons in the separator row is the common extension and behaves as you would expect.

Can I convert HTML back to Markdown?

Not with this tool — it converts in one direction. The reverse is a genuinely harder problem, since arbitrary HTML has no clean Markdown equivalent and the result always needs manual cleanup.

Is my document sent anywhere?

No. The renderer is a JavaScript module running in your tab, with no network access. Drafts, internal documentation and unpublished writing stay entirely on your device.

Other recommended tools