Storybook addon

See Framecheck results while working inside your local Storybook.

Install#

The addon supports Storybook 8.2 or later and Storybook 9. This addon compatibility is separate from hosted web capture's Storybook 8.6+ requirement.

npm install --save-dev @framecheck/storybook-addon

// .storybook/main.ts — add to your existing configuration
export default {
  addons: ['@framecheck/storybook-addon'],
};

Keep your existing stories, framework, and other addons when adding this entry.

Connect#

Start Storybook on localhost, 127.0.0.1, or [::1]. Open the Framecheck panel and select Sign in with Framecheck. Choose the company and approve the access you need. Read only is the default; Read and change permits review actions when your company role also allows them.

Sign-in needs the local callback and is not supported from an arbitrary hosted Storybook origin.

Choose a project and branch#

The addon matches the repository's origin remote with Framecheck projects. If several projects match, choose the one to inspect. It follows your current Git branch; click the branch to select another. In a static build it uses the project's default branch.

The panel shows the newest run on that branch. While a run is in progress, it shows the previous finished run and checks again periodically. A newly edited story does not have a new remote result until CI uploads it.

Review safely#

The panel shows baseline, result, and diff, with a link to the full review. Accept and reject require both write access for the connection and a company role that permits review.

Code running in your Storybook can access the connection's tokens. Only sign in to a Storybook whose code and dependencies you trust. Prefer Read only unless you need review actions.

Disconnect#

Use Sign out in the panel or Account → Connected apps in Framecheck. Closing the tab removes its session storage, but explicitly disconnect an access grant you no longer need.