Overview

Polotno is an opinionated JavaScript library and set of React components designed to create canvas editors tailored for various business applications.

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 https://konvajs.org 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 visual design suite.

Quick start

Install polotno package:

npm install polotno

Init demo application (without any frameworks):

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

// import css styles from blueprint framework (used by polotno)
// if you bundler doesn't support such import you can use css from CDN (see bellow)
import '@blueprintjs/core/lib/css/blueprint.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/@blueprintjs/core@5/lib/css/blueprint.css"
  rel="stylesheet"
/>

Core concept​

Store​

Store is the main object to control data and elements of canvas. It provides 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();

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

Workarea 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​

Most of Polotno UI is made with Blueprint framework. If your are making your own custom UI interface or additional components we recommend to rely blueprint whenever it is possible. However, you can always use your own custom solutions or other style frameworks.

Polotno is using Blueprint Icons and Meronex Icons.

Reactivity​

The core of Polotno is built using the mobx library. You can leverage mobx API to add reactivity to your own application. mobx-state-tree library. In React framework you will need observer() function:

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>
  );
});