jsondiffpatch
Diff & patch JavaScript objects
Live Demo
- min+gzipped < 6KB
- browser (
/public/build/jsondiffpatch.js
) and server (eg. node.js) - includes google-diff-match-patch for long text diffs (diff at character level)
- smart array diffing using LCS, IMPORTANT NOTE: to match objects inside an array you must provide an
objectHash
function (this is how objects are matched, otherwise a dumb match by position is used). For more details, check Array diff documentation - reverse a delta
- unpatch (eg. revert object to its original state using a delta)
- simplistic, pure JSON, low footprint delta format
- multiple output formatters:
- html (check it at the Live Demo)
- annotated json (html), makes the JSON delta format self-explained
- console (colored), try running
./node_modules/.bin/jsondiffpatch left.json right.json
- write your own! check Formatters documentation
Supported platforms
- Any modern browser and IE8+
And you can test your current browser visiting the test page.
If you want to run tests locally:
npm i# will test in node.js and phantomjs (headless browser)npm test# or test on specific browsers (using karma.js)BROWSERS=chrome,phantomjs npm test
Usage
// sample datavar country =name: "Argentina"capital: "Buenos Aires"independence: 1816 6 9unasur: true;// clone country, using dateReviver for Date objectsvar country2 = JSON;// make some changescountry2name = "Republica Argentina";country2population = 41324992;delete country2capital;var delta = jsondiffpatch;;// patch originaljsondiffpatch;// reverse diffvar reverseDelta = jsondiffpatch;// also country2 can be return to original value with: jsondiffpatch.unpatch(country2, delta);var delta2 = jsondiffpatch;// undefined => no difference
Array diffing:
// sample datavar country =name: "Argentina"cities:name: 'Buenos Aires'population: 13028000name: 'Cordoba'population: 1430023name: 'Rosario'population: 1136286name: 'Mendoza'population: 901126name: 'San Miguel de Tucuman'population: 800000;// clone countryvar country2 = JSON;// delete Cordobacountrycities;// add La Platacountrycities;// modify Rosario, and move itvar rosario = countrycities0;rosariopopulation += 1234;countrycities;// create a configured instance, match objects by namevar diffpatcher = jsondiffpatch;var delta = diffpatcher;;
For more example cases (nested objects or arrays, long text diffs) check test/examples/
If you want to understand deltas, see delta format documentation
Installing
npm (node.js)
npm install jsondiffpatch
var jsondiffpatch = ;
bower (browser)
bower install jsondiffpatch
browser bundles are in the /public/build
folder (you can re-generate these using make
or gulp
, npm test
will do that too):
jsondiffpatch.js
main bundlejsondiffpatch.full.js
main bundle + google-diff-match-patch library for text diffsjsondiffpatch-formatters.js
builtin formatters (only those useful in a browser)
All these come in minified versions (.min.js
), and separate sourcemap files.
Options
var jsondiffpatch =;
Visual Diff
To see formatters in action check the Live Demo.
For more details check Formatters documentation
Console
# diff two json files, colored output (using chalk lib)./node_modules/.bin/jsondiffpatch ./left.json ./right.json# or install globallynpm install -g jsondiffpatchjsondiffpatch ./demo/left.json ./demo/right.json
Plugins
diff()
, patch()
and reverse()
functions are implemented using Pipes & Filters pattern, making it extremely customizable by adding or replacing filters on a pipe.
Check Plugins documentation for details.