¿Qué es MDX?

MDX es un formato que permite escribir JSX directamente dentro de documentos Markdown. Combina la simplicidad de Markdown para la creación de contenido con el poder de los componentes de React, lo que lo hace popular para sitios de documentación, blogs y aplicaciones con mucho contenido construidas con frameworks como Next.js, Gatsby y Docusaurus. Un archivo MDX puede contener sintaxis estándar de Markdown junto con declaraciones de importación, variables exportadas y componentes JSX en línea, todo en un único archivo.

A diferencia del Markdown simple, MDX se compila en JavaScript, lo que significa que los errores de sintaxis en tu JSX o en las declaraciones de importación pueden romper el documento completo. Esto hace que la validación y el formato correcto sean especialmente importantes al trabajar con contenido MDX.

Descripción de la herramienta

El Editor MDX proporciona un entorno basado en navegador para escribir, validar y formatear contenido MDX. Incluye resaltado de sintaxis tanto para Markdown como para JSX, un validador integrado que comprueba errores de compilación en tu MDX, y un formateador que limpia el espaciado y la estructura para obtener documentos consistentes y legibles.

Ejemplos

Antes del formateo:

import {Chart} from './components'
# Dashboard
Texto de introducción.


Líneas en blanco adicionales aquí.
## Sección
<Chart data={stats} />

Después del formateo:

import {Chart} from './components'

# Dashboard

Texto de introducción.

Líneas en blanco adicionales aquí.

## Sección

<Chart data={stats} />

Características

  • Resaltado de sintaxis para Markdown y JSX en un único editor
  • Validación de MDX que comprueba errores de compilación en tiempo real
  • Formateo automático que normaliza las líneas en blanco y el espaciado

Cómo funciona

  • Validar: Compila tu contenido MDX utilizando el compilador @mdx-js/mdx. Si el documento contiene errores de sintaxis, como JSX mal formado, etiquetas sin cerrar o importaciones no válidas, el validador muestra el mensaje de error para que puedas corregirlo.
  • Formatear: Normaliza los espacios en blanco colapsando múltiples líneas en blanco consecutivas en una sola, asegurando líneas en blanco antes de los encabezados y alrededor de los bloques de importación/exportación, y eliminando los espacios en blanco al final de las líneas. El resultado es un documento limpio y con una estructura consistente.