---
title: "MDX Editor: Format and Preview Components | Prettify Docs"
description: Format MDX with Prettier and preview JSX components as labeled
  boxes. Imports, exports, and expressions stay as written. Free in Prettify.
url: https://prettify.tools/docs/mdx
---

[Docs](https://prettify.tools/docs) / Formats

# MDX

Last updated: October 16, 2026

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](https://prettify.tools/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:

```mdx
<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](https://prettify.tools/docs/markdown) for how each one works, and [Pro](https://prettify.tools/docs/pro) for the full list.

## Related

- [Markdown](https://prettify.tools/docs/markdown) covers the shared editor in full.
- Tool pages: [MDX Formatter](https://prettify.tools/mdx-formatter), [MDX Preview](https://prettify.tools/mdx-preview).

## Try it online

Tool pages for this topic. Each one runs in your browser.

- [MDX Formatter](https://prettify.tools/mdx-formatter)
- [MDX Preview](https://prettify.tools/mdx-preview)

* [PreviousMarkdown](https://prettify.tools/docs/markdown)
* [Next HTML](https://prettify.tools/docs/html)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Prettify",
  "url": "https://prettify.tools",
  "description": "Multi-format data viewer, editor, and query engine for JSON, YAML, CSV, XML, Mermaid, Markdown, MDX, HTML, and SVG",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Web, macOS, Windows, Linux",
  "offers": [
    {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD",
      "description": "Free tier with core features"
    },
    {
      "@type": "Offer",
      "price": "19.99",
      "priceCurrency": "USD",
      "description": "Pro: lifetime access to all features"
    }
  ],
  "publisher": {
    "@id": "https://prettify.tools/#organization"
  }
}
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "https://prettify.tools/#organization",
  "name": "Prettify",
  "legalName": "Off Leash Labs",
  "url": "https://prettify.tools/",
  "logo": {
    "@type": "ImageObject",
    "url": "https://prettify.tools/icon-512.png",
    "width": 512,
    "height": 512
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "customer support",
    "email": "offleashlabs@gmail.com",
    "availableLanguage": "English"
  }
}
```