New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@storybook/addon-notes
Deprecated
Write notes for your Storybook stories.
npm install @storybook/addon-notes
Last updated over 2 years ago
89.6k
Downloads per week
Made by Storybook
Readme View on GitHub

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 next branch is for alpha version, stable release is on master

yarn add -D @storybook/addon-notes

within .storybook/main.js:

module.exports = {
  addons: ['@storybook/addon-notes/register']
}

Alternatively register the notes addon into a panel. Choose only one, not both.

module.exports = {
  addons: ['@storybook/addon-notes/register-panel']
}

Now, you can use the notes parameter to add a note to each story.

import Component from './Component';

export default {
  title: 'Component',
  parameters: {
    notes: 'some documentation here',
  },
};

Upgrading to CSF Format

Add notes to the parameters object:

export default {
  parameters: {
    notes: 'My notes',
  }
}

Using Markdown

Using Markdown in your notes is supported, Storybook will load Markdown as raw by default.

import Component from './Component';
import markdown from './someMarkdownText.md';

export default {
  title: 'Component',
};

export const withMarkdown = () => <Component />;
withmarkdown.story = {
  parameters: {
    notes: { markdown },
  }
};

Giphy

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 Introduction and Design.

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

import intro from './intro.md';
import design from './design.md';

export default {
  title: 'Component',
  parameters: {
    notes: { Introduction: intro, 'Design Notes': design },
  },
};
Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI