MDX

Use the <MDX> component to render content between the tags as MDX that compiles like the rest of your page. This is useful when you want to put headings, code fences, tables, and other components inside of a JSX component.

Example

Show different Markdown sections based on an exported variable:

Conditional Markdown

export const platform = "ios";

{platform === "ios" ? (
  <MDX>
    ## Install on iOS

    Download the SDK, then run:

    ```bash
    pod install
    ```
  </MDX>
) : (
  <MDX>
    ## Install on Android

    Add the SDK to your Gradle dependencies.
  </MDX>
)}

Only the active branch renders on the page. You can also use <MDX> at the top level of a page to group a Markdown section into a single element:

Block form

<MDX>

  # Hello

  This heading and paragraph compile as Markdown.
</MDX>

Leave a blank line after the opening tag in block form so the content parses as block-level Markdown. Inside expressions, <MDX> strips the common leading indentation from its content, so you can indent it to match the surrounding code.

Headings inside <MDX> do not appear in the page’s table of contents.

Limits

You can nest <MDX> components up to 8 levels deep.
A page can expand up to 500 <MDX> fragments inside expressions.

Exceeding either limit fails the build.

Get started

Create content

Manage your site

Agent

Assistant

Agent-ready content

Search and SEO

Document APIs

Integrations

Reference

Example

Limits

​Example

​Limits

Example

Limits