背景
问题
设计工具往往要么是单人使用，要么过于笨重。UI Studio 探索一个共享画布能做到多轻量，同时仍能处理实时在线状态与并发编辑。
方法
方案
基于 Next.js 的画布，使用 Fabric.js 实现矢量编辑、Liveblocks 处理多人状态，让光标、选区和图形改动在协作者之间实时同步。
功能
- Live multiplayer canvas with presence
- Vector shapes, text, and image objects
- Per-user cursors and selections
- Shareable room-based boards
架构笔记
- 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.
挑战
结果
A working real-time canvas deployed on Vercel — a study in multiplayer presence and conflict-tolerant editing.
学到的东西
复盘
- 01Multiplayer feels magical only when presence is instant and edits never fight.
- 02Separating ephemeral presence from durable storage keeps the canvas responsive.
下一步
下一步
- 01Add comments and reactions
- 02Support board export
- 03Tighten mobile canvas gestures