A minimalist Figma clone using Fabric.js and Liveblocks for real-time collaboration.

:notebook_with_decorative_cover: Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Netlify
• Give A Star
• Star History
• Give A Star

:bangbang: Folder Structure

Here is the folder structure of this app.

figma-clone/
  |- app/
    |-- app.tsx
    |-- apple-icon.png
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
    |-- page.tsx
    |-- room.tsx
  |- components/
    |-- comments/
    |-- cursor/
    |-- reaction/
    |-- settings/
    |-- ui/
    |-- users/
    |-- left-sidebar.tsx
    |-- live.tsx
    |-- loader.tsx
    |-- navbar.tsx
    |-- right-sidebar.tsx
    |-- shapes-menu.tsx
  |- config/
    |-- index.ts
  |- constants/
    |-- index.ts
  |- hooks/
    |-- use-interval.ts
  |- lib/
    |-- canvas.ts
    |-- key-events.ts
    |-- shapes.ts
    |-- use-max-zindex.ts
    |-- utils.ts
  |- public/
  |- types/
    |-- declaration.d.ts
    |-- styles.d.ts
    |-- type.ts
  |- .env.example
  |- .env/.env.local
  |- .eslintrc.json
  |- .gitignore
  |- .prettierrc.json
  |- bun.lockb
  |- components.json
  |- environment.d.ts
  |- eslint.config.mjs
  |- favicon.ico
  |- liveblocks.config.ts
  |- netlify.toml
  |- next.config.mjs
  |- package.json
  |- postcss.config.mjs
  |- tailwind.config.ts
  |- tsconfig.json

:toolbox: Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env.local file in root directory.
4. Contents of .env.local:

# .env.local

# disable next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# liveblocks api key
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=pk_dev_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

5. Set Up Liveblocks

1. Create a Liveblocks Account:

   • If you don't have a Liveblocks account, sign up at Liveblocks.

2. Create a New Project:

   • After logging in, navigate to the Liveblocks dashboard.
   • Click on "Create Project" to set up a new project for Figma-Clone.
   • Provide a name for your project and create it.

6. Obtain the Liveblocks Public Key

1. Navigate to the Project Settings:

   • In your Liveblocks dashboard, select the project you created for Figma-Clone.
   • Go to the "Settings" or "API Keys" section.

2. Copy the Public Key:

   • You will find the "Public Key" under the API Keys section. Copy the public key that starts with pk_dev_ and replace placeholder value in NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY with the copied value.

3. Save and Secure:

   • Save the changes to the .env.local file.

4. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

5. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

:camera: Screenshots

:gear: Tech Stack

:wrench: Stats

:raised_hands: Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

:gem: Acknowledgements

Useful resources and dependencies that are used in Figma Clone.

• @liveblocks/client: ^1.12.0
• @liveblocks/react: ^1.12.0
• @liveblocks/react-comments: ^1.12.0
• @radix-ui/react-context-menu: ^2.2.16
• @radix-ui/react-dropdown-menu: ^2.1.19
• @radix-ui/react-label: ^2.1.11
• @radix-ui/react-select: ^2.3.2
• @radix-ui/react-slot: ^1.2.4
• @types/fabric: ^5.3.11
• @types/node: ^25
• @types/react: 19.2.17
• @types/react-dom: 19.2.3
• @types/uuid: ^11.0.0
• class-variance-authority: ^0.7.1
• clsx: ^2.1.1
• eslint: 10
• eslint-config-next: 16.2.7
• eslint-plugin-unused-imports: ^4.4.1
• fabric: ^5.5.2
• jspdf: ^4.2.1

:coffee: Buy Me a Coffee

:rocket: Follow Me

:books: Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

:page_with_curl: Deploy on Netlify

The simplest way to deploy your React.js app is to use the Netlify Platform - a powerful platform for modern web projects.

Explore the Netlify deployment documentation for step-by-step instructions on deploying your React.js app on Netlify.

Happy coding, and feel free to share your thoughts and improvements with the Netlify community!

:star: Give A Star

You can also give this repository a star to show more people and they can use this repository.

:star2: Star History