A minimalistic Figma clone designed to showcase real-world features such as live collaboration, multi-cursors, chat functionality, reactions, and design tools like shapes, image uploads, and freeform drawing using fabric.js.
- Next.js
- TypeScript
- Liveblocks
- Fabric.js
- Shadcn
- Tailwind CSS
👉 Multi Cursors, Cursor Chat, and Reactions: Collaborate in real-time with multi-cursor support, chat, and reactions.
👉 Active Users: Displays a list of users currently working on the canvas.
👉 Comment Bubbles: Add comments to specific parts of the design for better collaboration.
👉 Creating Shapes: Draw and create a variety of shapes on the canvas.
👉 Image Upload: Import images onto the canvas for your design.
👉 Customization: Adjust properties of design elements to fit your needs.
👉 Freeform Drawing: Draw freely on the canvas for sketches or annotations.
👉 Undo/Redo: Easily undo or redo actions to navigate through your design changes.
👉 Keyboard Actions: Use shortcuts for common actions such as copy, paste, and more.
👉 History: Review the history of actions made on the canvas to track progress.
👉 Delete, Scale, Move, Clear, Export Canvas: Manage your design elements with various options.
And much more, including optimized code architecture, advanced React hooks, and reusable components.
To get the project up and running locally, follow these steps:
Make sure the following tools are installed:
git clone https://github.com/your-username/figma-ts.git
cd figma-tsnpm installnpm run devVisit http://localhost:3000 to view the project in your browser.