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.

Let's explore them.

You can build you own documentation builder with:

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

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.

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

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

Building your design system?

Backlight is an all-in-one design system platform that makes it easy for the whole team to collaborate on, build and ship a design system.