A fully interactive, real-time canvas-based design platform built using Next.js + Fabric.js + Liveblocks — supporting live cursors, drawing, shapes, comments, reactions, history, and multi-user collaboration.
Designed to feel like Figma, built for the web.
- ✨ Introduction
- ⚙️ Tech Stack
- 🎨 Core Features
- 🤸 Quick Start
- 🧱 Project Structure
- 🧠 Architecture Overview
- 🚀 Future Enhancements
- 🤝 Contribution
- 🔗 Contacts
- 📄 License
- 🙏 Acknowledgements
- ⭐ Show Your Support
FigPro is a real-time collaborative design tool inspired by Figma.
It supports:
- Real-time drawing
- Shape creation & editing
- Image upload
- Multi-user cursors & cursor chat
- Comment threads
- Reactions
- Undo/Redo
- Canvas history tracking
- Exporting designs
All backed by Liveblocks for real-time communication and Fabric.js for canvas rendering.
This project showcases:
- Advanced React hooks
- Canvas rendering logic
- Real-time state syncing
- Design tooling architecture
- Next.js – App Router + SSR/CSR
- TypeScript – Strict type safety
- Fabric.js – Canvas engine
- Tailwind CSS – Styling
- Shadcn/UI – Accessible UI components
- Radix UI – Low-level UI primitives
-
Liveblocks
- Presence (cursors, chat)
- Storage (canvas objects)
- Broadcast events
- Comments & threads
- UUID – Unique object IDs
- JSPDF – Export canvas to PDF
- Each user sees real-time cursor positions of others
- Includes cursor chat bubbles
- Pin comments anywhere on the canvas
- Threaded conversations
- Resolved/unresolved states
- Floating emoji reactions
- Real-time broadcasts
- Freeform drawing (path creation)
- Real-time syncing of generated paths
- Brush styling support
-
Rectangle
-
Circle
-
Line
-
Triangle
-
Customizable using the side panel:
- Color
- Width & height
- Stroke
- Font properties (for text)
- Upload PNG/JPG to canvas
- Resize, move, modify
-
Live object selection
-
Edit:
- Dimensions
- Colors
- Fonts
- Stroke
- Z-index
- Full undo/redo support using Liveblocks history
- Copy
- Paste
- Delete
- Undo
- Redo
- Trigger chat / reaction menus
- Export entire canvas as a PDF or image
- Track all actions
- Cleanup/reset the board
And many more advanced features built with a clean, scalable architecture.
Make sure the following are installed:
- Git
- Node.js
- npm / yarn / pnpm
git clone https://github.com/Itssanthoshhere/FigPro.git
cd FigPronpm install
Create .env.local:
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=
Get your key from https://liveblocks.io
npm run dev
Visit: http://localhost:3000
FigPro/
│── app/
│ ├── page.tsx
│ ├── Room.tsx
│ ├── CollaborativeApp.tsx
│ └── layout.tsx
│
│── components/
│ ├── canvas/
│ ├── comments/
│ ├── cursor/
│ ├── reaction/
│ ├── settings/
│ ├── ui/
│ ├── users/
│ ├── LeftSidebar.tsx
│ ├── RightSidebar.tsx
│ └── Navbar.tsx
│
│── lib/
│ ├── canvas.ts
│ ├── shapes.ts
│ ├── key-events.ts
│ ├── utils.ts
│ └── useMaxZIndex.ts
│
│── liveblocks.config.ts
│── package.json
│── tailwind.config.js
└── README.md
Handles:
- Object creation
- Rendering
- Selections
- Transformations
- Events (path:created, object:modified, scaling, movement)
Handles:
- Presence (
cursor,message) - Storage (
LiveMapof canvas objects) - Events (reactions)
- Comments & threads
- Shadcn for components
- Tailwind for layout/styling
- Custom panels for shapes and attributes
- 🧩 Add grouping/ungrouping support
- 📐 Add advanced pen tool
- 🌗 Add dark/light theme toggle
- 🎞️ Add multi-page canvases
- 📦 Integrate cloud exports
- 🤝 Add collaboration permissions
Contributions are welcome!
git checkout -b feature/my-feature
git commit -m "feat: add awesome feature"
git push origin feature/my-featureSubmit a pull request 🚀
- GitHub: Itssanthoshhere
- LinkedIn: Santhosh VS
This project is for educational, learning, and portfolio purposes only.
- Liveblocks – Collaboration API
- Fabric.js – Canvas framework
- Shadcn/UI – UI toolkit
- Next.js – React framework
If you found this project helpful or inspiring — please give it a ⭐ on GitHub!