Skip to main content


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 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'),
key: 'YOUR_API_KEY', // you can create it here:
// you can hide back-link on a paid licence
// but it will be good if you can keep it for Polotno project support
showCredit: true,

Add styles to your page:


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 { PolotnoContainer, SidePanelWrap, WorkspaceWrap } from 'polotno';
import { Toolbar } from 'polotno/toolbar/toolbar';
import { ZoomButtons } from 'polotno/toolbar/zoom-buttons';
import { SidePanel } from 'polotno/side-panel';
import { Workspace } from 'polotno/canvas/workspace';
export const App = ({ store }) => {
return (
<PolotnoContainer className="polotno-app-container">
<SidePanel store={store} />
<Toolbar store={store} downloadButtonEnabled />
<Workspace store={store} />
<ZoomButtons store={store} />


Most of Polotno UI is made with Blueprint framework. If your are making your own custom UI interface or additional components I recommend to use blueprint when possible. But you can always use your own custom solutions or other style frameworks.

Polotno is using Blueprint Icons and Meronex Icons. So I recommend to use them for your UI.


Polotno internals are made with mobx library. You can use mobx API to add reactivity to your own application. mobx-state-tree library. In React framework you will need observer() function:

import { observer } from 'mobx-react-lite';
const App = observer(({ store }) => {
return (
<p>Here we will define our own custom tab.</p>
<p>Elements on the current page: {store.activePage?.children.length}</p>