@particle-academy/fancy-whiteboard

Collaborative whiteboard React components — sticky notes, diagramming, freeform drawing, and presence cursors.

Transport-agnostic. Components are controlled (state + onChange); your app wires the realtime layer (Echo / Reverb / Yjs / WebSockets / whatever). The package itself ships zero networking and minimal business logic so apps own their workflow.

Install

npm install @particle-academy/fancy-whiteboard

Required peer (v0.2.0+): @particle-academy/react-fancy (^3.4.0) is now a required peer dependency — sticky notes render via its shared <StickyNote> primitive. Install it alongside this package and import both stylesheets:

import "@particle-academy/fancy-whiteboard/styles.css";
import "@particle-academy/react-fancy/styles.css";

Components

| Component | Purpose | |---|---| | Board | Pan/zoom viewport that hosts everything else | | StickyNote | Draggable, editable colored note | | Drawing | Freeform pen-stroke layer (controlled stroke list) | | Connector | SVG edge between two world-space points | | Shape | rect / ellipse / text diagram primitives | | Cursor, CursorLayer | Remote-user pointers with name tags |

Quick start

import { Board, StickyNote, CursorLayer } from "@particle-academy/fancy-whiteboard";
import "@particle-academy/fancy-whiteboard/styles.css";

export function MyBoard() {
  const [notes, setNotes] = useState<StickyNoteItem[]>([]);
  const [cursors, setCursors] = useState<RemoteCursor[]>([]);

  return (
    <Board style={{ width: "100%", height: 600 }}>
      {notes.map((n) => (
        <StickyNote
          key={n.id}
          item={n}
          onChange={(next) => setNotes((all) => all.map((x) => (x.id === next.id ? next : x)))}
        />
      ))}
      <CursorLayer cursors={cursors} />
    </Board>
  );
}

To make it collaborative, pipe onChange through your transport (broadcast → remote → setState). The components don't care how that happens.

Status

v0.1.0 — initial scaffold. APIs are likely to evolve before v1.

License

MIT