Drawing board

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

A whiteboard a team already knows how to use, like FigJam: tools in a floating bar at the bottom (Select V, Hand H, Sticky note S, Shape R/O/D, Connector X, Text T, Marker P, Section Shift+S), each with a tooltip and its key, and the active tool's choices (note colour, which shape, marker colour and width, straight or elbow) just above it. Click to place a sticky note and type at once; its words fit the note. Shapes take a label, sections frame an area and carry the notes inside when moved, connectors attach to the objects they join and follow them, with arrowheads and a label. Click, Shift-click or drag a marquee to select; drag to move with snap guides; resize from the handles; arrow keys nudge; Delete, Cmd/Ctrl+D, copy and paste, bring forward and back. Every change is one undo step and undo brings back the selection. The selection gets a small toolbar above it (colour, text size and alignment, connector path and arrowheads, duplicate, delete, more) with the full style editor in a popover: stroke, background (none, a colour, or a gradient edited stop by stop), stroke width and dash, opacity, Mixed where the selection disagrees. The board pans and zooms by wheel, pinch or Ctrl + wheel, Space-drag and the hand, with zoom controls (−, %, +, fit) and a dot grid that scales; the first view fits the whole board. Touch: one finger pans the bare board, two pinch, a tap places a note. Colours are stored as role names and repaint with the look. Export draws its preview from the same frozen snapshot it saves: selection or everything, transparent or on a background, scale with the output size in pixels, PNG or SVG, the editable scene included or not; a cancelled save says nothing was saved and a failure keeps the choices.

Use it for

A team board: retros, brainstorms, user-flow maps and diagrams with sticky notes, shapes, connectors and sections.
A sketching or diagram canvas with a style editor and image export.

Not for

3D or CAD models (model-workbench).
Executable node graphs with typed ports (workflow-builder).

Anatomy

board: a dot grid that pans and zooms; sections (a tinted frame with its title above), sticky notes, shapes with labels, text, marker strokes, connectors with arrowheads and labels
tools: a floating bar at the bottom: Select, Hand, Sticky note, Shape, Connector, Text, Marker, Section; the active tool's choices and a one-line hint above it
top right: Undo, Redo, Export; top left: the board's name
zoom: Zoom out, the level (click for 100%), Zoom in, Fit everything
selection: an outline with eight resize handles, four connection dots on a single object, a selected connector's accent band and end handles, a marquee, snap guides
selection toolbar: Colour, Text (size and alignment), connector path and Arrowheads, Style (the full editor), Duplicate, Delete, More (edit text, order, export selection)
style editor: Stroke swatches, Background none, swatches, Gradient; Stroke width; Stroke style; Opacity; Mixed where the selection disagrees
gradient editor: the bar over a checkerboard with draggable stops, the chosen stop's colour, position and opacity, the angle, Add stop, Remove stop, Cancel and Apply
export: the preview on a checkerboard or background, What, Format, Scale, Background, Include the editable scene, the output size, Export

States

empty board, a full board fitted to the room, a tool active with its hint, a note being typed, a shape being drawn, a connector being dragged to its target (the target outlined), a marker stroke
nothing selected, one selected (toolbar, handles, connection dots), several selected, a connector selected, marquee in progress, moving with snap guides, resizing
panned, zoomed in or out, the hand or Space held
single values, mixed values, property unsupported (a line's background, a note's outline), transparent fill, gradient open, colour typed but not yet valid, two stops left
export preview, selection only, everything, transparent, encoding, saved, save cancelled, save failed
narrow room: the hand tool folds away (a finger pans) and zoom moves up beside the actions

Keyboard

V select, H hand, S sticky note, R rectangle, O ellipse, D diamond, X or L connector, T text, P marker, Shift+S section; Escape goes back to Select, then clears the selection
Ctrl or Cmd+Z undo, with Shift (or Ctrl+Y) redo; Ctrl or Cmd+D duplicate; Ctrl or Cmd+C, X, V copy, cut and paste; Ctrl or Cmd+A select all; Delete or Backspace removes the selection and the connectors attached to it
Tab and Shift+Tab select the next and previous object while one is selected; Enter edits its words; Escape (or a click elsewhere) keeps them; arrow keys nudge 1, with Shift 10
] and [ bring forward and send backward, with Ctrl or Cmd to the front and back
+ and − zoom, Shift+0 100%, Shift+1 fit everything, Shift+2 zoom to the selection; Space and drag pans
A gradient stop moves with the arrow keys (Shift for bigger steps); Delete removes it while more than two remain

Motion

Nothing animates and no frame runs at rest. Objects follow the pointer while drawn, moved or resized; a dragged group is shifted on screen without re-rendering and placed on release; the view follows the wheel, the pinch and the drag one to one.

Props

Prop	Type	Default	Description
`shapes`	`Shape[]`	—	The board's objects (controlled). Stickies, shapes, text, sections, connectors and marker strokes.
`defaultShapes`	`Shape[]`	—	The board's objects when uncontrolled.
`onShapesChange`	`((shapes: Shape[]) => void)`	—	Every committed change: a drag, a resize, a typed note, a style. Not called while a gesture is in progress.
`defaultSelected`	`string[]`	—	Ids selected at first.
`defaultTool`	`Tool`	—	The tool at first; "select" by default.
`title`	`string`	—	The board's name, shown top left.
`onExport`	`((req: ExportRequest) => Promise<ExportResult>)`	—	Writes the export; resolve with the saved file's name or that the save was cancelled.
`locale`	`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

toggle-group
button
tooltip
popover
dropdown-menu
slider
number-field
input
dialog
segmented-control
switch

Dependencies

lucide-react

Import

import { DrawingBoard } from "@beamline/drawing-board";

Get it

Drawing board 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

Drawing boardComplete system · $49

A whiteboard a team already knows how to use, like FigJam.

Team board

Press S and click to add a note, then type. Drag from a selected note's blue dots to connect it; the connector follows when either end moves. Wheel or two fingers to move around, pinch or Ctrl + wheel to zoom.

0 × 0full

Empty board