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.
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
Backlight supports MDX so you can build full documentation of your Design System with your own style and navigation menu.