DiffViewer
Shows a searchable, copyable unified line diff with bounded computation and virtualized large-content DOM.@gemologic/sheen-code · contentPlayground
This example has no scalar controls. Its validated source remains interactive below.
<DiffViewer oldText={before} newText={after} label="Configuration changes" oldLabel="before.toml" newLabel="after.toml" />Variant matrix
Configuration changeConfiguration changes4 of 4 lines
Anatomy
- Package
@gemologic/sheen-code- Source
packages/code/src/DiffViewer.tsx- Tokens
--sheen-color-bg-raised--sheen-color-danger-subtle--sheen-color-success-subtle--sheen-font-mono
Accessibility
Role: named region containing a focusable virtual list and listitemsKeyboard: Tab, Shift+Tab, Enter, Space, PageUp, PageDown, Home, EndDo
- Keep the viewer mounted when accepted source refreshes.
- Use labels that identify both revisions.
Do not
- Do not rely on red and green alone; prefixes and accessible row labels encode change kind.
- Do not use the viewer as an editable merge tool.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
oldText * | string | — | Complete accepted source before the change. |
newText * | string | — | Complete accepted source after the change. |
label * | string | — | Required accessible viewer and line-list name. |
oldLabel | string | Before | Label used by the copied unified diff header. |
newLabel | string | After | Label used by the copied unified diff header. |
searchable | boolean | true | Shows a debounced line search that does not mutate the source. |
copyable | boolean | true | Copies the complete unified diff. |
initialHeight | number | 360 | Deterministic SSR and initial viewport height in pixels from 120 to 1200. |
lineHeight | number | 22 | Fixed virtual row height in pixels from 16 to 48. |
onCopyError | (error: unknown) => void | — | Receives Clipboard API failures without exposing raw errors in the UI. |