Skip to content
ztui ztui

Diff

A ztui Diff showing added and removed lines in unified view

<Diff> compares two texts and renders the changes, either unified (one column) or split (side-by-side), with optional syntax highlighting and line numbers.

Usage

Section titled “Usage”
import { Diff } from "@huyz0/ztui/react";


<Diff
  oldText={"function add(a, b) {\n  return a - b;\n}"}
  newText={"function add(a, b) {\n  return a + b;\n}"}
  language="typescript"
  defaultView="unified"
  lineNumbers
/>;

Key props

Section titled “Key props”
  • oldText / newText — the two sides to compare.
  • language — syntax-highlight the body (needs @huyz0/ztui/syntax + prismjs).
  • view / defaultView / onViewChange — "unified" or "split".
  • showToggle · lineNumbers · context (lines of context around changes).

Full demo →