Storybook Docs Common Setup
Storybook Docs transforms your Storybook stories into world-class component documentation. Docs supports all web frameworks that Storybook supports.
Popular frameworks like React/Vue 3/Angular/Ember/Web components have their own framework-specific optimizations and setup guides. This README documents the "common" setup for other frameworks that don't have any docs-specific optimizations.
Installation
First add the package. Make sure that the versions for your @storybook/* packages match:
yarn add -D @storybook/addon-docs
Then add the following to your .storybook/main.js addons:
export default {
addons: ['@storybook/addon-docs'],
};
DocsPage
When you install docs you should get basic DocsPage documentation automagically for all your stories, available in the Docs tab of the Storybook UI.
MDX
MDX is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
Docs has peer dependencies on react. If you want to write stories in MDX, you may need to add this dependency as well:
yarn add -D react
Then update your .storybook/main.js to make sure you load MDX files:
export default {
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
};
Finally, you can create MDX files like this:
import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
<Meta title='App Component' />
# App Component
Some **markdown** description, or whatever you want.
<Story name='basic' height='400px'>{() => {
return { ... }; // should match the typical story format for your framework
}}</Story>
IFrame height
In the "common" setup, Storybook Docs renders stories inside iframes, with a default height of 60px. You can update this default globally, or modify the iframe height locally per story in DocsPage and MDX.
To update the global default, modify .storybook/preview.js:
export const parameters = { docs: { story: { iframeHeight: '400px' } } };
For DocsPage, you need to update the parameter locally in a story:
export const basic = () => ...
basic.parameters = {
docs: { story: { iframeHeight: '400px' } }
}
And for MDX you can modify it, especially if you work with some components using fixed or sticky positions, as an attribute on the Story element:
<Story name='basic' height='400px'>{...}</Story>
More resources
Want to learn more? Here are some more articles on Storybook Docs: