MDX Preview
Open an .mdx file and read it as a page. The Markdown renders, and each JSX component, such as a <Callout>, <Tabs>, or <Card />, shows as a labeled box with its props and its content. Edit the text in the Preview, and the imports and components keep their source.
Components as boxes, not live React
Prettify does not have your component code, so it does not render your real components. Instead each component shows as a box labeled with its name, with its props listed and its children rendered inside. This is enough to check the structure of a docs page: which content sits in which tab, card, or callout.
Components with callout-like names, such as Callout, Note, Tip, Warning, and Danger, get a callout color. On those components, a type or variant prop such as type="warning" picks the color.
Edit MDX without breaking it
The Preview keeps your text exactly. When it cannot do that for a file, it opens read-only with a notice, and you edit in the Raw view, which highlights the MDX source.
Prettier formats the Markdown parts when you open a file. If formatting would change how MDX 3 reads the file, Prettify keeps it as written. Frontmatter shows as a Properties card that you edit field by field.
Open any .mdx file
Open .mdx files by paste, file picker, or drag and drop, or from Finder in the macOS app. Any file size opens in the Preview: up to 200 KB it is editable, and a larger file shows a read-only Preview that loads as you scroll.
Frequently asked questions
Does the MDX preview render my real components?
No. Prettify does not have your component code, so each component shows as a labeled box with its props and its content. Your Markdown renders as normal.
Can I edit MDX in the preview?
Yes. The Preview is an editor, and the imports, exports, and components keep their source text. A file the Preview cannot keep exactly opens read-only, and you edit it in the Raw view.
Is the MDX preview free?
Yes. The Preview, component boxes, the Raw view, Prettier formatting, and the Properties card are free. Pro, a one-time purchase, adds Side by side, the Outline, Mermaid diagrams, and export.
Which files can I open?
Files with the .mdx extension, by paste, file picker, or drag and drop. The macOS app also opens them from Finder. Markdown files (.md and .markdown) open in the same Preview.
Is my file uploaded to a server?
No. Parsing and rendering run in your browser, and your MDX stays on your device.