Widgets

DiffView

A diff of two texts: unified and side by side, word by word.

A diff of two texts: unified and side by side, with word-level highlighting inside a line. Changes are gathered into hunks with context rather than shown against the whole file.

Installation

terminal

npx @toimetdev/pathlogs-ui add diff-view

Example

greet.ts+2−3

@@ -1,5 +1,4 @@

1−export function greet(name) {

2− const msg = "Привет, " + name;

3− console.log(msg);

1+export function greet(name: string) {

2+ const msg = `Привет, ${name}!`;

43 return msg;

54 }

Switch to «Split» and changed lines line up opposite one another.

Props

Prop	Type	Default	Description
`before / after`*	`string`	—	The original and changed text.
`mode`	`"unified" \| "split"`	`"unified"`	Unified, or two columns.
`inline`	`boolean`	`true`	Highlight changes within a line, word by word.
`collapse`	`boolean`	`true`	Collapse unchanged parts, keeping context (unified).
`context`	`number`	`3`	How many context lines around changes.
`filename`	`string`	—	The heading above the diff.

before / after*string

The original and changed text.

mode"unified" | "split"

defaults to: "unified"

Unified, or two columns.

inlineboolean

defaults to: true

Highlight changes within a line, word by word.

collapseboolean

defaults to: true

Collapse unchanged parts, keeping context (unified).

contextnumber

defaults to: 3

How many context lines around changes.

filenamestring

The heading above the diff.

Word-level diffing

The algorithm, separately

tsx

import {
  diffLines,   // line diff (LCS with common edges trimmed)
  diffWords,   // in-line diff by words
  buildHunks,  // gathering changes into hunks with context
  pairRows,    // laying out two columns
} from "@/components/ui/diff-view/diffModel";