Figma

Prerequisites

• Node.jsfree

  Required runtime for local frontend development and build tooling

• GitHubfree

  Version control and repository hosting

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding agent to scaffold the complex canvas architecture

• Cursor

  IDE for fine-tuning intricate canvas interaction logic and React state management

Build guide

1. 01Project Scaffolding and Infinite Canvas Setup

   Initialize the Next.js application with Tailwind CSS, configure TypeScript, install Konva.js and react-konva, and build an infinite canvas component supporting smooth mouse-wheel zoom and drag-to-pan gestures.

   Create a new Next.js project using TypeScript and Tailwind CSS. Install konva and react-konva. Build a main layout featuring an infinite canvas component that handles smooth panning via middle-mouse drag or spacebar-pan, and zooming centered on the mouse cursor using the mouse wheel. Include a top toolbar for selecting tools (select, rectangle, ellipse, text). Ensure the canvas adapts to window resize events cleanly without rendering artifacts or performance drops.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Vector Element Creation and Properties Inspector

   Implement tools to draw shapes onto the canvas, manage element selection, and build a sidebar inspector to modify x, y, width, height, fill color, and stroke properties in real time.

   Add state management using Zustand to store the collection of canvas shapes (rectangles, circles, text blocks) with unique IDs, coordinates, dimensions, fills, and strokes. Build a right-hand properties inspector sidebar that displays and edits the attributes of currently selected shapes on the canvas. Implement shape selection handles and dragging mechanics via react-konva transformers so users can reposition and resize shapes interactively.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Layer Tree Sidebar and Z-Index Ordering

   Build a left-hand layers panel showing the hierarchy of elements on the canvas, allowing users to reorder layers, rename items, lock them, or toggle their visibility.

   Create a left-hand layers panel component representing the DOM/element tree of all objects currently on the canvas. Support drag-and-drop or up/down buttons to reorder layer stacking (z-index). Add inline renaming, visibility toggle eyes, and lock icons that disable selection and movement on locked canvas elements. Sync this sidebar bidirectionally with the Zustand canvas state.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Real-Time Multiplayer Presence and Sync

   Integrate Supabase Realtime channels to broadcast cursor positions and simple element updates to simulate collaborative co-editing.

   Integrate Supabase client and set up Realtime channels to broadcast user presence (cursor coordinates and user names) across active browser sessions. Render remote cursors smoothly on the canvas with user identifier labels. Implement basic broadcast events for shape creation and updates so changes sync across multiple open browser tabs in near real-time without infinite loop triggers.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05File Persistence and Export

   Add database persistence to save canvas projects to Supabase PostgreSQL and implement an export function to download selections as PNG or SVG files.

   Create a dashboard view where users can create, load, and save design projects stored in Supabase PostgreSQL tables. Add an export modal that serializes the current Konva stage or selected node into a high-resolution PNG or clean SVG data URL and triggers an automated browser download. Handle loading states, error boundaries, and basic user authentication via Supabase Auth.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Figma