Diff Viewer
A code review diff with a compare header, branch chips, change totals, per file cards, and a unified diff tinting added and removed lines.
A code review diff with a compare header, branch chips, change totals, per file cards, and a unified diff tinting added and removed lines.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Diff Viewer is the code review surface, comparing main with feature/rate-limit-retry. The compare header carries the two branch chips, a +9 -3 change total in tabular-nums, and Request changes and Approve buttons. The expanded file card for lib/api/rate-limit.ts shows a modified Badge, its own +5 -2 count, and a unified diff with dual line number gutters, an @@ hunk header, and added lines tinted with primary and removed lines with destructive. The test file sits collapsed below with a chevron and its own +4 -1 count.
Diff lines are one typed const array keyed by kind, context, add, or remove. A lineStyles Record maps each kind to a row tint, a prefix colour, and a sign so the diff reads the same in light and dark without any hard-coded colour values.
Reach for this block on a code review or pull request page, wired to your diff API. Render the file cards from your patch data, collapse files once an engineer marks them viewed, and reopen them if the file changes again before merge.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the pull request diff review. Other diff surfaces:
Tip: keep viewed files collapsed but reopen them on new commits so a stale approval never hides fresh changes.