New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,392
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Storyclip
Adds a toolbar button to capture pieces of a story as an image which is stored on the clipboard
npm install storybook-addon-storyclip
Last updated 5 months ago
5
Downloads per week
Readme View on GitHub

Storyclip

Storybook addon for clipping a story or a part of a story as an image.

  1. Press the c key, or click the Camera button to enable the addon.

  2. Hover over any DOM element in the story canvas.

  3. Storybook will highlight the elements as you hover so you know which element is being clipped.

  4. Click the desired element.

  5. Wait for the notification in the bottom right.

  6. Paste the contents of your clipboard in whatever application you want your clipped story in.

Demo

Usage

This addon requires Storybook 6.3 or later.

It also uses html2canvas under the hood.

npm i -D storybook-addon-storyclip

Add "storybook-addon-storyclip" to the addons array in your .storybook/main.js:

module.exports = {
  addons: ['storybook-addon-storyclip'],
};
Join the community
5,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI