Repolode
Enviar
quickdrawjs

quickdrawjs/quickdraw

SDK de lousa com canvas infinito, licença MIT, para apps em React, React Native e JavaScript puro; uma alternativa gratuita ao tldraw.

Alternativa open source a:tldraw

Ver no GitHubSite
Estrelas
555
Forks
45
Issues abertas
7
Último commit
ontem

O que é?

Quickdraw é um SDK de lousa que permite incorporar uma superfície de desenho a um app web ou mobile. Ele oferece três pacotes: um mecanismo central independente de framework, com barra de ferramentas flutuante; um componente React com hooks; e um componente React Native que envolve o mecanismo em uma WebView com uma bridge tipada. O núcleo não tem dependências em tempo de execução e funciona como ESM puro nos navegadores modernos, sem etapa de build.

A lousa oferece traços à mão livre sensíveis à pressão, marca-texto, formas com estilo de desenho à mão, setas, texto, notas adesivas, imagens e um ponteiro laser. Também inclui seleção com laço retangular e movimentação com as teclas, navegação e zoom no canvas infinito, rejeição da palma da mão ao usar stylus, desfazer/refazer agrupados por gesto, temas claro e escuro, vários fundos quadriculados e exportação para PNG.

O estado do documento é um mapa plano de registros imutáveis, e cada alteração emite um diff serializável em JSON. Esses diffs alimentam a persistência de snapshots, o histórico de desfazer e a sincronização em tempo real pelo transporte que você escolher. Não há um servidor multiplayer próprio incluído.

Recursos principais

  • 01Traços à mão livre sensíveis à pressão e ferramenta de marca-texto
  • 02Formas, setas, texto, notas adesivas e inserção de imagens
  • 03Canvas infinito com gestos de navegação, zoom e pinça
  • 04Desfazer/refazer agrupados por gesto e exportação para PNG
  • 05Diffs compatíveis com JSON para persistência e sincronização em tempo real

Casos de uso

  • Adicionar uma lousa ou recurso de desenho a um app web em React
  • Incorporar um canvas de desenho a um app Expo ou React Native por meio de WebView
  • Criar uma ferramenta colaborativa de diagramas que sincronize diffs do documento pelo seu próprio servidor
  • Usar uma lousa pronta em uma página HTML simples, sem etapa de build

Início rápido

  1. 1

    Instale o pacote do React

    npm install @quickdrawjs/react
  2. 2

    Importe a folha de estilos e renderize o componente Quickdraw no seu app

Antes de usar

  • Segundo o README, o projeto ainda está em uma fase inicial e não conta com servidor multiplayer próprio, camadas, quadros nem texto formatado.
  • A marca-d'água “Made with Quickdraw” é exibida por padrão. Para desativá-la, defina watermark={false}.

Tópicos

#whiteboard#canvas#drawing#react#react-native#javascript#sdk#collaboration#collaborative-whiteboard#diagram

Perguntas frequentes

O que é quickdraw?
SDK de lousa com canvas infinito, licença MIT, para apps em React, React Native e JavaScript puro; uma alternativa gratuita ao tldraw. Quickdraw é um SDK de lousa que permite incorporar uma superfície de desenho a um app web ou mobile. Ele oferece três pacotes: um mecanismo central independente de framework, com barra de ferramentas flutuante; um componente React com hooks; e um componente React Native que envolve o mecanismo em uma WebView com uma bridge tipada. O núcleo não tem dependências em tempo de execução e funciona como ESM puro nos navegadores modernos, sem etapa de build.
quickdraw é gratuito? Qual é a licença?
quickdraw é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
quickdraw ainda é mantido?
Manutenção ativa. O último commit de quickdraw foi em 18 de out. de 2026.
Para que posso usar quickdraw?
Adicionar uma lousa ou recurso de desenho a um app web em React Incorporar um canvas de desenho a um app Expo ou React Native por meio de WebView Criar uma ferramenta colaborativa de diagramas que sincronize diffs do documento pelo seu próprio servidor Usar uma lousa pronta em uma página HTML simples, sem etapa de build
Como instalar quickdraw?
Instale o pacote do React: npm install @quickdrawjs/react Importe a folha de estilos e renderize o componente Quickdraw no seu app
Onde consigo quickdraw?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/quickdrawjs/quickdraw

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados