Creattdraw - Canvas Infinito com IA Multimodal
O Creattdraw nasceu da necessidade de ter um espaço visual onde fosse possível combinar prototipagem, geração de conteúdo com IA e colaboração em tempo real, tudo em uma única superfície de trabalho.
Por que construí essa ferramenta
Ao longo de vários projetos percebi que o fluxo criativo se fragmentava entre muitas ferramentas: uma para wireframes, outra para geração de imagens, outra para textos. A ideia do Creattdraw era reunir tudo em um canvas infinito onde cada elemento pudesse ser alimentado por modelos de IA diferentes, sem sair do contexto visual.
Fundação com tldraw SDK
A base do projeto é o tldraw SDK, uma biblioteca open source de canvas infinito para React. Escolhi o tldraw pela qualidade da engine de renderização e pela flexibilidade de criar custom shapes. O frontend roda com React 19 e Vite 6, garantindo hot reload rápido durante o desenvolvimento.
Criei mais de 20 tipos de shapes customizados, desde elementos básicos como sticky notes até shapes complexos que encapsulam chamadas a modelos de IA. Cada shape tem seu próprio editor inline e pode ser redimensionado, agrupado e conectado a outros elementos no canvas.
Prototipagem mobile direto no canvas
Uma das funcionalidades que mais uso no dia a dia é a biblioteca de widgets mobile. São mais de 20 componentes pré-construídos, como botões, cards, inputs, navbars e tab bars, que podem ser arrastados para o canvas e compostos visualmente. A ideia é conseguir prototipar uma tela de app em minutos, sem precisar abrir o Figma.
Os widgets têm snap guides automáticos e se adaptam a diferentes resoluções. É possível entrar no modo de apresentação para testar o fluxo como se fosse um app real.
Workflow de IA como grafo direcionado
O diferencial técnico do Creattdraw é tratar operações de IA como nós em um grafo direcionado (DAG). Cada nó representa uma chamada a um modelo específico: Gemini para análise de texto e visão, Veo para geração de vídeo, Kling para animação e Qwen para geração de código.
Os nós se conectam visualmente no canvas. O output de um nó alimenta automaticamente o input do próximo, criando pipelines visuais. Por exemplo, é possível desenhar um rascunho, passar por um nó de descrição que usa Gemini para interpretar o desenho, e encadear com um nó de geração de imagem que transforma a descrição em uma ilustração de alta qualidade.
Colaboração em tempo real
A camada de colaboração usa Yjs com CRDTs para sincronização peer-to-peer do estado do canvas. Escolhi CRDTs em vez de operational transforms porque garantem convergência eventual sem servidor central, o que simplifica a arquitetura e reduz latência.
Um servidor WebSocket leve gerencia presence awareness: cada participante vê o cursor e a área de seleção dos outros em tempo real. O estado persistido é reconciliado automaticamente quando alguém entra na sessão, sem conflitos manuais.
Arquitetura e open source
O projeto é open source e usa uma arquitetura modular. O state management local é feito com Zustand, que se mostrou mais adequado que Redux para a granularidade de updates que um canvas exige. Bun serve como runtime para o dev server e build tooling, trazendo ganhos de performance no bundling.
A arquitetura de plugins permite que terceiros criem novos tipos de shapes e integrações de IA sem modificar o core. Cada plugin é um módulo independente que registra seus shapes, ferramentas e conectores no canvas.