# @storybook/addon-notes

> Write notes for your Storybook stories.

Latest version **5.3.21** (published 2020-08-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storybook/addon-notes
pnpm add @storybook/addon-notes
yarn add @storybook/addon-notes
bun add @storybook/addon-notes
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; popular repo; extremely popular.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 5.3.21 |
| Published | 2020-08-28 |
| First published | 2017-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 30.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 91483 |
| Maintainers | alexandrebodin, codebyalex, dandean, danielduan, dannyhw, domyen, ghengeveld, gongreg, hypnosphi, igor-dv, kylesuss, mrmckeb, ndelangen, pago, pksunkara, shilman, tmeasday, usulpro |
| Keywords | addon, notes, storybook |

## Links

- npm: https://www.npmjs.com/package/@storybook/addon-notes
- Repository: https://github.com/storybookjs/storybook
- Homepage: https://github.com/storybookjs/storybook/tree/master/addons/notes
- Issues: https://github.com/storybookjs/storybook/issues
- npm.io page: https://npm.io/package/@storybook/addon-notes

## Dependencies (13)

- [global](https://npm.io/package/global.md) ^4.3.2
- [core-js](https://npm.io/package/core-js.md) ^3.0.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [memoizerific](https://npm.io/package/memoizerific.md) ^1.11.3
- [@storybook/api](https://npm.io/package/@storybook/api.md) 5.3.21
- [util-deprecate](https://npm.io/package/util-deprecate.md) ^1.0.2
- [markdown-to-jsx](https://npm.io/package/markdown-to-jsx.md) ^6.10.3
- [@storybook/addons](https://npm.io/package/@storybook/addons.md) 5.3.21
- [@storybook/router](https://npm.io/package/@storybook/router.md) 5.3.21
- [@storybook/theming](https://npm.io/package/@storybook/theming.md) 5.3.21
- [@storybook/components](https://npm.io/package/@storybook/components.md) 5.3.21
- [@storybook/core-events](https://npm.io/package/@storybook/core-events.md) 5.3.21
- [@storybook/client-logger](https://npm.io/package/@storybook/client-logger.md) 5.3.21

## Recent versions

- 5.3.21 (latest) — 2020-08-28
- 6.0.0-alpha.6 (next) — 2020-02-04
- 5.3.20 — 2020-08-26
- 5.3.19 — 2020-05-24
- 5.3.18 — 2020-03-31
- 5.3.17 — 2020-03-14
- 5.3.15 — 2020-03-14
- 5.3.14 — 2020-02-25
- 5.3.13 — 2020-02-12
- 5.3.12 — 2020-02-04
- 5.3.11 — 2020-02-04
- 6.0.0-alpha.5 — 2020-02-04
- 6.0.0-alpha.4 — 2020-02-03
- 5.3.10 — 2020-02-02
- 6.0.0-alpha.2 — 2020-01-30
- … 472 more at https://npm.io/package/@storybook/addon-notes/versions

## README

# Storybook Addon Notes

Storybook Addon Notes allows you to write notes (text or HTML) for your stories in [Storybook](https://storybook.js.org).

[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)

![Storybook Addon Notes Demo](docs/demo.png)

## Getting Started

**NOTE: Documentation on `next` branch is for alpha version, stable release is on [master](https://github.com/storybookjs/storybook/tree/master/addons/)**

```sh
yarn add -D @storybook/addon-notes
```

within `.storybook/main.js`:

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

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

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

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


```js
import Component from './Component';

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

### Upgrading to CSF Format

Add `notes` to the `parameters` object:

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

## Using Markdown

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

```js
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.

```md
# 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`.

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

---
_Source: https://npm.io/package/@storybook/addon-notes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._