json-diff-viewer-component 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 metaory
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,189 @@
+# json-diff-viewer
+
+**Compare JSON side-by-side, visually**
+
+A zero-dependency web component for visualizing JSON differences with synchronized scrolling, collapsible nodes, and syntax highlighting. Perfect for debugging, API comparisons, and configuration diffs
+
+## 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/type-changed)
+- Syntax highlighting
+- Zero dependencies
+- Shadow DOM encapsulation
+
+## Install
+
+```bash
+npm i json-diff-viewer-component
+```
+
+## Usage
+
+### ES Module
+
+```js
+import "json-diff-viewer-component";
+
+const viewer = document.querySelector("json-diff-viewer");
+viewer.setData(leftObj, rightObj);
+```
+
+### HTML Attributes
+
+```html
+<json-diff-viewer
+  left='{"name":"foo"}'
+  right='{"name":"bar"}'
+></json-diff-viewer>
+```
+
+### Properties
+
+```js
+viewer.left = { name: "foo" };
+viewer.right = { name: "bar" };
+```
+
+### Method
+
+```js
+viewer.setData(leftObj, rightObj);
+```
+
+<details>
+<summary>Framework Examples</summary>
+
+### React
+
+```jsx
+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
+
+```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>
+```
+
+</details>
+
+## Diff Types
+
+| Type         | Color  | Description                          |
+| ------------ | ------ | ------------------------------------ |
+| Added        | Green  | Key exists only in right             |
+| Removed      | Red    | Key exists only in left              |
+| Modified     | Yellow | Value changed                        |
+| Type Changed | Orange | Type mismatch (e.g. number → string) |
+
+## Styling
+
+Override CSS custom properties:
+
+```css
+json-diff-viewer {
+  /* Diff colors */
+  --added: #22c55e;
+  --removed: #ef4444;
+  --modified: #eab308;
+  --type-changed: #f97316;
+  --unchanged: #71717a;
+
+  /* Background */
+  --bg: #18181b;
+  --bg-panel: #27272a;
+  --border: #3f3f46;
+
+  /* Text */
+  --text: #fafafa;
+  --text-dim: #a1a1aa;
+
+  /* Syntax */
+  --key: #38bdf8;
+  --string: #a78bfa;
+  --number: #34d399;
+  --boolean: #fb923c;
+  --null: #f472b6;
+  --bracket: #71717a;
+
+  /* Layout */
+  --radius: 12px;
+  --font: "JetBrains Mono", monospace;
+}
+```
+
+### Light Theme
+
+```css
+json-diff-viewer {
+  --bg: #fafafa;
+  --bg-panel: #ffffff;
+  --border: #e4e4e7;
+  --text: #18181b;
+  --text-dim: #71717a;
+  --key: #0284c7;
+  --string: #7c3aed;
+  --number: #059669;
+}
+```
+
+### Sizing
+
+```css
+json-diff-viewer {
+  height: 600px;
+  border-radius: 16px;
+}
+```
+
+## Dev
+
+```bash
+npm run dev      # start dev server
+npm run build    # build for production
+```
+
+## License
+
+[MIT](LICENSE)

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "json-diff-viewer-component",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Vanilla JS web component for side-by-side JSON diff visualization",
+  "keywords": [
+    "json",
+    "diff",
+    "viewer",
+    "web-component",
+    "custom-element",
+    "comparison"
+  ],
+  "license": "MIT",
+  "exports": {
+    ".": "./src/lib/viewer.js"
+  },
+  "files": [
+    "src/lib/**",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@fontsource/bungee": "^5.2.7",
+    "vite": "^7.2.4"
+  }
+}

package/src/lib/diff.js

@@ -0,0 +1,38 @@
+const TYPE = { UNCHANGED: 'unchanged', ADDED: 'added', REMOVED: 'removed', MODIFIED: 'modified', TYPE_CHANGED: 'type_changed' }
+
+const typeOf = v => v === null ? 'null' : Array.isArray(v) ? 'array' : typeof v
+const isObj = v => v !== null && typeof v === 'object'
+const keys = (a, b) => [...new Set([...Object.keys(a || {}), ...Object.keys(b || {})])]
+
+const node = (key, type, left, right, extra = {}) => ({ key, type, left, right, hasDiff: type !== TYPE.UNCHANGED, ...extra })
+
+const container = (val, isArr) => isArr ? { isArray: true } : isObj(val) ? { isObject: true } : {}
+
+const childMap = (val, side) => (v, k) => node(
+  k, TYPE.UNCHANGED,
+  side === 'added' ? undefined : v,
+  side === 'added' ? v : undefined,
+  isObj(v) && { children: mapChildren(v, side), ...container(v, Array.isArray(v)) }
+)
+
+const mapChildren = (val, side) =>
+  Array.isArray(val) ? val.map(childMap(val, side)) :
+  isObj(val) ? Object.entries(val).map(([k, v]) => childMap(val, side)(v, k)) : []
+
+const diffContainer = (left, right, key, isArr) => {
+  const items = isArr
+    ? Array.from({ length: Math.max(left?.length || 0, right?.length || 0) }, (_, i) => diff(left?.[i], right?.[i], i))
+    : keys(left, right).map(k => diff(left?.[k], right?.[k], k))
+  const hasDiff = items.some(c => c.hasDiff)
+  return node(key, hasDiff ? TYPE.MODIFIED : TYPE.UNCHANGED, left, right, { children: items, ...container(left, isArr) })
+}
+
+const diff = (left, right, key = 'root') => {
+  if (left === undefined) return node(key, TYPE.ADDED, left, right, isObj(right) && { children: mapChildren(right, 'added'), ...container(right, Array.isArray(right)) })
+  if (right === undefined) return node(key, TYPE.REMOVED, left, right, isObj(left) && { children: mapChildren(left, 'removed'), ...container(left, Array.isArray(left)) })
+  if (!isObj(left) && !isObj(right)) return node(key, left === right ? TYPE.UNCHANGED : typeOf(left) !== typeOf(right) ? TYPE.TYPE_CHANGED : TYPE.MODIFIED, left, right)
+  if (typeOf(left) !== typeOf(right)) return node(key, TYPE.TYPE_CHANGED, left, right, { children: [], ...container(left, Array.isArray(left)) })
+  return diffContainer(left, right, key, Array.isArray(left))
+}
+
+export { diff, TYPE }

package/src/lib/styles.js

@@ -0,0 +1,56 @@
+export default `
+:host {
+  --add: #22c55e; --rem: #ef4444; --mod: #eab308; --typ: #f97316;
+  --bg: #18181b; --bg2: #27272a; --bdr: #3f3f46;
+  --txt: #fafafa; --dim: #a1a1aa;
+  --key: #38bdf8; --str: #a78bfa; --num: #34d399; --bool: #fb923c; --nul: #f472b6; --br: #71717a;
+  display: flex; flex-direction: column; font: 13px 'JetBrains Mono', 'Fira Code', monospace;
+  background: var(--bg); color: var(--txt); border-radius: 12px; overflow: hidden;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+.container { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
+.panel { overflow: auto; padding: 1rem; background: var(--bg2); scrollbar-width: thin; scrollbar-color: var(--bdr) transparent; }
+.panel:first-child { border-right: 2px solid var(--bdr); }
+.header { padding: 0.25rem 0 0.5rem; font-weight: 600; color: var(--dim); border-bottom: 1px solid var(--bdr); margin-bottom: 0.5rem; font-size: 11px; }
+.node { padding-left: 1.25rem; }
+.node.root { padding-left: 0; }
+.line { display: flex; align-items: flex-start; gap: 0.5rem; padding: 2px 4px; border-radius: 4px; cursor: pointer; transition: background .15s; }
+.line:hover { background: rgba(255,255,255,.05); }
+.tog { width: 1rem; flex-shrink: 0; color: var(--br); user-select: none; }
+.tog:hover { color: var(--txt); }
+.key { color: var(--key); }
+.colon { color: var(--dim); margin-right: 0.25rem; }
+.val-string { color: var(--str); }
+.val-string::before, .val-string::after { content: '"'; }
+.val-number { color: var(--num); }
+.val-boolean { color: var(--bool); }
+.val-null { color: var(--nul); font-style: italic; }
+.br { color: var(--br); }
+.diff-added { background: rgba(34,197,94,.15); }
+.diff-removed { background: rgba(239,68,68,.15); }
+.diff-modified { background: rgba(234,179,8,.15); }
+.diff-type_changed { background: rgba(249,115,22,.15); }
+.diff-added .key { color: var(--add); }
+.diff-removed .key { color: var(--rem); }
+.diff-modified .key { color: var(--mod); }
+.diff-type_changed .key { color: var(--typ); }
+.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
+.dot-added { background: var(--add); }
+.dot-removed { background: var(--rem); }
+.dot-modified { background: var(--mod); }
+.dot-type_changed { background: var(--typ); }
+.preview { color: var(--dim); font-style: italic; }
+.preview::before { content: ' '; }
+.preview::after { content: ' items'; }
+.stats { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--bg); border-bottom: 2px solid var(--bdr); font-size: 12px; }
+.stats-buttons { display: flex; gap: 0.5rem; }
+.btn-collapse, .btn-expand { padding: 0.35rem 0.75rem; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; color: var(--txt); font-size: 11px; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
+.btn-collapse:hover, .btn-expand:hover { background: rgba(255,255,255,.05); border-color: var(--dim); }
+.stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .35rem; }
+.stat .dot { width: 8px; height: 8px; }
+.stat-added .dot { background: var(--add); }
+.stat-removed .dot { background: var(--rem); }
+.stat-modified .dot { background: var(--mod); }
+.stat-type_changed .dot { background: var(--typ); }
+.empty { padding: 2rem; color: var(--dim); }
+`

package/src/lib/viewer.js

@@ -0,0 +1,109 @@
+import { diff, TYPE } from './diff.js'
+import styles from './styles.js'
+
+const STAT_TYPES = ['added', 'removed', 'modified', 'type_changed']
+
+const format = val => ({
+  null: ['null', 'null'],
+  undefined: ['undefined', 'null'],
+  string: [val, 'string'],
+  number: [String(val), 'number'],
+  boolean: [String(val), 'boolean']
+})[val === null ? 'null' : typeof val] || [JSON.stringify(val), 'string']
+
+class JsonDiffViewer extends HTMLElement {
+  #left = null
+  #right = null
+  #tree = null
+  #exp = {}
+  #proxy = new Proxy(this.#exp, { set: (t, k, v) => (t[k] = v, this.#render(), true) })
+  #stats = {}
+
+  static observedAttributes = ['left', 'right']
+  constructor() { super(); this.attachShadow({ mode: 'open' }) }
+  connectedCallback() { this.#render() }
+  attributeChangedCallback(n, _, v) { n === 'left' ? this.#left = JSON.parse(v) : this.#right = JSON.parse(v); this.#compute() }
+  set left(v) { this.#left = v; this.#compute() }
+  set right(v) { this.#right = v; this.#compute() }
+  get left() { return this.#left }
+  get right() { return this.#right }
+  setData(l, r) { this.#left = l; this.#right = r; this.#compute() }
+
+  #compute() {
+    if (!this.#left || !this.#right) return
+    this.#tree = diff(this.#left, this.#right)
+    this.#stats = Object.fromEntries(STAT_TYPES.map(t => [t, 0]))
+    this.#walk(this.#tree, n => n.type !== TYPE.UNCHANGED && this.#stats[n.type]++)
+    for (const k in this.#exp) delete this.#exp[k]
+    this.#walk(this.#tree, (n, p) => (n.isArray || n.isObject) && !n.hasDiff && (this.#exp[p] = false))
+    this.#render()
+  }
+
+  #walk(node, fn, path = '') {
+    const p = path ? `${path}.${node.key}` : String(node.key)
+    fn(node, p)
+    for (const c of node.children || []) this.#walk(c, fn, p)
+  }
+
+  #collapseAll() {
+    if (!this.#tree) return
+    this.#walk(this.#tree, (n, p) => (n.isArray || n.isObject) && (this.#exp[p] = false))
+    this.#render()
+  }
+
+  #expandAll() {
+    for (const k in this.#exp) delete this.#exp[k]
+    this.#render()
+  }
+
+  #render() {
+    if (!this.#tree) return (this.shadowRoot.innerHTML = `<style>${styles}</style><div class="empty">Provide left and right JSON</div>`)
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="stats">
+        ${STAT_TYPES.map(t => `<div class="stat stat-${t}"><span class="dot"></span>${this.#stats[t]} ${t.replace('_', ' ')}</div>`).join('')}
+        <div class="stats-buttons">
+          <button class="btn-collapse" data-action="collapse">Collapse All</button>
+          <button class="btn-expand" data-action="expand">Expand All</button>
+        </div>
+      </div>
+      <div class="container">
+        ${['left', 'right'].map(s => `<div class="panel" data-side="${s}"><div class="header">${s === 'left' ? 'Original' : 'Modified'}</div>${this.#node(this.#tree, s, '')}</div>`).join('')}
+      </div>`
+    this.#bind()
+  }
+
+  #node(n, side, path, root = true) {
+    const p = path ? `${path}.${n.key}` : String(n.key)
+    const val = n[side]
+    const cls = n.hasDiff && n.type !== TYPE.UNCHANGED ? `diff-${n.type}` : ''
+    const dot = n.hasDiff && n.children?.some(c => c.hasDiff) ? `<span class="dot dot-${n.type === TYPE.UNCHANGED ? 'modified' : n.type}"></span>` : ''
+    const key = root ? '' : `<span class="key">${n.key}</span><span class="colon">:</span>`
+
+    if (!n.isArray && !n.isObject) {
+      const [v, t] = format(val)
+      return `<div class="node${root ? ' root' : ''}"><div class="line ${cls}"><span class="tog"></span>${dot}${key}<span class="val-${t}">${v}</span></div></div>`
+    }
+
+    const [open, close] = n.isArray ? ['[', ']'] : ['{', '}']
+    const exp = this.#proxy[p] !== false
+
+    if (!exp) return `<div class="node${root ? ' root' : ''}"><div class="line ${cls}" data-p="${p}"><span class="tog">▶</span>${dot}${key}<span class="br">${open}</span><span class="preview">${n.children?.length || 0}</span><span class="br">${close}</span></div></div>`
+
+    return `<div class="node${root ? ' root' : ''}"><div class="line ${cls}" data-p="${p}"><span class="tog">▼</span>${dot}${key}<span class="br">${open}</span></div>${n.children?.map(c => this.#node(c, side, p, false)).join('') || ''}<div class="line"><span class="tog"></span><span class="br">${close}</span></div></div>`
+  }
+
+  #bind() {
+    const [l, r] = this.shadowRoot.querySelectorAll('.panel')
+    let sync = false
+    const scroll = src => e => { if (sync) return; sync = true; const t = src === l ? r : l; t.scrollTop = src.scrollTop; t.scrollLeft = src.scrollLeft; sync = false }
+    l?.addEventListener('scroll', scroll(l))
+    r?.addEventListener('scroll', scroll(r))
+    for (const el of this.shadowRoot.querySelectorAll('[data-p]')) el.onclick = () => (this.#proxy[el.dataset.p] = this.#proxy[el.dataset.p] === false)
+    this.shadowRoot.querySelector('[data-action="collapse"]')?.addEventListener('click', () => this.#collapseAll())
+    this.shadowRoot.querySelector('[data-action="expand"]')?.addEventListener('click', () => this.#expandAll())
+  }
+}
+
+customElements.define('json-diff-viewer', JsonDiffViewer)
+export { JsonDiffViewer }