Design Tool V0 Template: Build Your Own Figma Alternative in Next.js

Add a useEffect in CanvasStage that listens for keydown events globally. Map keyboard keys to tools: V selects the Select tool, R switches to Rectangle, C switches to Circle, T switches to Text mode, and Delete or Backspace removes the currently selected object from the canvas. Update the active tool indicator in ToolbarPanel to match the keyboard-selected tool. Show keyboard hint tooltips (using shadcn Tooltip) on each ToolbarPanel button button so users discover shortcuts without documentation.

Add a hidden file input element to the ToolbarPanel, triggered by clicking the Image tool button. On file select, read the file with FileReader.readAsDataURL() and pass the result to fabric.Image.fromURL() to create a Fabric image object on the CanvasStage. Position the image at the canvas center (canvas.getCenter()), scale it to fit within 60% of the canvas width while preserving aspect ratio, and select it immediately so the user can drag it to position. Also add a URL import modal (shadcn Dialog) for importing images by URL without file upload.

Implement a Zustand slice with an undoStack array and redoStack array. After every canvas object modification (using Fabric's 'object:modified', 'object:added', 'object:removed' events), serialize the current canvas state with canvas.toJSON() and push it to undoStack, capping at 50 entries. When the Undo button in TopBar is clicked, pop from undoStack, push the current state to redoStack, and restore the previous state with canvas.loadFromJSON(). Wire Cmd+Z and Ctrl+Z to Undo and Cmd+Shift+Z / Ctrl+Y to Redo via a useEffect keydown listener in TopBar.

Install yjs and y-websocket. Create a Y.Doc instance and a Y.Map for canvas objects. On every Fabric 'object:modified' or 'object:added' event, serialize the changed object with object.toJSON() and set it in the Y.Map keyed by the object's ID. Subscribe to Y.Map observe events and apply incoming remote changes to the CanvasStage using canvas.loadFromJSON() on a debounce. Connect to a WebSocket provider (deploy y-websocket on Railway or use a hosted Liveblocks room as the WebSocket layer). Show remote cursors as colored dot overlays positioned at other users' pointer coordinates, labelled with their name from a name input modal shown on first load.

Create a `designs` table in Supabase with columns: id (uuid primary key), user_id (text), title (text), canvas_json (jsonb), thumbnail_url (text), created_at (timestamptz). Set an RLS policy requiring auth.uid() = user_id for all operations. Add a Supabase client using NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. On Save in TopBar, call canvas.toJSON() and canvas.toDataURL() — upload the thumbnail PNG Blob to a Supabase Storage bucket called 'design-thumbnails', get its public URL, then insert the full record. Add a /gallery page (app/gallery/page.tsx) that fetches the user's designs and renders thumbnail cards. Add Clerk auth with NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY to associate designs with users.

Create /api/checkout/route.ts that calls stripe.checkout.sessions.create() with a recurring subscription price using STRIPE_SECRET_KEY (server-only). In the ExportModal, gate the HD PNG export path (4x resolution rendering) behind a subscription check: fetch /api/subscription-status which validates the user's Stripe subscription using their Clerk userId. Handle Stripe webhooks at /api/webhooks/stripe/route.ts — use const rawBody = await request.text() before parsing, then stripe.webhooks.constructEvent(rawBody, sig, STRIPE_WEBHOOK_SECRET) to verify the signature. On customer.subscription.created and customer.subscription.deleted, update a subscriptions table in Supabase. Standard 1x exports remain free.