Skip to main content
Markdown

Markdown Live Preview

Write or import Markdown beside a live sanitized preview, toggle rendering while editing, and copy the exact allowed HTML without executing scripts or loading images. Essential for content authors, documentation writers, and developers crafting Markdown with immediate visual feedback.

Markdown tools

In brief

A split Markdown editor uses Marked plus DOMPurify for an on-device preview; raw scripts, forms, styles, images, SVG, embeds, and unsafe links never reach the rendered article.

What this tool supports

  • Provides a CodeMirror Markdown editor with sample reset and local text-file import beside a rendered article preview.
  • Uses Marked with GFM enabled and breaks disabled, so tables and task-list syntax are parsed while ordinary single newlines remain soft breaks.
  • Applies the same restrictive DOMPurify policy that removes active tags, images, inline style/srcset, data attributes, and disallowed URI schemes.
  • Can pause live preview, resume it with Render Preview, report source line count, and copy the sanitized HTML rather than the Markdown source.

How to use Markdown Live Preview

Follow this implementation-specific workflow for Live Safe Markdown Preview; each step reflects the controls and limits in the current browser workspace.

  1. 1

    Step 1

    Provide the exact source

    Write Markdown in the left editor, import a text file, or load the documented sample.

  2. 2

    Step 2

    Choose the operation

    Leave Live on for immediate feedback or switch it off when a large edit should not render on every keystroke.

  3. 3

    Step 3

    Configure the available options

    Press Render Preview to resume sanitized rendering after Live has been disabled.

  4. 4

    Step 4

    Run the local operation

    Compare heading levels, lists, blockquotes, code, tables, and links with the intended document while noting removed raw content.

  5. 5

    Step 5

    Verify and continue

    Copy the generated HTML only after reviewing it, then validate it under the destination’s Markdown/CSS/security rules.

Common mistakes

Using a single newline expecting a hard line break

Consequence: The parser sets breaks:false, so a normal single newline is treated as a soft break unless Markdown syntax requests otherwise.

Fix: Use a blank line for a paragraph or an explicit CommonMark line-break form.

Embedding an image and assuming the browser is broken when it vanishes

Consequence: The sanitizer intentionally forbids img and other network-capable or active tags.

Fix: Treat the preview as text-first; add approved assets later under the destination’s own asset and CSP policy.

Copying the HTML before re-enabling a paused preview

Consequence: When Live is off, htmlOutput is empty until Render Preview turns live rendering on again.

Fix: Press Render Preview, inspect the current source result, and only then use Copy.

Best practices

  • Use a logical heading hierarchy and inspect it visually before publishing.
  • Fence code blocks with a language label for downstream tools, while remembering this preview does not syntax-highlight them.
  • Retain Markdown as source control and treat copied HTML as a generated, re-sanitizable artifact.

Connected workflows

Browser limitations

  • The preview has no collaborative storage, autosaved document, custom renderer, syntax highlighting, PDF export, or network image support.
  • Marked GFM behavior may differ from GitHub, a CMS, or strict CommonMark at extension and raw-HTML edges.
  • Long documents are parsed and sanitized on the main thread whenever live output recalculates, which can delay input on constrained devices.

Authoritative resources

CommonMark Specification 0.31.2Publisher: CommonMark · Reviewed: 2026-07-26Marked documentation and security guidancePublisher: Marked project · Reviewed: 2026-07-26DOMPurify security documentationPublisher: Cure53 · Reviewed: 2026-07-26

Concrete examples

Input
## Status - [x] parsed - [ ] published
Result
The preview shows a level-two heading and two task items; copied output is the sanitized HTML emitted by the installed Marked version.

GFM is enabled, so task-list syntax is recognized. DOMPurify permits the non-interactive generated checkbox markup but removes prohibited active content.

Frequently asked questions

Does the preview execute HTML or JavaScript written in Markdown?

No. Raw HTML passes through DOMPurify, and script, style, form, iframe, SVG, embed, and other dangerous tags are forbidden.

Why is my Markdown table recognized here but not elsewhere?

This parser enables GitHub Flavored Markdown; a destination using strict CommonMark without table extensions can render it differently.

What exactly does Copy return?

It copies the sanitized HTML string currently rendered, not the original Markdown and not the application’s visual CSS.

Can I preview remote images?

No. The Markdown sanitizer forbids img, preventing the preview from making image requests or exposing referrer/network data.

How do I stop a long document from rerendering while typing?

Turn Live off during the edit, then press Render Preview once the source is ready for a new sanitized render.

Privacy and offline behavior

Draft Markdown and generated HTML remain in the browser and are not sent to an application server. File reading and clipboard output occur only after your actions; after assets are cached the editor and sanitizer work offline.