JSON Diff Viewer

Framework-agnostic, zero-dependency web component.

Usage API

Import the component, then choose one data API.

Framework usage

setData Recommended

Update both values in one render.

import "json-diff-viewer-component";

const viewer = document.querySelector(
  "json-diff-viewer",
);
viewer.setData(left, right);

Properties Alternative

Assign JavaScript values independently.

viewer.left = left;
viewer.right = right;

Attributes Alternative

Embed small, static JSON in HTML.

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

Styling

Use the defaults, or customize tokens and exposed parts.

Styling reference

Design tokens

Override only the visual values you need.

json-diff-viewer {
  --add: lime;
  --control-bdr: lime;
}

Shadow parts

Target exposed structural elements.

json-diff-viewer::part(toolbar) {
  border-block-end-width: 3px;
}