Skip to content

Excalidraw Clone using Liveblocks #3

Description

@Jayesh-Dev21

Excalidraw Clone

✨ Overview:

This project aims to develop a web-based collaborative drawing tool, inspired by Excalidraw. It’s a whiteboard-like canvas that allows multiple users to draw, sketch, diagram, and communicate visually in real-time. The focus is on simplicity, speed, and seamless collaboration, with a smooth, hand-drawn feel.
🧠 Core Concept:

Users should be able to freely create shapes, text, arrows, and freehand drawings on a shared canvas — all rendered in a clean, sketch-style aesthetic. The application will be lightweight, intuitive, and focused on real-time collaboration via the web.
🔑 Key Features (to be implemented):

Real-time collaboration (multiple users on the same board)

Drawing tools: pen, shapes, arrows, text, selection

Hand-drawn-style rendering (rough.js or similar)

Undo/redo, zooming, panning, and snapping

Export options (PNG, SVG, JSON)

Persistent canvas state via local storage or backend sync

Multi-user cursor sync and presence awareness

Optional: Board permissions, version history, or voice/video chat integration

🌐 Platform:

This clone is strictly web-based, accessible through modern browsers. Unlike native apps or platform-bound tools, this version focuses on instant, shareable collaboration with no need for installations or accounts.
🛠️ Suggested Tech Stack:

Frontend: React (w/ TypeScript), Zustand or Redux for state

Canvas rendering: rough.js or perfect-freehand

Real-time backend: WebSockets (Socket.IO), Yjs or Liveblocks

Hosting: Vercel / Netlify (frontend), Firebase / Supabase / custom Node.js backend

🚀 Why Clone Excalidraw?

Excalidraw is a brilliant example of functional minimalism in collaborative tools. Cloning it offers the chance to dive into:

Real-time systems

Canvas-based rendering

State synchronization across clients

Product-focused UX for digital collaboration

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions