Hi HN! I've been thinking a lot about visual diffs recently for web pages. I know there are tools like Chromatic Storybook[0] that take image snapshots of a page and then render pixel differences, but I couldn't find tools that actually render live React components or web pages and display them side-by-side, highlighting the differences.<p>Do people know if these tools exist? If they do, what are some of the best tools out there?<p>To clarify, the goal is not to compare source code, but to compare the rendered HTML/CSS output.<p>[0]: https://www.chromatic.com/
Other options are tools like Percy.io and Sauce labs which do visual diff , but they are again based on image differences rather than component level.
Alternatively have been thinking of a simple home grown puppeteer script that will render the image of developed webpage and overlay with the design rendered as a image to identify differences.
Backstop.js is very useful for this. Provides good tools for viewing the visual diffs. Also possible to automate in a CI environment.<p><a href="https://github.com/garris/BackstopJS" rel="nofollow">https://github.com/garris/BackstopJS</a>