Skip to main content

About Konva.js - Open-Source HTML5 Canvas JavaScript Framework

About Konva.js​

Konva.js is an open-source 2D HTML5 Canvas JavaScript framework. It provides an object-oriented API for interactive canvas applications. It supports shapes, animations, events, drag-and-drop, filters, serialization, and high-quality exports. Konva has integrations for React, Vue, Svelte, and Angular. It uses the MIT license and has been maintained since 2015.

Key Facts​

Created2015 (forked from KineticJS, which started in 2012)
CreatorAnton Lavrenov
LicenseMIT (free for commercial and personal use)
LanguageJavaScript and TypeScript (built-in type definitions)
npm packagekonva
GitHubgithub.com/konvajs/konva
Websitekonvajs.org
CommunityDiscord, Stack Overflow (konvajs)

Framework Integrations​

Konva has official bindings for all major JavaScript frameworks:

FrameworkPackageInstall
Reactreact-konvanpm install react-konva konva
Vuevue-konvanpm install vue-konva konva
Sveltesvelte-konvanpm install svelte-konva konva
Angularng2-konvanpm install ng2-konva konva

Who Uses Konva​

Konva is used by teams worldwide, including:

  • Meta — Facebook/Instagram
  • Microsoft
  • Labelbox — AI data labeling platform
  • Zazzle — Custom product design
  • Polotno — Design editor SDK built on top of Konva

Open-source projects that declare Konva in their public package.json:

  • peaks.js — the BBC's audio waveform editor
  • Label Studio — data labeling platform
  • Weave.js — Inditex's collaborative canvas
  • DWV — DICOM medical image viewer

And thousands of other companies and individual developers building design editors, annotation tools, whiteboard apps, interactive maps, data visualizations, games, and more.

Architecture​

Konva uses a hierarchical node structure:

Stage (one per canvas area)
  └── Layer (each layer is a separate <canvas> element)
        └── Group (optional, for organizing shapes)
              └── Shape (Rect, Circle, Text, Image, Line, etc.)
  • Stage: The root container, attached to a DOM element. Contains one or more Layers.
  • Layer: Each Layer is a separate <canvas> element with its own scene and hit-detection canvas. Use multiple Layers to optimize rendering.
  • Group: An optional container for organizing and transforming multiple Shapes together.
  • Shape: A visual element — Rect, Circle, Ellipse, Line, Arrow, Text, Image, Path, Star, Ring, Arc, RegularPolygon, Wedge, Sprite, TextPath, Label, and custom shapes.

Core Capabilities​

  • Shapes: Rect, Circle, Ellipse, Line, Arrow, Arc, Ring, Wedge, Star, RegularPolygon, Path, Text, TextPath, Image, Sprite, Label, and custom shapes
  • Event System: Click, double-click, mouseover, mouseout, touchstart, touchmove, tap, drag events with bubbling and delegation
  • Drag and Drop: Built-in drag-and-drop with boundaries, snapping, and drop events
  • Animations: Frame-based animations via Konva.Animation and property tweens via Konva.Tween with 30+ easing functions
  • Filters: Blur, Brightness, Contrast, Grayscale, HSL, Invert, Noise, Pixelate, Sepia, Threshold, and custom filters
  • Serialization: Save and restore the node tree and its serializable attributes with toJSON() and Konva.Node.create(). Restore images, event handlers, and custom drawing functions separately.
  • Export: High-quality image export via toDataURL() and toBlob() (PNG, JPEG), PDF export via third-party libraries
  • Select and Transform: Built-in Transformer for interactive resize, rotate, and scale
  • Performance: Layer-based rendering, shape caching, and optimization APIs for handling thousands of shapes
  • Cross-Platform: Works on desktop and mobile browsers with full touch event support
  • Node.js: Server-side canvas rendering via the canvas npm package
  • TypeScript: Built-in TypeScript type definitions

"Made with Konva" Badge​

Add this badge to your project README to show it's built with Konva:

[![Made with Konva](https://img.shields.io/badge/Made%20with-Konva-blue)](https://konvajs.org)

Made with Konva