How to write your Design System documentation with MDX and React

MDX is a popular technology to write documentation in Markdown enriched with React components.

What tool to use

There are different solutions to implement an MDX documentation.

  • Building from scratch
  • Higher-level frameworks
  • Component documentation frameworks
  • Fully-hosted solutions

Let's explore them.

Building from scratch

You can build you own documentation builder with:

but it's usually more efficient to use higher level frameworks supporting MDX.

Higher-level frameworks

Here are some of the most popular options for writing documentation with MDX:

These solutions will come "naked". You would need to bring your own component playgrounds or Props tables for example.

Component documentation frameworks

These solutions are dedicated to component documentation and they will come with convenient features like playgrounds and Props tables.

Fully-hosted solutions

Backlight supports MDX so you can build full documentation of your Design System with your own style and navigation menu.