CodeDiff

code-diff

Shows line-oriented additions and removals in unified or split views with line numbers and a summary.

Usage

Basic usage (unified single column)

Input oldText / newText, automatically line by line diff, add green / delete red.

greet.ts+3−3

1-export function greet(name) {

2- const msg = "hi " + name;

3- console.log(msg);

1+export function greet(name, lang = "en") {

2+ const prefix = lang === "zh" ? "Hello " : "hi ";

3+ const msg = prefix + name;

44 return msg;

55 }

tsx

<CodeDiff filename="greet.ts" oldText={oldText} newText={newText} />

Double column comparison (split)

mode="split" The old on the left and the new on the right are displayed side by side, making it easy to compare large changes.

greet.ts+3−3

1-export function greet(name) {

2- const msg = "hi " + name;

3- console.log(msg);

1+export function greet(name, lang = "en") {

2+ const prefix = lang === "zh" ? "Hello " : "hi ";

3+ const msg = prefix + name;

4 return msg;

5 }

tsx

<CodeDiff mode="split" filename="greet.ts" oldText={oldText} newText={newText} />

Purely new (new file)

When oldText is an empty string, each line is judged as new.

hello.txt+3−0

1+line 1

2+line 2

3+line 3

tsx

<CodeDiff filename="hello.txt" oldText="" newText={"line 1\nline 2\nline 3"} />

Hide line number

showLineNumbers={false} Remove the line number slots on both sides to save horizontal space.

greet.ts+3−3

-export function greet(name) {

- const msg = "hi " + name;

- console.log(msg);

+export function greet(name, lang = "en") {

+ const prefix = lang === "zh" ? "Hello " : "hi ";

+ const msg = prefix + name;

return msg;

}

tsx

<CodeDiff filename="greet.ts" oldText={oldText} newText={newText} showLineNumbers={false} />

When to use

Use CodeDiff to compare two text versions during a pull-request review, agent-change inspection, or configuration audit. It shows additions and deletions with paired line numbers and supports line annotations. Use CodeBlock for static code or Snippet for a single-line command. diffLines and diffStat are pure functions that can also power custom rendering or statistics.

Import

import { CodeDiff, diffLines, diffStat } from "@hulianui/ui"

Props

Name	Type	Default	Description
oldText*	`string`	—	old text
newText*	`string`	—	new text
mode	`"unified" \| "split"`	`"unified"`	Unified single-column or split side-by-side comparison.
filename	`string`	—	Header file name bar; if omitted, the header will not be rendered.
showLineNumbers	`boolean`	`true`	Show line number slot
annotations	`CodeDiffAnnotation[]`	—	Row-anchored annotations: Insert full-width content slot below matching row rendering gutter tag + row (unified mode inserts content only)
className	`string`	—	Container class name

CodeDiffAnnotation has the shape { side?: "old"\|"new"(default "new"); line: number(1-based); gutter?: ReactNode; content?: ReactNode }.

Usage guidelines

The content slot in annotations is inserted only in unified mode. Split mode renders gutter markers only. Use mode="unified" to place a CodeReviewThread or other content below a changed line.
annotations[].line is one-based, and side identifies the old or new file. Do not treat it as a zero-based array index.

Code · CodeBlock · Snippet · Kbd · Text · Heading

Playground

ModeLine number

greet.ts+3−3

1-export function greet(name) {

2- const msg = "hi " + name;

3- console.log(msg);

1+export function greet(name, lang = "en") {

2+ const prefix = lang === "zh" ? "Hello " : "hi ";

3+ const msg = prefix + name;

44 return msg;

55 }

<CodeDiff filename="greet.ts" oldText={old} newText={next} />

Usage

Basic usage (unified single column)

Input oldText / newText, automatically line by line diff, add green / delete red.

greet.ts+3−3

1-export function greet(name) {

2- const msg = "hi " + name;

3- console.log(msg);

1+export function greet(name, lang = "en") {

2+ const prefix = lang === "zh" ? "Hello " : "hi ";

3+ const msg = prefix + name;

44 return msg;

55 }

tsx

<CodeDiff filename="greet.ts" oldText={oldText} newText={newText} />

Double column comparison (split)

mode="split" The old on the left and the new on the right are displayed side by side, making it easy to compare large changes.

greet.ts+3−3

1-export function greet(name) {

2- const msg = "hi " + name;

3- console.log(msg);

1+export function greet(name, lang = "en") {

2+ const prefix = lang === "zh" ? "Hello " : "hi ";

3+ const msg = prefix + name;

4 return msg;

5 }

tsx

<CodeDiff mode="split" filename="greet.ts" oldText={oldText} newText={newText} />

Purely new (new file)

When oldText is an empty string, each line is judged as new.

hello.txt+3−0

1+line 1

2+line 2

3+line 3

tsx

<CodeDiff filename="hello.txt" oldText="" newText={"line 1\nline 2\nline 3"} />

Hide line number

showLineNumbers={false} Remove the line number slots on both sides to save horizontal space.

greet.ts+3−3

-export function greet(name) {

- const msg = "hi " + name;

- console.log(msg);

+export function greet(name, lang = "en") {

+ const prefix = lang === "zh" ? "Hello " : "hi ";

+ const msg = prefix + name;

return msg;

}

tsx

<CodeDiff filename="greet.ts" oldText={oldText} newText={newText} showLineNumbers={false} />

When to use

Props

Name	Type	Default	Description
oldText*	`string`	—	old text
newText*	`string`	—	new text
mode	`"unified" \| "split"`	`"unified"`	Unified single-column or split side-by-side comparison.
filename	`string`	—	Header file name bar; if omitted, the header will not be rendered.
showLineNumbers	`boolean`	`true`	Show line number slot
annotations	`CodeDiffAnnotation[]`	—	Row-anchored annotations: Insert full-width content slot below matching row rendering gutter tag + row (unified mode inserts content only)
className	`string`	—	Container class name

CodeDiffAnnotation has the shape { side?: "old"\|"new"(default "new"); line: number(1-based); gutter?: ReactNode; content?: ReactNode }.

Usage guidelines

The content slot in annotations is inserted only in unified mode. Split mode renders gutter markers only. Use mode="unified" to place a CodeReviewThread or other content below a changed line.

annotations[].line is one-based, and side identifies the old or new file. Do not treat it as a zero-based array index.

Playground

ModeLine number

greet.ts+3−3

1-export function greet(name) {

2- const msg = "hi " + name;

3- console.log(msg);

1+export function greet(name, lang = "en") {

2+ const prefix = lang === "zh" ? "Hello " : "hi ";

3+ const msg = prefix + name;

44 return msg;

55 }

<CodeDiff filename="greet.ts" oldText={old} newText={next} />

CodeDiff

Usage

Basic usage (unified single column)

Double column comparison (split)

Purely new (new file)

Hide line number

When to use

Import

Props

Usage guidelines

Related

Playground

CodeDiff

Usage

Basic usage (unified single column)

Double column comparison (split)

Purely new (new file)

Hide line number

When to use

Import

Props

Usage guidelines

Related

Playground