Overview
Introduction
It's hard to know exactly how a piece of Markdown will look, whether a table's columns line up, whether a nested list indents correctly, without actually rendering it somewhere.
This gives you that rendered view immediately, side by side with the source, without needing to paste it into a README, PR description, or CMS first just to check.
What Is Markdown Preview?
A live-updating Markdown editor: type in the left panel, see the rendered HTML in the right panel, no separate render step or upload.
Unlike the Markdown to HTML converter, which shows you raw HTML source, this actually renders that HTML visually, so it goes through an additional sanitization step first.
How Markdown Preview Works
Your Markdown is parsed to HTML with `marked` on every change, then sanitized with DOMPurify before being inserted into the page, stripping anything like an embedded <script> tag that would otherwise execute.
Both steps run entirely in your browser after the page loads; nothing you type is sent anywhere.
When To Use Markdown Preview
Use it while drafting a README, PR description, or any Markdown you want to sanity-check before publishing somewhere with its own render step.
It's also useful for quickly checking how a GFM table or task list will actually line up before committing to that syntax.
Often used alongside Markdown to HTML Converter, Markdown Formatter & Pretty Printer and Markdown Validator.
Features
Advantages
- Updates live, with no separate render button or step.
- Sanitizes rendered HTML before displaying it, unlike simply piping raw parser output into the page.
- Runs entirely client-side with no upload required.
Limitations
- Rendering uses this site's own typography and spacing, which may look slightly different from your eventual target (GitHub, a specific CMS, a static site theme).
- Sanitization strips anything DOMPurify considers unsafe, including some legitimate but uncommon inline HTML you may have intentionally included.
Examples
Best Practices & Notes
Best Practices
- Use this to sanity-check structure and formatting, not as a pixel-perfect preview of your final destination's exact styling.
- Switch to Markdown to HTML if you need the HTML source itself, rather than just a visual check.
- Run Markdown Validator alongside this if you also want structural issues flagged, not just a visual render.
Developer Notes
The sanitize step only runs client-side, inside a `useEffect`, never during the initial render. `DOMPurify.sanitize()` requires a real `window`, which doesn't exist during Next.js's server-side render of this "use client" component, so computing it eagerly (in `useMemo`, which does run during SSR) would throw. Deferring it to an effect matches how this site handles other browser-only work, like the YAML to Image tool's canvas rendering.
Markdown Preview Use Cases
- Sanity-checking a README or PR description before publishing it
- Checking that a GFM table or task list renders the way you expect
- Previewing Markdown pasted from another source before using it somewhere
Common Mistakes
- Treating this as a pixel-perfect preview of a specific destination's exact rendering, when spacing and typography will vary by target.
- Expecting inline <script> or event-handler attributes in your Markdown's raw HTML to survive, they're intentionally stripped by sanitization.
Tips
- If something looks wrong in the preview, check Markdown to HTML for the raw output; sanitization only removes unsafe content, not formatting.
- Use Markdown Validator alongside this for a structural check, not just a visual one.