JSON Diff or Compare Component


I came accross this component on another lo-code platform and thought it was a great idea - a diff-tool for JSON which outputs the results in a human-readable, side-by-side, way but can also pass out the diffs in an array to be used elsewhere. If you're ever dealing with a situation where you want to quickly understand the raw before/after effects of a data change then this kind of component can be really useful.


@dcsearle did you implement a solution to do this in your app?

i am faced with comparing two JSON objects (temporary state) and returning those records that are different between the two.

hoping i don't have to do a nasty JSON parse and compare and there's something more elegant out there.

thanks for any feedback.

@nels5722 , I did get something together in the end, by no means perfect but was enough for me to snap-compare...

I imported the JSON diffpatch package:

Then added a JS query (note that the JSON I'm comparing is actually converted from XML, but you probably don't care about that step)...

var a = tfrEntityBeforeXMLtoJSON.value;
var b = tfrEntityAfterXMLtoJSON.value;

var delta = jsondiffpatch.diff(a,b);

if (delta == null){
    delta = "Nothing to compare or there are no differences.";
    return delta;
return jsondiffpatch.formatters.html.format(

The result of which renders onto a HTML component...

Hope this helps you :slightly_smiling_face:


1 Like

big help. thank you. i'm new to retool and js and didn't even know you could import packages.