Repolode
Enviar
konvajs

konvajs/konva

Framework JavaScript para Canvas HTML5, voltado à criação de gráficos 2D interativos, editores de design, quadros brancos e diagramas.

Ver no GitHubSite
Estrelas
14,914
Forks
1,068
Issues abertas
2
Último commit
há 23 horas

O que é?

Konva é um framework de canvas 2D para JavaScript e TypeScript. Ele usa um modelo de grafo de cena, em que cada forma é um objeto com seus próprios eventos, comportamento de arrastar, transformações, animações, cache e opções de exportação — em vez de pixels que o desenvolvedor precisa redesenhar manualmente.

O framework é voltado a ferramentas visuais, como editores de design, quadros brancos, diagramas, anotação de imagens e mapas. Há wrappers oficiais para React, Vue, Svelte e Angular, e a biblioteca pode ser carregada por uma tag de script de CDN, instalada pelo npm ou reduzida a um bundle mínimo, incluindo apenas as formas necessárias.

Konva também roda no Node.js para renderização no servidor quando usado com o backend canvas ou skia-canvas, embora os eventos do DOM exijam um navegador.

Recursos principais

  • 01Grafo de cena em que cada forma tem seus próprios eventos e comportamento de arrastar.
  • 02Transformações, animações e renderização baseada em camadas no Canvas HTML5.
  • 03Exportação de stages e formas, além de cache para nós complexos.
  • 04Wrappers oficiais para React, Vue, Svelte e Angular.
  • 05Build modular que permite incluir apenas as formas e os filtros necessários.
  • 06Renderização no servidor com Node.js usando node-canvas ou skia-canvas.

Casos de uso

  • Criar um editor de design ou de imagens no navegador com objetos selecionáveis e transformáveis.
  • Criar um quadro branco colaborativo ou uma ferramenta de anotação sobre imagens.
  • Desenhar diagramas, fluxogramas ou mapas interativos com nós que podem ser arrastados.
  • Gerar imagens a partir de desenhos em canvas em um servidor Node.js.

Início rápido

  1. 1

    Instale o Konva pelo npm

    npm install konva
  2. 2

    Importe o Konva e crie um stage, um layer e uma shape no seu projeto

  3. 3

    Para renderização no lado do servidor com Node.js, instale também um backend de canvas

    npm install konva canvas

Antes de usar

  • A renderização no Node.js exige a instalação manual e separada de um pacote canvas ou skia-canvas.
  • Os eventos DOM só funcionam em um navegador, e o suporte aos recursos de canvas depende do backend escolhido.

Em coleções

Cursos e ferramentas de ciência de dados

Tópicos

#canvas#graphics#javascript#typescript#whiteboard#drag-and-drop#diagram#data-visualization#animation#canvas-editor

Perguntas frequentes

O que é konva?
Framework JavaScript para Canvas HTML5, voltado à criação de gráficos 2D interativos, editores de design, quadros brancos e diagramas. Konva é um framework de canvas 2D para JavaScript e TypeScript. Ele usa um modelo de grafo de cena, em que cada forma é um objeto com seus próprios eventos, comportamento de arrastar, transformações, animações, cache e opções de exportação — em vez de pixels que o desenvolvedor precisa redesenhar manualmente.
konva é gratuito? Qual é a licença?
konva é open source sob a licença Other. Confira os termos da licença antes de usá-lo em produtos comerciais.
konva ainda é mantido?
Manutenção ativa. O último commit de konva foi em 5 de nov. de 2026.
Para que posso usar konva?
Criar um editor de design ou de imagens no navegador com objetos selecionáveis e transformáveis. Criar um quadro branco colaborativo ou uma ferramenta de anotação sobre imagens. Desenhar diagramas, fluxogramas ou mapas interativos com nós que podem ser arrastados. Gerar imagens a partir de desenhos em canvas em um servidor Node.js.
Como instalar konva?
Instale o Konva pelo npm: npm install konva Importe o Konva e crie um stage, um layer e uma shape no seu projeto Para renderização no lado do servidor com Node.js, instale também um backend de canvas: npm install konva canvas
Onde consigo konva?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/konvajs/konva

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

Projetos relacionados