web-toolkit/json-diff.html at master · pyfile-toolkit/web-toolkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<script type="application/ld+json">
{"@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Web Dev Toolkit", "item": "https://pyfile-toolkit.github.io/web-toolkit/"}, {"@type": "ListItem", "position": 2, "name": "JSON Diff — Compare Two JSON Documents Side by Side", "item": "https://pyfile-toolkit.github.io/web-toolkit/json-diff.html"}]}
</script>

<meta property="og:title" content="JSON Diff — Compare Two JSON Documents Side by Side">
<meta property="og:description" content="Free online JSON diff: compare two JSON documents side by side and see added, removed and changed keys instantly. Handles nested objects and arrays. 100% private — runs entirely in your browser.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pyfile-toolkit.github.io/web-toolkit/json-diff.html">
<meta property="og:image" content="https://pyfile-toolkit.github.io/web-toolkit/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="JSON Diff — Compare Two JSON Documents Side by Side">
<meta name="twitter:description" content="Free online JSON diff: compare two JSON documents side by side and see added, removed and changed keys instantly. Handles nested objects and arrays. 100% private — runs entirely in your browser.">
<meta name="twitter:image" content="https://pyfile-toolkit.github.io/web-toolkit/og-image.png"><link rel="icon" href="favicon.ico" sizes="any">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RDDV2FW9HY"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-RDDV2FW9HY');
</script>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Diff — Compare Two JSON Documents Side by Side</title>
<link rel="canonical" href="https://pyfile-toolkit.github.io/web-toolkit/json-diff.html">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "JSON Diff",
  "operatingSystem": "ANY",
  "applicationCategory": "UtilitiesApplication",
  "description": "Compare JSON objects field by field, automatically. Free, private, offline-capable.",
  "offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"}
}
</script>
<meta name="description" content="Free online JSON diff: compare two JSON documents side by side and see added, removed and changed keys instantly. Handles nested objects and arrays. 100% private — runs entirely in your browser.">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:20px}
.card{background:#1e293b;border-radius:16px;padding:28px;max-width:720px;width:100%}
h1{color:#f8fafc;margin-bottom:4px;font-size:1.4rem}
.sub{color:#94a3b8;margin-bottom:20px;font-size:.9rem}
textarea{width:100%;min-height:150px;padding:14px;border-radius:10px;background:#0f172a;color:#e2e8f0;border:1px solid #475569;font-size:1rem;line-height:1.5;resize:vertical}
.outbox{width:100%;min-height:150px;padding:14px;border-radius:10px;background:#0f172a;color:#e2e8f0;border:1px solid #818cf8;font-size:1rem;line-height:1.5;margin-top:12px;white-space:pre-wrap;word-break:break-word}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.case{background:#334155;border-radius:10px;padding:12px;text-align:center;cursor:pointer;border:none;color:#e2e8f0;font-size:.95rem;transition:background .15s}
.case:hover{background:#4f46e5}
.case .n{font-weight:700;color:#818cf8;display:block;margin-bottom:2px}
.btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
button{padding:9px 22px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:.9rem}
button:hover{background:#4f46e5}
.btn-ghost{background:#64748b}
.kofi{text-align:center;margin:16px 0 6px;padding:10px;background:#1e1e3a;border-radius:8px}
.kofi a{color:#ff5e5b;font-weight:600;text-decoration:none}
.ads{margin-top:10px;font-size:.85rem;text-align:center}
.ads a{color:#818cf8;margin:0 6px}
.content{margin-top:30px;max-width:720px;padding:0 6px}
.content h2{color:#f8fafc;font-size:1.15rem;margin:22px 0 10px}
.content p{color:#cbd5e1;line-height:1.65;margin-bottom:12px;font-size:.95rem}
.content strong{color:#e2e8f0}
.content code{background:#1e293b;padding:2px 6px;border-radius:6px;color:#a5b4fc;font-size:.9em}
@media(max-width:520px){body{padding:12px}.card{padding:18px}.content h2{font-size:1.05rem}}
</style>

<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What counts as \"changed\"?","acceptedAnswer":{"@type":"Answer","text":"Any leaf value that differs (numbers, strings, booleans, null) or a key present in only one side."}},{"@type":"Question","name":"Big JSON files?","acceptedAnswer":{"@type":"Answer","text":"The flattener handles deep nesting and large arrays comfortably — it is a simple in-memory pass."}},{"@type":"Question","name":"Order-insensitive?","acceptedAnswer":{"@type":"Answer","text":"Object keys are sorted before comparison, so reordered keys do not count as changes; arrays, however, are compared by position."}}]}</script>
<link rel="stylesheet" href="assets/styles.css">
<script src="assets/site.js" defer></script>
</head>
<body>
<div class="card">
<h1>JSON Diff</h1>
<p class="sub">Percent-encode or decode text, query parameters and full URLs. Everything runs locally — nothing is uploaded.</p>
<textarea id="inp" placeholder="Type or paste text to encode / decode..."></textarea>
<div class="outbox" id="out" placeholder="Result appears here..."></div>
<div class="cases" id="cases"></div>
<div class="btns">
  <button class="btn-ghost" onclick="copyOut()">📋 Copy Result</button>
  <button class="btn-ghost" onclick="clearAll()">🗑 Clear</button>
</div>
<div class="kofi"><a href="https://ko-fi.com/pyfiletoolkit" target="_blank">☕ Support this tool on Ko-fi</a></div>
<div class="ads">
<a href="https://pyfile-toolkit.github.io/web-toolkit/">← Toolkit</a> |
<a href="https://pyfile-toolkit.github.io/web-toolkit/word-counter.html">Word Counter</a> |
<a href="https://pyfile-toolkit.github.io/web-toolkit/character-counter.html">Character Counter</a> |
<a href="https://pyfile-toolkit.github.io/web-toolkit/base64-encoder.html">Base64 Encoder</a> |
<a href="https://pyfiletoolkit.gumroad.com/">Premium</a>
 · <a href="privacy.html">Privacy</a> · <a href="about.html">About</a></div>
</div>

<div class="related" style="font-family:system-ui;font-size:.85rem;color:#64748b;text-align:center;margin-top:14px">More tools: <a href="html-minifier.html">HTML Minifier</a> · <a href="jwt-decoder.html">JWT Decoder</a> · <a href="unix-timestamp-converter.html">Unix Timestamp</a> · <a href="slug-generator.html">Slug Generator</a></div>
<div class="content">
<h2>JSON Diff — Spot Every Change Instantly</h2>
<p>This free JSON diff tool compares two JSON documents and highlights <strong>added</strong>, <strong>removed</strong> and <strong>changed</strong> keys and values, including nested objects and arrays. Paste two JSON payloads and see the differences instantly. No data is ever sent to a server.</p>
<h2>How the Diff Works</h2>
<p>Paste document A on the left and document B on the right (both must be valid JSON; the tool will tell you if one is not). Click Diff and get a sorted list of every path that changed — keys are sorted alphabetically, arrays by index, and changed values show both sides. This is the fastest way to review config diffs, API response migrations or deployment-generator changes before committing.</p>
<h2>Review-Ready Output</h2>
<p>The diff output is plain text of <code>+</code>/<code>-</code>/<code>~</code> lines with full paths, easy to scan and paste into issue trackers. No registration, no watermark, no limits.</p>
<h2>JSON Diff FAQ</h2>
<p><strong>What counts as "changed"?</strong> Any leaf value that differs (numbers, strings, booleans, null) or a key present in only one side. <strong>Big JSON files?</strong> The flattener handles deep nesting and large arrays comfortably — it is a simple in-memory pass. <strong>Order-insensitive?</strong> Object keys are sorted before comparison, so reordered keys do not count as changes; arrays, however, are compared by position.</p>
</div>
<div id="crypto-donate"></div>
<script src="scripts/json-diff-lib.js"></script>
<script src="donate.js"></script>
<script>
const JD = window.JsonDiffLib;
const inp = document.getElementById('inp');
const out = document.getElementById('out');
// repurpose: two inputs for A and B
inp.placeholder = 'Document A (JSON)';
const bta = document.createElement('textarea');
bta.placeholder = 'Document B (JSON)';
bta.style.cssText = inp.style.cssText;
inp.parentNode.insertBefore(bta, out);
const cases = [
  {name:'Diff', fn:()=>{ out.textContent = JD.toText(JD.diff(inp.value, bta.value)); }},
  {name:'Swap ▸', fn:()=>{ const t=inp.value; inp.value=bta.value; bta.value=t; }}
];
const wrap = document.getElementById('cases');
cases.forEach(c=>{ const b=document.createElement('button'); b.className='case'; b.innerHTML='<span class="n">'+c.name+'</span>'; b.onclick=c.fn; wrap.appendChild(b); });
function copyOut(){}
function clearAll(){}
</script>
</body>
</html>