Overview

Polotno is an opinionated JavaScript library and set of React components designed to create canvas editors tailored for various business applications. The SDK provides a complete visual editor framework for building white-label design tools, template systems, and programmatic image generation.

There are many powerful JavaScript frameworks and tools that can help you make a canvas editor. But almost all of them are 'low-level' in nature. Take Konva.js for example – it's a great 2d canvas framework; but you'd need to write a lot of code to make a full canvas editor app.

Polotno is a simple tool that solves a focused set of business problems. It is fast and we are committed to keeping the API as light as possible. So you can just drop it on the page and get a full featured design suite.

Quick Start (React)

1. Install polotno package

npm install polotno

This installs the default 4.x line, which targets React 19. Still on React 18? A legacy 3.x line is available for now — see React Version Support.

2. Create Editor component

import React from 'react';
import { PolotnoContainer, SidePanelWrap, WorkspaceWrap } from 'polotno';
import { Toolbar } from 'polotno/toolbar/toolbar';
import { PagesTimeline } from 'polotno/pages-timeline';
import { ZoomButtons } from 'polotno/toolbar/zoom-buttons';
import { SidePanel } from 'polotno/side-panel';
import { Workspace } from 'polotno/canvas/workspace';

import 'polotno/ui.css';

import { createStore } from 'polotno/model/store';

const store = createStore({
  key: 'YOUR_API_KEY', // you can create it here: https://polotno.com/cabinet/
  // you can hide back-link on a paid license
  // but it will be good if you can keep it for Polotno project support
  showCredit: true,
});
const page = store.addPage();

export const Editor = () => {
  return (
    <PolotnoContainer style={{ width: '100vw', height: '100vh' }}>
      <SidePanelWrap>
        <SidePanel store={store} />
      </SidePanelWrap>
      <WorkspaceWrap>
        <Toolbar store={store} downloadButtonEnabled />
        <Workspace store={store} />
        <ZoomButtons store={store} />
        <PagesTimeline store={store} />
      </WorkspaceWrap>
    </PolotnoContainer>
  );
};

3. Use the component in your app

import { Editor } from './editor';

const App = () => {
  return <Editor />
}

Quick Start (No Frameworks)

import { createDemoApp } from 'polotno/polotno-app';

// import Polotno UI styles
// if your bundler doesn't support such an import, you can use the CSS from a CDN (see below)
import 'polotno/ui.css';

const { store } = createDemoApp({
  container: document.getElementById('root'),
  key: 'YOUR_API_KEY', // you can create it here: https://polotno.com/cabinet/
  // you can hide back-link on a paid license
  // but it will be good if you can keep it for Polotno project support
  showCredit: true,
});

Optionally, you can import CSS styles from CDN:

<link href="https://unpkg.com/polotno@4/ui.css" rel="stylesheet" />

Core Concepts

Store

The Store is the main object to control data and elements of the canvas. It provides API for adding/updating/removing canvas objects, undo/redo, selection changes, zooming, and export/import operations.

import { createStore } from 'polotno/model/store';

const store = createStore();
const page = store.addPage();

page.addElement({
  x: 50,
  y: 50,
  type: 'text',
  fill: 'black',
  text: 'hello',
});

Workspace React Canvas Component

React component for drawing canvas app on the page; comes with 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
zooming buttons
etc

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 style={{ width: '100vw', height: '100vh' }}>
      <SidePanelWrap>
        <SidePanel store={store} />
      </SidePanelWrap>
      <WorkspaceWrap>
        <Toolbar store={store} downloadButtonEnabled />
        <Workspace store={store} />
        <ZoomButtons store={store} />
      </WorkspaceWrap>
    </PolotnoContainer>
  );
};

Styles

The default Polotno UI is built on its own design system. Import its styles once with import 'polotno/ui.css'. If you build your own custom UI or additional components, you can reuse Polotno's building blocks from polotno/primitives so they match the editor, or use any style framework you prefer.

Reactivity

The core of Polotno is built using the MobX library. You can leverage MobX API to add reactivity to your own application. The foundation of Polotno is built with the MobX library. To incorporate reactivity into your application, you can utilize the MobX API along with the mobx-state-tree library. Within the React framework, the observer() function is essential.

import { observer } from 'mobx-react-lite';

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

On this page