How is this different from the Markdown to PDF tool?

Markdown to PDF is a single rendered preview with a print button. This tool adds a second view, the raw HTML source your Markdown compiles to, that you can inspect, copy, or download independently of printing, plus it's framed as a live editor workspace rather than a one-shot converter. If you only ever want the print/PDF path, Markdown to PDF is the more direct tool; use this one when you also want to see or grab the underlying HTML.

Does switching to the HTML source tab change what gets printed?

No. Print / Save as PDF always prints the rendered preview, not the HTML source text, so switching tabs to inspect the HTML never accidentally changes what ends up in the PDF. The print button is only enabled while the rendered preview tab is active.

Is the rendered HTML sanitized before it's shown or printed?

Yes, the rendered preview runs through DOMPurify before it's inserted into the page, the same as Markdown Preview and Markdown to PDF. The HTML source tab shows the unsanitized HTML the Markdown parser produced, though, since that's meant for inspecting the raw conversion output, not for re-rendering elsewhere unsanitized.

Markdown Live Editor & PDF Exporter - Preview, View HTML, Print

Overview

Introduction

Writing Markdown and needing to check both how it looks and what HTML it actually produces are two different tasks that usually mean two different tools, a preview and a converter. This combines them into one editing workspace.

It exists for the times a plain print-to-PDF preview isn't quite enough, when you also want to grab the generated HTML to paste into a CMS, email template, or another tool, without leaving the page you're editing in.

What Is Markdown Live Editor & PDF Exporter?

A live, split-pane Markdown editor: a Markdown source panel on the left, and on the right a toggle between a sanitized rendered HTML preview and the raw HTML source text that preview is built from.

It layers a one-click browser print-to-PDF export on top of the rendered preview, using the same real-text (not rasterized-image) PDF approach as this category's dedicated Markdown to PDF tool.

How Markdown Live Editor & PDF Exporter Works

Markdown is parsed to HTML with the same `marked`-based converter this category's Markdown to HTML tool uses, recalculated on every keystroke.

The rendered preview sanitizes that HTML with DOMPurify before inserting it into the page (client-side only, since DOMPurify needs a real browser `window`); the HTML source tab shows the unsanitized HTML text directly, for copying or downloading.

Print / Save as PDF calls the browser's native `window.print()`, scoped via a print media query to just the rendered preview element, and is only enabled while that tab is the active view.

When To Use Markdown Live Editor & PDF Exporter

Use it when you're actively drafting Markdown and want to check both its rendered appearance and its generated HTML without switching tools.

It's also useful when the end goal is a PDF, but you also want the HTML as a secondary artifact, for a CMS paste or an email template, from the same editing session.

Often used alongside Markdown to PDF Converter, Markdown to HTML Converter and Markdown Preview.

Features

Advantages

One workspace for three outputs: a live rendered preview, copyable/downloadable HTML source, and a printable PDF.
PDF export produces real, selectable text via the browser's native print engine, not a rasterized screenshot.
Runs entirely client-side; nothing typed into the editor is uploaded anywhere.

Limitations

The rendered preview's exact typography and page breaks in the printed PDF depend on your browser's print engine, and can differ slightly between Chrome, Firefox, and Safari.
The HTML source shown is unsanitized (it's the parser's raw output, meant for inspection/copying); sanitize it yourself before re-rendering it elsewhere with something like `dangerouslySetInnerHTML`.

Examples

A short document in both preview modes

Input

# Report

Some **findings** go here.

- Point one
- Point two

Output

Rendered preview: a styled heading, bold text, and a bullet list. HTML source: <h1>Report</h1>\n<p>Some <strong>findings</strong> go here.</p>\n<ul>\n<li>Point one</li>\n<li>Point two</li>\n</ul>

The same Markdown drives both preview modes; only the display, not the underlying conversion, differs between them.

Best Practices & Notes

Best Practices

Check the HTML source tab before pasting output into a CMS that expects clean HTML, since it reflects exactly what the parser produced, including any inline HTML you wrote yourself.
Switch to the Rendered preview tab before clicking Print, the print button intentionally stays disabled on the HTML source tab.
Review the print preview's page breaks before saving as PDF, especially for documents with large tables or code blocks.

Developer Notes

Both preview modes share one `useMemo(() => convertMarkdownToHtml(input), [input])` call, so there's a single source of truth for the generated HTML; the rendered tab additionally runs it through `DOMPurify.sanitize()` behind a `useHasMounted()` gate (DOMPurify needs a real `window`, unavailable during this client component's initial server-rendered pass), while the HTML source tab renders the unsanitized string as plain text in a `TextOutputPanel`.

Markdown Live Editor & PDF Exporter Use Cases

Drafting a Markdown report while checking both its visual rendering and generated HTML
Producing a PDF from Markdown notes and also grabbing the HTML for a secondary use, like an email template
Debugging why a piece of Markdown renders unexpectedly, by inspecting the exact HTML it compiles to

Common Mistakes

Expecting the Print button to work from the HTML source tab; it's scoped to the rendered preview and stays disabled until that tab is active.
Pasting the HTML source output directly into another page's `dangerouslySetInnerHTML` without sanitizing it first, since it's the parser's raw, unsanitized output.

Tips

Use the HTML source tab to quickly verify GFM extensions like tables or task lists compiled the way you expected.
If a code block splits awkwardly across a page break in the print preview, a small print-scale adjustment in the browser's print dialog often fixes it.

Markdown Live Editor & PDF Exporter