Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Branch switcher
A Storybook addon to navigate between multiple Git branches.
npm install storybook-branch-switcher
Last updated about 2 months ago
Downloads per week
Readme View on GitHub

Storybook Branch switcher

A Storybook 7+ addon to navigate between multiple Git branches. Also a command-line tool to automatically generate one instance per branch.

Screenshot of add-on in action in Storybook


Install the following module with npm:

npm i --save-dev storybook-branch-switcher

or with yarn:

yarn add -D storybook-branch-switcher

Then, add following content to .storybook/main.js

module.exports = {
  addons: ['storybook-branch-switcher']


This package exports a script called sb-branch-switcher which will automatically generate one Storybook instance per branch, based on your Git workflow.


The CLI needs a configuration file located at .storybook/.branches.json by default. But you can create this file in another location and pass the path to the CLI with the --config or --c argument.

Example : sb-branch-switcher --config libs/storybook-host/.storybook/.branches.json

Here is the explanation of all available options:

Key Default Description
from - (mandatory) Where the Storybook instance is located after a build
to - (mandatory) Where all Storybook instances will be copied
directory current folder Absolute path where the project belongs
script_name build-storybook Name of the NPM script that builds the Storybook
default_branch master Your default Git branch
default_root true Copy instance for default branch into root folder
provider - Configuration to retrieve branches and commits to process

With Bitbucket (opened PRs)

This provider enables you to generate one Storybook instance per opened PR of a Bitbucket repository (supports cloud and on-premise servers).

Key Default Description
type - (mandatory) must be "bitbucket"
project - (mandatory) name of the Bitbucket project to target
repository - (mandatory) name of the Bitbucket repository to target
url Bitbucket host to connect to

Authorization (optional)

If the Bitbucket instance needs an authorization, you can use one of the following options with environment variables.

  • Use an access token for HTTP Rest API: BITBUCKET_TOKEN

With GitHub (opened PRs)

This provider enables you to generate one Storybook instance per opened PR of a GitHub repository.

Key Default Description
type - (mandatory) must be "github"
owner - (mandatory) name of the GitHub owner
repository - (mandatory) name of the Github repository to target

You must set GITHUB_TOKEN environment variable to access the API.

Configuration file example

  "from": "dist/storybook",
  "to": "dist/storybook-bundle",
  "default_branch": "master",
  "default_root": true,
  "provider": {
    "type": "bitbucket",
    "project": "my-project",
    "repository": "my-design-system"
Join the community
6,514 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI