MDX es una extensión de Markdown que permite incluir componentes de React, Vue, Svelte y otros frameworks dentro de archivos Markdown. Esto significa que puedes escribir contenido estático en Markdown y, al mismo tiempo, incorporar componentes interactivos o dinámicos.

Aunque MDX se popularizó inicialmente en entornos como Astro, Next.js o Gatsby, no está limitado a estos frameworks. Hoy, en 2025, sigue siendo relevante para proyectos que necesitan documentación interactiva, blogs técnicos, tutoriales o contenido educativo donde se mezclan texto y componentes dinámicos.

¿Por qué usar MDX?

• Permite combinar la simplicidad de Markdown con la potencia de componentes interactivos.
• Facilita la migración de contenido Markdown estático a contenido dinámico sin reescribir todo desde cero.
• Es compatible con entornos modernos de desarrollo y herramientas como Visual Studio Code, que ofrece extensiones para previsualizar y editar MDX.

Contexto en 2025

MDX hoy en día sigue siendo ampliamente utilizado en:

• Documentación técnica interactiva (ej. Storybook Docs, Docusaurus).
• Blogs y sitios educativos que quieren mezclar texto y componentes de UI.
• Integraciones con editores online que soportan Markdown avanzado, como StackBlitz, CodeSandbox o editores de documentación como Notion y Obsidian, a través de plugins o extensiones.

Su relevancia radica en que permite un flujo de trabajo reactivo y modular, donde cada componente puede actualizarse sin afectar el resto del contenido.

Ejemplo de uso

En MDX puedes importar y usar un componente de UI directamente dentro de tu Markdown:

import HeaderLink from './BotonInteractivo.jsx';

<BotonInteractivo texto="Haz clic aquí MDX" />

Haz click aqui MDX

Cuando se renderiza en un entorno que soporta MDX (como VS Code con previsualización o un servicio online compatible), el botón será completamente interactivo. Sin MDX, este tipo de contenido se limitaría a HTML estático.

Consideraciones

• Aunque MDX permite interactividad, todavía depende de directivas de cliente o configuración del framework para que los componentes sean dinámicos.
• Por defecto, si lo usas en un entorno estático, todos los componentes se renderizan como HTML sin funcionalidad JavaScript.

Herramientas y entornos que soportan MDX

• Frameworks: Astro, Next.js, Gatsby, Remix.
• Editores: Visual Studio Code, JetBrains WebStorm (con plugins).
• Servicios online: CodeSandbox, StackBlitz, Vercel Docs, Netlify con Markdown dinámico.
• Plugins de productividad: Obsidian, Notion (con extensiones o embed de JSX).

Perspectivas de uso

En 2025, MDX sigue evolucionando con enfoque en:

• Educación online interactiva.
• Blogs técnicos con contenido modular y reutilizable.
• Documentación de librerías y componentes UI.
• Proyectos donde la separación entre contenido y lógica interactiva es crítica.

Otros Links

• Documentación de la sintaxis de MDX
• Documentación de uso de Astro
• Nota: Las Directivas de Cliente siguen siendo necesarias para crear componentes interactivos. De lo contrario, todos los componentes en tu MDX se renderizarán como HTML estático (sin JavaScript) por defecto.