5Sponsor

Diff View

Unified, split, and inline diff viewer with LCS-based diff algorithm and line numbers

Terminal
diff-view-demo
No opentui live preview is registered for this example yet.

Installation

pnpm dlx shadcn@latest add @termcn/diff-view

Usage

import { DiffView } from "@/components/ui/diff-view";
<DiffView
  filename="config.ts"
  oldText={"const port = 3000;\nconst host = 'localhost';"}
  newText={"const port = 8080;\nconst host = 'localhost';\nconst debug = true;"}
/>

API Reference

DiffView

PropTypeDefault
oldTextstringrequired
newTextstringrequired
filenamestringundefined
languagestringundefined
mode"unified" | "split" | "inline""unified"
contextnumber3
showLineNumbersbooleanfalse