DiffView
Two text versions, aligned by line, with changes made visible.
Live — this one is real
Before
surface: ink focus: muted motion: always
After
surface: ink focus: accent motion: reduced-safe
Usage
import { DiffView } from "mizu-ui";
export function Example() {
return (
<DiffView
before={"surface: ink\nfocus: muted\nmotion: always"}
after={"surface: ink\nfocus: accent\nmotion: reduced-safe"}
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect data/Inspection.tsx
Source is included in the npm package under src/data/Inspection.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| before / after | string | — | The two complete texts. |
| beforeLabel / afterLabel | string | — | Version labels. |
Accessibility
Each version is a named section with selectable code. This is an aligned-line comparison, not an edit-distance engine; insertions may mark following lines changed.
Motion
Static version comparison.