fancy-whiteboard

Most whiteboarding libraries force opinionated realtime transports, lock you into their collaboration layer, or demand heavyweight React dependencies. Building a team tool that agents can read and write (sticky notes, shapes, strokes) without DOM scraping requires stable item IDs and controlled state throughout—not buried in component closures. fancy-whiteboard fills that gap: a canvas-agnostic primitives library that pairs human authoring ergonomics with agent-bridgeable surfaces.

Export six headline components: Board (pan/zoom viewport), StickyNote (draggable, resizable colored notes), Drawing (freeform stroke layer), Connector (SVG edges between world-space points), Shape (rect, ellipse, diamond, arrow, text, etc.), and Cursor / CursorLayer (remote-user presence pointers). Every stateful component is controlled via item + onChange; Board itself supports both controlled and uncontrolled viewport modes. Item types—StickyNoteItem, ShapeItem, ConnectorItem—are JSON-friendly objects with stable id, world coordinates (x, y, z), and optional authorId for presence; the Drawing layer accepts a controlled stroke list. Requires peer @particle-academy/react-fancy (v3.4.0+) since StickyNote delegates styling to that shared primitive.

Install via npm install @particle-academy/fancy-whiteboard @particle-academy/react-fancy, then import both stylesheets and use Board as the root container: import { Board, StickyNote, CursorLayer } from '@particle-academy/fancy-whiteboard'; import '@particle-academy/fancy-whiteboard/styles.css'; import '@particle-academy/react-fancy/styles.css'; Wire state via useState and pass item + onChange to each note; feed your realtime transport (Echo, Yjs, raw WebSocket) through onChange to broadcast mutations and reload state from peers.