Skip to main content

Diff Viewer

An interactive text box to edit and test code.

Use the Diff Viewer to compare and show diffs between two pieces of text.

Use Diff Viewer to compare data

You can leverage the Diff Viewer component to display the differences between two pieces of data either statically or dynamically loaded. The JSON compare method will highlight differences even if the JSON fields are in a different order.

Diff viewer component showing differences between two code blocks

Sample original text:

[
{
"city": "Toronto",
"population": 2930000,
"country": "Canada"
},
{
"city": "New York",
"population": 8419000,
"country": "USA"
}
]

Sample new text:

[
{
"city": "Toronto",
"population": 3500000,
"country": "Canada"
},
{
"city": "New York",
"population": 8419000,
"country": "USA"
},
{
"city": "Vancouver",
"population": 675218,
"country": "Canada"
}
]

Diff Viewer Properties

Component Properties

Diff Viewer PropertyDescription
Compare MethodSelect the compare method for the diff to use
Original LabelSet the text to be displayed for the original text
Original TextThe original text for comparison
New LabelSet the text to be displayed for the new text
New TextThe new text for comparison
Compact ViewCollapse lines without a diff
VisibleControls the visibility of the component, values are a boolean
Loading AnimationControls the loading state of the component, values are a boolean

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Diff Viewer component, and dot referencing the property. For a Diff Viewer named Diff1:

PropertyDescription
Diff1.diffsReturns an array of diffs