Pierre Diffs

React diff renderer on Shiki with split/unified layouts, inline edits and comments

Tier A · StrongComponent LibraryTooldiffs.com

@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.

Install

pnpm add @pierre/diffs

For an agent

Reach 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.

Install command, framework, licence and component list.

Facts

License: Apache 2.0
Pricing: Free, Open source
Framework: React
Styling: CSS custom properties, Vanilla CSS
Distribution: npm package, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Readable open source, Structured documentation, CLI installable
Accessibility: Unknown
Maturity: Actively maintained
GitHub stars: 5,999
Package: @pierre/diffs

Components it ships

Diff View Code Block Code Editor Comment Diff Proposal Inline Edit

Helps you build

Version History Comments AI Action Approval Single Item Detail

Notable for

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

Provenance

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)

Also in Component Libraries

diffs.comTier A