Storybook Addon StackBlitz

Create a one-click Pull Request environment right from your component

Installation

yarn:

yarn add --dev @stackblitz/storybook-addon-stackblitz

npm:

npm install @stackblitz/storybook-addon-stackblitz --save-dev

pnpm:

pnpm add --save-dev @stackblitz/storybook-addon-stackblitz

Usage

Add the following to your .storybook/main.ts (or .storybook/main.js) exports:

export default {
  addons: ['@stackblitz/storybook-addon-stackblitz'],
};

Configure the repository URL in the .storybook/preview.ts (or .storybook/preview.js):

export default {
  parameters: {
    repositoryUrl: 'https://github.com/[username]/[reponame]'
  },
};

In your story files set the file path for the specific story, for instance:

export const Primary: Story = {
  args: {/* ... */},
  parameters: {
    filePath: 'src/stories/Button.tsx'
  }
};

If your components are placed in multiple repositories, you can also define the repository URL per the specific story:

export const Primary: Story = {
  args: {/* ... */},
  parameters: {
    filePath: 'src/stories/Button.tsx',
    repositoryUrl: 'https://github.com/[username]/[reponame]'
  }
};

Development scripts

• yarn start runs babel in watch mode and starts Storybook
• yarn build build and package your addon code

Addon icon

(for Storybook integration catalog)