# MDX (/es/components/mdx)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 672 · updated: 2026-09-23 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md)

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 [#ejemplo]
</div>

Muestra diferentes secciones de Markdown según una variable exportada:

````mdx title="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 title="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>` se fusionan en la tabla de contenido de la página en el orden del documento. Esto incluye los encabezados de ramas que nunca se renderizan, como el lado inactivo de un condicional.
</Note>

<div id="code-in-fragments">
  ## Código en fragmentos [#código-en-fragmentos]
</div>

Los bloques de código y el código en línea dentro de `<MDX>` se compilan como el código en la raíz de la página. Los caracteres `<`, `>`, `{` y `}` sin escapar funcionan:

````mdx title="Placeholders in fragment code"
{platform === "linux" && (
  <MDX>
    Clone the repository into `<project-root>`:

    ```bash
    git clone <repository-url> <project-root>
    ```
  </MDX>
)}
````

Las referencias de caracteres en el código de un fragmento se decodifican a sus caracteres, igual que el código en el resto de la página. `&lt;` se renderiza como `<`. Para renderizar un `&lt;` literal, escribe `&amp;lt;`.

<div id="limits">
  ## Límites [#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.