Wired: an infinite canvas where edits never collide
A collaborative whiteboard where several people edit one canvas at once, with live cursors and presence, built as a React frontend and a Node.js backend.
- Problem
- People editing the same canvas should never have to take turns.
- Approach
- Yjs CRDTs merge concurrent edits, Socket.IO carries them, and Redis keeps sessions and room documents.
- Result
- Several people edit one canvas with conflict-free merging, live cursors and presence, on one login session shared across HTTP and WebSockets.
What it is
Wired is a collaborative visual workspace built as a monorepo: a React frontend for the product and the canvas, and a Node.js backend for authentication, sessions and room sync.
You sign up, land on a studio dashboard of boards and templates, and open one to join its canvas room.
How it fits together
The browser talks to the backend over HTTP for authentication, using cookies, and over Socket.IO for everything that happens on the canvas. The backend keeps sessions and each room's document in Redis.
Merging edits without locks
Each room is a Yjs document. Updates travel over Socket.IO and are merged conflict-free on every client, and the document is persisted through Redis. Two people can move the same shape at once and nobody loses work.
Live cursors and presence show who is where.
The frontend uses the same five layers
The client is organised in vertical slices such as login, dashboard and the collaboration canvas. Inside each slice, views render and forward events, use cases own the journey, repositories own data and state through TanStack Query, adapters speak to the network and the sockets, and services hold the pure rules, which are tested with Vitest.
Stack
Frontend: React 19, TypeScript, Vite, Tailwind CSS, Zustand, TanStack Query, Konva, the Socket.IO client and Yjs. Backend: Express 5, Socket.IO, Redis, express-session, connect-redis, Zod, bcryptjs and Yjs.