Diff

Diff renders one file patch in a unified or split view with syntax highlighting and optional line numbers. Use Code when you do not need patch parsing.

Availability

Basic usage

Renderable API

import { DiffRenderable, SyntaxStyle, RGBA, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

const syntaxStyle = SyntaxStyle.fromStyles(
  {
    default: { fg: RGBA.fromHex("#E6EDF3") },
    string: { fg: RGBA.fromHex("#A5D6FF") },
    keyword: { fg: RGBA.fromHex("#FF7B72"), bold: true },
  },
  renderer.nativeScene,
)

const patch = `diff --git a/app.ts b/app.ts
index 1111111..2222222 100644
--- a/app.ts
+++ b/app.ts
@@ -1,3 +1,3 @@
 setup()
-const a = 1
+const a = 2
 ready(a)
`

const diff = new DiffRenderable(renderer, {
  id: "diff",
  width: "100%",
  height: 16,
  diff: patch,
  view: "split",
  filetype: "typescript",
  syntaxStyle,
  showLineNumbers: true,
})

renderer.root.add(diff)

Monochrome views of the same patch:

Unified view:

 1   setup()
 2 - const a = 1
 2 + const a = 2
 3   ready(a)

Split view:

 1   setup()      1   setup()
 2 - const a = 1  2 + const a = 2
 3   ready(a)     3   ready(a)

For multi-file input, Diff shows only the first file patch (patches[0]). Create one DiffRenderable for each file patch that you need to show.

Split view scroll sync

In split view, set syncScroll: true to link the two panes. A mouse-wheel scroll in one pane then copies its scrollX and scrollY to the other pane:

const diff = new DiffRenderable(renderer, {
  id: "diff",
  view: "split",
  syncScroll: true,
  diff: patch,
  syntaxStyle,
})

// Toggle at runtime
diff.syncScroll = false

Scroll sync has no effect in the unified view.

If you omit syntaxStyle, Diff creates an empty fallback style and destroys it when you destroy the Diff. Destroying a Diff also destroys its inactive panes. Diff does not destroy a syntaxStyle you pass. Destroy it after no renderable uses it.

Properties

Other grammars require Tree-sitter configuration. See the Tree-sitter reference.

Related components

Use Code for source text without patch structure. Use Line number gutter with other line-aware renderables. Use Markdown for documents and TextTable for general tabular comparisons.