Storybook Visual Regression Inspector
Upload Loki baseline and latest PNGs, highlight visual diffs in the browser, and export a heatmap report.
Select the Loki baseline and latest PNG files. Unzip your report and choose matching screenshots.
Highlight color
Overview
Inspect Loki visual regression snapshots in the browser. Highlight differences, review metrics, and export a heatmap—no CLI required.
How to use
- Unzip your Loki run and upload the corresponding baseline/latest PNGs.
- Adjust the diff threshold and highlight color to separate signal from noise.
- Review the heatmap, copy summary numbers, and download the annotated PNG for feedback threads.
Use cases
- Approve Storybook visual regression diffs before merging pull requests.
- Share heatmaps with designers to confirm intentional UI updates.
- Audit Loki failures quickly on workstations without the full toolchain.
Tips & knowledge
- Capture baseline and latest screenshots with the same viewport size and device pixel ratio.
- Stabilize dynamic timestamps or data in stories to reduce false positives.
- If dimensions drift, rerun the capture so screenshots align before sign-off.