¿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
  • Botón de limpieza para restablecer el editor rápidamente
  • Soporte de copiado para exportar fácilmente el contenido formateado

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.

Casos de uso

  • Escribir documentación para proyectos basados en React que utilizan MDX para páginas de contenido
  • Depurar errores de compilación de MDX antes de desplegar un sitio estático
  • Limpiar archivos MDX con espaciado inconsistente generado por múltiples autores