All components (244)

Text comparer

Management · DiffViewer · .amset-diff

What it is and when to use it

Compares two texts, one after the other or side by side: line by line and, inside the changed lines, word by word. It serves for two versions of a text, of a document or of a JSON.

When to use it

Showing what changed between two versions: a note, a template, a configuration.
layout="split" puts the two versions side by side; unified (default) puts the removed and added lines one after the other.
format="json" sorts the keys and indents both texts before comparing them, so only what really changes shows.
context is the equal lines kept on each side of a change; the rest is folded into a button that opens them. null folds nothing.

When not to

Reviewing changes inside the rich text editor: it already has its own review.
Comparing structured data field by field: a two-column table.

Keyboard: the table is a region that scrolls with the arrows when it does not fit, and the buttons for folded lines are normal buttons.

Accessibility: the table has a name (label, required). Each changed line carries a sign and a hidden text ("Line added"), so the change does not depend on colour. The counts are announced as status.

Fine appearance: variables --amset-diff-added and --amset-diff-removed (the tone of each side) and --amset-diff-line (the line height).

What it looks like

1 line added1 line removed

1		Line removed: Price: €89 Material: 925 silver Delivery: 3 to 5 days Warranty: 1 year
	1	Line added: Price: €95 Material: 925 silver Delivery: 24 hours Warranty: 2 years Engraving included

<DiffViewer
  label="Changes to the ring's page"
  before={antes}
  after={despues}
  beforeLabel="Before"
  afterLabel="Now"
  layout="split"
  summary
/>

Props

Import it with import { DiffViewer } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`after`required	`string`	—
`before`required	`string`	—
`label`required	`string`	What is being compared: it names the table for whoever uses a screen reader. Required.
`afterLabel`	`string`	—
`beforeLabel`	`string`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`context`	`number \| null`	Equal lines kept on each side of a change; the rest is folded. `null` folds nothing. 3 by default.
`format`	`DiffFormat`	`json` sorts the keys and indents both texts before comparing them, so only what really changes shows.
`layout`	`DiffLayout`	`unified` puts the removed and the added lines one after the other; `split` puts them side by side.
`lineNumbers`	`boolean`	The line numbers. On by default.
`summary`	`boolean`	The count of added and removed lines above the table. On by default.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-diff-added`	`var(--amset-success)`
`--amset-diff-removed`	`var(--amset-error)`
`--amset-diff-line`	`1.5`

How to change it

.amset-diff {
  --amset-diff-added: ...;
  --amset-diff-removed: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: