### Install json-diff-kit via Package Managers

Source: https://github.com/rexskz/json-diff-kit/blob/main/README.md

Instructions for installing the json-diff-kit library using common package managers like npm, yarn, and pnpm.

```sh
# using npm
npm i json-diff-kit --save

# using yarn
yarn add json-diff-kit

# using pnpm
pnpm add json-diff-kit
```

--------------------------------

### Use CLI Tool for JSON File Comparison

Source: https://github.com/rexskz/json-diff-kit/blob/main/README.md

Provides examples of using the `jsondiff` command-line interface to compare JSON files. It covers basic comparison, outputting to a file, and using a custom configuration file.

```bash
# Compare two JSON files, output the diff data to the terminal.
# You can navigate it using keyboard like `less`.
jsondiff run path/to/before.json path/to/after.json

# Output the diff data to a file.
# Notice there will be no side-by-side view since it's not a TTY.
jsondiff run path/to/before.json path/to/after.json -o path/to/result.diff

# Use a custom configuration file and output the diff data to a file.
jsondiff run path/to/before.json path/to/after.json -c path/to/config.json -o path/to/result.diff

# Print the help message.
jsondiff --help
jsondiff run --help
```

--------------------------------

### Visualize JSON Diff Data with Viewer Component (React/TSX)

Source: https://github.com/rexskz/json-diff-kit/blob/main/README.md

Shows how to use the `Viewer` component to visualize the diff data generated by the `Differ` class. It details required props like `diff` and optional props for customization such as `indent`, `lineNumbers`, `highlightInlineDiff`, and `inlineDiffOptions`.

```tsx
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: ' ',
      }}
    />
  );
};

```

--------------------------------

### Generate JSON Diff Data with Differ Class (TypeScript)

Source: https://github.com/rexskz/json-diff-kit/blob/main/README.md

Demonstrates using the `Differ` class to compute differences between two JavaScript objects. It covers instantiation with optional configurations like `detectCircular`, `maxDepth`, `showModifications`, and `arrayDiffMethod`.

```ts
import { Differ } from 'json-diff-kit';
// or if you are using vue, you can import the differ only
// import Differ from 'json-diff-kit/dist/differ';

// the two JS objects
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',
};

// all configs are optional
const differ = new Differ({
  detectCircular: true,    // default `true`
  maxDepth: Infinity,      // default `Infinity`
  showModifications: true, // default `true`
  arrayDiffMethod: 'lcs',  // default "normal", but "lcs" may be more useful
});

// you may want to use `useMemo` (for React) or `computed` (for Vue)
// to avoid redundant computations
const diff = differ.diff(before, after);
console.log(diff);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.