Polotno

Design editor SDK. Embed a Canva-like editor in your product, generate designs from templates and data, and export them to PNG, JPEG, PDF, or video in the browser or on a server.

Polotno ships React components and a framework-independent store. Use it from React, or from Vue, Angular, Svelte, and plain JavaScript through the frameworkless integration. It is built on Konva and react-konva.

Documentation · Website · Build with AI

What you get

• Editor — canvas, toolbar, side panel, pages, and zoom controls. Every part can be replaced, hidden, or restyled.
• Templates and automation — designs are plain JSON. Load templates, fill variables, and generate variants from data.
• Text, images, and media — rich text and fonts, image crop and filters, AI background removal, SVG, GIF, and video with audio.
• Video editing — animations, timelines, and export to MP4 and GIF.
• Import — PDF and PSD files become editable designs.
• Export — PNG, JPEG, PDF with bleed and crop marks, SVG, HTML, PPTX, MP4, GIF.
• Server-side rendering — render the same JSON in Node.js with polotno-node, or use Polotno Cloud Render.
• AI tools — write assistant, background removal, and an MCP server plus skills for coding agents.

Install

npm install polotno

polotno@4 is the React 19 line. For React 18, install polotno@react18.

Quick start

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';
import { createStore } from 'polotno/model/store';
import 'polotno/ui.css';

const store = createStore({
  key: 'YOUR_API_KEY', // https://polotno.com/cabinet — the SDK warns in the console without one
});
store.addPage();

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

Export the current design:

await store.waitLoading();
const png = await store.toDataURL();
const pdf = await store.toPDFDataURL();

AI coding agents

Install the official skills so your agent knows the SDK before it writes code. polotno-sdk is for developers integrating the editor; polotno-design is for producing designs.

# Claude Code: both skills plus the docs MCP server
claude plugin marketplace add polotno-project/skills
claude plugin install polotno@polotno

# Cursor, Codex, Copilot, Windsurf, Cline, and others
npx skills add polotno-project/skills

Every docs page is also available as markdown by appending .md to its URL, and https://polotno.com/llms.txt indexes them. Full guide: https://polotno.com/docs/build-with-ai

License

Polotno is commercial software. See LICENSE.md and pricing.