Published in


Rich docs with Storybook MDX

Components & documentation in harmony at last

  • 🎨 Customizable docs: Fully custom documentation made simple.
  • 📦 Ready-made building blocks: Reuse Storybook’s powerful DocBlocks.
  • 🤝 Write docs together: Powerful for devs, easy for designers and PMs
  • 🔌 100% compatible: Seamless Storybook integration that’s zero config

💡 What’s the big deal?

Storybook MDX is my dream documentation system. I retain the power and flexibility of Storybook’s beloved “Canvas”, but now have a fully-fledged way to write beautiful and portable long-form documentation that truly gets at the heart of our design system. — Vince Speelman, Front-end Engineer @ TEDtalks

📝 MDX simplifies writing docs

  • Meta is an element that situates your component in Storybook.
  • Story defines a new story (or references an existing one).
  • Preview frames one (or more stories) and displays their source code.
View on GitHub

📦 Reuse Storybook’s readymade building blocks

<Props of={AvatarList} />
# Colors<ColorPalette>
subtitle="Some of the greys"
colors={['#FFFFFF', '#F8F8F8', '#F3F3F3']}
# Icons<IconGallery>
<IconItem name="add"><ExampleIcon icon="add" /></IconItem>
# Typography<Typeset fontSizes={['12px', '14px', ...]} sampleText="Heading" />

Storybook Docs provides human-readable documentation for all our components. MDX reduces complexity, and enables all parts of the organization to contribute to the conversation. — Sean Luo, Software Engineer @ Kickstarter

🤝 UI docs for your entire team

🔌 Seamless integration with the ecosystem

⚡️ 1 minute installation

npx npm-check-updates '/storybook/' -u
npm install # or yarn if you prefer
npm install @storybook/addon-docs --save-dev # or yarn
module.exports = {
addons: ['@storybook/addon-docs'];

🚀 We need your help to make Docs great

  • We’re expanding the set of frameworks with enhanced docs support. React in 5.2, Vue/Angular/Web Components/Ember in 5.3. We’d love to add Svelte and other frameworks with your help.
  • We’re creating a rich library of DocBlocks, for example avatars of GitHub collaborators for a component, component status badges, and so forth.
  • Finally, we also want the ability to embed storybook docs in other documentation systems such as Gatsby.

🙏 Thanks to the community



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Shilman

energetic engineer 👷 frequent flyer 🚀 eternal optimist ❤️