Diffine

About this project

Diffine works out what changed between two versions and puts it on the screen, for text and for pictures, in React and in Flutter. The comparison and the view are one library rather than a diff package with a viewer bolted on top, and the two halves meet at a value: diffText returns rows, changes and counts, and diffImage returns a mask, the changed regions as rectangles and the counts, with no component or widget anywhere in either. The viewer is one consumer of that value rather than the only way to reach it, so the same comparison can be printed in a terminal, run in a worker or checked against a threshold in a build. A unified patch is a comparison too: parsePatch reads one into the same value, and formatPatch writes one back out.

Text is matched at two levels in a single pass. Lines are paired first, and then, inside a pair that was edited rather than replaced, the words or the characters that actually moved. The viewer draws that across two panes held level with each other, with connectors over the gap, and every part of the view is a setting with a default: line numbers, wrapping, the alignment, the connectors, the unified layout, and folding away the lines nobody edited. An editor mode lays a field over each pane and works the comparison out again on every keystroke. Pictures are compared side by side, faded over each other, wiped across, or as the mask alone, with a tolerance, smoothing left by a renderer ignored, and an offset found between two shots that are not lined up; diffImages compares more than two at once, and imageSimilarity answers with a single number. Reading it without a mouse works, because each pane is a region that takes focus, the buttons that step from one change to the next are labelled, and what changed is announced as soon as it moves.

Setup is the package and one line of CSS on the web, and one import in Flutter. Each package has one dependency: React adds highlight.js for syntax highlighting, loaded one grammar at a time through a dynamic import so that a plain-text comparison downloads none of it, and Flutter adds characters, which Flutter already ships. react and react-dom are peer dependencies, so the copies the application already has are the ones Diffine uses. The two packages share the engine and the palette down to the colour values, and the dark theme follows the system setting. The React package is ESM with TypeScript declarations, and its root is the engine alone, with the viewers under diffine-react/text-diff and diffine-react/image-diff, so an application that only wants the comparison does not pull a viewer along with it.

Features

• Documentation site

• TypeScript types

• Multiple languages

• Verified by tests

• Cross-platform

• Accessibility built in

• Dark mode

• Tree-shakeable