CollabBoard
Shared whiteboards, documents and workspaces with real-time synchronisation.
About the project
CollabBoard combines a visual whiteboard and rich-text documents in one workspace. Teams can organise ideas on sticky notes, draw diagrams and edit documents without switching between separate tools. Konva powers the canvas, Slate.js handles documents, and Yjs synchronises shared changes.
The challenge
Unify different content types and simultaneous editing within a consistent workspace model.
What we built
Tools for sticky notes, shapes, freehand drawing, arrows, frames and object groups.
Connectors that attach to objects and snap to anchor points.
Yjs CRDT synchronisation and a Socket.IO / gRPC gateway for collaboration.
Roles, administration and templates for Kanban boards, mind maps and ER diagrams.
Technology stack
Architecture & technology roles
- Next.js
- Web-interface structure, pages and the boundary between server and client layers.
- React
- Interactive components and user-facing workflows.
- Konva
- Canvas objects and visual-whiteboard tools.
- Slate.js
- Structured rich-text document editing.
- Yjs
- A CRDT model for reconciling simultaneous edits.
- gRPC
- Typed communication between service components.
- Drizzle ORM
- Typed relational data access.
How it works
- Create a workspace and choose a template.
- Add objects, connections and documents.
- Edit the material together with the team.
Project gallery
The images below show the project’s architecture and data model.
Have a challenge? Let’s solve it.
Tell us what you need. We’ll clarify the details and suggest the next step.
Discuss your project