json-diff-ts

Overview

Modern TypeScript JSON diff library - json-diff-ts is a lightweight, high-performance TypeScript library for calculating and applying differences between JSON objects. Perfect for modern web applications, state management, data synchronization, and real-time collaborative editing.

🚀 Why Choose json-diff-ts?

• 🔥 Zero dependencies - Lightweight bundle size
• ⚡ High performance - Optimized algorithms for fast JSON diffing and patching
• 🎯 95%+ test coverage - Thoroughly tested with comprehensive test suite
• 📦 Modern ES modules - Full TypeScript support with tree-shaking
• 🔧 Flexible API - Compare, diff, patch, and atomic operations
• 🌐 Universal - Works in browsers, Node.js, and edge environments
• ✅ Production ready - Used in enterprise applications worldwide
• 🎯 TypeScript-first - Full type safety and IntelliSense support
• 🔧 Modern features - ESM + CommonJS, JSONPath, atomic operations
• 📦 Production ready - Battle-tested with comprehensive test suite

✨ Key Features

• Key-based array identification: Compare array elements using keys instead of indices for more intuitive diffing
• JSONPath support: Target specific parts of JSON documents with precision
• Atomic changesets: Transform changes into granular, independently applicable operations
• Dual module support: Works with both ECMAScript Modules and CommonJS
• Type change handling: Flexible options for handling data type changes
• Path skipping: Skip nested paths during comparison for performance

This library is particularly valuable for applications where tracking changes in JSON data is crucial, such as state management systems, form handling, or data synchronization.

Installation

1npm install json-diff-ts

Quick Start

1import { diff, applyChangeset } from 'json-diff-ts';
2
3// Two versions of data
4const oldData = { name: 'Luke', level: 1, skills: ['piloting'] };
5const newData = { name: 'Luke Skywalker', level: 5, skills: ['piloting', 'force'] };
6
7// Calculate differences
8const changes = diff(oldData, newData);
9console.log(changes);
10// Output: [
11//   { type: 'UPDATE', key: 'name', value: 'Luke Skywalker', oldValue: 'Luke' },
12//   { type: 'UPDATE', key: 'level', value: 5, oldValue: 1 },
13//   { type: 'ADD', key: 'skills', value: 'force', embeddedKey: '1' }
14// ]
15
16// Apply changes to get the new object
17const result = applyChangeset(oldData, changes);
18console.log(result); // { name: 'Luke Skywalker', level: 5, skills: ['piloting', 'force'] }

Import Options

TypeScript / ES Modules:

1import { diff } from 'json-diff-ts';

CommonJS:

1const { diff } = require('json-diff-ts');

Core Features

diff

Generates a difference set for JSON objects. When comparing arrays, if a specific key is provided, differences are determined by matching elements via this key rather than array indices.

Basic Example with Star Wars Data

1import { diff } from 'json-diff-ts';
2
3// State during A New Hope - Desert planet, small rebel cell
4const oldData = {
5  location: 'Tatooine',
6  mission: 'Rescue Princess',
7  status: 'In Progress',
8  characters: [
9    { id: 'LUKE_SKYWALKER', name: 'Luke Skywalker', role: 'Farm Boy', forceTraining: false },
10    { id: 'LEIA_ORGANA', name: 'Princess Leia', role: 'Prisoner', forceTraining: false }
11  ],
12  equipment: ['Lightsaber', 'Blaster']
13};
14
15// State after successful rescue - Base established, characters evolved
16const newData = {
17  location: 'Yavin Base',
18  mission: 'Destroy Death Star',
19  status: 'Complete',
20  characters: [
21    { id: 'LUKE_SKYWALKER', name: 'Luke Skywalker', role: 'Pilot', forceTraining: true, rank: 'Commander' },
22    { id: 'HAN_SOLO', name: 'Han Solo', role: 'Smuggler', forceTraining: false, ship: 'Millennium Falcon' }
23  ],
24  equipment: ['Lightsaber', 'Blaster', 'Bowcaster', 'X-wing Fighter']
25};
26
27const diffs = diff(oldData, newData, { embeddedObjKeys: { characters: 'id' } });
28console.log(diffs);
29// First operations:
30// [
31//   { type: 'UPDATE', key: 'location', value: 'Yavin Base', oldValue: 'Tatooine' },
32//   { type: 'UPDATE', key: 'mission', value: 'Destroy Death Star', oldValue: 'Rescue Princess' },
33//   { type: 'UPDATE', key: 'status', value: 'Complete', oldValue: 'In Progress' },
34//   ...
35// ]

Advanced Options

Path-based Key Identification

1import { diff } from 'json-diff-ts';
2
3// Using nested paths for sub-arrays
4const diffs = diff(oldData, newData, { embeddedObjKeys: { 'characters.equipment': 'id' } });
5
6// Designating root with '.' - useful for complex nested structures
7const diffs = diff(oldData, newData, { embeddedObjKeys: { '.characters.allies': 'id' } });

