← 项目档案
UI Studio
实时协作设计画布，多人可以在同一块画板上同时绘制、排布与编辑。
这是什么
问题
设计工具往往要么是单人使用，要么过于笨重。UI Studio 探索一个共享画布能做到多轻量，同时仍能处理实时在线状态与并发编辑。
方案
基于 Next.js 的画布，使用 Fabric.js 实现矢量编辑、Liveblocks 处理多人状态，让光标、选区和图形改动在协作者之间实时同步。
界面一览
Documented scopeThe public repository documents the shipped room, canvas, presence, comments, history, layer, and export systems.
技术栈
Product
- Next.js 14
- TypeScript
- Tailwind CSS
Canvas
- Fabric.js 5
- Layers
- Inspector
Realtime
- Liveblocks Storage
- Presence
- Comments
- History
Export
- PNG
- JSON
- jsPDF
亮点功能
- No-login room URLs with active-user presence and live cursors
- Shapes, text, images, multi-select, alignment, ordering, and layers
- Cursor chat, emoji reactions, and pinned comments
- Shared undo/redo and visible connection state
- PNG/PDF/JSON export plus JSON import
- Pan and zoom from 20% to 400% with a mobile read-only view
工程实现
- 过程 01
Separate durable objects from ephemeral presence
- 背景
- Canvas objects and comments must persist, while cursors, selection, and active-user state update too frequently for the same storage path.
- 方法
- Use Liveblocks storage for durable room data and presence for transient collaboration signals.
- 结果
- Cursor feedback stays responsive, but synchronization code must coordinate two kinds of shared state.
- 过程 02
Make rooms link-first and account-free
- 背景
- Authentication would add friction before the multiplayer canvas proved useful.
- 方法
- Generate a unique room URL and let collaborators enter directly.
- 结果
- Sharing is immediate, but ownership, discovery, and access control remain intentionally limited.
实现细节
架构笔记
- Fabric.js owns the canvas object model; Liveblocks owns the shared state.
- Ephemeral cursor and user presence is separated from durable room storage and comment threads.
- Shared history keeps undo/redo collaborative instead of treating every browser as an isolated editor.
- Unique room identifiers make collaboration link-first and remove an authentication step from the prototype.
挑战
- Synchronizing Fabric object mutations with durable multiplayer storage without creating feedback loops.
- The mobile experience is intentionally read-only; the full editor is designed for pointer-and-keyboard input.
- Automated headless verification reached the deployed room URL but did not render the canvas surface, so the case study does not claim cross-browser coverage beyond the documented implementation.
结果
A deployed, source-available multiplayer canvas with a notably broad prototype surface: presence, comments, shared history, layers, inspector tools, and three export formats.
规划与心得
复盘
- 01Multiplayer feels magical only when presence is instant and edits never fight.
- 02Separating ephemeral presence from durable storage keeps the canvas responsive.
下一步
- 01Restore reliable automated canvas rendering
- 02Add focused multiplayer integration tests
- 03Decide whether mobile editing belongs in scope