Diffine
A diff engine and a side-by-side viewer for React, shipped as one package. It matches two versions line by line and then word by word inside the lines that changed, and draws the result with the two sides held level, so an application does not have to build the comparison or the alignment itself.
About this project
Diffine works out what changed between two versions of a text and puts it on the screen. The comparison and the view are one package rather than a diff library with a viewer bolted on top, and the two halves meet at a value: diffText matches the two sides and returns rows, blocks and counts as a plain object, with no React and no DOM anywhere in it. 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 or handed to something else entirely.
Matching happens at two levels in a single pass. Lines are paired first, and then, inside a pair that was changed rather than replaced, the words or the characters that actually moved — the difference between knowing that a line is different and seeing which word made it different. 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 prop with a default: line numbers, wrapping, the alignment, the connectors, the unified layout. 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. There is no diff library underneath, no editor component and no CSS framework: the runtime dependency list is empty, and react and react-dom are peer dependencies, so the copies the application already has are the ones Diffine uses. The stylesheet declares nothing outside the element it draws into, so where it sits in the import order does not matter, and the dark theme follows the system setting, or an attribute when the application would rather decide. The package is ESM with TypeScript declarations, and the engine has an entry point of its own, so an application that only wants the comparison does not pull the viewer along with it.
Features
Documentation site
TypeScript types
Multiple languages
Verified by tests
Accessibility built in
Dark mode
Tree-shakeable
No dependencies