New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,351
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Stackbit Models/Presets Generator
A storybook addons that lets you generate Stackbit models and presets from your components and stories.
npm install @stackbit/storybook-addon
Last updated 24 days ago
5
Downloads per week
Readme View on GitHub

@stackbit/storybook-addon

A Storybook add-on that lets you generate Stackbit models and presets from your components and stories, to add to your Stackbit project.

This is useful for scaffolding model definitions and presets in a new project, based on your existing stories. The generated models will usually not include all relevant fields - but can serve as a good basis to improve upon later.

https://user-images.githubusercontent.com/2673881/200615123-d7277ed1-85c2-4aa3-b9e3-688be2874662.mp4

Installation

Install the package:

npm install -D @stackbit/storybook-addon

Then, include the add-on in your Storybook config file (.storybook/main.js):

// .storybook/main.js

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

Usage

Once installed, re-launch Storybook you will see a Stackbit tab next to the standard Controls and Actions tab, through which you can download the model file and presets for the current story.

Please note the displayed list of which fields are of a supported type and included in the model. For others, you can then define these model fields yourself (see Definining Models).

If you have any questions, please contact us through any of the support channels, e.g. on Discord.

Join the community
5,861 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI