Wat is MDX?

MDX is een formaat waarmee je JSX rechtstreeks in Markdown-documenten kunt schrijven. Het combineert de eenvoud van Markdown voor het schrijven van content met de kracht van React-componenten, waardoor het populair is voor documentatiesites, blogs en content-intensieve applicaties gebouwd met frameworks zoals Next.js, Gatsby en Docusaurus. Een MDX-bestand kan standaard Markdown-syntaxis bevatten naast import-statements, geëxporteerde variabelen en inline JSX-componenten — allemaal in één enkel bestand.

In tegenstelling tot gewone Markdown wordt MDX gecompileerd naar JavaScript, wat betekent dat syntaxfouten in je JSX of import-statements het volledige document kunnen breken. Dit maakt validatie en correcte opmaak bijzonder belangrijk bij het werken met MDX-content.

Beschrijving van de tool

De MDX-editor biedt een browsergebaseerde omgeving voor het schrijven, valideren en opmaken van MDX-content. Het beschikt over syntaxismarkering voor zowel Markdown als JSX, een ingebouwde validator die je MDX controleert op compilatiefouten, en een formatter die spatiëring en structuur opruimt voor consistente, leesbare documenten.

Voorbeelden

Vóór opmaak:

import {Chart} from './components'
# Dashboard
Some intro text.


Extra blank lines here.
## Section
<Chart data={stats} />

Na opmaak:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Functies

  • Syntaxismarkering voor Markdown en JSX in één enkele editor
  • MDX-validatie die in realtime controleert op compilatiefouten
  • Automatische opmaak die lege regels en spatiëring normaliseert
  • Wis-knop om de editor snel te resetten
  • Ondersteuning voor kopiëren voor eenvoudige export van je opgemaakte content

Hoe het werkt

  • Valideren: Compileert je MDX-content met behulp van de @mdx-js/mdx-compiler. Als het document syntaxfouten bevat — zoals onjuist gevormde JSX, niet-gesloten tags of ongeldige imports — toont de validator de foutmelding zodat je deze kunt oplossen.
  • Opmaken: Normaliseert witruimte door meerdere opeenvolgende lege regels samen te voegen tot één, zorgt voor lege regels vóór koppen en rondom import/export-blokken, en verwijdert afsluitende witruimte. Het resultaat is een overzichtelijk, consistent gestructureerd document.

Toepassingen

  • Documentatie schrijven voor op React gebaseerde projecten die MDX gebruiken voor contentpagina's
  • MDX-compilatiefouten opsporen vóór het implementeren van een statische site
  • MDX-bestanden opruimen met inconsistente spatiëring die door meerdere auteurs is bijgedragen