Storybook Addon Notes
Storybook Addon Notes allows you to write notes (text or HTML) for your stories in Storybook.
NOTE: Documentation on
next branch is for alpha version, stable release is on master
yarn add -D @storybook/addon-notes
moduleexports =addons: '@storybook/addon-notes/register'
Alternatively register the notes addon into a panel. Choose only one, not both.
moduleexports =addons: '@storybook/addon-notes/register-panel'
Now, you can use the
notes parameter to add a note to each story.
;title: 'Component'parameters:notes: 'some documentation here';
Upgrading to CSF Format
notes to the
parameters:notes: 'My notes'
Using Markdown in your notes is supported, Storybook will load Markdown as raw by default.
;;title: 'Component';const withMarkdown = <Component />;withmarkdownstory =parameters:notes: markdown;
When using Markdown, you can also embed gifs from Giphy into your Markdown. Currently, the value
cheese of the query prop is used to search and return the first result returned by Giphy.
# Title<Giphy query='cheese' />
Multiple Notes Sections
If you need to display different notes for different consumers of your storybook (e.g design, developers), you can configure multiple notes pages. The following will render a tab with unique notes for both
;;;;title: 'Component'parameters:notes: Introduction: intro 'Design Notes': design;