virtual-react-json-diff

GitHub-style JSON review with selective merge.

A virtualized React component for comparing, reviewing, and selectively merging large JSON objects — accept/reject change blocks like a pull request, get a live merged result, and stay fast on tens of thousands of lines.

👉 Live demo

npm install virtual-react-json-diff

import { VirtualDiffViewer } from "virtual-react-json-diff";

<VirtualDiffViewer
  oldValue={oldData}
  newValue={newData}
  height={600}
  reviewMode
  onReviewChange={({ mergedJson }) => console.log(mergedJson)}
/>

• Review & merge — accept/reject change blocks; receive live mergedJson
• Virtualized — smooth scrolling for huge diffs via react-window
• Collapse unchanged regions — scan real edits first; expand without mounting the whole tree
• Dual minimap — jump across the file with visual change markers
• Search — highlight and navigate matches
• Programmatic API — ref methods for next/prev change, paths, expand/collapse, accept/reject all
• Object-aware diffs — compare-key array matching + object-level stats
• Comparison controls — ignore keys/paths, strict / loose / type-aware strategies

Most JSON diff viewers are fine for small snippets and fall apart in production dashboards:

Built for internal tools, config review UIs, CMS/migration previews, and any place you need GitHub for JSON.

How this sits next to common options (honest, feature-level — not a benchmark):

jsondiffpatch is excellent for deltas/patches; react-diff-viewer-continued is great for text/file diffs. json-diff-kit alone covers small JSON side-by-side previews. If you need GitHub-style review + selective merge on large JSON, this package fills that gap.

1. Enable reviewMode — each change block gets accept / reject controls
2. Accept → take the right (new) side; reject/pending → keep the left (old) side
3. Listen to onReviewChange for { reviewStates, mergedJson }

Change blocks are hunks (for example a nested object), not arbitrary single lines — so decisions keep valid JSON structure.

Optional reviewGroupingMode: "semantic" (default), "line", or "block".

Unchanged stretches collapse by default. Use Show Hidden Lines, or the ref API (expandPath, expandAll, collapseAll). Expanding does not mount the entire JSON into the DOM — only near-viewport rows render.

• differOptions — how the diff is generated (arrays, depth, keys) → passed to json-diff-kit
• comparisonOptions — what is ignored / how values match (ignoreKeys, ignorePaths, compareStrategy)

<VirtualDiffViewer
  oldValue={oldData}
  newValue={newData}
  height={600}
  differOptions={{ arrayDiffMethod: "compare-key", compareKey: "id" }}
  comparisonOptions={{ ignoreKeys: ["updatedAt"], compareStrategy: "type-aware" }}
/>

import { useRef, useState } from "react";
import { VirtualDiffViewer, type VirtualDiffViewerRef } from "virtual-react-json-diff";

function ReviewExample({ oldData, newData }) {
  const viewerRef = useRef(null);
  const [mergedJson, setMergedJson] = useState(null);

  return (
    <>
      <button onClick={() => viewerRef.current?.previousChange()}>Prev</button>
      <button onClick={() => viewerRef.current?.nextChange()}>Next</button>
      <button onClick={() => viewerRef.current?.acceptAll()}>Accept all</button>

      <VirtualDiffViewer
        ref={viewerRef}
        oldValue={oldData}
        newValue={newData}
        height={600}
        reviewMode
        onReviewChange={({ mergedJson }) => setMergedJson(mergedJson)}
      />

      <pre>{JSON.stringify(mergedJson, null, 2)}</pre>
    </>
  );
}

Focus the viewer first.

Root class: diff-viewer-container. Pass className for theming.

Built on json-diff-kit.

MIT © Utku Akyüz

Pull requests, suggestions, and issues are welcome!