mintlify · mintlify · Aug 28, 2026 · Aug 28, 2026
diff --git a/components/index.mdx b/components/index.mdx
@@ -80,6 +80,10 @@ Mintlify provides built-in MDX components for your documentation pages. Use thes
   Conditionally show content based on context.
 </Card>
 
+<Card title="MDX" icon="braces" href="/components/mdx">
+  Render Markdown inside JSX expressions and conditionals.
+</Card>
+
 <Card title="Visibility" icon="eye-off" href="/components/visibility">
   Control content shown to humans versus AI agents.
 </Card>

diff --git a/components/mdx.mdx b/components/mdx.mdx
@@ -0,0 +1,62 @@
+---
+title: "MDX"
+description: "Use the MDX component to render Markdown inside JSX expressions and conditionals so headings, code blocks, and tables compile like the rest of your page."
+keywords: ["MDX component", "conditional content", "markdown in JSX", "expressions", "ternary"]
+boost: 3
+---
+
+Use the `<MDX>` component to render its children as MDX. Content between the tags compiles like the rest of your page: headings, code fences, tables, and other components all work.
+
+The component is most useful inside `{...}` expressions. Markdown inside an expression normally renders as plain JSX text. Wrap it in `<MDX>` to keep full Markdown rendering while conditionally showing content.
+
+## Example
+
+Show different Markdown sections based on an exported variable:
+
+````mdx 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:
+
+```mdx 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.
+
+<Note>
+  Headings inside `<MDX>` do not appear in the page's table of contents.
+</Note>
+
+## 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.
diff --git a/docs.json b/docs.json
@@ -93,6 +93,7 @@
                       "components/frames",
                       "components/github",
                       "components/icons",
+                      "components/mdx",
                       "components/mermaid-diagrams",
                       "components/panel",
                       "components/prompt",

diff --git a/es.json b/es.json
@@ -71,6 +71,7 @@
                 "es/components/frames",
                 "es/components/github",
                 "es/components/icons",
+                "es/components/mdx",
                 "es/components/mermaid-diagrams",
                 "es/components/panel",
                 "es/components/prompt",

diff --git a/es/components/index.mdx b/es/components/index.mdx
@@ -84,6 +84,10 @@ Mintlify proporciona componentes MDX integrados para tus páginas de documentaci
   Mostrar contenido de forma condicional según el contexto.
 </Card>
 
+<Card title="MDX" icon="braces" href="/es/components/mdx">
+  Renderiza Markdown dentro de expresiones y condicionales JSX.
+</Card>
+
 <Card title="Visibility" icon="eye-off" href="/es/components/visibility">
   Controla el contenido mostrado a humanos frente a agentes de IA.
 </Card>

diff --git a/es/components/mdx.mdx b/es/components/mdx.mdx
@@ -0,0 +1,66 @@
+---
+title: "MDX"
+description: "Usa el componente MDX para renderizar Markdown dentro de expresiones y condicionales JSX, de modo que encabezados, bloques de código y tablas se compilen como el resto de tu página."
+keywords: ["MDX component", "conditional content", "markdown in JSX", "expressions", "ternary"]
+boost: 3
+---
+
+Usa el componente `<MDX>` para renderizar sus elementos hijos como MDX. El contenido entre las etiquetas se compila como el resto de tu página: encabezados, bloques de código, tablas y otros componentes funcionan.
+
+El componente es más útil dentro de expresiones `{...}`. El Markdown dentro de una expresión normalmente se renderiza como texto JSX sin formato. Envuélvelo en `<MDX>` para mantener el renderizado completo de Markdown mientras muestras contenido de forma condicional.
+
+<div id="example">
+  ## Ejemplo
+</div>
+
+Muestra diferentes secciones de Markdown según una variable exportada:
+
+````mdx 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>
+)}
+````
+
+Solo la rama activa se renderiza en la página.
+
+También puedes usar `<MDX>` en el nivel superior de una página para agrupar una sección de Markdown en un solo elemento:
+
+```mdx Block form
+<MDX>
+
+  # Hello
+
+  This heading and paragraph compile as Markdown.
+</MDX>
+```
+
+Deja una línea en blanco después de la etiqueta de apertura en la forma de bloque para que el contenido se analice como Markdown a nivel de bloque. Dentro de expresiones, `<MDX>` elimina la sangría inicial común de su contenido, por lo que puedes sangrarlo para que coincida con el código circundante.
+
+<Note>
+  Los encabezados dentro de `<MDX>` no aparecen en la tabla de contenido de la página.
+</Note>
+
+<div id="limits">
+  ## Límites
+</div>
+
+- Puedes anidar componentes `<MDX>` hasta 8 niveles de profundidad.
+- Una página puede expandir hasta 500 fragmentos `<MDX>` dentro de expresiones.
+
+Superar cualquiera de los dos límites hace fallar la compilación.
diff --git a/fr.json b/fr.json
@@ -71,6 +71,7 @@
                 "fr/components/frames",
                 "fr/components/github",
                 "fr/components/icons",
+                "fr/components/mdx",
                 "fr/components/mermaid-diagrams",
                 "fr/components/panel",
                 "fr/components/prompt",

diff --git a/fr/components/index.mdx b/fr/components/index.mdx
@@ -84,6 +84,10 @@ Mintlify fournit des composants MDX intégrés pour vos pages de documentation.
   Afficher le contenu de manière conditionnelle, en fonction du contexte.
 </Card>
 
+<Card title="MDX" icon="braces" href="/fr/components/mdx">
+  Affichez du Markdown dans des expressions et conditions JSX.
+</Card>
+
 <Card title="Visibility" icon="eye-off" href="/fr/components/visibility">
   Contrôlez le contenu affiché aux humains par rapport aux agents IA.
 </Card>

diff --git a/fr/components/mdx.mdx b/fr/components/mdx.mdx
@@ -0,0 +1,66 @@
+---
+title: "MDX"
+description: "Utilisez le composant MDX pour afficher du Markdown dans des expressions et conditions JSX, afin que titres, blocs de code et tableaux se compilent comme le reste de votre page."
+keywords: ["MDX component", "conditional content", "markdown in JSX", "expressions", "ternary"]
+boost: 3
+---
+
+Utilisez le composant `<MDX>` pour afficher ses éléments enfants en tant que MDX. Le contenu entre les balises se compile comme le reste de votre page : les titres, les blocs de code, les tableaux et les autres composants fonctionnent tous.
+
+Le composant est particulièrement utile dans les expressions `{...}`. Le Markdown à l'intérieur d'une expression s'affiche normalement comme du texte JSX brut. Enveloppez-le dans `<MDX>` pour conserver le rendu Markdown complet tout en affichant le contenu de manière conditionnelle.
+
+<div id="example">
+  ## Exemple
+</div>
+
+Affichez différentes sections Markdown selon une variable exportée :
+
+````mdx 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>
+)}
+````
+
+Seule la branche active s'affiche sur la page.
+
+Vous pouvez également utiliser `<MDX>` au niveau supérieur d'une page pour regrouper une section Markdown en un seul élément :
+
+```mdx Block form
+<MDX>
+
+  # Hello
+
+  This heading and paragraph compile as Markdown.
+</MDX>
+```
+
+Laissez une ligne vide après la balise ouvrante dans la forme bloc pour que le contenu soit analysé comme du Markdown au niveau bloc. Dans les expressions, `<MDX>` supprime l'indentation initiale commune de son contenu, vous pouvez donc l'indenter pour l'aligner sur le code environnant.
+
+<Note>
+  Les titres à l'intérieur de `<MDX>` n'apparaissent pas dans la table des matières de la page.
+</Note>
+
+<div id="limits">
+  ## Limites
+</div>
+
+- Vous pouvez imbriquer des composants `<MDX>` jusqu'à 8 niveaux de profondeur.
+- Une page peut développer jusqu'à 500 fragments `<MDX>` dans des expressions.
+
+Le dépassement de l'une ou l'autre limite fait échouer la compilation.
diff --git a/zh.json b/zh.json
@@ -71,6 +71,7 @@
                 "zh/components/frames",
                 "zh/components/github",
                 "zh/components/icons",
+                "zh/components/mdx",
                 "zh/components/mermaid-diagrams",
                 "zh/components/panel",
                 "zh/components/prompt",

diff --git a/zh/components/index.mdx b/zh/components/index.mdx
@@ -84,6 +84,10 @@ Mintlify 为你的文档页面提供了内置的 MDX 组件。使用这些组件
   根据上下文有条件地显示内容。
 </Card>
 
+<Card title="MDX" icon="braces" href="/zh/components/mdx">
+  在 JSX 表达式和条件语句中渲染 Markdown。
+</Card>
+
 <Card title="Visibility" icon="eye-off" href="/zh/components/visibility">
   控制向人类和 AI 代理显示的内容。
 </Card>

diff --git a/zh/components/mdx.mdx b/zh/components/mdx.mdx
@@ -0,0 +1,66 @@
+---
+title: "MDX"
+description: "使用 MDX 组件在 JSX 表达式和条件语句中渲染 Markdown，让标题、代码块和表格像页面其余部分一样正常编译，实现条件化内容展示。"
+keywords: ["MDX component", "conditional content", "markdown in JSX", "expressions", "ternary"]
+boost: 3
+---
+
+使用 `<MDX>` 组件将其子内容渲染为 MDX。标签之间的内容会像页面其余部分一样编译：标题、代码块、表格和其他组件均可正常工作。
+
+该组件在 `{...}` 表达式中最为有用。表达式中的 Markdown 通常会渲染为纯 JSX 文本。将其包裹在 `<MDX>` 中，即可在按条件显示内容的同时保留完整的 Markdown 渲染。
+
+<div id="example">
+  ## 示例
+</div>
+
+根据导出的变量显示不同的 Markdown 部分：
+
+````mdx 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>
+)}
+````
+
+页面上只渲染处于活动状态的分支。
+
+你也可以在页面顶层使用 `<MDX>`，将一段 Markdown 内容归组为单个元素：
+
+```mdx Block form
+<MDX>
+
+  # Hello
+
+  This heading and paragraph compile as Markdown.
+</MDX>
+```
+
+在块级形式中，请在开始标签后留一个空行，以便内容按块级 Markdown 解析。在表达式中，`<MDX>` 会去除其内容的公共前导缩进，因此你可以将其缩进以匹配周围的代码。
+
+<Note>
+  `<MDX>` 内的标题不会出现在页面的目录中。
+</Note>
+
+<div id="limits">
+  ## 限制
+</div>
+
+- `<MDX>` 组件最多可嵌套 8 层。
+- 一个页面最多可在表达式中展开 500 个 `<MDX>` 片段。
+
+超过任一限制都会导致构建失败。