How to Compare JSON Files: Structural vs Text Diff

Step by step

1. 1

   Load your JSON files

   Drop, paste, or upload two JSON files into UtraDiff. The tool auto-detects JSON by extension (.json) or content sniffing, so renamed files work too.

2. 2

   Switch to structural diff

   UtraDiff defaults to text diff (line-by-line with syntax highlighting). Click the "Structural" tab to switch to tree-based comparison. This parses both files into object trees and compares them by key path.

3. 3

   Read the diff tree

   Green nodes are additions, red are deletions, yellow are changes. Unchanged branches are collapsed by default. Click any node to expand and see nested changes — key reordering is ignored, so only real data differences appear.

4. 4

   Toggle text diff alongside

   Use side-by-side mode (Ctrl+Shift+S) to see the raw text diff next to the structural view. This helps when you need to verify exact formatting changes like trailing commas or whitespace.

5. 5

   Export or share

   Copy the diff URL to share with teammates, or export as PNG for documentation. The structural view exports cleanly with colour-coded changes preserved.

Why UtraDiff

Most online diff tools treat JSON as text, so a simple key reorder lights up the entire file. UtraDiff's structural diff builds an AST from both files and compares by key path — reordered keys, reformatted whitespace, and trailing comma changes are silently ignored. Only actual value changes are highlighted. It also supports cross-format comparison: drop a JSON file on one side and a YAML file on the other to see a structural diff across formats.

Tips

• •Use the "Ignore whitespace" toggle when comparing auto-formatted JSON — it strips the noise from Prettier or ESLint reformatting.
• •For package.json comparisons, structural diff is essential — dependency objects are often alphabetically reordered by package managers.
• •JSONL (JSON Lines) files are supported too — each line is parsed as a separate JSON object and compared row by row.
• •Try cross-format comparison: paste JSON on the left and YAML on the right to verify a manual format conversion preserved all values.

Common pitfalls

• •JSON does not support comments — if your file has // comments, it may be JSON5. UtraDiff detects this automatically and switches to JSON5 parsing.
• •Large JSON files (10MB+) may be slow in structural mode because the entire tree must be parsed and diffed in the browser. Text diff is faster for very large files.
• •Numeric precision: JSON numbers are IEEE 754 doubles. Comparing 0.1 + 0.2 may show floating-point differences that are not meaningful.

Related