A simplified Figma-style collaborative design tool built with Next.js, Liveblocks, and Fabric.js.
Supports real-time multiplayer editing, cursor presence, comment threads, and basic shape drawing — built purely for learning and experimentation.
- 🟦 Create and manipulate canvas objects (shapes, elements).
- 🎛️ View and edit properties of selected canvas items.
- 👥 Real-time multiplayer collaboration across users.
- 💬 Add comments, emojis, and mention other users.
- ⚡ Instant updates for all actions across sessions using Liveblocks.
- 📚 Layer listing and management (like Figma).
- 😄 Express reactions (e.g., emojis, presence indicators) across users.
- 🧩 Built to mimic Figma's core interaction mechanics.
| Layer | Technology Used |
|---|---|
| Frontend | Next.js, Tailwind CSS, shadcn/ui |
| Canvas Engine | Fabric.js |
| Realtime Sync | Liveblocks |
git clone https://github.com/your-username/figma-clone.git
cd figma-clonenpm installCreate a .env.local file at the root of your project:
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=your_public_liveblocks_key_here🔑 Replace the placeholder with your actual Liveblocks public key.
npm run devOpen your browser and navigate to `http://localhost:3000\`.
There are no automated tests included in this project as it's built for experimentation. You can explore real-time features by opening the app in multiple tabs or different devices.
This project does not include user authentication. Realtime collaboration is managed entirely via Liveblocks' presence and storage APIs.
No REST or GraphQL APIs are used.
All state synchronization, storage, presence, and events are managed via Liveblocks.
For more details, refer to Liveblocks Documentation.
- 💡 Learning how real-time collaborative apps like Figma work.
- 🧪 Experimenting with Liveblocks and canvas-based UI.
- 🎨 Building your own design tool prototype.
- 👨💻 Understanding shared state and presence synchronization in a team-based environment.
- Add user authentication (e.g., Auth.js or Firebase).
- Export/import canvas files.
- Support image uploads or more complex shapes.
- Add keyboard shortcuts for quick design actions.
- Enhance comment threading and notification system.