fancy-artboard

Figma-style canvases are either bare DOM pits (no reusable chrome) or monolithic design tools shipping 20MB. Teams rebuilding the artboard wheel every time — pan, zoom, drag-reorder, sections, notes, PNG export — waste weeks on plumbing. Worse: those DIY surfaces can't talk to agents. fancy-artboard cuts the gap: it's a lightweight, controlled, zero-third-party canvas designed from the ground up for humans and embedded agents to author and inhabit the same design surface.

ArtBoard is a pan/zoom canvas of ArtPieces (image, HTML, or live JSX) grouped into Sections, plus Notes for inline commentary. The whole board is a ArtBoardValue — plain JSON arrays of sections and pieces — making it JSON-friendly for agents. Every piece carries stable data-fa-piece handles and supports pending mode for staged writes. ArtBoard is controlled (value + onChange, viewport + onViewportChange, focus + onFocusChange), so agents read and write the full state directly; nothing is hidden. Figma-style gestures — trackpad pinch, notched wheel zoom, middle-drag pan, grip-drag reorder, arrow keys in focus mode — work out of the box. Optional /screens import registers the board with fancy-screens so it renders inside a ScreenSchema.

npm install @particle-academy/fancy-artboard, then import and render. Import ArtBoard, ArtPiece, and styles: import { ArtBoard, ArtPiece } from "@particle-academy/fancy-artboard"; import "@particle-academy/fancy-artboard/styles.css"; Wrap ArtBoard (with a height), add ArtBoard.Sections by id and title, nest ArtPieces with content={{ kind: "image", src: "…" }} or JSX children. Pass a value prop to drive from JSON; JSX ids still resolve children by key. Add ArtBoard.Note with top, left, rotate for sticky notes.