Revision compare

A React component in Beamline's Content & display category.

Two revisions of a drawing on one camera: side by side, they pan and zoom together (a crosshair in one pane marks the point under the pointer in the other) or apart when unlocked; the changes the app found are numbered places you fly to with Next and Previous; issue pins stay on the revision they were placed on, and a pin where the drawing changed says so; hold B (or Blink) and the after pane shows the before revision at the same spot, so what moved jumps. In a narrow room one pane switches revisions in place. A pair that is not aligned is refused in words, never compared.

Use it for

Reviewing a reissued drawing, plan, map or layout against the revision before it: what moved, where, and which issues sit on changed ground.
Any two registered versions of one picture where the place matters (site plans, floor plans, PCB layouts, signage maps, warehouse layouts).

Not for

Before and after of a photo or an edit, where pixels matter, not places (image-compare).
Reading or marking up a paged document (document-viewer).
Text or data changes (file-diff, json-diff-viewer, diff-table).

Anatomy

toolbar: Before and After revision pickers (each revision with its date, state and, if it cannot be shown, why), Locked, Changes, zoom out, the zoom in words, zoom in, Fit, Blink
two panes (split form): each headed by its revision and its state (Current, Pending approval, Superseded), the drawing on one camera, the change regions numbered in place, the pins placed on that revision, a crosshair where the other pane's pointer is
one pane (single form, under 720 px): a Before/After switch for the revision it shows, the same camera
changes list: each change numbered with its words and the pins it touches, Previous and Next; Comparing… while the app computes
pins: a numbered mark with the issue's code; on a revision the after revision changed under it, ringed in the warning tone and said (Area changed in Rev D)

States

at rest: the camera frames every change (their box with a little room) until the person moves; Fit shows the whole sheet
aligned and locked: both panes on one camera; the crosshair follows the pointer across
unlocked: each pane has its own camera; locking again glides the after pane onto the before pane's camera
changes hidden: no regions drawn, the list still there
flying to a change: both panes travel in one spring to frame it; the list marks it
blink held: the after pane (or the one pane) shows the other revision at the same spot, labelled Showing Rev C
pins visible, and a pin on changed ground
revision unavailable: listed with its reason, cannot be picked; a pane whose revision is unavailable says so
comparison processing (changes null): the panes work, the list says Comparing…, no regions
not aligned (unaligned reason): Locked, Changes and Blink off with the reason said; the panes move apart
single form on a phone: one pane, the revision switch, Blink; before a zoom a finger pans the camera sideways only and vertical moves scroll the page

Keyboard

each pane is a focusable region named for its revision: arrows pan a tenth of the view (Shift: half), + and − zoom, 0 fits, N and P go to the next and previous change, B held blinks
the toolbar's pickers, switches and buttons are standard controls; the changes list is a list of buttons; pins are buttons

Motion

Dragging moves the camera 1:1 under the hand (both panes when locked), and a release carries with the look's carry, rubber-banded at the drawing's edge; a change, Fit, a zoom key or relocking travels in one spring. Each move decides where it lands when it starts: the zoom in words and onCameraChange say it at once, and only the drawing travels. Pins, change numbers and the crosshair keep their size at every zoom. Nothing moves at rest; reduced motion places the camera at once and does not carry. Blink is instant.

Props

Prop	Type	Default	Description
`revisions` (required)	`DrawingRevision[]`	—	Every revision, oldest first.
`size` (required)	`Size`	—	The drawing space every revision is drawn in (a 42 000 × 29 700 mm sheet, or a picture's pixels).
`before`	`string`	—	The revision on the left, compared from (a revision id). Default: the newest but one that can be shown. Watch `onBeforeChange` and `onAfterChange` to compute the pair's `changes`.
`defaultBefore`	`string`	—
`onBeforeChange`	`((id: string) => void)`	—
`after`	`string`	—	The revision on the right, compared to (a revision id). Default: the newest that can be shown.
`defaultAfter`	`string`	—
`onAfterChange`	`((id: string) => void)`	—
`changes`	`DrawingChange[] \| null`	—	What changed between `before` and `after` (the app computes it when the pair changes); null while it is being computed (Comparing…). Default none.
`pins`	`DrawingPin[]`	—	Issue pins on any revision; each is drawn only on its own.
`onPinOpen`	`((pin: DrawingPin) => void)`	—	A pin pressed (open the issue).
`unaligned`	`string \| null`	—	Why the pair cannot be laid over each other (different sheets, not registered). When set, the panes move apart and changes and Blink are off, with the reason said.
`locked`	`boolean`	—	Both panes on one camera. Default true.
`defaultLocked`	`boolean`	—
`onLockedChange`	`((locked: boolean) => void)`	—
`showChanges`	`boolean`	—	Change regions drawn. Default true.
`defaultShowChanges`	`boolean`	—
`onShowChangesChange`	`((show: boolean) => void)`	—
`activeChange`	`string \| null`	—	The change in view (the list marks it; setting it flies the camera there).
`defaultActiveChange`	`string \| null`	—
`onActiveChangeChange`	`((id: string \| null) => void)`	—
`camera`	`Camera`	—	The camera (of the before pane, which leads when locked). `onCameraChange` hears where a move lands as soon as it is decided (a key, a button, a change, a release's projected landing), once per move; the drawing then travels there. Default: the part opens framing every change (the whole sheet when there are none) and keeps that until the person moves; Fit always shows the whole sheet.
`defaultCamera`	`Camera`	—
`onCameraChange`	`((camera: Camera) => void)`	—
`height`	`string \| number`	—	The part's height. Default 560.
`aria-label`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { RevisionCompare } from "@beamline/revision-compare";

Get it

Revision compare is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Revision compareComplete system · $49

Two revisions of a drawing on one camera.

Rev C against Rev D

Drag either pane: both move. Press a change (or N) and both fly to it. T-12 was pinned on Rev C where the wall moved, so it says the area changed. Hold B or Blink: the Rev D pane shows Rev C at the same spot.

0 × 0full

Older pair

Rev B against Rev C. Choose another revision in either picker and the list says Comparing… until the app has the changes; Rev E is listed with why it cannot be shown.

0 × 0full

A revision not ready

Rev E was uploaded but is still being processed: its pane says so, and there is nothing to compare or blink until it can be shown.

0 × 0full

Not aligned

The app could not register the two sheets, so the part refuses to lay them over each other: the panes move apart, and changes and Blink are off.

0 × 0full

About Revision compare

← Image compare Live cursors →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Revision compare

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Content & display