Skip to main content

Diff Viewer

An interactive component that visually presents the differences or changes between two pieces of text, such as code snippets or plain text.

Diff Viewer Properties​

Component Properties​

Diff Viewer PropertyDescription
Content
Compare bySelect the compare method for the component to use
Original labelSet the label 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
Appearance
Compact viewShows only the diffed lines and folds the unchanged lines. values are a boolean
Loading animationControls the loading state of the component, values are a boolean
Layout
WidthControls the width of the component
HeightControls the height of the component
VisibleControls the visibility of the component, values are a boolean
Collapse when invisibleControls what happens when the component is invisible. When true, other components shift to fill its space; when false, it leaves a blank space. This has no effect in edit mode.

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

Example Usage:​

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"
  }
]