Replication of Figma editor with real time colabration features using tech stack - Next JS, TypeScript, Shadcn, TailwindCSS, LiveBlocks and Fabric JS.
Real time Multi Users, Cursor chat for group communtication, Active users indication, Creating different shapes & texts, Image uploading, Element customization, Freeform drawing, Undo/Redo functions, Keyboard actions, History, Exporting as PDF.
- Mouse right key : for shortcut suggestion
- / : Open live cursor chat
- esc : Close live cursor chat
- ctrl+z : Undo
- ctrl+y : Redo
- ctrl+c : Copy
- ctrl+v : Paste
app/: Contains Next.js pages.components/: Reusable React components.public/: Static assets.lib/: Library files and integrations.types/: declaration of types.
-
Clone the repository to your local machine:
git clone https://github.com/NaveenMathramkott/figma-clone-nextjs.git
-
Navigate to the project directory:
cd figma-clone-nextjs -
Install dependencies using npm:
npm install
-
Set up environment variables:
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=get-your-liveblocks-public-key
-
Run the development server:
npm run dev
A heartfelt thank you to Adrian Hajdin for inspiring and guiding.