tldraw

Quem precisa de um quadro branco dentro do próprio produto tem duas saídas: escrever um canvas do zero ou usar um pronto. O tldraw é o pronto. É um kit de desenvolvimento (SDK) em React que entrega canvas infinito com ferramentas de desenho, formas, setas, texto, imagem e vídeo.

Para que serve

• Embutir um quadro branco colaborativo numa aplicação web, com cursores ao vivo de outras pessoas.
• Montar editores de diagrama ou de fluxo com formas e ferramentas próprias.
• Criar construtores visuais de workflow a partir de um kit inicial do projeto.
• Exportar o que foi desenhado como imagem.

Para desenhar um fluxo antes de automatizá-lo, o post sobre mapeamento de processos ajuda a decidir o que entra no quadro.

Como começar

Num projeto React, instale o pacote:

npm i tldraw

Para partir de um modelo, o README indica:

npx create-tldraw@latest

A colaboração em tempo real vem do @tldraw/sync, que você hospeda. Há um kit inicial multiplayer feito com Cloudflare Durable Objects. O tldraw.com, app da própria empresa, usa a mesma base.

Licença e custo

O código está aberto para leitura, mas a licença própria do tldraw não é uma licença open source. Ela libera o uso em desenvolvimento, teste e homologação. Em produção, você precisa de uma chave de licença de teste ou comercial, e a licença proíbe burlar essa chave. O texto ainda prevê exibição de marca d'água e envio de dados de uso para checagem da licença.

A página de preços oferece teste grátis de 100 dias, licença hobby gratuita para projetos pessoais e licença comercial com preço sob consulta. Startups novas têm desconto, de valor não informado.

Quando vale a pena

Compensa para times que vendem um produto com canvas e preferem pagar licença a manter um editor próprio. Para um projeto open source ou um uso interno que não quer depender de chave, o Excalidraw é a alternativa mais lembrada; confira a licença dele antes. Se você só quer desenhar um diagrama, um app pronto resolve sem código.