Overview

MDX brings the power of interactive components to your documentation by combining the simplicity of Markdown with the flexibility of JSX. This powerful combination allows you to create rich, dynamic content that engages your users and makes complex concepts easier to understand.

What is MDX?

MDX is a format that lets you seamlessly write JSX (React components) within your Markdown content. It extends traditional Markdown by enabling you to:

• Import and use React components in your documentation
• Create interactive documentation elements
• Build reusable content components
• Enhance your docs with dynamic features

Why Use MDX?

Enhanced Creativity

• Add interactive components to explain complex concepts
• Create custom behaviors for your documentation
• Build dynamic examples and demonstrations

Improved Reusability

• Write components once, use them throughout your docs
• Maintain consistency across your documentation
• Update shared components in one place

Future-Proof Documentation

• Scale your documentation with your product
• Add new interactive features as needed
• Maintain modern, dynamic documentation

Built-in MDX Components

ReadMe provides several powerful MDX components out of the box:

Tabs

Organize related content into easily navigable sections:

Tabs Example

---

Accordion

Present information in collapsible sections:

Accordion Example

My Accordion Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Excepteur sint occaecat cupidatat non proident!

---

Cards

Display content in a clean, grid-like format:

Cards Example

---

Columns

Creates a multi-column layout where content is displayed side-by-side rather than stacked vertically.

---

Getting Started

MDX works alongside your existing Markdown content, so you can:

• Continue using familiar Markdown syntax.
• Gradually incorporate MDX components.
• Mix Markdown, HTML, and JSX as needed.

Ready to transform your documentation from static text into dynamic, interactive experiences? Check out our detailed guides:

• Using MDX – Dive into practical examples that show MDX in action and walk through implementation steps that will have you building interactive docs in no time.
• Building Custom MDX Components – Create reusable components that make your documentation more engaging and consistent across your entire developer hub.
• Troubleshooting MDX Rendering – Quickly resolve common rendering challenges and ensure your interactive elements display perfectly every time.