JSON Diff Viewer
Paste two JSON blobs and see exactly what changed, nested and all.
IntermediateWeb appDev tool10–20hAI-buildable 4/5no setup
Structural diffing rather than line diffing: two JSON documents go in, and a collapsible tree comes out with additions, removals and changes marked at whatever depth they occur. Line-based diff tools are useless on reformatted JSON, which is what makes this worth building properly.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 6
- Two panes accept pasted JSON with validation feedback
- The diff renders as a collapsible tree, not as text lines
- Added, removed and changed values are visually distinct
- Unchanged subtrees collapse by default and can be expanded
- Array diffing accounts for reordering, not just index position
- Invalid JSON reports the parse error with its position
The interesting part
- Recursive diff over arbitrarily nested structures
- Array diffing where elements moved rather than changed
- Rendering deep trees without the layout falling apart
Once it works
- Add a copy-as-JSON-patch output
- Support very large documents via virtualisation
- Add a URL-shareable diff
Suggested stack
reacttypescripttailwind