See teammates' cursors and node selections in real time on a flowGen canvas; awareness is scoped per canvas so people on different canvases don't crowd each other.
Where: Media Gen project → canvas (multiple people open) — Open the same project in another session/tab and move the mouse
Key ideas
- Awareness mesh: Cursors and presence ride the project's existing WebRTC awareness channel (not Firestore); a one-letter tag separates cursor messages from presence heartbeats. No setup beyond being signed in.
- Per-canvas scoping: Each collaborator can be on a different canvas (stored as conversationId). Cursors and selection rings are filtered to the canvas you are on, so you only see people working on the same one.
- Presence + selection rings: A heartbeat broadcasts your identity, the canvas you are on, and the nodes you have selected. Remote selections render as a colored outline around each node, labeled with the collaborator's name; their cursor is a colored arrow with a name pill.
Steps
- Open a Media Gen project; sign-in identity (name, avatar, a deterministic per-user color) is resolved automatically from your Firebase session.
- Have a teammate open the SAME project and switch to the same canvas — collaboration is scoped per canvas, so you must both be on the same one to see each other.
- Move your mouse over the canvas: your cursor is broadcast in canvas coordinates (rAF-coalesced) and appears as a colored arrow + name pill on their screen, staying screen-sized through pan and zoom.
- Click a node to select it: a colored ring labeled with your name appears around that node for everyone on the canvas, updating immediately (not just on the next heartbeat).
- Move your mouse off the canvas — your cursor is marked not-visible and disappears for others; switching to a different canvas removes your cursor and rings from the old one.
FAQ
Why can't I see a teammate's cursor even though we're in the same project?
Cursor and selection awareness is scoped per canvas. If your teammate is on a different canvas (a different conversationId), their cursor and selection rings are filtered out. Switch to the same canvas to see each other.
Do I need to turn collaboration on?
No. As long as you're signed in and on the same project's canvas, presence and cursors broadcast automatically over the project's existing live mesh.
Will collaborators editing the graph conflict with mine?
The graph itself is backed by the project's shared Y.Doc, which is conflict-free; the cursor/presence layer described here is purely the awareness overlay (who's here, where they're looking, what they've selected).