Utiltown

JSON Diff

Paste a JSON document on each side and compare them side by side with color-coded highlights. Line-based comparison normalizes whitespace and reorders keys, so only real differences are flagged. Fully local: your data never leaves your device.

All computations run locally in your browser, no data uploaded to server. 
 
 
 
  
 
How To Use
 
     
  1. Paste your baseline JSON into the Left JSON box and the changed version into the Right JSON box.
    2.  
  2. The diff updates automatically as you type — no button to press.
    3.  
  3. Read the two panes side by side: added (green), removed (red), and changed values (amber).
    4.  
  4. Use Diff Demo to load a sample, Swap left / right to flip the comparison, or Copy left / Copy right to grab either side.
    5.  
 
 
 
Usage Example
 
Comparing a config where the stars value changed and a new tag was added:
 
Left:
{
  "name": "Utiltown",
  "stars": 1280,
  "tags": ["json", "format"]
}

Right:
{
  "name": "Utiltown",
  "stars": 2048,
  "tags": ["json", "format", "diff"]
}
 

The result highlights the stars line in both panes (amber:
        changed value) and the "diff" entry as added (green) on the
        right. Because keys are normalized, documents that only reorder their
        keys are treated as identical.

 
 
 
Frequently Asked Questions
  
Is my data uploaded to a server?
 
No. The comparison runs entirely in your browser. Your input and output never leave this page.
  
Why don't reordered keys show as differences?
 
Before comparing, object keys are sorted alphabetically and each document is pretty-printed. This strips out differences that are only cosmetic — whitespace, indentation, and key order — so the result reflects actual changes to your data.
  
What do the highlight colors mean?
 
Green marks a value present only on the right (added), red marks a value present only on the left (removed), and amber marks a value that changed between the two documents. Both panes scroll in sync so the matching lines stay aligned.
  
What happens if one side is invalid JSON?
 
A clear error appears below the controls naming which side is invalid. The other side continues to render so you can still inspect it. Fix the invalid input and the diff resumes automatically.