bromide

bromide

UI to view and compare difference between two sets of images. This tool is meant to be used as part of a larger visual regression toolchain, so you'll still need something that actually takes screenshots & compares them.

it'll group changes by how changed they are and allow you to quickly view original, side by side, or a diff map between all image sets.

how to use

Let's say you have this json: It's a list of image urls, a friendly name for each, and the difference between them, it looks like this:

📄 /changes.json
[
	{
		"srcset": {
			"original": "https://i.imgur.com/do79zD3.jpg",
			"current": "https://i.imgur.com/6INW6uB.jpg"
		},
		"name": "Landing page",
		"diff": 0.862
	},
	{
		"srcset": {
			"original": "https://i.imgur.com/j0aYNKq.png",
			"current": "https://i.imgur.com/ZXmcL9U.png"
		},
		"name": "User profile menu",
		"diff": 0.9
  },
  {...}
]

It's a simple pretty unopinionated data shape but the same can't be said of all the possible ways to generate it, that's why bromide only concerns itself with letting you see the visual regressions!

In the same directory, you can run

npx bromide-build