Diff viewer
Structured schema changes or a unified text diff.
Guidance
The diff viewer shows what changed between two versions of an asset. In columns mode it is a
table of schema changes: each row says what happened in a word with a glyph ("+ Added",
"− Removed", "± Type changed") and shows the before and after types in mono. Added rows carry a
faint moss tint and removed rows a faint crimson tint, always with the word, never colour alone.
Unchanged columns fold behind a "Show unchanged columns" button.
In text mode it is a unified line diff of two texts (DDL, YAML, a pipeline config) on
mm-surface, with old and new line numbers and + and − gutters; runs of unchanged lines beyond
context fold behind buttons that expand them in place. Long lines scroll sideways, or wrap with
wrap.
The header is a sentence-case caption of the comparison ("Schema version 41 → 42 · 3 changes") with who or what made the change and when. Column names, types and diff lines stay mono.
The fold buttons are ordinary buttons with aria-expanded: Tab reaches them, and Enter or Space
toggles them.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
mode | mode | 'columns' | 'text' | 'columns' | columns (structured schema changes) or text (unified line diff). |
oldColumns | DiffColumn[] | [] | Columns of the older version (columns mode). | |
newColumns | DiffColumn[] | [] | Columns of the newer version (columns mode). | |
changes | SchemaChange[] | undefined | Precomputed changes. Overrides oldColumns and newColumns. | ||
oldText | old-text | string | '' | Older text (text mode). |
newText | new-text | string | '' | Newer text (text mode). |
subject | subject | string | '' | What is being compared, for the readout. Defaults to "Schema version". |
fromVersion | from-version | string | '' | |
toVersion | to-version | string | '' | |
changedAt | changed-at | string | '' | When the newer version was recorded (ISO 8601). |
actor | actor | string | '' | Who or what made the change: "Jane Doe", "postgresql plugin". |
actorKind | actor-kind | 'person' | 'plugin' | 'agent' | 'person' | person, plugin or agent; picks the icon. |
context | context | number | 3 | Unchanged lines kept around each change in text mode. |
wrap | wrap | boolean | false | Wrap long lines in text mode instead of scrolling. |
label | label | string | '' | Accessible name of the table, e.g. "Changes to shop.public.orders". |
CSS parts
| Part | Description |
|---|---|
header | The comparison caption and actor line. |
table | The changes or lines table. |
CSS custom properties
| Property | Description |
|---|---|
--mm-diff-max-height | Height at which the text diff scrolls. Defaults to none. |
Examples
Every state of mm-diff-viewer in Storybook, with keyboard and screen reader tests.