Type Change Handling

1import { diff } from 'json-diff-ts';
2
3// Control how type changes are treated
4const diffs = diff(oldData, newData, { treatTypeChangeAsReplace: false });

Date objects can now be updated to primitive values without errors when treatTypeChangeAsReplace is set to false.

Skip Nested Paths

1import { diff } from 'json-diff-ts';
2
3// Skip specific nested paths from comparison - useful for ignoring metadata
4const diffs = diff(oldData, newData, { keysToSkip: ['characters.metadata'] });

Dynamic Key Resolution

1import { diff } from 'json-diff-ts';
2
3// Use function to resolve object keys dynamically
4const diffs = diff(oldData, newData, {
5  embeddedObjKeys: {
6    characters: (obj, shouldReturnKeyName) => (shouldReturnKeyName ? 'id' : obj.id)
7  }
8});

Regular Expression Paths

1import { diff } from 'json-diff-ts';
2
3// Use regex for path matching - powerful for dynamic property names
4const embeddedObjKeys = new Map();
5embeddedObjKeys.set(/^characters/, 'id');  // Match any property starting with 'characters'
6const diffs = diff(oldData, newData, { embeddedObjKeys });

String Array Comparison

1import { diff } from 'json-diff-ts';
2
3// Compare string arrays by value instead of index - useful for tags, categories
4const diffs = diff(oldData, newData, { embeddedObjKeys: { equipment: '$value' } });

atomizeChangeset and unatomizeChangeset

Transform complex changesets into a list of atomic changes (and back), each describable by a JSONPath.

1import { atomizeChangeset, unatomizeChangeset } from 'json-diff-ts';
2
3// Create atomic changes
4const atomicChanges = atomizeChangeset(diffs);
5
6// Restore the changeset from a selection of atomic changes
7const changeset = unatomizeChangeset(atomicChanges.slice(0, 3));

Atomic Changes Structure:

1[
2  { 
3    type: 'UPDATE', 
4    key: 'location', 
5    value: 'Yavin Base', 
6    oldValue: 'Tatooine', 
7    path: '$.location', 
8    valueType: 'String' 
9  },
10  { 
11    type: 'UPDATE', 
12    key: 'mission', 
13    value: 'Destroy Death Star', 
14    oldValue: 'Rescue Princess', 
15    path: '$.mission', 
16    valueType: 'String' 
17  },
18  { 
19    type: 'ADD', 
20    key: 'rank', 
21    value: 'Commander', 
22    path: "$.characters[?(@.id=='LUKE_SKYWALKER')].rank", 
23    valueType: 'String' 
24  },
25  { 
26    type: 'ADD', 
27    key: 'HAN_SOLO', 
28    value: { id: 'HAN_SOLO', name: 'Han Solo', role: 'Smuggler', forceTraining: false, ship: 'Millennium Falcon' }, 
29    path: "$.characters[?(@.id=='HAN_SOLO')]", 
30    valueType: 'Object' 
31  }
32]

applyChangeset and revertChangeset

Apply or revert changes to JSON objects.

1import { applyChangeset, revertChangeset } from 'json-diff-ts';
2
3// Apply changes
4const updated = applyChangeset(oldData, diffs);
5console.log(updated);
6// { location: 'Yavin Base', mission: 'Destroy Death Star', status: 'Complete', ... }
7
8// Revert changes
9const reverted = revertChangeset(newData, diffs);
10console.log(reverted);
11// { location: 'Tatooine', mission: 'Rescue Princess', status: 'In Progress', ... }

API Reference

Core Functions

Function	Description	Parameters
diff(oldObj, newObj, options?)	Generate differences between two objects	oldObj: Original object newObj: Updated object options: Optional configuration
applyChangeset(obj, changeset)	Apply changes to an object	obj: Object to modify changeset: Changes to apply
revertChangeset(obj, changeset)	Revert changes from an object	obj: Object to modify changeset: Changes to revert
atomizeChangeset(changeset)	Convert changeset to atomic changes	changeset: Nested changeset
unatomizeChangeset(atomicChanges)	Convert atomic changes back to nested changeset	atomicChanges: Array of atomic changes

Comparison Functions

Function	Description	Parameters
compare(oldObj, newObj)	Create enriched comparison object	oldObj: Original object newObj: Updated object
enrich(obj)	Create enriched representation of object	obj: Object to enrich
createValue(value)	Create value node for comparison	value: Any value
createContainer(value)	Create container node for comparison	value: Object or Array

Options Interface

1interface Options {
2  embeddedObjKeys?: Record<string, string | Function> | Map<string | RegExp, string | Function>;
3  keysToSkip?: string[];
4  treatTypeChangeAsReplace?: boolean;
5}

