← projects
UI Studio
A no-login multiplayer design canvas with shared objects, cursors, comments, undo history, and exportable room URLs.
What it is
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.
Solution
UI Studio pairs Fabric.js object editing with Liveblocks storage, presence, comments, and history. A shared URL opens the same room, where collaborators can draw, arrange layers, chat through cursors, comment, undo, and export without creating an account.
What it looks like
Documented scopeThe public repository documents the shipped room, canvas, presence, comments, history, layer, and export systems.
Built with
Product
- Next.js 14
- TypeScript
- Tailwind CSS
Canvas
- Fabric.js 5
- Layers
- Inspector
Realtime
- Liveblocks Storage
- Presence
- Comments
- History
Export
- PNG
- JSON
- jsPDF
Highlights
- 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
Engineering
- Process 01
Separate durable objects from ephemeral presence
- Context
- Canvas objects and comments must persist, while cursors, selection, and active-user state update too frequently for the same storage path.
- Approach
- Use Liveblocks storage for durable room data and presence for transient collaboration signals.
- Outcome
- Cursor feedback stays responsive, but synchronization code must coordinate two kinds of shared state.
- Process 02
Make rooms link-first and account-free
- Context
- Authentication would add friction before the multiplayer canvas proved useful.
- Approach
- Generate a unique room URL and let collaborators enter directly.
- Outcome
- Sharing is immediate, but ownership, discovery, and access control remain intentionally limited.
Under the hood
Architecture notes
- 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.
Challenges
- 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.
Outcome
A deployed, source-available multiplayer canvas with a notably broad prototype surface: presence, comments, shared history, layers, inspector tools, and three export formats.
Roadmap & lessons
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
- 01Restore reliable automated canvas rendering
- 02Add focused multiplayer integration tests
- 03Decide whether mobile editing belongs in scope