Skip to main content
The Notes Addon allows you to write documentation for your stories using text or markdown. This is perfect for providing usage guidelines, implementation details, or design notes directly within your Storybook.

​
Installation

1

Install the addon

npm install -D @storybook/addon-ondevice-notes
2

Register the addon

Add the addon to your .rnstorybook/main.ts configuration:
.rnstorybook/main.ts
import type { StorybookConfig } from '@storybook/react-native';

const main: StorybookConfig = {
  addons: ['@storybook/addon-ondevice-notes'],
};

export default main;

​
Basic Usage

Add notes to your stories using the notes parameter:
Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react-native';
import { Button } from './Button';

const meta = {
  component: Button,
  parameters: {
    notes: 'This is a simple button component.',
  },
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {};
The notes will appear in the Notes panel in your on-device Storybook UI.

​
Markdown Support

Notes support full markdown syntax for rich documentation:
MyComponent.stories.tsx
import type { Meta } from '@storybook/react-native';
import { MyComponent } from './MyComponent';

const meta = {
  title: 'Components/MyComponent',
  component: MyComponent,
  parameters: {
    notes: `
# MyComponent

A reusable component for displaying content.

## Usage

\`\`\`tsx
import { MyComponent } from './MyComponent';

<MyComponent title="Hello" />
\`\`\`

## Props

- **title**: The heading text to display
- **subtitle**: Optional secondary text
- **onPress**: Callback when component is pressed

## Examples

Put a full new line between each element for proper markdown rendering.
    `,
  },
} satisfies Meta<typeof MyComponent>;

export default meta;
When using markdown, ensure you put a full empty line between elements (headings, lists, code blocks) for proper rendering.

​
Markdown Features

The Notes addon supports standard markdown syntax:

​
Headings

# Heading 1
## Heading 2
### Heading 3

​
Text Formatting

**Bold text**
*Italic text*
`Inline code`

​
Lists

- Unordered list item 1
- Unordered list item 2
  - Nested item

1. Ordered list item 1
2. Ordered list item 2

​
Code Blocks

```tsx
const example = 'code block';
```

[Link text](https://example.com)

​
Complete Example

Here’s a comprehensive example with detailed documentation:
ActionButton.stories.tsx
import type { Meta, StoryObj } from '@storybook/react-native';
import { fn } from 'storybook/test';
import { ActionButton } from './ActionButton';

const meta = {
  component: ActionButton,
  parameters: {
    notes: `
# ActionButton

A pressable button component with customizable styling and callbacks.

## Installation

\`\`\`bash
import { ActionButton } from './components/ActionButton';
\`\`\`

## Basic Usage

\`\`\`tsx
<ActionButton 
  text="Press me!" 
  onPress={() => console.log('pressed')} 
/>
\`\`\`

## Props

- **text** (string, required): The button label text
- **onPress** (function, required): Callback when button is pressed
- **disabled** (boolean, optional): Whether the button is disabled
- **variant** ('primary' | 'secondary', optional): Button style variant

## Examples

### Primary Button

\`\`\`tsx
<ActionButton 
  text="Submit" 
  variant="primary"
  onPress={handleSubmit} 
/>
\`\`\`

### Disabled Button

\`\`\`tsx
<ActionButton 
  text="Loading..." 
  disabled={true}
  onPress={handlePress} 
/>
\`\`\`

## Accessibility

Ensure you provide meaningful text for screen readers.

## Notes

Remember to put a full new line between each element for proper markdown rendering.
    `,
  },
} satisfies Meta<typeof ActionButton>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  args: {
    text: 'Press me!',
    onPress: fn(),
  },
};

​
Per-Story Notes

Different stories can have different notes: 
import type { Meta, StoryObj } from '@storybook/react-native';
import { Button } from './Button';

const meta = {
  component: Button,
  parameters: {
    notes: 'Default notes for all stories.',
  },
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  parameters: {
    notes: `
# Primary Button

The primary action button used for main CTAs.

**Usage**: Use for the most important action on a screen.
    `,
  },
};

export const Secondary: Story = {
  parameters: {
    notes: `
# Secondary Button

The secondary action button used for alternative actions.

**Usage**: Use for less prominent actions.
    `,
  },
};

​
Combining with Other Addons

Notes work great alongside other addons:
ControlExample.stories.tsx
import type { Meta, StoryObj } from '@storybook/react-native';
import { fn } from 'storybook/test';
import { Button } from './Button';

const meta = {
  component: Button,
  args: {
    onPress: fn(),
  },
  argTypes: {
    variant: {
      options: ['primary', 'secondary'] as const,
      control: { type: 'select' },
    },
  },
  parameters: {
    notes: `
# Interactive Button Demo

Use the **Controls** panel to change button properties.
Use the **Actions** panel to see button press events.

## Try This

1. Change the variant using the Controls
2. Press the button and watch the Actions panel
3. Experiment with different text values
    `,
    backgrounds: {
      options: {
        light: { name: 'Light', value: '#ffffff' },
        dark: { name: 'Dark', value: '#000000' },
      },
    },
  },
} satisfies Meta<typeof Button>;

export default meta;

​
Documentation Best Practices

​
Include Essential Information

  • Component purpose and use cases
  • Installation and import instructions
  • Prop definitions and types
  • Usage examples with code
  • Accessibility considerations

​
Example Template

parameters: {
  notes: `
# ComponentName

Brief description of what the component does.

## Installation

\`\`\`tsx
import { ComponentName } from './ComponentName';
\`\`\`

## Props

- **propName** (type): Description

## Usage

\`\`\`tsx
<ComponentName prop="value" />
\`\`\`

## Notes

Any additional information, warnings, or tips.
  `,
}

​
Use Headings for Structure

Organize documentation with clear headings: 
# Main Heading (Component Name)
## Section (Usage, Props, Examples)
### Subsection (Specific Examples)

​
Provide Code Examples

Always include practical code examples: 
```tsx
// Real, copy-pasteable code
import { Component } from './Component';

const Example = () => <Component prop="value" />;
```

​
TypeScript Support

Notes are fully typed: 
import type { Meta } from '@storybook/react-native';

interface NotesParameter {
  notes?: string;
}

const meta = {
  parameters: {
    notes: 'Documentation string',
  } satisfies NotesParameter,
} satisfies Meta;

​
Common Patterns

​
Component API Reference

parameters: {
  notes: `
## API Reference

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | string | - | Component title |
| onPress | function | - | Press handler |
| disabled | boolean | false | Disable state |
  `,
}

​
Usage Guidelines

parameters: {
  notes: `
## When to Use

- Use for primary actions
- Use when you need user confirmation

## When Not to Use

- Don't use for navigation
- Don't use for inline editing
  `,
}

​
Design Specifications

parameters: {
  notes: `
## Design Specs

- Min height: 44px (for accessibility)
- Padding: 16px horizontal, 12px vertical
- Border radius: 8px
- Font size: 16px
  `,
}

​
Troubleshooting

​
Markdown Not Rendering

Ensure you have blank lines between markdown elements: 
# Good

Proper spacing between heading and paragraph.

# Bad
No spacing between heading and paragraph.

​
Code Blocks Not Displaying

Use triple backticks and escape them in template literals: 
parameters: {
  notes: `
\`\`\`tsx
const example = 'code';
\`\`\`
  `,
}

Controls Addon

Document interactive props with Controls

Actions Addon

Document callbacks with Actions logging

Build docs developers (and LLMs) love

Get started for freeTalk to us