Before/after images for a UI refactor PR

An engineer needs this on a visual refactor. The PR has to show the same component before the change and after it. The two images have to line up. Two browser screenshots never do. Window chrome gets into the diff, and the actual change is harder to see.

This happens on the refactor PR, not later when someone asks for a visual. The person doing it already has the artboard. They should not crop two browser windows and hope the crops match.

The job is two PNGs at identical dimensions, pasted side by side in the PR description. The artboard does not change. The data does not change. You export once on the checkout before the change, and once on the checkout after it. Each run writes to its own --out. Then you put the two files next to each other.

Give Lerret the same artboard on two git checkouts. export writes a PNG each time. Same component, same data, two trees.

The component is the affected component’s artboard, unchanged. You do not make a before artboard and an after artboard. The git history is the before and the after. The artboard, the renderer, and the fonts stay the same, so the framing stays the same.

Data is unchanged. The two runs are on two git checkouts, each exporting to its own --out. Same export, twice, on two trees. --out is how the two folders stay apart. You compare the two folders the way you would compare any two PNGs of the same size.

The images are two PNGs at identical dimensions, pasted side by side in the PR description.

Identical framing by construction: same artboard, same renderer, same fonts. Two browser screenshots never line up, and the diff is drowned in window chrome. A design-file before and after is two frames someone cropped by hand. You use Lerret because the crop is the artboard, and the artboard did not move.

Two browser screenshots never line up, and the diff is drowned in window chrome. Identical framing is the same artboard, the same renderer, and the same fonts.

npx @lerret/cli@latest export --out

Start a project with npx create-lerret@latest. More in the use cases index.