🛠️Dev Toolbox

📖 Markdown Previewer

Preview Markdown with live rendering, export to HTML, and switch between formatting flavors.

Hello World

This is bold and this is italic.

  • Item one
  • Item two
  • Item three

inline code and:

const x = 1;

> A quote

Visit Link

You wrote what you thought was a bulleted list on GitHub, pushed, and the rendered page shows a single long line with asterisks floating in it. Surprise: blank lines matter in Markdown too.

This is a split-pane Markdown editor. Left side: whatever you are typing. Right side: rendered HTML that updates on every keystroke. Three parsing flavors are selectable -- CommonMark (the safe baseline), GFM (what GitHub actually renders, with tables, strikethrough, task lists, and URL auto-linking), and Markdown Extra / MultiMarkdown flavors if you need footnotes, definition lists, and abbreviations.

The most valuable feature is not the preview -- it is the dialect-mismatch warning. Paste a table written for GFM and switch the parser to CommonMark. The right pane instantly becomes a flat line of pipe characters. That visual shock teaches you more about which Markdown is which than any spec doc.

A few other behaviors that will save you a headache:

  • HTML passthrough. Markdown lets you embed raw HTML. This previewer does too -- <div align="center">, <details>, <abbr> all work. If your target platform is GitHub, remember it strips style=, onload=, <script>, <iframe>, and some SVG attributes. This tool does not strip them so you can see what the parser intended. Always eyeball the target platform's sanitizer before shipping.

  • Math ($...$ inline, $$...$$ block) is selectable via a toggle. KaTeX renders it. If you use bare $ for prices (e.g. "it costs $5 to ship"), disable math mode.

  • Mermaid diagrams are supported under GFM. Fenced mermaid blocks become flowcharts, sequence diagrams, and Gantt charts. Mermaid syntax errors produce a visible error block instead of failing silently -- that alone is worth the price of admission.

  • Task lists (- [x] Done, - [ ] Todo) render as checkboxes in GFM mode. In CommonMark they stay as literal [x] and [ ] strings, because that spec does not define them.

  • Table of contents is auto-generated from ##-level headings. Skipping a level (jumping from ## to ####) breaks the nesting -- the editor flags that.

Export options: raw Markdown, rendered HTML, HTML with embedded GitHub-like CSS for pasting into a CMS, plain text with markup stripped (for word-count sanity), and browser Print-to-PDF for hard copies.

If you are maintaining a docs site, writing a CONTRIBUTING.md, or drafting a blog post, this catches parser-specific gotchas before they land on a real commit.

More Developer Tools

Explore our complete collection of 60+ free developer tools at dev.aisoosoo.com. All tools run 100% in your browser — no signup, no data sent to servers.