MDX

MDX is Markdown with JSX components, imports, and exports. Prettify formats MDX and shows a Preview where components appear as labeled boxes. Formatting and the Preview are free. MDX uses the same editor as Markdown, so the Markdown Pro tools apply to MDX too.

This page is for developers who write MDX for documentation sites and blogs.

Open MDX

Open a .mdx file, or pick MDX in the format list in the editor at /app/editor. Prettify parses the document as MDX, so JSX and ESM are read, not treated as plain text.

Preview: components as boxes

In the Preview, a JSX flow element that fills its own paragraph shows as a component box. The box has a header with the component name and its props, and the children render as Markdown below.

This source shows as a box:

<Callout type="warning">
  Read this first.
</Callout>

Inline JSX inside running text keeps its source look. The box does not change the document: the MDX that Prettify writes and copies is the same as the source.

What stays as written

Prettify keeps the MDX code intact.

• Imports and exports (ESM) stay as written and show as source.
• Expressions in braces stay as written.
• Inline JSX stays as source.

Only a component that stands alone in its own paragraph renders as a box.

Formatting

Prettify formats MDX with Prettier's MDX parser. The Preview is read-only in two MDX cases:

• The MDX has a syntax error. Fix it in the Raw or source view, and the Preview returns.
• Prettier cannot format the MDX without changing it.

When the Preview is read-only, edit the document in the Raw view.

Pro tools

MDX shares the Markdown editor, so the same Pro tools apply:

• Both (source and Preview side by side).
• Outline of headings.
• Mermaid diagrams in the Preview.
• Export to HTML and PDF (PDF on web only).

Each is a Pro feature with one free try per day. See Markdown for how each one works, and Pro for the full list.

Related

• Markdown covers the shared editor in full.
• Tool pages: MDX Formatter, MDX Preview.