New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,398
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Pixel Perfect
Build pixel perfect components by adding an overlaying image of component in Storybook's preview iframe.
npm install pixel-perfect-storybook-addon
Last updated about 2 months ago
4
Downloads per week
Readme View on GitHub

Storybook Addon Pixel Perfect

Build pixel perfect components by adding an overlaying image of component in Storybook's preview iframe.

Live example. Try to toggle eye button in the Storybook toolbar and "Pixel Perfect" panel.

Features

  • Overlay rendering.
  • Overlay visibility toggling.
  • Overlay opacity customization.
  • Overlay color inversion toggling.
  • Overlay options resetting.

Getting Started

Installation

npm install -D pixel-perfect-storybook-addon

Or

yarn add -D pixel-perfect-storybook-addon

Then, update .storybook/main.js with the following (Find out more here):

// .storybook/main.js

module.exports = {
  addons: ["pixel-perfect-storybook-addon"],
};

Usage

In parameters of your stories:

parameters: {
    pixelPerfect: {
        overlay: {
            src: "path/to/overlay",
            opacity: 0.5,
            colorInversion: true,
        },
    },
},

Options

Name Type Default Description
overlay.src string Path to the overlay image. This can be any string that the src attribute of the HTML img element accepts.
overlay.opacity number 0.5 Opacity of the overlay.
overlay.colorInversion boolean true If true colors of the overlay are inverted. The effect is the same as using the CSS filter property with the value invert(1).
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