Skip to content

Latest commit

 

History

History
 
 

notes

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

Storybook Addon Notes

Build Status on CircleCI CodeFactor Known Vulnerabilities BCH compliance codecov Storybook Slack Backers on Open Collective Sponsors on Open Collective


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

Framework Support

Storybook Addon Notes Demo

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, 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 } }
);