Switch branches/tags
Find file History
Latest commit 7296073 Sep 7, 2018

README.md

Storybook Addon Notes

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

Framework Support

Storybook Addon Notes Demo

Getting Started

NOTE: Documentation on master branch is for alpha version, stable release is on release/3.4

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, either through import or inline, simply put it in the markdown property of your note.

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

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