Quickstart

Connect a Storybook and complete your first visual review.

Before you begin#

• A GitHub repository with a static Storybook build. Web capture supports Storybook 8.6, 9, and 10; Storybook 7 is not supported.
• A build command such as npm run build-storybook and its output directory, usually storybook-static.
• Permission to install the Framecheck GitHub App, or an organisation owner who can approve it.
• CI that can run Node.js 24 for the uploader. Your Storybook build can use its own supported Node version.

Build Storybook locally first and check that the static build renders correctly. Use fixture data and include required fonts and images. See stable stories.

Create your company and project#

1. Create an account, confirm your email, and complete sign-in.
2. Name your company. This is where projects, members, policies, and billing are managed.
3. Install the Framecheck GitHub App for the repositories you want to test.
4. Select your repository and confirm the baseline branch, usually main.
5. Follow the project's Setup page to add CI.

Your first eligible repository connection starts the Starter trial. The trial permits one project in total: deleting it does not let you choose a replacement. See billing and usage.

Connect CI#

For GitHub Actions, copy the project's upload token into the repository's Actions secret named FRAMECHECK_TOKEN. Confirm that you have saved it, then choose Open pull request from Setup. Review the generated workflow before merging it.

For another CI provider, build your Storybook and use the project's generated upload command with the same secret. See other CI systems.

Review and set a baseline#

1. Open the run link from CI or the Framecheck check on GitHub.
2. On the first capture, expect stories to appear as new because there is no accepted image yet.
3. Inspect the stories and accept the intended appearance. Fix broken stories and upload another commit.
4. Merge the setup pull request after review. Ensure a run also completes on your baseline branch.
5. Accept that default-branch run if its approvals have not carried over. The run should show that its baseline was set.

Make a deliberate change#

Change one component, open a pull request, and wait for CI. The new run should show the affected story beside its baseline. Accept an intended update, or reject a regression and fix it. Reviewing changes explains each result.