Storybook Docs

Living documentation for your components.

• Sneak peak article
• Technical preview guide

View layer support

Docs supports all view layers that Storybook supports except for React Native (currently). There are some view-layer specific features as well. This chart captures the current state of support

	React	Vue	Angular	Polymer	Mithril	HTML	Marko	Svelte	Riot	Ember	Preact
MDX stories	+	+	+	+	+	+	+	+	+	+	+
Module stories	+	+	+	+	+	+	+	+	+	+	+
Legacy stories	+	+	+	+	+	+	+	+	+	+	+
Source	+	+	+	+	+	+	+	+	+	+	+
Notes / Info	+	+	+	+	+	+	+	+	+	+	+
Props table	+	+	#
Docgen	+	+	#
Inline stories	+	#

Notes:

• # denotes planned/WIP support

Installation

First add the package. Make sure that the versions for your @storybook/* packages match:

yarn add -D @storybook/addon-docs

The add the following line to your .storybook/presets.js file:

module.exports = ['@storybook/addon-docs/react/preset'];

Finally, import your stories and MDX files in .storybook/config.js:

import { load } from '@storybook/react';

// standard configuration here
// ...

// wherever your story files are located
load(require.context('../src', true, /\.stories\.js$/), module);
load(require.context('../src', true, /\.stories\.mdx$/), module);

Manual configuration

Docs uses Storybook presets as a configuration shortcut. To configure "the long way", first register the addon in .storybook/addons.js:

import '@storybook/addon-docs/register';

Then configure Storybook's webpack loader to understand MDX files in .storybook/webpack.config.js:

const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.mdx$/,
    use: [
      {
        loader: 'babel-loader',
        // may or may not need this line depending on your app's setup
        plugins: ['@babel/plugin-transform-react-jsx'],
      },
      {
        loader: '@mdx-js/loader',
        options: {
          compilers: [createCompiler({})],
        },
      },
    ],
  });
  return config;
};