React Canvas Library — Getting Started with react-konva

react-konva is the most popular React canvas library for drawing complex 2D graphics. It provides declarative and reactive bindings to the Konva Framework, letting you build interactive canvas applications using familiar React components and data flow.

Github Repo

With react-konva you write canvas graphics the same way you write React DOM — with JSX components, props, state, and hooks. Every Konva shape (Rect, Circle, Line, Text, Image, Star, and more) is available as a React component with full event support.

Note: react-konva works in the browser only and is not supported in React Native.

You can find dozens of interactive demos at konvajs.org — everything Konva can do, react-konva can do with React. Think of it as: Konva is to react-konva what the DOM is to React.

Installation

npm install react-konva konva --save

Here's a basic example showing how to create a simple canvas with some shapes:

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

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text text="Try to drag shapes" fontSize={15} />
        <Rect
          x={20}
          y={50}
          width={100}
          height={100}
          fill="red"
          shadowBlur={10}
          draggable
        />
        <Circle
          x={200}
          y={100}
          radius={50}
          fill="green"
          draggable
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox