Real-time canvas tool · side project
Figma Clone
Solo Builder · 2026
ReactTypeScript
About the Project
Figma Clone recreates the core of Figma's canvas (drawing shapes, selecting and moving objects, and real-time collaborative cursors) to explore how a design tool's canvas layer actually works.
The trickiest part was getting canvas interactions (drag, resize, multi-select) to feel as fluid as the real thing while keeping state in sync for collaboration — throttling cursor broadcasts, batching updates, and driving repaints through requestAnimationFrame so the canvas stays at 60fps under concurrent edits.
What I learned
Building a tool on top of a raw canvas surfaced a lot of edge cases around coordinate transforms and event handling that don't come up in typical DOM-based UI work.
The project is live and open source on GitHub.
★ Side project · source on GitHub