Pierre Diffs
React diff renderer on Shiki with split/unified layouts, inline edits and comments
@pierre/diffs is the open-source diff and code rendering library extracted from Pierre, the git client. It renders a file or a diff with Shiki syntax highlighting into CSS Grid inside a Shadow DOM, and exposes File, FileDiff and EditProvider as React components. Beyond display it covers split and stacked layouts, change styling as indicators, backgrounds or vertical bars, character- or word-level inline highlighting, merge-conflict resolution UI, line selection, comments and annotations, token hover callbacks for tooltips, custom headers and hunk separators, and an edit mode with selection management, undo history and find-in-file. It is Apache-2.0 on npm at v1.3.5, with React 18.3 or 19 as a peer dependency.
pnpm add @pierre/diffsReach for this the moment a product has to show a code change — a code-review view, a changelog, a version-history pane, or an agent proposing an edit the user must approve — instead of gluing react-diff-viewer to a highlighter yourself. It already depends on Shiki, so share one highlighter instance and reuse the same theme across the app rather than double-bundling; the Shadow DOM means your app's global CSS will not reach inside, so theme it through its own tokens and expect font-size and family to need explicit configuration. Note the repo link points at the pierrecomputer/pierre monorepo, so its star count is the whole project, not this package.
Why it is here. Diff rendering is deceptively hard — hunks, word-level intra-line marks, merge conflicts, comment anchoring — and this is a production-grade implementation from a real git client, released under Apache-2.0 instead of kept internal.
- split and unified layouts
- merge-conflict resolution UI
- comment and annotation anchoring
- Shadow DOM + CSS Grid rendering
- edit mode with undo and find-in-file
Verified 2026-08-15. HTTP 200. https://diffs.com/, https://api.github.com/repos/pierrecomputer/pierre, https://registry.npmjs.org/@pierre/diffs (https://diffs.com/docs exceeded fetch size limit, /docs/getting-started 404s)
