storybook-addon-storyclip

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.

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/storybook-addon-storyclip'],
};

Changelog

v0.0.3 (Tue Aug 30 2022)

⚠️ Pushed to main

• updating icon again (@kahzew)
• Removing unsused code, peer deps, addon icon (@kahzew)
• Cleanup and added image preview to notify (@kahzew)
• Readme update, rename example.gif -> demo.gif (@kahzew)
• Another readme update (@kahzew)
• Updating readme (@kahzew)
• Adding example gif for readme (@kahzew)
• Update package.json (@kahzew)
• Includes toolbar, html2canvas, clip and overlay (@kahzew)
• project setup (@kahzew)
• Initial commit (@kahzew)

Authors: 1

• Elliot Cash (@kahzew)

---