Repolode
Submit
konvajs

konvajs/konva

An HTML5 Canvas JavaScript framework for building interactive 2D graphics, design editors, whiteboards and diagrams.

View on GitHubWebsite
Stars
14,914
Forks
1,068
Open issues
2
Last commit
19 hours ago

What is it?

Konva is a 2D canvas framework for JavaScript and TypeScript. It uses a scene graph model, so each shape is an object with its own events, drag behavior, transforms, animations, caching and export options, rather than pixels that the developer must redraw manually.

It is aimed at visual tools such as design editors, whiteboards, diagrams, image annotation and maps. Official wrappers exist for React, Vue, Svelte and Angular, and the library can be loaded from a CDN script tag, installed from npm, or trimmed to a minimal core bundle with only the shapes you need.

Konva also runs in Node.js for server-side rendering when paired with the canvas or skia-canvas backend, though DOM events require a browser.

Key features

  • 01Scene graph where each shape has its own events and drag behavior.
  • 02Transforms, animations and layer-based rendering on HTML5 Canvas.
  • 03Export of stages and shapes, plus caching for complex nodes.
  • 04Official wrappers for React, Vue, Svelte and Angular.
  • 05Modular build that lets you include only the shapes and filters you need.
  • 06Server-side rendering in Node.js with node-canvas or skia-canvas.

Use cases

  • Building an in-browser design or image editor with selectable, transformable objects.
  • Creating a collaborative whiteboard or annotation tool over images.
  • Drawing interactive diagrams, flowcharts or maps with draggable nodes.
  • Generating images from canvas drawings on a Node.js server.

Quick start

  1. 1

    Install Konva from npm

    npm install konva
  2. 2

    Import Konva and create a stage, layer and shape in your project

  3. 3

    For server-side rendering in Node.js, also install a canvas backend

    npm install konva canvas

Things to know

  • Node.js rendering needs a separate canvas or skia-canvas package installed manually.
  • DOM events only work in a browser, and canvas feature support depends on the chosen backend.

In collections

Data science courses & tools

Topics

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

FAQ

What is konva?
An HTML5 Canvas JavaScript framework for building interactive 2D graphics, design editors, whiteboards and diagrams. Konva is a 2D canvas framework for JavaScript and TypeScript. It uses a scene graph model, so each shape is an object with its own events, drag behavior, transforms, animations, caching and export options, rather than pixels that the developer must redraw manually.
Is konva free to use? What license does it have?
konva is open source under the Other license. Check the license terms before using it in commercial products.
Is konva still maintained?
Actively maintained. The last commit to konva was on Nov 5, 2026.
What can I use konva for?
Building an in-browser design or image editor with selectable, transformable objects. Creating a collaborative whiteboard or annotation tool over images. Drawing interactive diagrams, flowcharts or maps with draggable nodes. Generating images from canvas drawings on a Node.js server.
How do I install konva?
Install Konva from npm: npm install konva Import Konva and create a stage, layer and shape in your project For server-side rendering in Node.js, also install a canvas backend: npm install konva canvas
Where can I get konva?
The source code and installation instructions are on GitHub: https://github.com/konvajs/konva

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects