Canva

Prerequisites

• Node.jsfree

  Required runtime for running Vite, React, and local development tools.

• GitHubfree

  Source control repository and integration point for deployment pipelines.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding entire multi-file applications, writing complex canvas logic, and debugging state bugs.

• 

  Cursor

  Ideal for fine-tuning UI components, tweaking Tailwind styles, and managing incremental codebase changes.

Build guide

1. 01Project Scaffolding and Dashboard UI

   Initialize the React application with Vite, Tailwind CSS, and Lucide icons. Build the core dashboard interface where users can view saved designs, create new blank projects with custom dimensions, and manage basic folder structures.

   Initialize a new React project using Vite with TypeScript and Tailwind CSS. Install lucide-react for UI icons. Scaffold a dashboard page with a sidebar navigation (Home, Templates, Your Projects, Trash), a top header bar with user profile settings, and a main grid displaying project cards with a 'Create new design' button. Implement responsive grid layouts and modal dialogs for custom canvas dimension entry (width, height in pixels). Connect this to a local state mock or Supabase table for saving project metadata (id, title, dimensions, thumbnail, updated_at). Ensure clean component modularity.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Core Canvas Layout Engine Integration

   Integrate Fabric.js or Konva into a main workspace view to support interactive object creation, movement, scaling, and rotation.

   Integrate Fabric.js into a dedicated workspace component in the React application. Create an infinite or fixed-size artboard canvas centered in the viewport with a zoom and pan controller. Implement a toolbar allowing users to add rectangular shapes, circular shapes, custom text boxes with font family and color pickers, and uploaded raster images. Ensure selection bounding boxes allow intuitive dragging, corner scaling, and freehand rotation. Handle window resize events cleanly to keep the canvas centered and performant.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Layer Management, Grouping, and Z-Index Control

   Build a layer panel sidebar allowing users to reorder elements, group multiple items, lock elements, and adjust opacity or alignment.

   Add a right-side panel to the canvas editor that displays a hierarchical list of all canvas elements (layers). Implement drag-and-drop or up/down buttons to reorder element z-index stacking layers directly on the canvas. Add controls within the panel to lock/unlock elements, toggle visibility, adjust opacity sliders, group selected active items together, and align items relative to the artboard (left, center, right, top, middle, bottom). Synchronize the layer panel state bidirectionally with the Fabric.js canvas object instances.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Template Library and Asset Picker Modal

   Create a modular asset picker drawer for browsing pre-made layout templates, stock icons, and shapes to drop onto the canvas.

   Implement a left-side expandable drawer component with tabs for 'Templates', 'Elements' (shapes, lines, arrows), and 'Uploads'. In the Templates tab, display a grid of pre-configured design JSON structures that, when clicked, automatically clear and load objects onto the canvas artboard. In the Uploads tab, provide a drag-and-drop file upload zone that stores images into Cloudflare R2 or Supabase storage and places them as selectable image objects onto the active canvas. Ensure proper error handling for unsupported file formats.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Design State Persistence and Autosave

   Implement robust serialization and deserialization of the canvas state to save and restore complex user compositions cleanly.

   Implement autosave and manual save functionality for designs. Serialize the entire canvas state using Fabric.js built-in JSON export methods (canvas.toJSON()) including custom object properties like custom IDs. Save this JSON string along with a low-resolution data URL thumbnail preview to the Supabase PostgreSQL database linked to the project ID. Add a debounce hook to automatically trigger background saves 2 seconds after any modification to the canvas layout. Implement loading states when opening saved projects from the dashboard.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Export Pipeline (PNG, JPEG, and PDF)

   Build export handlers allowing users to download their compositions as high-resolution image files or multi-page documents.

   Create a download modal dialog providing export options: PNG, JPEG, and PDF format. For image exports, utilize Fabric.js native data URL generation with configurable multiplier scaling settings (1x, 2x, 3x) for high-DPI outputs. For PDF exports, write a utility using jsPDF or a server-side endpoint that renders the canvas JSON into a clean multi-page document layout with correct aspect ratios. Trigger automatic browser file downloads upon successful completion of the export generation process.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Canva