next.js Project

# Figma Clone

Projects 3 / 4
1 min read
Projects next.js
Table of Contents

Figma Clone

A minimalist Figma clone built with Next.js, Fabric.js, and Liveblocks for real-time collaborative design editing.

Tech Stack

  • Next.js 14 - React framework
  • Fabric.js - Canvas manipulation library
  • Liveblocks - Real-time collaboration
  • TypeScript - Type safety
  • Tailwind CSS - Styling
  • Radix UI - UI components

Setup

  1. Install dependencies:
Terminal window
npm install
  1. Create .env.local file:
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=your_liveblocks_public_key
  1. Run development server:
Terminal window
npm run dev

Key Features

  • Real-time Collaboration - Multiple users can edit simultaneously with live cursors
  • Shape Tools - Rectangle, Circle, Triangle, Line, Free Drawing
  • Text Editing - Add and edit text with font customization
  • Image Upload - Upload and place images on canvas
  • Comments - Add comments and threads for collaboration
  • Undo/Redo - History management (⌘+Z / ⌘+Y)
  • Export - Export canvas as PDF or image
  • Shape Properties - Edit dimensions, colors, fonts, alignment

Project Structure

  • app/ - Next.js app router pages and layout
  • components/ - React components (UI, canvas, comments, cursors)
  • lib/ - Canvas utilities, shape handlers, key events
  • liveblocks.config.ts - Liveblocks configuration
  • types/ - TypeScript type definitions

Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run start - Start production server
  • npm run lint - Run ESLint

Github repository

dubanzl/figma-clone
00TypeScript
Next: DevEvent — A Modern Event Management Platform Built with Next.js 16
My avatar

Appreciate you reading. If you want more hacking write-ups, network labs, and code deep-dives, check out my other posts or connect via the social links in the footer.

Projects Series