1.1.0 • Public • Published

Storybook Addon Redirect

Storybook Addon Redirect allows you to create redirects to your stories in Storybook.

Getting Started

npm install storybook-redirect --save-dev

If you don't already have one, create a file called addons.js in your Storybook directory.

Add the following to addons.js to register the addon with storybook

import 'storybook-redirect/register';

An ID for each story file is generated based on the file path. This ID is used to redirect to the story group, using the URL parameter package.

  • For a named story file, the story group can be accessed via the file name
    • e.g. The stories at MyStory.stories.js via ?package=mystory
  • For an index file with a named directory, the story group can be accessed via the directory name
    • e.g. The stories at MyComponent/index.stories.js via ?package=mycomponent
  • For an index file under a stories directory, the story group can be accessed via the top package directory name
    • e.g. The stories at MyPackage/stories/index.stories.js via ?package=mypackage

Linking to a specific story within a story group is not supported by default. However, this could be added by passing in a custom getKey function to the addon - please See the Customisation section below.


To customise the addon, you can import the addon function directly (without the /register) and call it with a getKey function and an options object. To use the existing getKey function, you can import it using the named import.

import storybookRedirect, { getKey } from 'storybook-redirect';
const options = {};
storybookRedirect(getKey, options);


This function is called with a story object and should return a string key which will be matched against the URL parameter. Returning undefined means the story will not be added. Keys can only be used once - returning the same key again will not overwrite the previously set story.

Example story object:

  id: "test-stories--test-story",
  kind: "Test Stories",
  name: "Test Story",
  story: "Test Story",
  parameters: {
    fileName: "./packages/test-story/stories/index.stories.js",
    options: {
      hierarchyRootSeparator: "|",
      hierarchySeparator: {}

An example getKey which links to a specific story within a story group could be implemented as below. This uses the default getKey function to generate an ID from the file name, but then extends this to link to the specific story using the suffix of the story ID.

import storybookRedirect, { getKey } from "storybook-redirect";
storybookRedirect(function(story) {
  const fileNameId = getKey(story);
  return `${fileNameId}--${"--")[1]}`;
// eg. ?package=mypackage--story-name


This object can be used to configure the URL parameter name and to turn on debug output.


Configuring the parameter will change the URL parameter used when matching. Make sure not to conflict with existing storybook URL parameters, e.g. path

  parameter: "custom-parameter-name"

Redirect URLs will now need to be set up as ?custom-parameter-name=mypackage


Setting this to true will output debug details in the browsers developer console. The mapping object used to map IDs to stories is also output as part of the output.

  debug: true

You can enable this, without any other changes, by passing in the default getKey and an options object containing only debug

import storybookRedirect, { getKey } from "storybook-redirect";
storybookRedirect(getKey, { debug: true });

Package Sidebar


npm i storybook-redirect

Weekly Downloads






Unpacked Size

9.84 kB

Total Files


Last publish


  • alistairjcbrown