Creattdraw - Infinite Canvas with Multimodal AI

Across multiple projects I noticed the creative workflow was fragmented across many tools: one for wireframes, another for image generation, another for text. The idea behind Creattdraw was to bring everything together on an infinite canvas where each element could be powered by different AI models, without leaving the visual context.

The project is built on top of tldraw SDK, an open source infinite canvas library for React. I chose tldraw for its rendering engine quality and the flexibility to create custom shapes. The frontend runs on React 19 and Vite 6, ensuring fast hot reload during development.

I created over 20 custom shape types, from basic elements like sticky notes to complex shapes that encapsulate AI model calls. Each shape has its own inline editor and can be resized, grouped, and connected to other canvas elements.

One of the features I use most daily is the mobile widget library. It includes over 20 pre-built components like buttons, cards, inputs, navbars, and tab bars that can be dragged onto the canvas and visually composed. The goal is to prototype an app screen in minutes, without opening Figma.

Widgets feature automatic snap guides and adapt to different resolutions. You can enter presentation mode to test the flow as if it were a real app.

The technical differentiator of Creattdraw is treating AI operations as nodes in a directed acyclic graph (DAG). Each node represents a call to a specific model: Gemini for text and vision analysis, Veo for video generation, Kling for animation, and Qwen for code generation.

Nodes connect visually on the canvas. The output of one node automatically feeds into the next, creating visual pipelines. For example, you can draw a sketch, pass it through a description node that uses Gemini to interpret the drawing, and chain it with an image generation node that transforms the description into a high-quality illustration.

The collaboration layer uses Yjs with CRDTs for peer-to-peer canvas state synchronization. I chose CRDTs over operational transforms because they guarantee eventual convergence without a central server, simplifying the architecture and reducing latency.

A lightweight WebSocket server manages presence awareness: each participant sees the cursor and selection area of others in real time. Persisted state is automatically reconciled when someone joins the session, without manual conflicts.

The project is open source and uses a modular architecture. Local state management is handled by Zustand, which proved more suitable than Redux for the granularity of updates a canvas requires. Bun serves as the runtime for dev server and build tooling, bringing performance gains in bundling.

The plugin architecture allows third parties to create new shape types and AI integrations without modifying the core. Each plugin is an independent module that registers its shapes, tools, and connectors on the canvas.