👉 Try it now (See the New Demo Page Including AceEditor)
A high-performance React component for visually comparing large JSON objects. Built on top of json-diff-kit, this viewer supports:
- Virtual scrolling for better performance (especially for large diffs)
- Custom theming (Soon new themes will be available)
- Dual Mini Map
- 🔍 Search functionality
- ⚛️ Optimized for React (uses
react-window
)
This component is developed for dealing with thousands of lines of Json Files, and seamlessly compare then render them on UI. Json Compare is a concept that has insufficient FE components available. This component brings solution to the issues of current diff viewers. Virtualized scroll gives a smooth experience while dual minimap and search ability simplifies the process of comparing JSON objects.
- Compare Large JSON Objects – Handles big files without freezing the UI
- Virtualized Rendering – Efficient DOM updates using
react-window
- Search Highlighting – Find matches and scroll directly to them
- Mini Map – Dual scrollable minimap of Json Diff, scaled to better see comparison result
- Customizable Styles – Add your own class names and styles easily (checkout JsonDiffCustomTheme.css)
To see how it works, demo available here: https://virtual-react-json-diff.netlify.app
npm install virtual-react-json-diff
# or
yarn add virtual-react-json-diff
# or
pnpm add virtual-react-json-diff
The theme is fully customizable, all colors can be changed. (And soon new themes will be available)
Modify DifferOptions and InlineDiffOptions and see the output.
Dual Minimap is defaultly shown, to hide middle minimap, just pass ShowSingleMinimap
prop to Viewer.
To change Diff methods please see DifferOptions
. By default virtual-react-json-diff
uses following configuration.
new Differ({
detectCircular: true,
maxDepth: 20,
showModifications: true,
arrayDiffMethod: "lcs",
preserveKeyOrder: "before",
...differOptions,
}),
Simply pass your json objects into Viewer Component. It will find differences and show.
import { VirtualDiffViewer } from "virtual-react-json-diff";
const oldData = { name: "Alice", age: 25 };
const newData = { name: "Alice", age: 26, city: "NYC" };
export default function App() {
return (
<VirtualDiffViewer
oldValue={oldData}
newValue={newData}
height={600}
className="my-custom-diff"
/>
);
}
If you need to see or make some calculations on difference objects, you can get the diff data using getDifferData
callback prop
import { type DiffResult, VirtualDiffViewer } from "virtual-react-json-diff";
const [differData, setDifferData] = useState<[DiffResult[], DiffResult[]]>();
<VirtualDiffViewer {...props} getDiffData={diffData => setDifferData(diffData)} />
Or if you have a custom Differ or a custom viewer, you can import Differ
class to create diff objects using your own differ. Moreover you can pass that differ to VirtualizedDiffViewer
.
p.s. This is not recommended because you can modify all variables in Differ using differOptions
prop in Viewer.
import { Differ, VirtualDiffViewer } from "virtual-react-json-diff";
---
const differOptions: DifferOptions = {
showModifications: config.showModifications,
arrayDiffMethod: config.arrayDiffMethod,
};
const differ = new Differ(differOptions);
---
// Pass it into Viewer with 'customDiffer' prop
<VirtualDiffViewer {...props} customDiffer={differ} />
The component exposes a root container with the class:
<div class="diff-viewer-container">...</div>
You can pass your own class name via the className prop to apply custom themes.
Prop | Type | Default | Description |
---|---|---|---|
oldValue |
object |
— | The original JSON object to compare (left side). |
newValue |
object |
— | The updated JSON object to compare (right side). |
height |
number |
— | Height of the diff viewer in pixels. |
hideSearch |
boolean |
false |
Hides the search bar if set to true . |
searchTerm |
string |
"" |
Initial search keyword to highlight within the diff. |
leftTitle |
string |
— | Optional title to display above the left diff panel. |
rightTitle |
string |
— | Optional title to display above the right diff panel. |
onSearchMatch |
(index: number) => void |
— | Callback fired when a search match is found. Receives the match index. |
differOptions |
DifferOptions |
Given Above |
Advanced options passed to the diffing engine. |
showSingleMinimap |
boolean |
false |
If true , shows only one minimap instead of two. |
className |
string |
— | Custom CSS class for styling the viewer container. |
overScanCount |
number |
28 |
Number of rendered rows outside of the viewport for virtualization |
miniMapWidth |
number |
40 |
Width of each minimap in pixels. |
inlineDiffOptions |
InlineDiffOptions |
{'mode': 'char'} |
Options for fine-tuning inline diff rendering. |
getDiffData |
(diffData: [DiffResult[], DiffResult[]]) => void |
- | Get difference data and make operations |
customDiffer |
Differ |
- | Pass custom differ - not recommended |
Built on top of the awesome json-diff-kit.
MIT © Utku Akyüz
Pull requests, suggestions, and issues are welcome! Check out the issues or open a PR.