JSON Diff Kit
A better JSON differ & viewer library written in TypeScript. Try it out in the playground!
Install
You can install json-diff-kit
via various package managers.
npm i json-diff-kit --save
yarn add json-diff-kit
pnpm add json-diff-kit
Quick Start
To generate the diff data:
import { Differ } from 'json-diff-kit';
import Differ from 'json-diff-kit/dist/differ';
const before = {
a: 1,
b: 2,
d: [1, 5, 4],
e: ['1', 2, { f: 3, g: null, h: [5], i: [] }, 9],
m: [],
q: 'JSON diff can\'t be possible',
r: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
s: 1024,
};
const after = {
b: 2,
c: 3,
d: [1, 3, 4, 6],
e: ['1', 2, 3, { f: 4, g: false, i: [7, 8] }, 10],
j: { k: 11, l: 12 },
m: [
{ n: 1, o: 2 },
{ p: 3 },
],
q: 'JSON diff is possible!',
r: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed quasi architecto beatae incididunt ut labore et dolore magna aliqua.',
s: '1024',
};
const differ = new Differ({
detectCircular: true,
maxDepth: Infinity,
showModifications: true,
arrayDiffMethod: 'lcs',
});
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`
highlightInlineDiff={true} // default `false`
inlineDiffOptions={{
mode: 'word', // default `"char"`, but `"word"` may be more useful
wordSeparator: ' ', // default `""`, but `" "` is more useful for sentences
}}
/>
);
};
The result is here:
Other Version of Viewer
Here is an experimental Vue version of the Viewer
component.
More Complex Usages
Please check the playground page, where you can adjust nearly all parameters and see the result.
CLI Tool
You can use the CLI tool to generate the diff data from two JSON files. Please install the package terminal-kit
before using it.
pnpm add terminal-kit
jsondiff run path/to/before.json path/to/after.json
jsondiff run path/to/before.json path/to/after.json -o path/to/result.diff
jsondiff run path/to/before.json path/to/after.json -c path/to/config.json -o path/to/result.diff
jsondiff --help
jsondiff run --help
Algorithm Details
Please refer to the article JSON Diff Kit: A Combination of Several Simple Algorithms.
Features & Roadmap
License
MIT