Repolode
Enviar
konvajs

konvajs/konva

Framework de JavaScript para Canvas de HTML5 con el que crear gráficos 2D interactivos, editores de diseño, pizarras y diagramas.

Ver en GitHubSitio web
Estrellas
14,921
Forks
1,069
Issues abiertos
2
Último commit
anteayer

¿Qué es?

Konva es un framework de canvas 2D para JavaScript y TypeScript. Utiliza un modelo de grafo de escena, donde cada forma es un objeto con sus propios eventos, comportamiento de arrastre, transformaciones, animaciones, opciones de caché y exportación, en lugar de píxeles que el desarrollador deba volver a dibujar manualmente.

Está pensado para herramientas visuales como editores de diseño, pizarras, diagramas, anotación de imágenes y mapas. Cuenta con wrappers oficiales para React, Vue, Svelte y Angular. La biblioteca se puede cargar desde una etiqueta de script de CDN, instalar desde npm o reducir a un bundle mínimo que incluya solo las formas necesarias.

Konva también funciona en Node.js para renderizado del lado del servidor si se combina con el backend canvas o skia-canvas, aunque los eventos del DOM requieren un navegador.

Funciones clave

  • 01Grafo de escena en el que cada forma tiene sus propios eventos y comportamiento de arrastre.
  • 02Transformaciones, animaciones y renderizado por capas en Canvas de HTML5.
  • 03Exportación de etapas y formas, además de caché para nodos complejos.
  • 04Wrappers oficiales para React, Vue, Svelte y Angular.
  • 05Build modular que permite incluir solo las formas y los filtros necesarios.
  • 06Renderizado del lado del servidor en Node.js con node-canvas o skia-canvas.

Casos de uso

  • Crear un editor de diseño o imágenes en el navegador con objetos que se puedan seleccionar y transformar.
  • Crear una pizarra colaborativa o una herramienta para anotar imágenes.
  • Dibujar diagramas, diagramas de flujo o mapas interactivos con nodos arrastrables.
  • Generar imágenes a partir de dibujos en canvas en un servidor Node.js.

Inicio rápido

  1. 1

    Instala Konva desde npm

    npm install konva
  2. 2

    Importa Konva y crea un stage, un layer y una shape en tu proyecto

  3. 3

    Para el renderizado del lado del servidor en Node.js, instala también un backend de canvas

    npm install konva canvas

Antes de usarlo

  • El renderizado en Node.js requiere instalar manualmente un paquete canvas o skia-canvas por separado.
  • Los eventos DOM solo funcionan en un navegador, y la compatibilidad con las funciones de canvas depende del backend elegido.

En colecciones

Cursos y herramientas de ciencia de datos

Temas

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

Preguntas frecuentes

¿Qué es konva?
Framework de JavaScript para Canvas de HTML5 con el que crear gráficos 2D interactivos, editores de diseño, pizarras y diagramas. Konva es un framework de canvas 2D para JavaScript y TypeScript. Utiliza un modelo de grafo de escena, donde cada forma es un objeto con sus propios eventos, comportamiento de arrastre, transformaciones, animaciones, opciones de caché y exportación, en lugar de píxeles que el desarrollador deba volver a dibujar manualmente.
¿konva es gratuito? ¿Qué licencia tiene?
konva es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿konva sigue mantenido?
Mantenimiento activo. El último commit de konva fue el 5 nov 2026.
¿Para qué puedo usar konva?
Crear un editor de diseño o imágenes en el navegador con objetos que se puedan seleccionar y transformar. Crear una pizarra colaborativa o una herramienta para anotar imágenes. Dibujar diagramas, diagramas de flujo o mapas interactivos con nodos arrastrables. Generar imágenes a partir de dibujos en canvas en un servidor Node.js.
¿Cómo se instala konva?
Instala Konva desde npm: npm install konva Importa Konva y crea un stage, un layer y una shape en tu proyecto Para el renderizado del lado del servidor en Node.js, instala también un backend de canvas: npm install konva canvas
¿Dónde consigo konva?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/konvajs/konva

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados