This guide documents every component in the diffs integration built on
@pierre/diffs. All components are React islands hydrated
via client:visible — JS loads only when you scroll to them.
DiffViewer
Compare two versions of a file. The main workhorse component.
| Prop | Type | Default | Description |
|---|---|---|---|
oldCode | string | required | The original file contents |
newCode | string | required | The modified file contents |
filename | string | required | Display filename (also sets syntax language) |
language | string | "typescript" | Override the Shiki language |
diffStyle | "split" | "unified" | "unified" | Side-by-side or stacked layout |
diffIndicators | "bars" | "classic" | "none" | "bars" | Change indicator style |
lineDiffType | "word" | "word-alt" | "char" | "none" | "word" | Inline diff granularity |
disableBackground | boolean | false | Remove addition/deletion background colors |
wrapLines | boolean | false | Wrap long lines instead of scrolling |
disableLineNumbers | boolean | false | Hide line numbers |
hunkSeparator | "line-info" | "line-info-basic" | "metadata" | "simple" | "line-info" | Style for collapsed unchanged regions |
collapsed | boolean | false | Start with body hidden (click header to expand) |
copyable | boolean | false | Show a copy-to-clipboard button in the header |
renderHeaderMetadata | (fileDiff) => ReactNode | — | Custom header metadata (right side) |
renderCustomHeader | (fileDiff) => ReactNode | — | Replace the entire header |
Split layout (with copy button)
Unified layout
Change indicator styles
Bars (default)
Classic (+/–)
None (with background disabled)
Inline diff granularity
Word-level (default)
Character-level
Line wrapping
Disabled line numbers
Hunk separators
Control how collapsed unchanged regions between hunks are displayed.
| Value | Description |
|---|---|
"line-info" | Full-width separator with collapsed line count and expand controls |
"line-info-basic" | Compact variant of line-info |
"metadata" | Patch-style @@ -x,y +a,b @@ header |
"simple" | Minimal separator bar |
Line Info (default)
Metadata (patch-style)
Simple
Collapsed diff
Set collapsed to start with only the header visible. Use the chevron
button (▼) in the header to expand/collapse.
CodeViewer
Display a single file with syntax highlighting. No diff — just code.
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | required | The file contents |
filename | string | required | Display filename (also sets syntax language) |
language | string | "typescript" | Override the Shiki language |
wrapLines | boolean | false | Wrap long lines instead of scrolling |
showLineNumbers | boolean | true | Show line numbers |
copyable | boolean | false | Show a copy-to-clipboard button in the header |
With copy button
CSS file
No line numbers, wrapping enabled
MergeConflict
Render a file with conflict markers. Each conflict block gets Accept Current, Accept Incoming, and Accept Both buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
fileContents | string | required | File contents with <<<<<<<, =======, >>>>>>> markers |
filename | string | required | Display filename |
language | string | "typescript" | Override the Shiki language |
The component is uncontrolled — the library manages resolution state internally. To reset (restore original conflicts), remount the component by changing its React
key.
Multiple conflicts
AcceptRejectDiff
A diff where each hunk has accept/reject controls. Manages its own state — accepting collapses hunks to context lines, rejecting restores the original.
| Prop | Type | Default | Description |
|---|---|---|---|
oldCode | string | required | The original file contents |
newCode | string | required | The modified file contents |
filename | string | required | Display filename |
language | string | "typescript" | Override the Shiki language |
diffStyle | "split" | "unified" | "unified" | Layout style |
The toolbar provides Accept / Reject per hunk, plus Undo (reverts last action) and Reset (restores all hunks).
Split layout
DiffPlayground
Two editable text areas plus a live-updating diff below. Edit either pane and the diff recalculates in real time.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOldCode | string | required | Initial “before” contents |
defaultNewCode | string | required | Initial “after” contents |
oldFilename | string | "before" | Label for the left editor |
newFilename | string | "after" | Label for the right editor |
language | string | "css" | Shiki language for syntax highlighting |
diffStyle | "split" | "unified" | "unified" | Layout for the diff view |