Features

• Deep nested JSON comparison
• Side-by-side synchronized scrolling
• Collapsible nodes (synced between panels)
• Diff indicators bubble up to parent nodes
• Stats summary (added/removed/modified)
• Show only changed filter toggle
• Syntax highlighting
• Zero dependencies
• Shadow DOM encapsulation

Install

npm i json-diff-viewer-component

Usage

ES Module

import "json-diff-viewer-component";

const viewer = document.querySelector("json-diff-viewer");
viewer.setData(leftObj, rightObj);

HTML Attributes

<json-diff-viewer
  left='{"name":"foo"}'
  right='{"name":"bar"}'
></json-diff-viewer>

Properties

viewer.left = { name: "foo" };
viewer.right = { name: "bar" };

Method

viewer.setData(leftObj, rightObj);

React

import { useEffect, useRef } from "react";
import "json-diff-viewer-component";

function DiffViewer({ left, right }) {
  const viewerRef = useRef(null);

  useEffect(() => {
    if (viewerRef.current) {
      viewerRef.current.setData(left, right);
    }
  }, [left, right]);

  return <json-diff-viewer ref={viewerRef} />;
}

Vue

<template>
  <json-diff-viewer ref="viewerRef" />
</template>

<script setup>
import { ref, watch } from "vue";
import "json-diff-viewer-component";

const props = defineProps({
  left: Object,
  right: Object,
});

const viewerRef = ref(null);

watch(
  () => [props.left, props.right],
  () => {
    if (viewerRef.value) {
      viewerRef.value.setData(props.left, props.right);
    }
  },
  { immediate: true },
);
</script>

Diff Types

| Type | Color | Description | | -------- | ------ | ------------------------ | | Added | Green | Key exists only in right | | Removed | Red | Key exists only in left | | Modified | Yellow | Value changed |

Styling

Customize the component by overriding CSS custom properties (design tokens) on the json-diff-viewer element. All tokens are defined on :host and can be overridden from outside the shadow DOM.

Design Tokens

json-diff-viewer {
  /* Diff colors */
  --add: #22c55e; /* Added items */
  --rem: #ef4444; /* Removed items */
  --mod: #eab308; /* Modified items */

  /* Backgrounds */
  --bg: #18181b; /* Main background */
  --bg2: #27272a; /* Panel background */

  /* Borders */
  --bdr: #3f3f46; /* Border color */

  /* Text */
  --txt: #fafafa; /* Primary text */
  --dim: #a1a1aa; /* Dimmed/secondary text */

  /* Controls */
  --slider: var(--bdr); /* Slider toggle active color */

  /* Syntax highlighting */
  --key: #38bdf8; /* Object keys */
  --str: #a78bfa; /* String values */
  --num: #34d399; /* Number values */
  --bool: #fb923c; /* Boolean values */
  --nul: #f472b6; /* Null values */
  --br: #71717a; /* Brackets and braces */
}

Create your own theme by overriding these tokens. For example, a light theme:

json-diff-viewer {
  --bg: #fafafa;
  --bg2: #ffffff;
  --bdr: #e4e4e7;
  --txt: #18181b;
  --dim: #71717a;
  --key: #0284c7;
  --str: #7c3aed;
  --num: #059669;
  /* ... override other tokens as needed */
}

Sizing

The component requires a defined height to enable scrolling. Without a height, the component will expand to fit all content.

json-diff-viewer {
  height: 600px;
  border-radius: 16px;
}

For full-height layouts, use flexbox:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

json-diff-viewer {
  flex: 1;
  min-height: 0;
}

Dev

npm run dev      # start dev server
npm run build    # build for production

License

MIT