Figma Clone

A minimalistic Figma clone to show how to add real-world features like live collaboration with cursor chat, comments, reactions, and drawing designs (shapes, image upload) on the canvas using fabric.js.

If you're getting started and need assistance or face any bugs, join our active Discord community with over 27k+ members. It's a place where people help each other out.

<a href="https://discord.com/invite/n6EdbFJ" target="blank"><img src="https://github.com/sujatagunale/EasyRead/assets/151519281/618f4872-1e10-42da-8213-1d69e486d02e" /></a>

<div align="center"> <br /> <a href="https://youtu.be/oKIThIihv60" target="blank"> <img src="https://github.com/JavaScript-Mastery-Pro/figma-ts/assets/151519281/e03dc22d-0f45-464b-9dc3-f01f07906bee" alt="Project Banner"> </a> <br />

<div> <img src="https://img.shields.io/badge/-TypeScript-black?style=for-the-badge&logoColor=white&logo=typescript&color=3178C6" alt="typescript" /> <img src="https://img.shields.io/badge/-NextJS-black?style=for-the-badge&logoColor=white&logo=nextdotjs&color=000000" alt="nextdotjs" /> <img src="https://img.shields.io/badge/-TailwindCSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4" alt="tailwindcss" /> </div>

<h3 align="center">Real Time Figma Clone</h3>

<div align="center"> Build this project step by step with our detailed tutorial on <a href="https://www.youtube.com/@javascriptmastery/videos" target="blank"><b>JavaScript Mastery</b></a> YouTube. Join the JSM family! </div> </div>

📋 <a name="table">Table of Contents</a>

1. 🤖 Introduction 2. ⚙️ Tech Stack 3. 🔋 Features 4. 🤸 Quick Start 5. 🕸️ Snippets 6. 🔗 Links 7. 🚀 More

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, <a href="https://www.youtube.com/@javascriptmastery/videos" target="blank"><b>JavaScript Mastery</b></a>.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

<a href="https://youtu.be/oKIThIihv60" target="blank"><img src="https://github.com/sujatagunale/EasyRead/assets/151519281/1736fca5-a031-4854-8c09-bc110e3bc16d" /></a>

<a name="introduction">🤖 Introduction</a>

A minimalistic Figma clone to show how to add real-world features like live collaboration with cursor chat, comments, reactions, and drawing designs (shapes, image upload) on the canvas using fabric.js.

If you're getting started and need assistance or face any bugs, join our active Discord community with over 27k+ members. It's a place where people help each other out.

<a href="https://discord.com/invite/n6EdbFJ" target="blank"><img src="https://github.com/sujatagunale/EasyRead/assets/151519281/618f4872-1e10-42da-8213-1d69e486d02e" /></a>

<a name="tech-stack">⚙️ Tech Stack</a>

- Next.js - TypeScript - Liveblocks - Fabric.js - Shadcn - Tailwind CSS

<a name="features">🔋 Features</a>

👉 Multi Cursors, Cursor Chat, and Reactions: Allows multiple users to collaborate simultaneously by showing individual cursors, enabling real-time chat, and reactions for interactive communication.

👉 Active Users: Displays a list of currently active users in the collaborative environment, providing visibility into who is currently engaged.

👉 Comment Bubbles: Enables users to attach comments to specific elements on the canvas, fostering communication and feedback on design components.

👉 Creating Different Shapes: Provides tools for users to generate a variety of shapes on the canvas, allowing for diverse design elements

👉 Uploading Images: Import images onto the canvas, expanding the range of visual content in the design

👉 Customization: Allows users to adjust the properties of design elements, offering flexibility in customizing and fine-tuning visual components

👉 Freeform Drawing: Enables users to draw freely on the canvas, promoting artistic expression and creative design.

👉 Undo/Redo: Provides the ability to reverse (undo) or restore (redo) previous actions, offering flexibility in design decision-making

👉 Keyboard Actions: Allows users to utilize keyboard shortcuts for various actions, including copying, pasting, deleting, and triggering shortcuts for features like opening cursor chat, reactions, and more, enhancing efficiency and accessibility.

👉 History: Review the chronological history of actions and changes made on the canvas, aiding in project management and version control.

👉 Del