Convex, react flow and collaboration
Did anyone successfully implement realtime collaboration with react flow and convex to do something like the following liveblocks example?
https://liveblocks.io/examples/collaborative-flowchart/zustand-flowchart
Collaborative Flowchart | Liveblocks Example
This example shows how to build a collaborative flowchart with Liveblocks, Zustand, React Flow, and Next.js.
3 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
did you make this work? I started working on it too and also not sure about the best approach. react flow expects arrays of nodes and edges as props and we can implement components for the individual nodes/edges but not sure if we can’t use the reactive hooks as it needs to have access to all the nodes/edges in its internal zustand store
We ended up making our own server for the realtime collaboration part. We used yjs and y-websocket. For the zustand store, we initialize it with data coming from convex.