MDX
Escribir documentación o contenido rico con componentes interactivos embebidos directamente en Markdown.
Markdown para la era de los componentes. Usa JSX dentro de Markdown para mezclar contenido estático con componentes React, Vue o cualquier framework.
Notas y contexto
Qué es
MDX es un formato de archivo y un procesador que amplía la sintaxis de Markdown clásico para admitir la inyección directa de elementos JSX. Permite importar y renderizar componentes interactivos de frameworks web modernos (como React, Vue, Svelte y Preact) directamente dentro de documentos Markdown estándar, logrando una combinación fluida entre contenido textual y lógica de programación.
Para qué sirve
- Escribir contenido estático tradicional y enriquecerlo con componentes de interfaz de usuario dinámicos (como gráficos interactivos, formularios, cuestionarios o demos de código vivo).
- Importar y usar componentes de diseño y layout para organizar y dar estilo personalizado a posts de blog o documentación técnica.
- Compartir e importar variables y funciones auxiliares directamente en el archivo de contenido para lógica simple del lado del cliente.
- Integrarse con generadores de sitios estáticos y frameworks modernos de desarrollo frontend para procesar contenido Markdown dinámico de forma eficiente.
Cuándo usarlo
Es la solución por excelencia para construir sitios de documentación técnica (como Docusaurus o Nextra), blogs de desarrollo de software con demostraciones interactivas incrustadas y portafolios personales complejos. Si tus creadores de contenido no tienen conocimientos técnicos de programación o no necesitas elementos interactivos, es preferible utilizar Markdown clásico para evitar complejidades innecesarias en el build.
Puntos clave
- Sintaxis híbrida natural: escribe Markdown estándar (
#,**,[]) junto con componentes personalizados (<Chart data={...} />). - Arquitectura agnóstica de framework, compatible con una gran cantidad de ecosistemas JS de interfaz.
- Integración completa con herramientas de transpilación y empaquetadores modernos (como Vite, Webpack, ESBuild, Rollup).
- Posibilidad de definir mapas de componentes globales para renderizar elementos HTML nativos (como
<p>o<a>) con estilos propios automáticamente.
Ten en cuenta
Al permitir la ejecución de código JavaScript/JSX dentro del contenido, requiere un proceso de transpilación y build más complejo. Además, se debe prestar especial atención a la validación del contenido dinámico para evitar vulnerabilidades de seguridad como Cross-Site Scripting (XSS) si se procesa MDX de fuentes no confiables.