DiffView
A unified line diff of two strings with line numbers, add and remove gutter markers and, for replaced lines, highlighted changed words (wordHighlight, off by default). Pass a highlighter and language to color the code; highlighting is combined with the change marks. Long lines scroll horizontally; set wrapLines in narrow containers. It shows the whole file without collapsing unchanged regions, so use it for edits of a few dozen lines. EditTool and EditToolDiffCard render it for Edit and Write tool parts. For multi-file review with split view and collapsed context, use DiffReview. Related helpers: diffLines and countDiffStats.
Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-reactExamples
Wide
Narrow, wrapped
API reference
Prop
Type
Required
oldText
string
Yes
Content before the change
newText
string
Yes
Content after the change
wordHighlight
boolean
No
Highlights the changed words inside replaced lines, `false` by default
wrapLines
boolean
No
Wraps long lines instead of scrolling horizontally, `false` by default
highlighter
SyntaxHighlighter
No
Colors the code with this highlighter, plain text when omitted
language
string
No
Language passed to `highlighter`, for example `ts`
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element