Owning the Preview
At Edge Delta, the app used Storybook with Chromatic for visual regression. At Archon, the shared toolkit has a published component preview and its own screenshot tests. In both cases, the teams needed checks that understood how their code was built and reviewed.
A hosted component explorer can be useful, but this app needed previews that used its own themes and build setup.
Replacing Storybook and Chromatic
The Edge Delta app used Storybook as a component explorer and Chromatic to review visual changes. Replacing both meant preserving the component stories and snapshot coverage while making the preview work with the app’s actual themes.
The replacement kept the component stories and snapshot coverage, added theming the earlier setup could not exercise, and stored baselines in the repository for review in the pull request that changed them.
Keeping visual diffs in pull requests removed the need for a separate approval queue.
The in-app preview replaced the Storybook package and used the product’s themes. Playwright ran screenshot tests in CI.
The component preview for the shared toolkit
The toolkit publishes its component preview for consumers. Each component has stories that show its supported variants and states.
Visual tests compare each story in the preview on every run, using a small pixel tolerance.
The module graph identifies the stories affected by a change, so baseline updates are limited to those stories instead of requiring a full-suite reapproval.
Two checks address failures encountered during development: one reports snapshots for removed stories, and another prevents tests from using a stale build when a dependency has changed but has not been rebuilt.
When in-house tooling is useful
A hosted service provides a quick way to add component previews and visual checks. It does not automatically know which repository modules affect each story or whether a local package build is stale.
In-house tooling was useful where the preview and tests needed information from the repository and build process. A hosted service can still be appropriate when those integrations are not needed.
Scoped screenshot diffs also provide reviewers with a smaller set of visual changes to inspect, including when a change was produced with coding-agent assistance.