# @pierre/diffs

Latest version **1.6.2** (published 2026-10-26) · apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @pierre/diffs
pnpm add @pierre/diffs
yarn add @pierre/diffs
bun add @pierre/diffs
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; large bundle.

## Facts

| | |
|---|---|
| Version | 1.6.2 |
| Published | 2026-10-26 |
| First published | 2025-12-10 |
| Weekly downloads | 0 |
| License | apache-2.0 |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 7 |
| Unpacked size | 10.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fat, imownbey, mdo, nicolas.pierreco, ije, slexaxton, amadeusdemarzi |

## Links

- npm: https://www.npmjs.com/package/@pierre/diffs
- npm.io page: https://npm.io/package/@pierre/diffs

## Dependencies (7)

- [diff](https://npm.io/package/diff.md) 9.0.0
- [shiki](https://npm.io/package/shiki.md) ^3.0.0 || ^4.0.0
- [lru_map](https://npm.io/package/lru_map.md) 0.4.1
- [@pierre/theme](https://npm.io/package/@pierre/theme.md) 2.0.0
- [@pierre/theming](https://npm.io/package/@pierre/theming.md) 1.0.2
- [hast-util-to-html](https://npm.io/package/hast-util-to-html.md) 9.0.5
- [@pierre/highlights](https://npm.io/package/@pierre/highlights.md) 0.3.0

## Recent versions

- 1.6.2 (latest) — 2026-10-26
- 1.6.0-beta.1 (beta) — 2026-10-10
- 1.3.0-rc.4 (rc) — 2026-07-30
- 1.6.1 — 2026-10-21
- 1.6.0 — 2026-10-20
- 1.5.2 — 2026-10-05
- 1.5.1 — 2026-09-25
- 1.5.0 — 2026-09-24
- 1.4.3 — 2026-09-16
- 1.4.2 — 2026-09-11
- 1.4.1 — 2026-09-05
- 1.4.0 — 2026-09-04
- 1.3.6 — 2026-08-24
- 1.3.5 — 2026-08-07
- 1.3.4 — 2026-08-06
- … 95 more at https://npm.io/package/@pierre/diffs/versions

## README

# Diffs, from Pierre

`@pierre/diffs` is an open source diff and file rendering library that uses
[Shiki](https://shiki.style/) with its JavaScript regex engine by default, with
optional Shiki WebAssembly and Highlights backends. It's super customizable and
packed with the features you need. Made with love by
[The Pierre Computer Company](https://pierre.computer). Available as vanilla
JavaScript and React components.

**View examples and read documentation on [Diffs.com](https://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

```bash
pnpm add @pierre/diffs
```

## Agent skill

Install the agent skill for this package with the
[Skills CLI](https://skills.sh/docs/cli):

```bash
npx skills add pierrecomputer/pierre --skill diffs
```

## Development

We use pnpm for workspace package management and Bun for tests.

```bash
# From the root of the monorepo: setup dependencies
pnpm install

# Start the demo vite test server
moonx demo:dev

# To run the docs (diffs site)
moonx docs:dev-diffs
```

### Testing

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

# Update snapshots
bun test --update-snapshots

# Type checking
moonx diffs:typecheck
```

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

## Publishing

**Applicable to the Pierre team only.**

```bash
# You may need to login first:
pnpm login

# Always run publish from within the package directory.
cd packages/diffs
pnpm publish
# In a CI-marked shell: CI= pnpm publish
```

## Building the sprite

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

```bash
moonx root:icons
```

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

---
_Source: https://npm.io/package/@pierre/diffs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._