Build interactive graphics, editors, and diagrams for the web.

Konva is an open-source 2D canvas framework for interactive graphics. Its scene graph gives each shape its own events, drag behavior, transforms, animation, cache, and export controls.

Use Konva for design editors, whiteboards, diagrams, annotations, maps, and other visual tools. Konva is MIT licensed and does not require a license key.

This repository began as a GitHub fork of ericdrowell/KineticJS.

• Visit: The Home Page and follow on Twitter
• Discover: Tutorials, API Documentation
• Try it: Canvas Editor, Free Drawing, Image Crop, Window Frame Designer, and more demos
• Used by: Polotno (design editor SDK) and many others — see the full showcase on the home page
• Help: StackOverflow, Discord Chat
• Support the project: Star Konva on GitHub

import Konva from 'konva';

const container = document.createElement('div');
document.body.appendChild(container);

const stage = new Konva.Stage({ container, width: 600, height: 400 });
const layer = new Konva.Layer();
const box = new Konva.Rect({
  x: 50,
  y: 50,
  width: 120,
  height: 80,
  fill: '#00a8e8',
  draggable: true,
});

layer.add(box);
stage.add(layer);

Building a full design editor? Polotno is a commercial design editor SDK built on Konva by the Konva maintainers. It ships templates, text editing, and export, so you integrate an editor instead of building one: npm install polotno.

Konva works in modern mobile and desktop browsers that support ES2018.

The Chrome inspector simply shows the canvas element. To see the Konva objects and their details, install the konva-dev extension at https://github.com/konvajs/konva-devtool.

Konva supports UMD loading. So you can use all possible variants to load the framework into your project: