Diff

<zn-diff> | ZnDiff

Since 1.1

experimental

A side-by-side comparison of two versions of something, one column each, built from zn-diff-rows.

Live

75% 80%

Senior scorer Senior scorer

Yes / No · Compliance · score +15

Yes / No · Empathy · score +5

<zn-diff before-caption="Version 2" before-description="Published 30 Sep 2026"
         after-caption="Version 3" after-description="Published 12 Oct 2026">
  <zn-badge slot="after" type="success">Live</zn-badge>
  <zn-diff-row caption="Settings" heading></zn-diff-row>
  <zn-diff-row caption="Passing score" change="changed">
    <span slot="before">75%</span>
    <span slot="after">80%</span>
  </zn-diff-row>
  <zn-diff-row caption="Minimum scorer level">
    <span slot="before">Senior scorer</span>
    <span slot="after">Senior scorer</span>
  </zn-diff-row>
  <zn-diff-row caption="Resolution" heading></zn-diff-row>
  <zn-diff-row caption="Was personal data shared correctly?" change="added">
    <span slot="after">Yes / No · Compliance · score +15</span>
  </zn-diff-row>
  <zn-diff-row caption="Thanked the customer" change="removed" after-placeholder="Removed in version 3">
    <span slot="before">Yes / No · Empathy · score +5</span>
  </zn-diff-row>
</zn-diff>

Examples

Placeholders

An added item has nothing on the left and a removed item nothing on the right; that side is hatched with a placeholder. Set before-placeholder or after-placeholder to name the version.

Sad / Neutral / Happy · score +25

Yes / No · score +5

<zn-diff before-caption="Version 1" after-caption="Version 2">
  <zn-diff-row caption="Closing tone" change="added" before-placeholder="Not in version 1">
    <span slot="after">Sad / Neutral / Happy · score +25</span>
  </zn-diff-row>
  <zn-diff-row caption="Offered a survey" change="removed" after-placeholder="Removed in version 2">
    <span slot="before">Yes / No · score +5</span>
  </zn-diff-row>
</zn-diff>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/diff/diff.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/diff/diff.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/diff/diff.js';

Slots

Name	Description
(default)	The `zn-diff-row`s.
`before`	Inline content after the left heading, such as a status badge.
`after`	Inline content after the right heading, such as a status badge.

Learn more about using slots.

Properties

Name	Description	Type	Default
`beforeCaption` `before-caption`	The left column’s heading, such as the older version.	`string`	`''`
`beforeDescription` `before-description`	A line under the left heading.	`string`	`''`
`afterCaption` `after-caption`	The right column’s heading, such as the newer version.	`string`	`''`
`afterDescription` `after-description`	A line under the right heading.	`string`	`''`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name	Description	Default
`--zn-diff-head-background`	The heading row’s background.
`--zn-diff-sticky-top`	How far from the top of its scroll container the heading row sticks.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`base`	The table.
`head`	The sticky row of column headings.

Learn more about customizing CSS parts.