JSON Diff Kit
A better JSON differ & viewer.
Notice: considering most of the browsers now support ES6, this library has only the ES6 version. If you need the compatibility with older browsers, please configure the compiler in your project (e.g. add this library to the
includefield inbabel.config.js).
Install
You can install json-diff-kit via various package managers.
# using npm
npm i json-diff-kit --save
# using yarn
yarn add json-diff-kit
# using pnpm
pnpm add json-diff-kit
Quick Start
To generate the diff data:
import { Differ } from 'json-diff-kit';
const before = {
a: 1,
b: 2,
d: [1, 5, 4],
e: ['1', 2, { f: 3, g: null, h: [5], i: [] }, 9],
};
const after = {
b: 2,
c: 3,
d: [1, 3, 4, 6],
e: ['1', 2, 3, { f: 4, g: false, i: [7, 8] }, 10],
};
// all configs are optional
const differ = new Differ({
detectCircular: true, // default `true`
maxDepth: Infinity, // default `Infinity`
showModifications: true, // default `true`
arrayDiffMethod: 'lcs', // default `"normal"`
});
const diff = differ.diff(before, after);
console.log(diff);
You can use your own component to visualize the diff data, or use the built-in viewer:
import { Viewer } from 'json-diff-kit';
import type { DiffResult } from 'json-diff-kit';
import 'json-diff-kit/dist/viewer.css';
interface PageProps {
diff: [DiffResult[], DiffResult[]];
}
const Page: React.FC<PageProps> = props => {
return (
<Viewer
diff={props.diff} // required
indent={4} // default `2`
lineNumbers={true} // default `false`
/>
);
};
The result is here:
More Complex Usages
Please check the demo pages.
Algorithm Details
Please refer to the article JSON Diff Kit: A Combination of Several Simple Algorithms.
License
MIT
![Error [ERR_MODULE_NOT_FOUND]: Cannot find package](https://avatars.githubusercontent.com/u/8169783?v=4)
35.5k Dec 27, 2022
1k Dec 24, 2022
3 Jan 6, 2022
3 Sep 23, 2022
17 Dec 8, 2022
31 Dec 8, 2022
9 Nov 29, 2022
4 Oct 14, 2022
2.3k Dec 31, 2022
39 Dec 26, 2022
45 Dec 3, 2022
41 Dec 5, 2022
1k Dec 19, 2022
362 Dec 4, 2022
4 Oct 9, 2022
1 May 23, 2022
7 Aug 22, 2022
19 Dec 17, 2022