Context
Problem
Design tools tend to be either single-player or heavyweight. UI Studio explores how light a shared canvas can feel while still handling live presence and concurrent edits.
Approach
Solution
A Next.js canvas built on Fabric.js for vector editing and Liveblocks for multiplayer state, so cursors, selections, and shape changes sync between collaborators in real time.
Features
- Live multiplayer canvas with presence
- Vector shapes, text, and image objects
- Per-user cursors and selections
- Shareable room-based boards
Architecture notes
- Fabric.js owns the canvas object model; Liveblocks owns the shared state.
- Ephemeral presence is separated from durable storage so cursors stay fast on heavy boards.
Challenges
Outcome
A working real-time canvas deployed on Vercel — a study in multiplayer presence and conflict-tolerant editing.
What I learned
Lessons learned
- 01Multiplayer feels magical only when presence is instant and edits never fight.
- 02Separating ephemeral presence from durable storage keeps the canvas responsive.
Next steps
Next steps
- 01Add comments and reactions
- 02Support board export
- 03Tighten mobile canvas gestures