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.

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 Property	Description
Compare Method	Select the compare method for the diff to use
Original Label	Set the text to be displayed for the original text
Original Text	The original text for comparison
New Label	Set the text to be displayed for the new text
New Text	The new text for comparison
Compact View	Collapse lines without a diff
Visible	Controls the visibility of the component, values are a boolean
Loading Animation	Controls 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:

Property	Description
Diff1.diffs	Returns an array of diffs