# Diff viewer

> Line diff in unified or split view with added/removed counts.

Component · Pro · https://lodeui.com/components/diff-viewer

## When to use

- Showing what changed between two versions of a file or config.

## When not to use

- Very large files (over a few thousand lines).

## Installation

```bash
npx shadcn@latest add @lode/diff-viewer
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { DiffViewer } from "@/components/ui/diff-viewer";

export function ConfigChange({ before, after }: { before: string; after: string }) {
  return <DiffViewer fileName="config.json" oldCode={before} newCode={after} />;
}
```

Built from: Segmented control

## API reference

### DiffViewer

A line diff in unified or split view.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| oldCode / newCode | `string` | – | Versions to compare. |
| fileName | `string` | – | Shown in the header. |
| defaultView | `"unified" \| "split"` | `"unified"` | Starting view; people can switch. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the view switch |

## Accessibility

- Added and removed lines have + and − signs, not only colors.
- The view switch is labelled.

## Responsive behavior

- Use unified on phones; split needs about 720px.

## Performance

- Longest common subsequence: O(n·m). Fine for a few thousand lines.

## Notes for AI

- Normalize line endings before diffing.

## Related

- [Code viewer](https://lodeui.com/components/code-viewer) — File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.