Smoothly Inclusive: React component library documentation with Gatsby and MDX

A presentation at Gatsby Days in in Los Angeles, CA, USA by Kathleen McMahon

Have you ever struggled with a documentation setup that’s complex and challenging to maintain? This was a pain point for our team while rebooting our design system. We discovered that although our system was built with inclusivity in mind, our documentation setup was equal parts brittle and complex — especially when working with our React-based component library. Multiple repos, rigid layout restrictions, and an impressive amount of gymnastics were needed to render React component examples.

Documentation became a maintenance nightmare for the core team — and a barrier to entry for external contributors. Our team was in danger of having stale documentation while our system’s features were still being built. In this talk, you’ll learn how we streamlined our component library documentation tooling with Gatsby and MDX. Pair this with inclusive best practices, and your component library documentation will be silky smooth.

If you’ve ever struggled with a documentation system that’s tough to maintain, this session is for you.

stay tuned for code examples


Buzz and feedback

Here’s what was said about this presentation on social media.