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 Icons

For Pierre team only.

To build all our SVG icons from Figma there's a couple preparation steps that you need to run first.

Perform a full export of all Published Icons the Pierre Design Figma file

Do this by selecting all the icons but not the art board and in the bottom right click Export XXX Layers and make sure to point it to a ./svg folder at the root level of this project

Once that's done, simply run:

bun run icons:build

This will run a full build of all the icons into ./apps/docs/components/icons/icons

Then make sure to check in any changes needed