Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
A responsive viewport addon for Storybook
npm install @degjs/storybook-addon-taffy
Last updated almost 4 years ago
Downloads per week
Readme View on GitHub


Taffy is a responsive viewport addon for Storybook. This addon was heavily inspired by Ish, the delightful resizer built into Pattern Lab, Brad Frost's atomic design visualizer and static site generator.

Although there are other Storybook resizers out there, Taffy brings some great new features to the party, including:

  • Dynamic resizing via a draggable handle on the right side of the viewport
  • Precise resizing by value entry, in either pixels or ems
  • One-click small, medium and large breakpoint buttons that resize the viewport to a randomized width within each range.
  • Full-screen view.
  • Support for resizing withing the Storybook Docs tab


Install the following npm module in your project:

npm i --save-dev @degjs/storybook-addon-taffy

Then, register the addon in the addons array in .storybook/main.js:

module.exports = {
    addons: [

Finally, import withTaffy and add the decorator within .storybook/preview.js, like this:

import { addDecorator } from '@storybook/react';
import { withTaffy } from '@degjs/storybook-addon-taffy';


That's it! Restart your Storybook build, and you should see Taffy controls in the toolbar, as well as a resize handle on the right side of your story previews.

Join the community
6,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI