Storybook Storysource Addon

This addon is used to show stories source in the addon panel.

Storysource Demo

Getting Started
- Install using preset
Theming

Getting Started

First, install the addon

yarn add @storybook/addon-storysource --dev

You can add configuration for this addon by using a preset or by using the addon config with webpack

Install using preset

Add the following to your .storybook/main.js exports:

module.exports = {
  addons: ['@storybook/addon-storysource'],
};

You can pass configurations into the addon-storysource loader in your .storybook/main.js file, e.g.:

module.exports = {
  addons: [
    {
      name: '@storybook/addon-storysource',
      options: {
        rule: {
          // test: [/\.stories\.jsx?$/], This is default
          include: [path.resolve(__dirname, '../src')], // You can specify directories
        },
        loaderOptions: {
          prettierConfig: { printWidth: 80, singleQuote: false },
        },
      },
    },
  ],
};

To customize the source-loader, pass loaderOoptions. Valid configurations are documented in the source-loader README.

Theming

Storysource will automatically use the light or dark syntax theme based on your storybook theme. See Theming Storybook for more information. Storysource Light/Dark Themes

Current Tags

7.0.27 ... latest (2 years ago)
7.1.0-rc.1 ... next (2 years ago)
6.5.17-alpha.0 ... prerelease (2 years ago)

21 Versions

6.5.17-alpha.0 ... 2 years ago
7.1.0-rc.1 ... 2 years ago
7.0.27 ... 2 years ago
7.1.0-alpha.29 ... 2 years ago
6.5.16 ... 3 years ago
6.5.5-alpha.3 ... 3 years ago
6.5.0-rc.1 ... 3 years ago
6.5.5 ... 3 years ago
6.4.0-alpha.34 ... 4 years ago
6.3.8 ... 4 years ago
6.4.0-alpha.30 ... 4 years ago
6.3.7 ... 4 years ago
6.2.0-alpha.10 ... 5 years ago
6.0.28-alpha.3 ... 5 years ago
6.1.11 ... 5 years ago
6.1.0-alpha.9 ... 5 years ago
5.3.21 ... 5 years ago
6.1.0-alpha.3 ... 5 years ago
6.0.21 ... 5 years ago
6.0.0-beta.27 ... 5 years ago
5.3.19 ... 5 years ago