Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    @storybook/addon-notes
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.21¬†‚Äʬ†Public¬†‚Äʬ†Published

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

    Install

    npm i @storybook/addon-notes

    DownloadsWeekly Downloads

    162,103

    Version

    5.3.21

    License

    MIT

    Unpacked Size

    31 kB

    Total Files

    27

    Last publish

    Collaborators