Gumtree UI

DiffView

Renders a unified diff view with colored add/remove/context lines and line numbers.

Import

import { DiffView } from "@gumtree/ui/forge/DiffView";

Props

PropTypeDefaultDescription
filename*string-File path shown in the diff header
lines*DiffLine[]-Array of diff lines with type, content, and optional line number

Examples

Add, Remove, and Context Lines

A diff showing additions, removals, and unchanged context lines.

src/utils.ts
1 import { createDefine } from "fresh";
2-export const VERSION = "1.0.0";
2+export const VERSION = "1.1.0";
3
4+export const BUILD = "2024-01-15";
<DiffView
  filename="src/utils.ts"
  lines={[
    { type: "context", content: "import { createDefine } from \"fresh\";", lineNumber: 1 },
    { type: "remove",  content: "export const VERSION = \"1.0.0\";", lineNumber: 2 },
    { type: "add",     content: "export const VERSION = \"1.1.0\";", lineNumber: 2 },
    { type: "context", content: "", lineNumber: 3 },
    { type: "add",     content: "export const BUILD = \"2024-01-15\";", lineNumber: 4 },
  ]}
/>