Skip to main content

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

About Konva.js​

Konva.js is the most popular open-source 2D HTML5 Canvas JavaScript framework, providing an object-oriented API for building interactive canvas applications. It supports shapes, animations, events, drag-and-drop, filters, serialization, and high-quality exports. Konva has official integrations with React, Vue, Svelte, and Angular, making it the go-to canvas solution across all major JavaScript frameworks. It is MIT-licensed, free for both commercial and personal use, and actively maintained since 2014.

Key Facts​

Created2014 (originally forked from KineticJS)
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

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, Brighten, Contrast, Grayscale, HSL, Invert, Noise, Pixelate, Sepia, Threshold, and custom filters
  • Serialization: Save and restore the entire canvas state with toJSON() and Konva.Node.create()
  • 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