Diff JSON
Compare dos documentos JSON y vea exactamente qué campos se añadieron, eliminaron o modificaron
JSON A (izquierda / antes)
JSON B (derecha / después)
Diff JSON
Compare dos documentos JSON y vea exactamente qué campos se añadieron, eliminaron o modificaron
Características
- Diff estructural entre dos valores JSON — objetos, arrays y primitivos se recorren correctamente (null se trata como escalar, no objeto, corrigiendo el bug typeof null)
- Cada diferencia se reporta como una ruta JSON Pointer RFC 6901 (p. ej. `/users/0/email`) para navegar directamente al nodo exacto en datos profundamente anidados
- Las entradas modificadas muestran valores antes Y después lado a lado, así se ve si 'active' pasó de true→false o si un número cambió
- Contadores resumen: añadidos, eliminados, modificados y hojas sin cambios — la escala del diff de un vistazo antes de leer el detalle por ruta
- Informe de error de análisis por lado indica qué entrada falló e incluye el mensaje del motor JavaScript — no adivina si A o B está malformado
- El botón Copiar informe emite el diff completo (secciones Añadidos / Eliminados / Modificados más contador sin cambios) como texto plano — péguelo en una revisión de código o mensaje de commit
- Cargar ejemplo rellena ambos paneles con un ejemplo pequeño y realista (registro de usuario con cambios de rol + dirección) para que los nuevos usuarios vean el diff sin escribir nada
- Puramente del lado cliente: JSON A y JSON B se analizan y comparan en su navegador; nada se sube, y la herramienta funciona sin conexión tras la carga
Cómo usar
- Pegue su JSON «antes» en el área de texto izquierda (JSON A) y el JSON «después» en la derecha (JSON B).
- Pulse Comparar. El diff se calcula recursivamente; los objetos se comparan por clave, los arrays por índice.
- Lea los contadores: cuántas claves añadidas, eliminadas, modificadas, y cuántas hojas coincidieron.
- Desplácese por las listas para ver qué rutas JSON Pointer cambiaron; las filas modificadas muestran antes → después.
- Pulse Copiar informe para obtener todo el diff como texto plano — útil para notas de revisión, informes de bug o mensajes de commit.
- Use Cargar ejemplo para ver un ejemplo funcional antes de pegar sus datos.
Consejos y buenas prácticas
- Pase ambos lados por JSON Formatter primero si quiere que un diff de texto también vea documentos estructuralmente iguales como sin cambios.
- Para arrays grandes donde el orden importa, esta herramienta es justo lo adecuado; para sets, preordene por una clave estable.
- La salida de ruta es RFC 6901, así que puede pasarla directamente a librerías como fast-json-patch para aplicar cambios programáticamente.
- Pegue el informe en descripciones de PR para mostrar a los revisores exactamente qué cambió en un JSON de config o fixture.
- Si los errores de análisis apuntan a una columna específica, el mensaje del motor a menudo incluye línea/columna de parsers tipo json5 — aquí usamos JSON.parse estricto, así que línea/columna viene del host.
Preguntas frecuentes
¿Cómo se comparan los arrays — por índice o por valor?
Por índice. El elemento 0 de A se compara con el 0 de B, 1 con 1, etc. Si A es más largo, los índices extra se reportan como Eliminados; si B es más largo, la cola extra es Añadida. Rápido y predecible, pero una inserción al inicio de un array grande cascada en muchas entradas «modificado». Para comparaciones insensibles al orden (sets de IDs únicos), ordene ambos arrays antes o preprocese a objetos indexados por el identificador.
¿Qué notación de ruta hay en el resultado?
JSON Pointer RFC 6901: las rutas son tokens separados por barras que descienden en el árbol JSON. `/users/0/email` significa «la propiedad email del elemento 0 de users». Las claves con `~` se escapan como `~0`, las barras como `~1`. La raíz se muestra como `/`. La misma notación que usan herramientas de patch, JSON Schema instancePath y el hover de pointer en json-formatter.
¿Cómo se maneja null?
null se trata como valor hoja, no como objeto — aunque en JavaScript typeof null === 'object'. Así {a: null} vs {a: {}} aparece como modificado en lugar de recursar a un objeto vacío. {a: null} vs {a: null} cuenta como una hoja sin cambios, y {a: null} vs {a: 0} aparece como modificado con antes=null después=0.
¿El diff maneja claves con caracteres especiales?
Sí. Las claves con puntos, barras, corchetes o tildes se escapan JSON-Pointer en la salida de ruta — `~` se convierte en `~0`, `/` en `~1`. Así una clave literal `a/b` aparece como `/a~1b` en la ruta, inequívocamente reversible.
¿Por qué el contador sin cambios no coincide con mi expectativa?
Sin cambios se cuenta a nivel HOJA — primitivos iguales entre A y B. Un objeto profundamente anidado cuyo subárbol es totalmente idéntico aporta una entrada sin cambios por hoja, no una por el subárbol entero. Esto hace al contador una verdadera comprobación: «cuántos valores primitivos se mantuvieron iguales».
¿Qué pasa si un lado es null o vacío?
Entrada vacía parsea como null (así `{a:1}` vs vacío compara contra null y reporta todo el objeto como añadido). Un `null` literal es un documento JSON válido; comparar dos nulls da cero añadidos/eliminados/modificados y uno sin cambios. Si ambas entradas están vacías, el diff trivialmente reporta cero en todo.
¿Mi JSON se envía a algún sitio?
No. Ambos cuadros de texto permanecen en su navegador; el diff corre en el mismo contexto JavaScript que renderizó la página. La pestaña Red de DevTools no muestra peticiones al pulsar Comparar. La herramienta funciona sin conexión tras cachear la página.
¿En qué se diferencia de un diff de texto línea a línea?
Un diff de texto como `diff a.json b.json` opera sobre caracteres y saltos de línea: reformatee los mismos datos y se ilumina. Este es un diff ESTRUCTURAL: `{"a":1, "b":2}` y `{"b":2, "a":1}` son idénticos (cero diff). Tampoco le importa la indentación, espacios al final o estilos de comentario. Use un diff de texto cuando importa el formato; este cuando importan los datos.