Storybook Addon Notes

Storybook Addon Notes allows you to write notes (text or HTML) for your stories in Storybook.

Framework Support

Getting Started

yarn add -D @storybook/addon-notes

Then create a file called addons.js in your storybook config.

Add following content to it:

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

Then add the withNotes decorator to all stories in your config.js:

// Import from @storybook/X where X is your framework
import { configure, addDecorator } from '@storybook/react';
import { withNotes } from '@storybook/addon-notes';

addDecorator(withNotes);

You can use the notes parameter to add a note to each story:

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

import Component from './Component';

storiesOf('Component', module)
  .add('with some emoji', () => </Component>, { notes: 'A very simple component' });

Using Markdown

To use markdown in your notes simply import a markdown file and use that in your note.

import { storiesOf } from '@storybook/react';
import Component from './Component';
import someMarkdownText from './someMarkdownText.md';

storiesOf('Component', module).add(
  'With Markdown',
  () => <Component />
  { notes: someMarkdownText }
);

If you want to use Github flavored markdown inline, use notes: { markdownText: 'your md' }:

import { storiesOf } from '@storybook/react';
import Component from './Component';

storiesOf('Component', module).add(
  'With Markdown',
  () => <Component />
  { notes: { markdown: `
  # Hello World

This is some code showing usage of the component and other inline documentation

~~~js
<div>
  hello world!
  <Component/>
</div>
~~~
`} }
);