[Feature]: Add (JSON) Diff Viewer widget

[yan-hic]

Is there an existing issue for this?

• I have searched the existing issues

Summary

See https://docs.superblocks.com/components/diff-viewer
It allows to quickly see what is different between 2 API responses for instance, or 2 "records" from a db.

Why should this be worked on?

Many react or vue plugins available for this on github - if not planned to add any time soon in core appsmith, request to create a tutorial on how to wrap a js plugin into a custom appsmith widget.

Front conversations

[yan-hic]

f/u of https://discord.com/channels/725602949748752515/1006426744129069096/threads/1027108410275139624

[ikad95]

Hey, I have a use case for this. Any plans to include this anytime soon?

[dilippitchika]

@ikad95 thanks for showing interest in the widget, can you please let me know your use-case and who your users are?

[ikad95]

I am doing a PoC on low-code platforms for building internal tools for my company. One of the use cases is showing JSON diff to the user. The summary mentions creating a custom Appsmith widget, which also seems to be in the works. #2033.

[dilippitchika]

Can you talk more about the use-case of how exactly a json diff viewer will be used in your company?

[ikad95]

A/B testing of API responses

[ikad95]

Following up to get an ETA on this widget

[dilippitchika]

@ikad95 we haven't picked it up for adding a new widget. @GreenFlux see if you can help them with the iframe version.

[GreenFlux]

@ikad95 @dilippitchika I'm looking into a few different solutions for this. Could you provide some more info on your use case? Do you need to edit the JSON, or just display and compare two values?

[ikad95]

@GreenFlux Just display and compare

[ikad95]

@GreenFlux I have tried using an iframe widget to display another webpage created using React. Can you think of a solution that won't require a front-end server?

[GreenFlux]

@ikad95 you can write HTML in a JS Object and then bind that to the iframe srcDoc property.