Markdown Preview
Write or paste Markdown and see a live HTML preview with auto TOC, sync scroll, and HTML export.
Advanced — TOC on · Sync scroll · Lint off
What is Markdown Preview?
Markdown Preview is an online tool that renders Markdown as HTML in real time. Type or paste Markdown in one panel and see the formatted output instantly in the other. Markdown uses simple syntax — # for headings, **bold**, *italic*, `code`, and [links](url) — so you can write content without learning HTML. The preview updates as you type, so you always see how your document will look.
The tool supports headings (H1–H6), bold, italic, inline code, code blocks, links, images, ordered and unordered lists, blockquotes, horizontal rules, and tables. Enable Auto Table of Contents to generate a clickable TOC from your headings. Sync scroll keeps the editor and preview aligned as you scroll. Lint hints detect formatting issues like unclosed code blocks or malformed links. A stats bar shows word count, heading count, and reading-time estimates.
Use it to draft README files, blog posts, documentation, or any content that will be published as HTML. The tool runs entirely in your browser; your content is never uploaded or stored.
How to Use Markdown Preview
- Type or paste Markdown into the left panel (editor).
- The right panel shows a live HTML preview that updates as you type.
- Open Advanced to toggle Auto Table of Contents, sync scroll, and lint hints.
- Use the stats bar to check word count, headings, and element count.
- Click Copy HTML to export the rendered HTML (or press Ctrl+Shift+C). A warning appears if the output contains potentially unsafe tags.
Tips & Best Practices
Enable Show lint hints when editing long documents — it catches unclosed code blocks (missing ```), heading levels beyond H6, and malformed links. Use the auto-generated TOC for quick navigation in long docs; headings get anchor IDs based on their text. Sync scroll is helpful when the preview is long — scrolling the editor scrolls the preview proportionally.
For code blocks, use fenced syntax with optional language tags: ```javascript. Tables require a header row and a separator row with ---. If you paste raw HTML into Markdown, the tool will render it; use Copy HTML with caution and review for unsafe tags. For word counting in the final output, pair with the Word Counter. For generating slugs from headings, use the Slug Generator.
When to Use This Tool
Use Markdown Preview when drafting README files, blog posts, or documentation; previewing how Markdown renders before publishing; generating HTML from Markdown for export; or learning Markdown syntax with instant feedback. For creating URL slugs from headings, try the Slug Generator. For comparing Markdown versions, use Diff / Text Compare. For SEO meta tags and snippets, see the Meta Tag Generator and SERP Snippet Preview.
Frequently Asked Questions
What is Markdown?
Markdown is a lightweight markup language that uses plain text with simple syntax (like # for headings, ** for bold) to create formatted content.
Does the preview update in real time?
Yes. As you type or paste in the editor, the preview panel shows the rendered HTML instantly.
What is the Table of Contents feature?
When enabled, the tool automatically generates a clickable Table of Contents from your headings (H1-H6) and inserts it at the top of the preview.
Can I copy the HTML output?
Yes. Click Copy HTML to copy the rendered HTML to your clipboard. A sanitize warning appears if the output contains raw HTML tags.
What Markdown features are supported?
The tool supports headings, bold, italic, code blocks, inline code, links, images, lists (ordered and unordered), blockquotes, horizontal rules, and tables.
Is my Markdown sent to a server?
No. Parsing and preview run entirely in your browser. Your content is never uploaded. For word counting, try our Word Counter.