⌘ K
escapes JSX braces · preserves fences · optional import stubs

Convert Markdown to MDX

Make plain Markdown safe to drop into an MDX pipeline — escape JSX-significant braces, preserve code fences, and optionally add component import stubs.

Markdown → MDX
Input
149 B
9 lines
Output
151 B
9 lines
Status
ready
live
Ratio
1.01×
out/in
input · markdown
output · mdx
# Hello MDX

React uses \{curly braces\} inside JSX expressions.

```js
const config = { theme: "dark" };
```

You can mix prose with components later.
Quick Start

How to convert Markdown to MDX

Escapes curly braces in prose so MDX doesn't try to parse them as JSX expressions, preserves fenced code blocks verbatim, and (optionally) drops a default import header.

  1. 01

    Paste Markdown

    Doc may include literal braces in prose or code.

    Parsing runs through marked with GFM extensions enabled — tables, task lists, strikethrough, and fenced code blocks all match GitHub’s rendering.

    inputGFMmarkedCommonMarklive
    input · markdownmd · GFM
    use {x}
    loaded · GFMGFM · ready
  2. 02

    Escape braces

    Outside code spans / fences, { and } become \{ \}.

    Soft-break behaviour is configurable: by default a single newline becomes a space (CommonMark), toggle on for chat-style <br> insertion.

    escapesoft-breaksoptionsconfiglive
    fix · optionsmdx · live
    use \{x\}
    options applied · livelive
  3. 03

    Add imports

    Toggle to prepend stub imports for common MDX comps.

    The preview is scoped under a .mde class so its CSS doesn’t bleed into the rest of the page. Output HTML is whitespace-controlled for clean diffs.

    importpreviewscoped CSSrenderstable
    head · renderedmdx · ready
    import { Tabs } ...
    rendered · liverendered
  4. 04

    Drop into MDX

    Save as .mdx and feed your Next.js / Astro pipeline.

    Export covers both raw Markdown and rendered HTML; downloads stream as text/markdown or text/html via Blob + object URL.

    exportclipboard.md.htmlblob
    ✓ · exported.mdx · done
    ✓ mdx
    shipped · ready to shipsuccess
Pro tips

Author Markdown that renders everywhere

GFM is the safe default

GitHub-Flavored Markdown is the de-facto baseline (tables, task lists, strikethrough). CommonMark is stricter but ubiquitous as a fallback.

Soft-break behaviour varies

A single newline is a space in CommonMark, a <br> in GFM. Toggle soft breaks when source matters.

Escape inside code fences

Backticks inside fenced blocks need a longer fence — three becomes four. Use ~~~ if your content has many backticks.

Anchors are slugified

GitHub lowercases, strips punctuation, and joins with hyphens. Duplicate headings get -1, -2 suffixes.

Tables need a header row

The dash row sets alignment (:---, :-:, ---:). Use Table Aligner for diff-friendly columns.

Front matter is YAML

Triple-dash blocks at the top of files are parsed by static-site generators. Use the Front-Matter Validator to catch syntax errors.

Related toolsMD to JSXMD to HTMLEditorMD to PandocFM ValidatorFormatter
Use Cases

When to convert to MDX

Any time prose mentions JSX-like syntax.

Next.js docs

Migrate /docs Markdown to MDX without parse errors. Render path uses marked with GFM extensions enabled (tables, task lists, strikethrough, autolinks), so what you preview matches what GitHub publishes bit-for-bit. Soft-break behaviour is configurable for chat-style vs prose Markdown.

GFM-compliant

Astro content

Author MDX with safe brace escaping. Pairs cleanly with the Markdown Cheatsheet for syntax you can't quite remember — callout blocks, footnotes, definition lists. Output stays diff-friendly so style-only changes don't drown out real edits in PRs.

GitHub-perfect

Component-heavy blogs

Use callouts, tabs, mermaid embeds. Cross-platform safe: anchors, code fences, and tables behave identically on GitHub, GitLab, Bitbucket, and Gitea. Heading-anchor slugs follow GitHub's lowercase-and-hyphenate rules so deep links survive a docs migration.

diff-friendly

Docusaurus migration

Move from Markdown to MDX bundles cleanly. No server roundtrip — perfect for proprietary content you can't paste into a public tool. The full marked + GFM bundle ships with the page, so it works offline once loaded.

render-stable

CI safe-import

Avoid build failures from stray braces. Front matter (YAML / TOML / JSON) passes through unchanged so static-site pipelines (Jekyll, Hugo, Astro, Eleventy) read it correctly. Pair with the Front-Matter Validator to catch syntax errors before deploy.

cross-platform

Component libs

Document components inside live MDX previews. Output is reproducible: identical input always produces identical Markdown, so doc-generation scripts can rely on it for snapshot tests and embedded into release workflows.

SEO-friendly
FAQ

Frequently asked questions

If your source already contains valid {expression} JSX, escaping disables it. Author those parts directly in MDX after conversion.
No — fenced and inline code are passed through unchanged.
Untouched — MDX accepts most HTML directly. Self-close void tags if needed.
Left alone. Use the HTML Stripper if you want them gone.
No. Conversion runs locally in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!