{"library":"polotno","title":"Polotno Design Editor Framework","description":"Polotno is a JavaScript library and React component SDK designed for building versatile, white-label canvas-based design editors. It provides a comprehensive framework for creating applications that handle image, video, and graphic design, as well as template systems and programmatic asset generation. The current stable version is 2.40.0, with frequent minor releases occurring typically on a weekly or bi-weekly basis, as evidenced by its detailed changelog. Key differentiators include its highly customizable React component architecture, which allows developers to replace or extend almost any part of the UI, and its flexible rendering options supporting both client-side and server-side generation via `polotno-node`. Unlike lower-level canvas libraries like Konva.js, Polotno offers a complete, opinionated solution built on MobX for state management, simplifying the development of full-featured design suites for various business applications, including print-on-demand, marketing automation, and digital signage platforms. It supports importing JSON, SVG, and exporting to JSON, PNG, JPEG, PDF, MP4, and more. A commercial API key is required for production use.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install polotno"],"cli":null},"imports":["import { PolotnoContainer } from 'polotno';","import { createStore } from 'polotno/model/store';","import { Toolbar } from 'polotno/toolbar/toolbar';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { PolotnoContainer, SidePanelWrap, WorkspaceWrap } from 'polotno';\nimport { Toolbar } from 'polotno/toolbar/toolbar';\nimport { ZoomButtons } from 'polotno/toolbar/zoom-buttons';\nimport { SidePanel } from 'polotno/side-panel';\nimport { Workspace } from 'polotno/canvas/workspace';\nimport { createStore } from 'polotno/model/store';\nimport '@blueprintjs/core/lib/css/blueprint.css'; // Polotno uses Blueprint.js styles\n\nconst store = createStore({\n  key: process.env.POLOTNO_API_KEY ?? 'YOUR_FREE_API_KEY_HERE',\n  showCredit: true // Set to false with a paid license to hide the back-link\n});\n\n// Add a default page to the store\nstore.addPage();\n\nexport const PolotnoEditor = () => {\n  return (\n    <PolotnoContainer style={{ width: '100vw', height: '100vh' }}>\n      <SidePanelWrap>\n        <SidePanel store={store} />\n      </SidePanelWrap>\n      <WorkspaceWrap>\n        <Toolbar store={store} downloadButtonEnabled />\n        <Workspace store={store} />\n        <ZoomButtons store={store} />\n      </WorkspaceWrap>\n    </PolotnoContainer>\n  );\n};\n\n// Example of how to render it in a root (e.g., in index.tsx)\n/*\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <React.StrictMode>\n    <PolotnoEditor />\n  </React.StrictMode>\n);\n*/","lang":"typescript","description":"This quickstart initializes a basic Polotno design editor with a side panel, toolbar, and workspace, rendered as a React component. It sets up the core store, adds a default page, and includes necessary CSS. An API key is required.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}