---
## **[Live Demo](https://jsondiffpatch.com)**
- min+gzipped ~ 16KB
- browser and server (ESM-only)
- deep diff, use delta to patch
- smart array diffing using [LCS](http://en.wikipedia.org/wiki/Longest_common_subsequence_problem), **_IMPORTANT NOTE:_** to match objects inside an array you must provide an `objectHash` function (this is how objects are matched, otherwise a dumb match by position is used). For more details, check [Array diff documentation](docs/arrays.md)
- (optionally) text diffing of long strings powered by [google-diff-match-patch](http://code.google.com/p/google-diff-match-patch/) (diff at character level)
- reverse a delta, unpatch (eg. revert object to its original state using a delta)
- multiple output formats:
- pure JSON, low footprint [delta format](docs/deltas.md)
- visual diff (html), see [demo](https://jsondiffpatch.com)
- annotated JSON (html), to help explain the delta format with annotations
- JSON Patch ([RFC 6902](https://datatracker.ietf.org/doc/html/rfc6902)), can generate patches, and also apply them
- console (colored), try running `./node_modules/.bin/jsondiffpatch left.json right.json`
- write your own! check [Formatters documentation](docs/formatters.md)
- BONUS: `jsondiffpatch.clone(obj)` (deep clone)
## Supported platforms
- Any browser that [supports ES6](https://caniuse.com/es6)
- Node.js 18, 20+
## Usage
on your terminal:
```sh
npx jsondiffpatch --help
```
or as a library:
```
…
```
Array diffing:
```
…
```
For more example cases (nested objects or arrays, long text diffs) check `packages/jsondiffpatch/test/examples/`
If you want to understand deltas, see [delta format documentation](docs/deltas.md)
## Installing
### NPM
This works for node, or in browsers if you already do bundling on your app
```sh
npm install jsondiffpatch
```
```js
import {* as jsondiffpatch} from 'jsondiffpatch';
const jsondiffpatchInstance = jsondiffpatch.create(options);
```
### browser
In a browser, you can load a bundle using a tool like [esm.sh](https://esm.sh) or [Skypack](https://www.skypack.dev).
## Options
```
…
```
## Visual Diff
```
…
```
To see formatters in action check the [Live Demo](https://jsondiffpatch.com).
For more details check [Formatters documentation](docs/formatters.md)
## Plugins
`diff()`, `patch()` and `reverse()` functions are implemented using Pipes & Filters pattern, making it extremely customizable by adding or replacing filters on a pipe.
Check [Plugins documentation](docs/plugins.md) for details.
## Related Projects
- [jsondiffpatch.net (C#)
](https://github.com/wbish/jsondiffpatch.net)
- [SystemTextJson.JsonDiffPatch
(C#)](https://github.com/weichch/system-text-json-jsondiffpatch)
- [Go JSON Diff (and Patch)
](https://github.com/yudai/gojsondiff)
- [json-diff-patch (python)](https://github.com/apack1001/json-diff-patch)
- [jsondiffpatch-react](https://github.com/bluepeter/jsondiffpatch-react), also check docs for [usage in react](/docs/react.md)
## All contributors ✨