MDX : la fusion de Markdown et JSX
MDX combine la simplicité du Markdown avec la puissance des composants React. Créé en 2018, il répond à un besoin croissant : écrire de la documentation technique avec des exemples interactifs, des démos live, et des composants personnalisés, tout en gardant la lisibilité du Markdown.
J'utilise MDX depuis ses débuts pour documenter des design systems et créer des blogs techniques. La possibilité d'intégrer un composant React dans un fichier Markdown change complètement l'expérience de documentation — vos lecteurs peuvent interagir avec le code, pas seulement le lire.
Syntaxe MDX essentielle
📦 Imports ES Modules
import Button from './Button' en haut du fichier. Importez n'importe quel composant React, hook, ou utilitaire.
✨ JSX inline
<Button variant="primary">Cliquez</Button> directement dans le texte. Le JSX se mélange naturellement au Markdown.
📤 Exports
export const meta = { title: 'Guide' } pour exporter des métadonnées ou des données accessibles au runtime.
📋 Frontmatter YAML
---\ntitle: Mon Article\n--- pour les métadonnées (compatible avec la plupart des frameworks).
Fonctionnalités avancées MDX
- MDXProvider : Remplacez les éléments Markdown par vos composants (
h1→<CustomHeading/>) - Expressions JavaScript :
{2 + 2}ou{users.map(u => <User key={u.id} />)} - Layouts :
export default Layoutpour wrapper automatiquement le contenu - Plugins remark/rehype : Syntax highlighting, math equations, auto-linking, etc.
- next-mdx-remote : MDX à partir de sources distantes (CMS, API)
Cas d'usage idéaux pour MDX
- Documentation technique : Docusaurus, Nextra. Exemples de code interactifs, playgrounds.
- Design systems : Storybook Docs, démos de composants avec props éditables.
- Blogs techniques : Articles avec visualisations interactives, quiz, graphiques animés.
- Tutoriels : Apprentissage interactif avec éditeurs de code intégrés.
- Landing pages : Contenu marketing avec composants réutilisables.
Traitement local : confidentialité assurée
Ce formateur traite vos fichiers MDX entièrement dans votre navigateur. Aucun code n'est envoyé à un serveur — formatez votre documentation propriétaire en toute confiance.