Real-Time Collaborative Mind Maps with React Flow and Supabase

Brainstorming is better together. MindMap lets teams build node graphs collaboratively with live cursor presence.

1. Infinite Canvas with React Flow

React Flow provides a performant, zoom-and-pan canvas with draggable nodes and edges:

typescript
import ReactFlow, { addEdge, useNodesState, useEdgesState } from 'reactflow';

function MindMapCanvas() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);

  return <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange}
    onEdgesChange={onEdgesChange} onConnect={onConnect} fitView />;
}

2. Live Cursor Presence

Supabase Realtime Presence broadcasts each user's cursor position, rendering colored avatars that follow their pointer in real-time.

3. Auto-Save with Conflict Resolution

Changes debounce for 500ms before syncing to Supabase. Operational transforms prevent conflicts when two users edit the same node simultaneously.

Summary

React Flow handles the rendering complexity while Supabase manages real-time sync, delivering a collaborative whiteboard that scales to large teams.