Skip to content

Commit 9392a0a

Browse files
metaorymetaory
committed
docs
1 parent 84ddfd2 commit 9392a0a

7 files changed

Lines changed: 150 additions & 40 deletions

File tree

‎README.md‎

Lines changed: 50 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1-
# json-diff-viewer
2-
3-
**Compare JSON side-by-side, visually**
4-
5-
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
1+
<div align="center">
2+
<img src="public/logo.svg" alt="logo" height="128" />
3+
<h2>json-diff-viewer</h2>
4+
<h5>
5+
Compare JSON side-by-side, visually
6+
</h5>
7+
<p>
8+
A zero-dependency web component for visualizing JSON differences
9+
<br>
10+
with synchronized scrolling, collapsible nodes, and syntax highlighting
11+
<br>
12+
Perfect for debugging, API comparisons, and configuration diffs
13+
</p>
14+
<img src="public/screenshot.png" alt="demo" width="80%" />
15+
<h5>
16+
<a href="https://metaory.github.io/json-diff-viewer-component/" target="_blank">metaory.github.io/json-diff-viewer-component</a>
17+
</h5>
18+
</div>
619

720
## Features
821

@@ -101,7 +114,7 @@ watch(
101114
viewerRef.value.setData(props.left, props.right);
102115
}
103116
},
104-
{ immediate: true }
117+
{ immediate: true },
105118
);
106119
</script>
107120
```
@@ -119,52 +132,52 @@ watch(
119132

120133
## Styling
121134

122-
Override CSS custom properties:
135+
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.
136+
137+
### Design Tokens
123138

124139
```css
125140
json-diff-viewer {
126141
/* Diff colors */
127-
--added: #22c55e;
128-
--removed: #ef4444;
129-
--modified: #eab308;
130-
--type-changed: #f97316;
131-
--unchanged: #71717a;
142+
--add: #22c55e; /* Added items */
143+
--rem: #ef4444; /* Removed items */
144+
--mod: #eab308; /* Modified items */
145+
--typ: #f97316; /* Type changed items */
146+
147+
/* Backgrounds */
148+
--bg: #18181b; /* Main background */
149+
--bg2: #27272a; /* Panel background */
132150

133-
/* Background */
134-
--bg: #18181b;
135-
--bg-panel: #27272a;
136-
--border: #3f3f46;
151+
/* Borders */
152+
--bdr: #3f3f46; /* Border color */
137153

138154
/* Text */
139-
--text: #fafafa;
140-
--text-dim: #a1a1aa;
141-
142-
/* Syntax */
143-
--key: #38bdf8;
144-
--string: #a78bfa;
145-
--number: #34d399;
146-
--boolean: #fb923c;
147-
--null: #f472b6;
148-
--bracket: #71717a;
149-
150-
/* Layout */
151-
--radius: 12px;
152-
--font: "JetBrains Mono", monospace;
155+
--txt: #fafafa; /* Primary text */
156+
--dim: #a1a1aa; /* Dimmed/secondary text */
157+
158+
/* Syntax highlighting */
159+
--key: #38bdf8; /* Object keys */
160+
--str: #a78bfa; /* String values */
161+
--num: #34d399; /* Number values */
162+
--bool: #fb923c; /* Boolean values */
163+
--nul: #f472b6; /* Null values */
164+
--br: #71717a; /* Brackets and braces */
153165
}
154166
```
155167

156-
### Light Theme
168+
Create your own theme by overriding these tokens. For example, a light theme:
157169

158170
```css
159171
json-diff-viewer {
160172
--bg: #fafafa;
161-
--bg-panel: #ffffff;
162-
--border: #e4e4e7;
163-
--text: #18181b;
164-
--text-dim: #71717a;
173+
--bg2: #ffffff;
174+
--bdr: #e4e4e7;
175+
--txt: #18181b;
176+
--dim: #71717a;
165177
--key: #0284c7;
166-
--string: #7c3aed;
167-
--number: #059669;
178+
--str: #7c3aed;
179+
--num: #059669;
180+
/* ... override other tokens as needed */
168181
}
169182
```
170183

‎index.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,17 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" type="image/svg+xml" href="/logo.svg">
67
<title>JSON Diff Viewer</title>
78
</head>
89
<body>
910
<div id="app">
10-
<h1>JSON Diff Viewer<a href="https://github.com/metaory/json-diff-viewer-component" target="_blank" rel="noopener noreferrer"><img src="/github.svg" alt="GitHub" class="github-logo"></a></h1>
11+
<h1>JSON Diff Viewer
12+
<div class="header-controls">
13+
<button id="theme-toggle">Dark</button>
14+
<a href="https://github.com/metaory/json-diff-viewer-component" target="_blank" rel="noopener noreferrer"><img src="/github.svg" alt="GitHub" class="github-logo"></a>
15+
</div>
16+
</h1>
1117
<json-diff-viewer></json-diff-viewer>
1218
</div>
1319
<script type="module" src="/src/main.js"></script>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "json-diff-viewer-component",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"type": "module",
55
"description": "Vanilla JS web component for side-by-side JSON diff visualization",
66
"keywords": [

‎public/logo.svg‎

Lines changed: 28 additions & 0 deletions
Loading

‎public/screenshot.png‎

74.2 KB
Loading

‎src/main.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,39 @@ import "./lib/viewer.js";
33
import "./style.css";
44

55
const viewer = document.querySelector("json-diff-viewer");
6+
const toggle = document.querySelector("#theme-toggle");
7+
8+
const themes = {
9+
dark: {
10+
add: "#22c55e", rem: "#ef4444", mod: "#eab308", typ: "#f97316",
11+
bg: "#18181b", bg2: "#27272a", bdr: "#3f3f46",
12+
txt: "#fafafa", dim: "#a1a1aa",
13+
key: "#38bdf8", str: "#a78bfa", num: "#34d399", bool: "#fb923c", nul: "#f472b6", br: "#71717a"
14+
},
15+
light: {
16+
add: "#16a34a", rem: "#dc2626", mod: "#ca8a04", typ: "#ea580c",
17+
bg: "#fafafa", bg2: "#ffffff", bdr: "#e4e4e7",
18+
txt: "#18181b", dim: "#71717a",
19+
key: "#0284c7", str: "#7c3aed", num: "#059669", bool: "#d97706", nul: "#c026d3", br: "#71717a"
20+
}
21+
}
22+
23+
const applyTheme = (theme) => {
24+
const tokens = themes[theme]
25+
Object.entries(tokens).forEach(([key, value]) => viewer.style.setProperty(`--${key}`, value))
26+
toggle.textContent = theme === "dark" ? "Dark" : "Light"
27+
document.documentElement.setAttribute("data-theme", theme)
28+
localStorage.setItem("json-diff-viewer-theme", theme)
29+
}
30+
31+
const getTheme = () => localStorage.getItem("json-diff-viewer-theme") || "dark"
32+
applyTheme(getTheme())
33+
34+
toggle.addEventListener("click", () => {
35+
const current = getTheme()
36+
const next = current === "dark" ? "light" : "dark"
37+
applyTheme(next)
38+
})
639

740
Promise.all([
841
fetch(`${import.meta.env.BASE_URL}data/a1.json`).then((r) => r.json()),

‎src/style.css‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,17 @@
77

88
html, body {
99
height: 100%;
10+
font-family: 'JetBrains Mono', monospace;
11+
}
12+
html[data-theme="dark"], html[data-theme="dark"] body {
1013
background: linear-gradient(135deg, #0a0a0f 0%, #1a0f1a 50%, #0a0a0f 100%);
1114
background-size: 400% 400%;
1215
animation: gradientShift 20s ease infinite;
13-
font-family: 'JetBrains Mono', monospace;
16+
}
17+
html[data-theme="light"], html[data-theme="light"] body {
18+
background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 50%, #f5f5f7 100%);
19+
background-size: 400% 400%;
20+
animation: gradientShift 20s ease infinite;
1421
}
1522

1623
@keyframes gradientShift {
@@ -36,6 +43,26 @@ h1 {
3643
justify-content: space-between;
3744
align-items: center;
3845
}
46+
.header-controls {
47+
display: flex;
48+
gap: 0.5rem;
49+
align-items: center;
50+
}
51+
#theme-toggle {
52+
padding: 0.35rem 0.75rem;
53+
background: rgba(255,255,255,.1);
54+
border: 1px solid rgba(255,255,255,.2);
55+
border-radius: 6px;
56+
color: inherit;
57+
font-family: inherit;
58+
font-size: 11px;
59+
cursor: pointer;
60+
transition: background .15s, border-color .15s;
61+
}
62+
#theme-toggle:hover {
63+
background: rgba(255,255,255,.15);
64+
border-color: rgba(255,255,255,.3);
65+
}
3966
.github-logo {
4067
width: 42px;
4168
height: 42px;
@@ -57,3 +84,6 @@ json-diff-viewer {
5784
border: 2px solid #3f3f46;
5885
border-radius: 16px;
5986
}
87+
html[data-theme="light"] json-diff-viewer {
88+
border-color: #e4e4e7;
89+
}

0 commit comments

Comments
 (0)