Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
StackBlitz
Create a one-click Pull Request environment right from your component
npm install @stackblitz/storybook-addon-stackblitz
Last updated about 1 month ago
15
Downloads per week
Readme View on GitHub

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)

icon

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI