# Diff view

Two versions of a file on display glass, side by side or stacked. A bar along the top names the file, shows a legend (a lit green lamp and a plus for the lines added, a lit red lamp and a minus for the lines removed) and, where there is room, a selector for the layout. A changed line lights its gutter along the edge and takes a sign: added lines a plus on a solid ground, removed lines a minus on a hatched one. The line numbers are drawn by the stylesheet, so they are never selected, never copied and never read aloud, and long unchanged runs fold into one row that says how many lines were left out.

Kit part · With the Kit · https://tactileui.dev/parts/diff-view

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Display glass with a bar like the code block’s. The comparison is the longest common run of lines, found on a table once the lines the two texts share at both ends are set aside, and a stretch too big to compare is simply all removed and all added. The gutters are one or two sticky plates on each line with their edge lit by the line’s kind; the split view is two panes of rows of the same height, so they line up without a script.

## Variants

- Side by side
- Stacked
- Long unchanged runs are folded
- Every line kept
- A new file · everything added
- Nothing changed
- A long line scrolls inside its pane

## States

- A line added
- A line removed
- Changed
- Unchanged
- Pane focused

## Props and options

| Name | Kind | Description |
| - | - | - |
| before-label · after-label | attribute | What the two panes are called, for a screen reader (“Before, feed.mjs”). |
| set(before, after) | method | Compare two texts and draw the result. |
| diffLines() · diffStats() · diffFold() · diffSplit() · diffViewHTML() | function | The change as a list of lines, how many were added and removed, the list with long runs folded, the two aligned columns for a split view and the whole view as markup. |

## Usage notes

Edit either text below the diff and the comparison follows. Switch between Split and Stacked in the bar. Select a few lines and copy them: the numbers and the signs stay behind. Tab to a pane and scroll a long line sideways with the arrow keys; the gutter stays in place.

## Accessibility

- Added and removed are never only a colour. Each changed line has a sign (plus or minus), a texture (solid or hatched), a lit gutter and, for a screen reader, the words “Added: ” or “Removed: ” read before the text. The legend in the bar says the same with the counts in words.
- The numbers and the signs are drawn by the stylesheet with an empty alternative text, or with the words above, so they are never selected, never copied and never read as figures. Copying lines gives the code and nothing else; the gaps and the folds are not part of it.
- In a split view the two panes are named Before and After with the file’s name.
- The layout selector is a native radio group and its choice is kept when the page is resized.

## Related parts

- [Code block](https://tactileui.dev/parts/code-block): Code on display glass. A bar along the top holds the file name on a tab, with a lit edge under it, and the copy key at the far end. Under it the lines run, each with its number engraved in a gutter that stays where it is when a long line scrolls sideways. The numbers are drawn by the stylesheet, so they are never selected, never copied and never read aloud. Highlighting is optional and small: a few strengths of the display’s own light, told apart by weight and italic, never a colour of its own.
- [Glass](https://tactileui.dev/parts/glass): Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.
- [Segmented control](https://tactileui.dev/parts/segmented): A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments.