Diff Viewer
A code review diff that morphs between split and unified on one spring: every line glides to its new place and width, numbers fold into a single gutter, padding fills fade.
$149 once · every Pro piece
Word-level marks inside changed lines, monochrome syntax (weight and grey, no hues), long unchanged runs folded behind “Show 24 lines”. Click or drag the gutter to select a range, Shift to extend; hovering a line shows a small comment button that opens an inline composer, and threads and replies open in place while the lines below glide down. Arrow keys walk the gutter, C comments.
Install
npx shadcn@latest add @obsyde/diff-viewerNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { DiffViewer } from '@/components/obsyde/ember/diff-viewer/DiffViewer';
export function Example() {
return (
<DiffViewer />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/diff-viewer/DiffViewer.tsxcomponentember/diff-viewer/diff-viewer.cssstylesember/diff-viewer/sample.tsmoduleember/diff-viewer/diff.tsmoduleember/diff-viewer/DiffViewerDemo.tsxdemoember/segmented/segmented.csssharedember/segmented/Segmented.tsxsharedember/shared/ember.csssharedember/actions-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/display-kit/motion.tsshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
modeLayout | 'split' | 'unified' | 'split' |
contextContext lines | number | 3 |
wordDiffWord highlights | boolean | true |
commentsReview thread | boolean | true |
stateState | 'ready' | 'loading' | 'empty' | 'error' | 'ready' |