Diff View
What changed between two texts — changed lines, then the words inside them, struck through or tinted — lazily loaded, line-only for large pages.
- Status
- Since
0.23.74- Accessibility pattern
- del and ins elements, status while loading
Last updated
Install
Add Diff View from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.
pnpm dlx shadcn@latest add @vegastack/diff-viewThe same command installs the registry items it composes: @vegastack/button, @vegastack/skeleton.
It also adds the sanctioned engine to your package.json: diff (text diff engine (lazily loaded)).
Usage
import { DiffView } from "@/components/ui/diff-view";
<DiffView before={version.body} after={page.body} />;DiffView compares two texts — two versions of a page's Markdown — line by line, then word by
word inside each changed line: removed words are struck through in the destructive ink, added
words tinted in the success ink, rendered as del and ins. Unchanged runs longer than six lines
fold behind "Show N unchanged lines", and identical texts say "No changes". The diff engine
(jsdiff) loads in its own chunk the first time a DiffView renders, behind "Comparing…"; import
DiffView lazily too where it only shows in a history sheet.
Examples
No changes and folded runs
No changes
Large pages
Above wordDiffLimit (200 KB, both texts together) the view marks whole changed lines only and
says "Showing line changes for large pages"; above maxChars (1 MB) it compares nothing and says
the page is too large. The diff runs synchronously once per pair of texts.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
after* | string | — | The newer text. |
before* | string | — | The older text (a version's Markdown). |
className | string | — | Classes for the view. |
maxChars | number | 1000000 | Above this many characters (both texts together) nothing is compared. |
mode | "inline" | "inline" | How changes show: inline, removed and added words in reading order. |
wordDiffLimit | number | 200000 | Word-level changes only while both texts together stay under this many characters; above it the view shows whole changed lines, with a note. |
Accessibility
- Removed and added text are
delandinselements, so assistive technology that announces edits can; the strikethrough and tint are not the only cue. - While the engine loads, the placeholder is a
role="status"reading "Comparing…". - "Show N unchanged lines" is a button.
| Key | Action |
|---|---|
| Tab | Move to a "Show N unchanged lines" button |
| Enter | Show the folded lines |
| Contract | States tested |
|---|---|
| Behaviour | comparing, unchanged, changed, collapsed-run, line-only, too-large |
| Accessibility | semantic-html, browser-accessibility-test |
| Visual | default, added, removed |
Do / Don't
Version List
A document's version history — time, author, name, kind badges (Current, Restored, Unsaved copy), a Named only switch and Load more — as a keyboard listbox.
Reactions
Slack-style emoji reactions — pills with counts that toggle, a card naming who reacted, and an add button with quick reactions.