React Konva

React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
Alternatives To React Konva
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Canvas12,9168812a year ago6March 27, 201780bsd-3-clauseJavaScript
High performance <canvas> rendering for React components
Nivo11,8801511916 days ago69May 07, 2023113mitTypeScript
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
React Diagrams7,9597242 days ago35March 05, 2023308mitTypeScript
a super simple, no-nonsense diagramming library written in react that just works
Lucky Canvas6,2761518 days ago91July 29, 202266apache-2.0TypeScript
🎖🎖🎖 基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件,🌈 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等,🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置,支持同步 / 异步抽奖,🎯 概率前 / 后端可控,🚀 自动根据 dpr 调整清晰度适配移动端
a day ago21mitTypeScript
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
React Konva5,2213782372 months ago125June 21, 20233mitTypeScript
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
Pts5,0196720 days ago70December 08, 202245apache-2.0TypeScript
A library for visualization and creative-coding
Visualization Collection3,065
6 days agomitTypeScript
🌈 一个专注于前端视觉效果的集合应用,包含CSS动效、Canvas动画、人工智能应用等上百个案例(持续更新)
React Avatar Editor2,1662071242 months ago71September 30, 202215mitTypeScript
Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface.
8 months ago87JavaScript
think more!learn more!
Alternatives To React Konva
Select To Compare

Alternative Project Comparisons

React Konva

Build Status Greenkeeper badge

ReactKonva Logo

React Konva is a JavaScript library for drawing complex canvas graphics using React.

It provides declarative and reactive bindings to the Konva Framework.


An attempt to make React work with the HTML5 canvas library. The goal is to have similar declarative markup as normal React and to have similar data-flow model.

At the current moment, react-konva is not supported in React Native environment.

Currently you can use all Konva components as React components and all Konva events are supported on them in same way as normal browser events are supported.


npm install react-konva konva --save

Tutorials and Documentation


import React, { useState } from 'react';
import { render } from 'react-dom';
import { Stage, Layer, Rect, Text } from 'react-konva';
import Konva from 'konva';

const ColoredRect = () => {
  const [color, setColor] = useState('green');

  const handleClick = () => {

  return (

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
        <Text text="Try click on rect" />
        <ColoredRect />

render(<App />, document.getElementById('root'));

To get more info about Konva you can read Konva Overview.

Actually you don't need to learn react-konva. Just learn Konva framework, you will understand how to use react-konva

Core API

react-konva supports all shapes, that Konva supports with the same names, and also it supports all the same events like click, touchmove, dragend, etc with "on" prefix like onClick, onTouchMove, onDragEnd.

Getting reference to Konva objects

To get reference of Konva instance of a node you can use ref property.

import React, { useEffect, useRef } from 'react';

const MyShape = () => {
  const circleRef = useRef();

  useEffect(() => {
    // log Konva.Circle instance
  }, []);

  return <Circle ref={circleRef} radius={50} fill="black" />;

Strict mode

By default react-konva works in "non-strict" mode. If you changed a property manually (or by user action like drag&drop) properties of the node will be not matched with properties from render(). react-konva updates ONLY properties changed in render().

In strict mode react-konva will update all properties of the nodes to the values that you provided in render() function, no matter changed they or not.

You should decide what mode is better in your actual use case.

To enable strict mode globally you can do this:

import { useStrictMode } from 'react-konva';


Or you can enable it only for some components:

<Rect width={50} height={50} fill="black" _useStrictMode />

Take a look into this example:

import { Circle } from 'react-konva';
import Konva from 'konva';

const Shape = () => {
  const [color, setColor] = React.useState();

  return (
      onDragEnd={() => {

The circle is draggable and it changes its color on dragend event. In strict mode position of the node will be reset back to {x: 0, y: 0} (as we defined in render). But in non-strict mode the circle will keep its position, because x and y are not changed in render.

Minimal bundle

By default react-konva imports full Konva version. With all the shapes and all filters. To minimize bundle size you can use minimal core version of react-konva:

// load minimal version of 'react-konva`
import { Stage, Layer, Rect } from 'react-konva/lib/ReactKonvaCore';

// minimal version has NO support for core shapes and filters
// if you want import a shape into Konva namespace you can just do this:
import 'konva/lib/shapes/Rect';


Usage with React Context

Note: this section may be not relevant, because this issue was fixed in [email protected]. So context should work by default.

Due to a known issue with React, Contexts are not accessible by children of the react-konva Stage component. If you need to subscribe to a context from within the Stage, you need to "bridge" the context by creating a Provider as a child of the Stage. For more info, see this discussion and this react-redux demo. Here is an example of bridging the context (live demo):

import React, { Component } from 'react';
import Konva from 'konva';
import { render } from 'react-dom';
import { Stage, Layer, Rect } from 'react-konva';

const ThemeContext = React.createContext('red');

const ThemedRect = () => {
  const value = React.useContext(ThemeContext);
  return (
    <Rect x={20} y={50} width={100} height={100} fill={value} shadowBlur={10} />

const Canvas = () => {
  return (
      {(value) => (
        <Stage width={window.innerWidth} height={window.innerHeight}>
          <ThemeContext.Provider value={value}>
              <ThemedRect />

class App extends Component {
  render() {
    return (
      <ThemeContext.Provider value="blue">
        <Canvas />

Usage with Next.js

Note: react-konva is designed to work in the client-side. On the server side, it will render just empty div. So it doesn't make much sense to use react-konva for server-side rendering. In Next.js you may have issue like

Module not found: Can't resolve 'canvas'

Why do we see this error? canvas module is used for canvas rendering in Node.JS environment. konva library will use it there, but it doesn't have this dependency explicitly.

Use dynamic loading

Based on this comment:

With this approach your canvas component will be loaded on the client-side only. So you will not have any issues with server-side rendering. Also next.js will automatically understand that it doesn't need to load canvas module, because it is used for server-side rendering only. I would recommend to use this approach.

You need to define your canvas components somewhere in your components folder. It shouldn't be inside pages or app folder (because they are used for server rendering).

Your components/canvas.js file may look like this:

import { Stage, Layer, Circle } from 'react-konva';

function Canvas(props) {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
        <Circle x={200} y={100} radius={50} fill="green" />

export default Canvas;

Then you can use it in your page. Notice it is imported to have 'use client';.

'use client';
import dynamic from 'next/dynamic';

const Canvas = dynamic(() => import('../components/canvas'), {
  ssr: false,

export default function Page(props) {
  return <Canvas />;


react-konva vs react-canvas

react-canvas is a completely different react plugin. It allows you to draw DOM-like objects (images, texts) on canvas element in very performant way. It is NOT about drawing graphics, but react-konva is exactly for drawing complex graphics on <canvas> element from React.

react-konva vs react-art

react-art allows you to draw graphics on a page. It also supports SVG for output. But it has no support of events of shapes.

react-konva vs vanilla canvas

Vanilla canvas is faster because when you use react-konva you have two layers of abstractions. Konva framework is on top of canvas and React is on top of Konva. Depending on the use case this approach can be slow. The purpose of react-konva is to reduce the complexity of the application and use well-known declarative way for drawing on canvas.


Note: you can find a lot of demos and examples of using Konva there: Really, just go there and take a look what Konva can do for you. You will be able to do the same with react-konva too.

Popular Canvas Projects
Popular Reactjs Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.