Skip to content
Color theme
Marketplace

Prototype Productivity · Whiteboard

Canvas Board

Planning boards on an infinite canvas: frames, sticky notes, shapes and connectors with snapping, a JSON clipboard and undo, saved per board in IndexedDB, with owner and viewer personas and seeded scenarios.

A flagship prototype: complete and ready to try.

Screenshot · shown in its full screen shell

Live preview

1280×800
Live demo bundled static build Open
Screenshot of Canvas Board

No live preview yet.

Each prototype stores its data in IndexedDB for the address it runs on. Data you create at localhost:5173 is separate from a build at localhost:4173 or a published URL, and the framed preview shares storage with that address opened directly.

Highlights

  • Boards of frames, sticky notes and connectors on an infinite canvas
  • Every edit saves through a permission-checked service
  • A 1,500-note board and an awkward-shapes board to stress the editor

Scenarios 5

  • empty
  • active default
  • crowded
  • awkward
  • viewer

Each scenario rebuilds a deterministic world. Open one with ?scenario=<id>.

Spec kit

Every prototype carries a spec any agent can follow to rebuild it in a real app: the files below, in prototypes/canvas-board-demo/, with generated regions kept in sync with the code.

  • AGENTS.md
  • docs/SPEC.md
  • docs/DATA_MODEL.md
  • docs/FLOWS.md
  • docs/SCREENS.md
  • docs/PERMISSIONS.md

Check that the spec is current

pnpm protoyard spec canvas-board-demo --check

Rebuild kit (ZIP)

pnpm protoyard spec canvas-board-demo --bundle