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