Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Storybook Addon for Amplitude
npm install storybook-amplitude
Last updated over 4 years ago
Downloads per week
Readme View on GitHub

Storybook Addon Amplitude

Storybook Addon Amplitude provides support for Amplitude on Storybook.

Getting Started


npm install storybook-amplitude --save-dev

within .storybook/main.js:

module.exports = {
  addons: ['storybook-amplitude/register']

Then, set an environment variable with your API key:

window.STORYBOOK_AMPLITUDE_API_KEY = '561t966209h0789k7ffr2c3nmn0sau90'


You can use a custom event name setting an environment variable:

window.STORYBOOK_AMPLITUDE_EVENT = 'Your custom event'

The default value is Story Viewed.

Event anatomy

lt;dr: the event will be sent with Story Viewed (or your custom event name) and the custom property object with viewMode, group, page and story.

The Storybook provides just the path and storyId on the api provided by register callback. The strings are like these examples:

  • /story/fundamentals-principles--page
  • /docs/design-spacing--page
  • /docs/components-accordion--base
  • /story/components-accordion--base

So, we've split the path and created an object with this anatomy:



Path ViewMode Group Page Story
/story/fundamentals-principles--page story fundamentals principles null
/docs/design-spacing--page docs design spacing null
/docs/components-accordion--base docs components accordion base
/story/components-button--disabled story components button disabled

Creating an util function that returns an object with viewMode, group, page and story. Something like this:

  viewMode: 'docs',
  group: 'components',
  page: 'button',
  story: 'disabled'


Do you need a help? Open a issue here!

Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI