Diffs, from Pierre

@pierre/diffs is an open source diff and file rendering library built on Shiki. It's super customizable and packed with the features you need. Made with love by The Pierre Computer Company. Available as vanilla JavaScript and React components.

View examples and read documentation on Diffs.com.

Features

• Diff file versions, patches, and arbitrary files
• Split or stacked layout
• Automatically adapts to Shiki themes
• Supports light and dark mode
• Options for diff highlight styles, in-line highlighting, wrapping, line numbers, and more
• Supports custom fonts and font-feature-settings
• Flexible annotation framework for injecting comments, annotations, and more
• Add your own accept/reject changes UI
• Select and highlight lines

Install

bun i @pierre/diffs

Development

Technically you can use the package manager of your choice, but we use bun.

# From the root of the mono repo: setup dependencies
bun install

# Start the demo vite test server from root
bun run demo:dev

# To run the docs from root
bun run docs:dev

Testing

# Run tests and related command from within the package directory
bun test

# Update snapshots
bun test --update-snapshots

# Type checking
bun run tsc

Tests are located in the test/ folder and use Bun's native testing framework with snapshot support.

Publishing

Applicable to the Pierre team only.

# You may need to login with npm first:
npm login

# Always run publish from within the package directory
cd packages/diffs
bun publish

Building the sprite

The diff UI uses an SVG sprite built from @pierre/icons. From the monorepo root:

bun run icons:sprite

This reads SVGs from node_modules/@pierre/icons/svg and writes packages/diffs/src/sprite.ts. Run after updating @pierre/icons or changing sprite.config.js.