Prototype review

A React block (a whole screen) in Beamline's Research & design app.

Reviewing a design file's clickable prototype. Present: the board on a stage with its wireframe, the flow chosen (an unavailable one can't be), Back through where you went, previous and next through the page's boards, hotspots shown on demand or flashed when a click misses, and the boards overview to jump; a hotspot whose board was removed says so and is never sent somewhere else. Flows: each named flow with its start board, renamed without breaking the links that point at it, a removed start leaving the flow unavailable until another is chosen, and played from its start. Interaction: one trigger's action (navigate or open an overlay), the overlay's preset position or its offset from the trigger drawn on the board, running past the edge said, a removed trigger said, close on outside click; and the variables it sets, each typed value checked against the variable's type with the change it makes shown. Share: a review link for chosen pages with comments and inspect switches, created, copied and revoked (after asking) each said apart, the other links untouched and revoked ones kept in the list.

Use it for

A design or no-code tool where people present and review clickable prototypes, set up flows and interactions, and share review links.
Any step-by-step walkthrough of screens with links between them (onboarding storyboards, demo tours).

Not for

Wiring connections between boards on a canvas (signature work).
Generic file sharing with people and roles (share-dialog).

Anatomy

tabs: Present, Flows, Interaction, Share
present: flow select, Back, Show hotspots, previous / position / next; the stage with the board (wireframe blocks by kind, hotspots) or the removed-board panel; the board's name; the boards overview
flows: a card per flow (start thumbnail, name, start select, links kept or the start-removed warning, Present this flow); Add a flow
interaction: the trigger's board with the trigger outlined and the overlay placed; the inspector (action, destination, position, offsets, the edge or anchor warning, close on outside click) and the variables it sets (variable, value, the change or mismatch, remove; Set a variable)
share: the new link (pages, comments, inspect, Create link); the event line; links with their pages, permissions, date, Copy link and Revoke; the revoke dialog

States

presenting
hotspots shown
hotspots flashed
first board
last board
board removed
flow unavailable
flow renamed
start chosen
overlay preset
overlay relative
overlay past the edge
anchor missing
variable change
type mismatch
no variables
creating link
link created
link copied
revoke asked
link revoked
action failed
no links

Keyboard

Tab reaches every control and each hotspot on the board (named for its layer); Enter follows a hotspot
Back, previous and next are buttons; the overview's boards are a list of buttons with the current one marked
The revoke dialog traps focus; Escape cancels

Props

Prop	Type	Default	Description
`boards` (required)	`Board[]`	—
`flows` (required)	`Flow[]`	—
`onFlowsChange`	`((flows: Flow[]) => void)`	—
`interaction`	`Interaction \| null`	—	The interaction being edited (one trigger on one board).
`onInteractionChange`	`((i: Interaction) => void)`	—
`variables`	`ProtoVariable[]`	—
`links`	`ShareLink[]`	—
`onCreateLink`	`((spec: ShareSpec) => Promise<ShareLink>)`	—	Creates a review link; a rejection is said and nothing is added.
`onRevokeLink`	`((id: string) => void \| Promise<unknown>)`	—	Revokes one link; the others are untouched.
`defaultBoard`	`string`	—	The board shown first in Present (mid-way through a flow); otherwise the first flow's start.
`defaultFlow`	`string`	—
`defaultHotspots`	`boolean`	—
`tab`	`PrototypeTab`	—
`defaultTab`	`PrototypeTab`	—
`onTabChange`	`((t: PrototypeTab) => void)`	—
`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

tabs
select
switch
checkbox
number-field
input
copy-button
alert-dialog
button

Dependencies

lucide-react

Import

import { PrototypeReview } from "@beamline/prototype-review";

Get it

Prototype review 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