Markdown Preview

A Markdown Preview tool renders Markdown source text as formatted HTML in real time, letting you see exactly how your document will appear when published — before committing to a repository, posting to a CMS, or handing off to a designer. The split view keeps the raw source on the left and the rendered output on the right, updating on every keystroke.

What Markdown Preview Renders

The tool supports the full CommonMark block element set plus GitHub Flavored Markdown (GFM) extensions. Block elements rendered include ATX headings (# through ######) and Setext headings (underline with === or ---), unordered lists (-, *, +), ordered lists (1. and 1)), fenced code blocks (triple backtick or triple tilde with optional language label), indented code blocks, pipe tables with column alignment (:---, :---:, ---:), blockquotes (nested supported), horizontal rules (---, ***, ___), and paragraph breaks. Task lists render - [ ] as an unchecked checkbox and - [x] as a checked checkbox in a GFM-style list. Inline elements include bold (**text** or __text__), italic (*text* or _text_), bold-italic (***text***), strikethrough (~~text~~), inline code (`code`), links ([label](url)), images (), and autolinks (<https://...>). Hard line breaks can be enabled so that every newline becomes a <br> element. An optional safe-HTML mode allows a curated allow-list of inline HTML elements — <details>, <summary>, <kbd>, <mark>, <sub>, <sup>, <br>, <hr> — to pass through the sanitizer unchanged.

Security: Why Sanitization Matters

Raw HTML injected into innerHTML can execute scripts, load external resources, and exfiltrate data. Every Markdown preview tool that renders user input directly — without sanitization — is a potential XSS vector. ToolsSonic's Markdown Preview sanitizes all output before rendering: <script> tags are stripped, event handlers (onclick, onload, onerror, etc.) are removed, javascript: and data: URIs in href and src attributes are blocked, and only the safe allow-list of elements and attributes passes through. The rendered HTML is injected via textContent for the sanitizer pass and then assembled from safe primitives — not from raw innerHTML of untrusted input. This makes the tool safe for previewing documentation pulled from user inputs, external files, or untrusted sources.

Heading Navigation and Document Outline

For long Markdown documents — README files, API guides, knowledge-base articles, project wikis — navigating to a specific section is slow when scrolling through a long preview. The Heading Navigation panel builds a live clickable outline from all H1–H6 headings in the document, indented by level so the hierarchy is visible at a glance. Click any heading in the outline to scroll the preview to that section. The outline updates on every render, so new headings appear immediately as you write. Each heading receives a unique ID (with automatic slug de-duplication for repeated heading text), enabling anchor links in the downloaded HTML to work correctly.

The statistics panel tracks ten metrics in real time: source bytes, line count, word count, heading count, link count, image count, fenced code block count, table count, task item count, and warning count. The diagnostics review panel reports rendering issues such as unclosed fenced code blocks, invalid table syntax, and unusual escape sequences — helping you catch problems before publishing without switching to a separate linter tool.

Common use cases

• Previewing GitHub README files (.md) before pushing a commit, checking heading structure, table rendering, and badge image display
• Drafting and previewing technical documentation for developer portals, API references, and project wikis
• Writing and checking blog post content in Markdown before pasting into Ghost, WordPress, or Hashnode
• Verifying that pipe tables render with correct alignment before submitting to a Markdown-based CMS
• Previewing GFM task lists in project planning documents before sharing in GitHub issues or pull requests
• Checking fenced code block rendering for documentation tutorials before publishing to Read the Docs or GitHub Pages
• Downloading rendered HTML for embedding in email newsletters or static HTML pages without a Markdown runtime

Why use ToolsSonic's Markdown Preview?

ToolsSonic's Markdown Preview renders GitHub Flavored Markdown in your browser with no login, no cloud sync, and no upload. The tool renders on every keystroke with a debounced update so there is no lag even on large files.

vs. Dillinger (dillinger.io): Dillinger is a full Markdown editor with cloud sync to Dropbox, Google Drive, and GitHub. That makes it powerful but also account-dependent — you need to authorise cloud integrations before getting the features most developers actually need from a preview tool. ToolsSonic requires no account and has no sync overhead.

vs. StackEdit (stackedit.io): StackEdit is a feature-complete Markdown editor with offline PWA support and cloud storage. The preview is excellent but the tool is a full writing environment — complex to set up, requires a login for persistence, and heavyweight for a task as simple as "paste Markdown, see HTML". ToolsSonic opens instantly and requires nothing.

vs. Markdown Live Preview (markdownlivepreview.com): Clean and fast, but no heading navigation, no 10-stat panel, no copy-HTML button, no download, no session history, and no dark mode. ToolsSonic adds all of these while matching the speed.

Privacy guarantee: Open DevTools → Network tab. Paste a confidential README or internal documentation. Click anywhere. You will see zero outbound requests. Nothing is uploaded. The tool renders entirely in your browser using vanilla JavaScript with no external dependencies.

Markdown Element Rendering Reference

Markdown Preview vs. Full Markdown Editors