Diff viewer

Compares text revisions in unified or split rows with explicit change labels.

Preview

1 added, 1 removed

Code changes preview
Change	Before	After	Content
Removed	1		const total = 24;
Added		1	const total = 42;

In action

1 added, 1 removed

Configuration changes
Change	Before	After	Content
Removed	1		range: 368
Added		1	range: 386
Unchanged	2	2	battery: 84

When to use

Use it for

Reviewing configuration, document, or code changes.

Not for

Rich document editing or merging conflicts.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { DiffViewer } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/diff-viewer.

2. Vendor the source

npx @noorddev/vlak-cli add diff-viewer

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/diff-viewer.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { DiffViewer } from "@noorddev/vlak-react";

<DiffViewer label="Configuration changes" before={"range: 368\nbattery: 84"} after={"range: 386\nbattery: 84"} />

Props

diffLines (function)

Line LCS with bounded memory. Large changes use a truthful coarse replacement.

DiffViewer

Monochrome before/after comparison with explicit change labels, never color alone.

Prop	Type	Default	Description
`before`required	`string`
`after`required	`string`
`label`	`string`	`"Changes"`
`view`	`"unified" \| "split"`
`defaultView`	`"unified" \| "split"`	`"unified"`
`onViewChange`	`(view: "unified" \| "split") => void`
`pageSize`	`number`	`200`	Maximum rendered rows per page, clamped to 1–1000.

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab, Enter, Space`	Tab reaches layout buttons, the scrollable comparison, and page controls; Enter or Space switches layout or moves between line pages.

Accessibility

Table headers and explicit Added/Removed labels communicate changes without color. Large replacements use a bounded coarse diff. At most 200 rows render per page by default; pageSize is capped at 1000, with page ranges announced and all lines reachable through navigation.

Markup

<div class="rs-diff-viewer"><div class="rs-diff-viewer-scroll" tabindex="0" role="region" aria-label="Changes"><table class="rs-diff-viewer-table"><caption>Changes</caption><thead><tr><th scope="col">Change</th><th scope="col">Content</th></tr></thead><tbody><tr class="rs-diff-viewer-change"><th scope="row">Added</th><td class="rs-diff-viewer-cell">range: 386</td></tr></tbody></table></div></div>

Classes

.rs-diff-viewer.rs-diff-viewer-header.rs-diff-viewer-tools.rs-diff-viewer-scroll.rs-diff-viewer-table.rs-diff-viewer-cell.rs-diff-viewer-change.rs-diff-viewer-number

Depends on

/button