▚Diff

Render unified or split diffs with syntax highlighting and optional line numbers.

~/components/diff

live

$ termino diff-demo

diff --git a/menu.ts b/menu.ts

index 81bf2f1..9c0a4d2 100644

import { Select } from "@opentui/core"

const renderer = await createCliRenderer()

- const menu = new SelectRenderable(renderer, {

+ const menu = Select({

width: 30,

- height: 8,

options: [

- { name: "New File", description: "Create a file" },

+ { name: "New File", description: "Create a new file" },

+ { name: "Open File", description: "Open an existing file" },

- })

+ })

menu.focus()

renderer.root.add(menu)

split view available — side-by-side with line numbers

##Basic usage

Construct API is not available yet — use DiffRenderable directly:

tsrenderable

1import { DiffRenderable, SyntaxStyle, RGBA, createCliRenderer } from "@opentui/core"
2
3const renderer = await createCliRenderer()
4
5const syntaxStyle = SyntaxStyle.fromStyles({
6default: { fg: RGBA.fromHex("#E6EDF3") },
7string: { fg: RGBA.fromHex("#A5D6FF") },
8keyword: { fg: RGBA.fromHex("#FF7B72"), bold: true },
9})
10
11const diff = new DiffRenderable(renderer, {
12id: "diff",
13width: "100%",
14height: 16,
15diff: `diff --git a/app.ts b/app.ts
16index 1111111..2222222 100644
17--- a/app.ts
18+++ b/app.ts
19@@ -1,3 +1,3 @@
20-const a = 1
21+const a = 2
22`,
23view: "split",
24filetype: "typescript",
25syntaxStyle,
26showLineNumbers: true,
27})
28
29renderer.root.add(diff)

##Split view scroll sync

Link the vertical scroll of both panes in split view. Scrolling one pane moves the other:

1const diff = new DiffRenderable(renderer, {
2id: "diff",
3view: "split",
4syncScroll: true,
5diff: patch,
6syntaxStyle,
7})
8
9// Toggle at runtime
10diff.syncScroll = false

Scroll sync is a no-op in the unified view.

##Properties

properties

prop	type	default	description
diff	string	""	Unified diff string
view	"unified" \| "split"	"unified"	Layout style
syncScroll	boolean	false	Link vertical scroll in split view
filetype	string	-	Syntax highlighting language
syntaxStyle	SyntaxStyle	-	Syntax style for code
wrapMode	"word" \| "char" \| "none"	-	Code wrapping mode
conceal	boolean	false	Conceal markup when highlighting
showLineNumbers	boolean	true	Show line numbers
lineNumberFg	string \| RGBA	"#888888"	Line number text color
addedBg	string \| RGBA	"#1a4d1a"	Background for added lines
removedBg	string \| RGBA	"#4d1a1a"	Background for removed lines
contextBg	string \| RGBA	transparent	Background for context lines
addedSignColor	string \| RGBA	"#22c55e"	Sign color for added lines
removedSignColor	string \| RGBA	"#ef4444"	Sign color for removed lines