Figma Clone Using HTML, CSS, JavaScript and ReactJs
![thumbnail](https://codewithcurious.com/wp-content/uploads/2024/06/thmbnail-1-1024x574.png)
Introduction :
This project is a Figma clone, allowing multiple users to collaboratively draw, edit, and manipulate shapes on a canvas in real-time. It leverages Fabric.js for canvas manipulation and Liveblocks for real-time data synchronization between users.
Key Technologies Used:
React.js: This is the main framework we use to build the user interface of our application. React.js helps us create interactive and dynamic web pages.
Fabric.js: This is a powerful JavaScript library that makes working with the HTML5 canvas element easier. Fabric.js helps us draw shapes, add images, and interact with the canvas in a user-friendly way.
Liveblocks: This tool allows multiple users to see changes in real-time. When one user draws a shape or moves an object, everyone else sees the change instantly. Liveblocks ensures that our canvas stays synchronized for all users.
Explanation :
File Structure :
App.tsx
This is the main component where most of the application logic resides.
Initialization and State Management
- Undo and Redo: Using hooks from Liveblocks (
useUndo
,useRedo
), providing undo and redo functionality. - Canvas Objects Storage: Using
useStorage
hook from Liveblocks to store and synchronize canvas objects. - References and State Variables:
canvasRef
: Reference to the HTML canvas element.fabricRef
: Reference to the Fabric.js canvas instance.- Various refs like
isDrawing
,shapeRef
,selectedShapeRef
, etc., to manage drawing state, selected shapes, and active elements. - State variables for
activeElement
andelementAttributes
.
Functions and Event Handlers
- Mutations: Using
useMutation
to define mutations for deleting and syncing shapes in Liveblocks storage. - Active Element Handler:
handleActiveElement
function to set the active element in the toolbar and trigger respective actions (e.g., delete, reset, upload image).
UseEffect Hooks
- Canvas Initialization: Initializes Fabric.js canvas, sets up event listeners for mouse actions, object modifications, scaling, and window resize.
- Canvas Rendering: Re-renders the canvas when the Liveblocks storage (
canvasObjects
) changes.
Rendering
- Main Layout: Contains
Navbar
,LeftSidebar
,Live
, andRightSidebar
components. - Navbar: Handles image uploads and active element selection.
- LeftSidebar: Lists all shapes.
- Live: Displays the canvas.
- RightSidebar: Displays and updates element attributes.
Room.tsx
Sets up the Liveblocks room provider.
- RoomProvider: Initializes the presence and storage for the room.
- ClientSideSuspense: Ensures loading state is handled with a fallback loader.
global.tsx
Contains global styles and Tailwind CSS utilities.
- Global Styles: Basic styles for the application.
- Tailwind CSS Utilities: Custom utilities for various UI components like input fields and right sidebar menu.
layout.tsx
Defines the root layout of the application.
- Metadata: Sets the title and description of the application.
- Google Font: Imports Work Sans font.
- Room Component: Wraps the children components inside the
Room
provider to enable real-time collaboration.
page.tsx
Disables server-side rendering for the App
component to avoid pre-rendering issues with the canvas element.
- Dynamic Import: Uses
dynamic
from Next.js to importApp
withssr: false
.
JavaScript Logic
Main Event Handlers (from @/lib/canvas
)
Mouse Events:
handleCanvasMouseDown
: Initializes shape creation or selection on mouse down.handleCanvaseMouseMove
: Updates the shape being drawn or moved.handleCanvasMouseUp
: Finalizes the shape creation or modification.handlePathCreated
: Handles creation of paths (freeform drawing).handleCanvasObjectModified
: Updates storage when an object is modified.handleCanvasObjectMoving
: Handles movement of objects.handleCanvasSelectionCreated
: Handles selection of objects.handleCanvasObjectScaling
: Handles object scaling.handleCanvasZoom
: Manages zoom in and out on the canvas.handleResize
: Adjusts canvas size on window resize.
Key Events (from
@/lib/key-events
):handleDelete
: Deletes selected shape.handleKeyDown
: Handles keyboard shortcuts for delete, undo, redo, etc.
Conclusion :
This Figma clone project demonstrates a comprehensive use of React.js for UI, Fabric.js for canvas manipulation, and Liveblocks for real-time collaboration. The code is well-structured, with clear separation of concerns between different functionalities, making it easy to understand and extend. The use of hooks and context ensures a responsive and interactive user experience, while the integration with Liveblocks enables seamless real-time collaboration.
Source Code :
Output :
![op](https://codewithcurious.com/wp-content/uploads/2024/06/op-1-1024x572.png)
More HTML CSS JS Projects
Get Huge Discounts
Get Discount on Top EdTech Compnies
Find More Projects
Drawing Ganesha Using Python Turtle Graphics[Drawing Ganapati Using Python] Introduction In this blog post, we will learn how to draw Lord Ganesha …
Contact Management System in Python with a Graphical User Interface (GUI) Introduction: The Contact Management System is a Python-based application designed to …
KBC Game using Python with Source Code Introduction : Welcome to this blog post on building a “Kaun Banega Crorepati” (KBC) game …
Basic Logging System in C++ With Source Code Introduction : It is one of the most important practices in software development. Logging …
Snake Game Using C++ With Source Code Introduction : The Snake Game is one of the most well-known arcade games, having its …
C++ Hotel Management System With Source Code Introduction : It is very important to manage the hotels effectively to avail better customer …