Markdown Live Preview

Markdown Live Preview renders your Markdown as you type, side-by-side with the source. Drag the divider mentally — the left pane is what you write, the right pane is how it renders. Output is also valid HTML you can copy and use.

What we support

• ATX headers (# – ######) and Setext (a line of === / ---).
• Bold (**…**), italic (*…*), both (***…***).
• Inline code (`…`) and fenced code blocks (```).
• Links [text](url) and images ![alt](url).
• Bulleted and ordered lists with two-level nesting.
• Blockquotes.
• Horizontal rules.
• Tables with :— / -----: alignment markers.

What we don’t

• HTML inside Markdown is escaped to text — you can’t use raw <div> blocks. If you need richer formatting, look for an editor with live HTML input.
• Reference-style links ([text][id]) — not implemented.
• Footnotes, definition lists, MathJax — also out of scope.

About safety

Raw HTML is escaped on the way in — so an <script> tag you paste into the editor renders as visible text, not as a script. The output is your Markdown converted to inert HTML.

Use cases

• Draft a blog post or README live, then export the HTML.
• Verify a Markdown email renders correctly before pasting into your campaign tool.
• Sanity-check how a GitHub discussion will look before posting.

Privacy

Pure browser-side rendering. Nothing is uploaded.

Common use cases

• Drafting READMEs and docs. Write documentation and watch it render live before committing, so heading levels, lists, and tables look right on the first push instead of after a round-trip to the repository host.
• Composing issues and pull requests. Draft GitHub-style descriptions with tables and code fences offline, then paste the source once it reads well.
• Converting notes to HTML. Turn meeting notes or blog drafts into clean markup and copy the generated HTML straight into a CMS or email template.
• Learning Markdown. Type a construct on the left and see the exact HTML it produces on the right, which is the fastest way to internalize how emphasis, lists, and tables map to tags.
• Checking untrusted content safely. Paste Markdown from an unknown source and inspect the rendered result; because raw HTML is escaped, embedded scripts cannot execute in the preview.

How to use

1. Type or paste Markdown into the left editor. The preview on the right re-renders on every keystroke — no button press needed.
2. Click Sample to load a demo document covering headings, bold and italic text, links, inline code, a fenced code block, a blockquote, an aligned table, and nested lists.
3. Use the MD button above the preview to copy your Markdown source, or the HTML button to copy the rendered markup.
4. Click Export HTML to download a standalone .html file containing the rendered document.
5. Use Clear to empty the editor. The line at the bottom reports the character count of your input and the number of HTML elements produced.

Tips and pitfalls

Markdown is a family of dialects, not one specification. This renderer supports a practical subset: ATX and Setext headings, bold and italic emphasis, inline code, fenced code blocks (with backticks or tildes), links and images, ordered and unordered lists, blockquotes, horizontal rules, and pipe tables with alignment colons. Tables are a GitHub Flavored Markdown extension — core CommonMark does not include them — while other GFM extras such as strikethrough, task-list checkboxes, and footnotes are not implemented here and will show as plain text. If a document targets GitHub specifically, preview those extensions on GitHub itself.

Raw HTML is deliberately escaped rather than rendered. That is a security choice: it prevents injected markup or scripts from executing in your browser (cross-site scripting), at the cost of not supporting embedded div or iframe tricks that some renderers allow. Similarly, code fences get no syntax highlighting — the language tag is kept as a CSS class like lang-ts, but the code itself stays monochrome.

A few details of this renderer are worth knowing. Emphasis with underscores only applies at word boundaries, so identifiers like snake_case_names stay literal instead of turning italic mid-word. Links open in a new tab with rel set to noopener noreferrer, and CRLF line endings from Windows editors are normalized before parsing. Paragraphs are formed by joining consecutive lines, so insert a blank line where you want a hard break between blocks.

FAQ

Which Markdown syntax does this preview support?

It supports ATX and Setext headings, bold and italic emphasis, inline code, fenced code blocks with an optional language tag, links and images, ordered and unordered lists, blockquotes, horizontal rules, and pipe tables with left, right, and center alignment.

Why is my raw HTML not rendering in the preview?

By design. The renderer escapes all raw HTML instead of passing it through, which prevents injected markup or scripts from executing in the page (an XSS safeguard). Tags appear as visible text rather than being interpreted.

Does the tool apply syntax highlighting to code blocks?

No. Fenced code blocks are rendered as preformatted text, and the language tag is preserved as a CSS class such as lang-ts on the code element. No highlighting library is applied, so code appears monochrome.

Is my document sent to a server for rendering?

No. Conversion from Markdown to HTML runs entirely in your browser with a local renderer. Nothing is uploaded, so drafting confidential documentation or unreleased release notes here is safe.

What does the Export HTML button download?

It downloads a standalone .html file containing the rendered markup of your current document, wrapped in a minimal HTML document shell with a UTF-8 charset declaration. The file opens directly in any browser.

Why do strikethrough or task lists from GitHub not render here?

Those are GitHub Flavored Markdown extensions outside the subset this renderer implements. Pipe tables are supported, but strikethrough, task list checkboxes, footnotes, and autolinked bare URLs are not, and will appear as plain text.