Herramientas Guías
developer Gratis Sin registro

Comparador de diferencias JSON

Compare en profundidad dos objetos JSON y visualice las claves añadidas, eliminadas y modificadas.

Cargando la herramienta…

Acerca de esta herramienta

Pegue dos documentos JSON en los paneles lado a lado y vea instantáneamente una diferencia codificada por colores: verde para las claves añadidas, rojo para las claves eliminadas, amarillo/naranja para los valores modificados y gris para el contenido sin cambios. Alterne entre vistas de diferencia lado a lado y unificada, navegue entre diferencias con los botones anterior/siguiente y vea un recuento resumen de todos los cambios.

Cómo usar

  1. 1 Paso 1: Pegue su JSON original en el panel izquierdo y el JSON modificado en el panel derecho.
  2. 2 Paso 2: Haga clic en 'Compare' — la diferencia se calcula instantáneamente y se resalta en ambos paneles.
  3. 3 Paso 3: Compruebe la barra de resumen para ver el recuento de claves añadidas, eliminadas y modificadas.
  4. 4 Paso 4: Use los botones Prev / Next para saltar entre cada diferencia, o alterne a la vista unificada.

What a structural JSON diff actually compares

A plain text diff treats JSON as lines of characters, so reordering keys or re-indenting a file lights up as a sea of changes even when nothing meaningful moved. A structural diff — what this tool performs — parses both inputs into real objects first, then walks the two trees key by key. The result tells you which keys were added, which were removed, and which kept the same key but changed value. Because it compares the parsed structure rather than the raw text, whitespace and key order are irrelevant; only genuine differences in data appear.

How the comparison algorithm works

The diff is recursive. At each node it first checks that the two values are the same kind of thing — an object versus an array versus a primitive. If the types differ, the whole node is reported as changed. For two objects, it gathers the union of keys from both sides: a key present only on the right is added, a key present only on the left is removed, and a key in both is compared by descending into it. For primitives (strings, numbers, booleans, null), it uses strict equality, so 5 and "5" are reported as different because one is a number and one is a string. Every difference carries a dotted path like address.city so you can see exactly where in the tree it lives.

A worked example

Load the built-in sample and you compare these two objects:

  • Left: { name:"Alice", age:30, role:"admin", tags:["a","b"], address:{ city:"Seoul", zip:"12345" } }
  • Right: the same, but age:31, role:"user", tags:["a","b","c"], address.city:"Busan", address.zip:"54321", plus a new email key.

The summary reports 1 added (email), 0 removed, and several changed values: age, role, address.city, address.zip, and tags.2 (the new third array element). Notice how nested paths are fully qualified, so a change buried inside address is just as visible as a top-level one.

Side-by-side versus unified view

The side-by-side view renders both documents as formatted JSON with color cues — added keys glow green on the right, removed keys glow red on the left, and changed values are highlighted amber on both panes — so you read the two states in context. The unified view collapses everything into one list grouped by change type: a block of + added lines, a block of - removed lines, and a block of ~ changed lines that print the old and new value together. Side-by-side is best for reviewing structure; unified is best for copying a concise changelog of exactly what differs. The prev/next buttons let you step through differences one at a time.

The array caveat you must know

Arrays are compared strictly by index, not by content matching. If you insert one element at the front of a list, every following element shifts by one position, so the diff reports them all as changed even though their values merely moved. This is the single most common source of confusing output. When you expect a small change but see a cascade of differences in an array, suspect an insertion or deletion near the top. For order-independent data, sort both arrays the same way before comparing, or compare the objects by a stable key rather than by position.

Practical use cases

  • API regression checks: capture a known-good response and diff it against a new build to catch unintended field changes.
  • Config drift: compare a staging config against production to spot a setting that was changed on one but not the other.
  • Reviewing edits: paste the before and after of a JSON file you hand-edited to confirm you changed only what you intended.
  • Debugging serialization: verify that data survives a round trip through encode and decode unchanged.

Tips and privacy

If either input fails to parse, the tool shows the parser's error message with the approximate location, so fix the syntax — a trailing comma or unquoted key is the usual culprit — before comparing. Because JSON object key order does not affect the structural diff, you do not need to sort keys first; identical data in different orders correctly reports zero differences. All parsing and comparison run entirely in your browser, so the documents you paste never leave your device — safe for diffing configuration or response data that contains secrets.

Preguntas frecuentes

{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI integrity hash, so the browser refused to run it and window.Alpine was never defined — silently breaking every FAQ accordion and Alpine tool.) #}