The documentation is not fully ready and to complete yet! It will be updated very soon. Thanks for your understanding.

Why polotno?

Polotno is a very opinionated JavaScript framework that will help you build canvas editor for several business use cases.

There are many powerful JavaScript frameworks and tools that can help you make a canvas editor. But almost all of them are "low-level". Like https://konvajs.org/ is a 2d canvas framework. It is good, it is powerful. But you may need to write a lot of code to make a full canvas editor app.

So the idea is to make a simple tool to solve only very limited set of business needs. It doesn't have many options and configurations. And the API should be as small as possible.

So you can just add it into the page and you have a full featured solution.

Quick start

Install polotno package:

npm install polotno

Init demo application (without any frameworks):

import { createDemoApp } from 'polotno/polotno-app';
const { store } = createDemoApp({ container: document.getElementById('root') });

Core concept

Polotno consists of three main modules


For saving and working with the objects tree of canvas editor. It provide API for adding/updating/removing canvas objects, undo/redo, selection changes, zooming.

import { createStore } from 'polotno/model/store';
const store = createStore();
const page = store.addPage();
x: 50,
y: 50,
type: 'text',
fill: 'black',
text: 'hello',

Workarea React canvas component

React component for drawing canvas app on the page. It has all basic functionality for common edits: selection, resize, actual drawing of objects, snapping, etc.

import Workspace from 'polotno/canvas/workspace';
const App = () => {
return <Workspace store={store} />;

UI components

Set of React components for general canvas editor app.

  • a toolbar for basic objects manipulations actions (such as align, remove, change objects styles, etc).
  • side panels for adding new objects
import Toolbar from 'polotno/toolbar/toolbar';
import ZoomButtons from 'polotno/toolbar/zoom-buttons';
import SidePanel from 'polotno/side-panel/side-panel';
export const App = ({ store }) => {
return (
display: 'flex',
height: '100%',
width: '100%',
<div style={{ width: '300px', height: '100%', display: 'flex' }}>
<SidePanel store={store} />
display: 'flex',
height: '100%',
margin: 'auto',
flex: 1,
flexDirection: 'column',
position: 'relative',
<Toolbar store={store} />
<Workspace store={store} />
<ZoomButtons store={store} />