Option	Type	Description
embeddedObjKeys	`Record<string, string	Function>orMap<string
keysToSkip	string[]	Dotted paths to exclude from comparison, e.g. "meta.info".
treatTypeChangeAsReplace	boolean	When true (default), a type change results in a REMOVE/ADD pair. Set to false to treat it as an UPDATE.

Change Types

1enum Operation {
2  REMOVE = 'REMOVE',
3  ADD = 'ADD', 
4  UPDATE = 'UPDATE'
5}

Release Notes

• v4.8.1: Improved documentation with working examples and detailed options.

• v4.8.0: Significantly reduced bundle size by completely removing es-toolkit dependency and implementing custom utility functions. This change eliminates external dependencies while maintaining identical functionality and improving performance.

• v4.7.0: Optimized bundle size and performance by replacing es-toolkit/compat with es-toolkit for difference, intersection, and keyBy functions

• v4.6.3: Fixed null comparison returning update when values are both null (fixes issue #284)

• v4.6.2: Fixed updating to null when treatTypeChangeAsReplace is false and bumped Jest dev dependencies

• v4.6.1: Consistent JSONPath format for array items (fixes issue #269)

• v4.6.0: Fixed filter path regex to avoid polynomial complexity

• v4.5.1: Updated package dependencies

• v4.5.0: Switched internal utilities from lodash to es-toolkit/compat for a smaller bundle size

• v4.4.0: Fixed Date-to-string diff when treatTypeChangeAsReplace is false

• v4.3.0: Enhanced functionality:

  • Added support for nested keys to skip using dotted path notation in the keysToSkip option
  • This allows excluding specific nested object paths from comparison (fixes #242)

• v4.2.0: Improved stability with multiple fixes:

  • Fixed object handling in atomizeChangeset and unatomizeChangeset
  • Fixed array handling in applyChangeset and revertChangeset
  • Fixed handling of null values in applyChangeset
  • Fixed handling of empty REMOVE operations when diffing from undefined

• v4.1.0: Full support for ES modules while maintaining CommonJS compatibility

• v4.0.0: Changed naming of flattenChangeset and unflattenChanges to atomizeChangeset and unatomizeChangeset; added option to set treatTypeChangeAsReplace

• v3.0.1: Fixed issue with unflattenChanges when a key has periods

• v3.0.0: Added support for both CommonJS and ECMAScript Modules. Replaced lodash-es with lodash to support both module formats

• v2.2.0: Fixed lodash-es dependency, added exclude keys option, added string array comparison by value

• v2.1.0: Fixed JSON Path filters by replacing single equal sign (=) with double equal sign (==). Added support for using '.' as root in paths

• v2.0.0: Upgraded to ECMAScript module format with optimizations and improved documentation. Fixed regex path handling (breaking change: now requires Map instead of Record for regex paths)

• v1.2.6: Enhanced JSON Path handling for period-inclusive segments

• v1.2.5: Added key name resolution support for key functions

• v1.2.4: Documentation updates and dependency upgrades

• v1.2.3: Updated dependencies and TypeScript

Contributing

Contributions are welcome! Please follow the provided issue templates and code of conduct.

Performance & Bundle Size

• Zero dependencies: No external runtime dependencies
• Lightweight: ~21KB minified, ~6KB gzipped
• Tree-shakable: Use only what you need with ES modules
• High performance: Optimized for large JSON objects and arrays

Use Cases

• State Management: Track changes in Redux, Zustand, or custom state stores
• Form Handling: Detect field changes in React, Vue, or Angular forms
• Data Synchronization: Sync data between client and server efficiently
• Version Control: Implement undo/redo functionality
• API Optimization: Send only changed data to reduce bandwidth
• Real-time Updates: Track changes in collaborative applications

Comparison with Alternatives

Feature	json-diff-ts	deep-diff	jsondiffpatch
TypeScript	✅ Native	❌ Partial	❌ Definitions only
Bundle Size	🟢 21KB	🟡 45KB	🔴 120KB+
Dependencies	🟢 Zero	🟡 Few	🔴 Many
ESM Support	✅ Native	❌ CJS only	❌ CJS only
Array Key Matching	✅ Advanced	❌ Basic	✅ Advanced
JSONPath Support	✅ Full	❌ None	❌ Limited

FAQ

Q: Can I use this with React/Vue/Angular?
A: Yes! json-diff-ts works with any JavaScript framework or vanilla JS.

Q: Does it work with Node.js?
A: Absolutely! Supports Node.js 18+ with both CommonJS and ES modules.

Q: How does it compare to JSON Patch (RFC 6902)?
A: json-diff-ts provides a more flexible format with advanced array handling, while JSON Patch is a standardized format.

Q: Is it suitable for large objects?
A: Yes, the library is optimized for performance and can handle large, complex JSON structures efficiently.

Contact

Reach out to the maintainer:

• LinkedIn: Christian Glessner
• Twitter: @leitwolf_io

Discover more about the company behind this project: hololux

Acknowledgments

This project takes inspiration and code from diff-json by viruschidai@gmail.com.

License

json-diff-ts is open-sourced software licensed under the MIT license.

The original diff-json project is also under the MIT License. For more information, refer to its license details.