Markdown Previewer

Type on the left, watch HTML render on the right. The previewer speaks GitHub-Flavored Markdown: tables, task lists, fenced code blocks with syntax highlighting, strikethrough, autolinked URLs and inline HTML. Useful for drafting a README before committing, checking how a comment will look on a PR, or just learning Markdown syntax by watching each keystroke render.

How to use the previewer

  1. 1

    Write Markdown

    Left pane takes raw Markdown. Every change re-renders the right pane instantly.

  2. 2

    Watch the HTML preview

    The right pane shows the rendered output styled like GitHub.

  3. 3

    Toggle mode

    Side-by-side view, preview-only, or source-only for distraction-free writing.

  4. 4

    Copy the HTML

    Grab the rendered HTML if you need to paste it into an email client or CMS.

What this previewer supports

  • CommonMark: headings, paragraphs, emphasis, lists, blockquotes, code blocks, links, images, horizontal rules.
  • GFM extensions: tables with column alignment, task lists (- [ ] and - [x]), strikethrough with ~~, autolinked URLs and fenced code blocks with language hints.
  • Syntax highlighting: 100+ languages via highlight.js, JavaScript, Python, Go, Rust, SQL, YAML, etc.
  • Raw HTML: inline HTML is passed through (sanitized for safety).
  • Math (optional): $...$ inline and $$...$$ block if you enable the math extension.

Not supported

  • Custom Obsidian-style wikilinks ([[Page]]), those are Obsidian-only.
  • Pandoc fenced divs (:::), Pandoc-only.
  • Server-side includes or {% ... %} template tags.

Typical uses

  • Draft a README outside the IDE and paste the final version.
  • Check PR comment formatting before posting, GitHub’s comment box doesn’t preview code fences properly.
  • Convert notes into HTML when you need to paste styled content into email or a CMS that accepts raw HTML.
  • Teach Markdown, the side-by-side view makes syntax obvious.

Performance

Rendering uses a Markdown-it parser with the GFM plugin, running entirely in the browser. Documents of a few hundred KB render in milliseconds; very large ones (a full book in a single file) may stutter as you type, break them into chapters if that happens.

Exporting

  • Copy HTML gets you the <div> with the rendered content, styled classes included.
  • Download .md saves the source.
  • Print to PDF from your browser’s print dialog produces a styled PDF copy of the rendered view.

Frequently Asked Questions

GitHub applies its own CSS on top of GFM. The HTML output should match; the styling (fonts, spacing) is theirs. For exact parity, use the “rendered on GitHub” theme toggle.

Yes if you enable the math extension, inline $...$ and block $$...$$ render with KaTeX. It’s off by default to keep page weight low.

It’s sanitized, safe tags like <div>, <span>, <table>, <img> pass through; <script> and inline event handlers are removed.

Hundreds of KB work smoothly. For very large files, turn off live rendering and render on demand.

Rendering is entirely client-side. Content isn’t sent anywhere. If you refresh the page, drafts are lost unless the browser preserves form state.

Related Tools

Tool available in other languages