Polotno

https://polotno.com/docs
Admin
Polotno is an opinionated JavaScript library and set of React components for building canvas editors...
Tokens:137,555
Snippets:1,378
Trust Score:8.4
Update:3 months ago
Show doc for...
Tokens:
Raw
### Full UI Component Setup

Source: https://polotno.com/docs/overview

Example of setting up the Polotno editor with various UI components like Toolbar, SidePanel, and ZoomButtons. Ensure the store is passed to each component.

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

--------------------------------

### Install @polotno/psd-import

Source: https://polotno.com/docs/psd-import

Install the package using npm.

```bash
npm install @polotno/psd-import
```

--------------------------------

### Install Video Export Package

Source: https://polotno.com/docs/animations-and-videos

Install the necessary package for client-side video generation in the browser.

```bash
npm install @polotno/video-export
```

--------------------------------

### Install PDF Import Package

Source: https://polotno.com/docs/pdf-import

Install the @polotno/pdf-import package using npm.

```bash
npm install @polotno/pdf-import
```

--------------------------------

### Install Dependencies

Source: https://polotno.com/docs/non-react-integration

Installs Parcel, Polotno, and React for the standalone editor project.

```bash
npm install parcel polotno react react-dom
```

--------------------------------

### Install Brand Kit Side Panel

Source: https://polotno.com/docs/components/brand-kit

Use this command to install the Brand Kit side panel. The installation path can be customized.

```bash
npx shadcn@latest add http://registry.polotno.com:/r/brand-kit.json --path ./src/components/side-panel/brand-kit/
```

--------------------------------

### Install QR Code Package

Source: https://polotno.com/docs/components/qr-code

Install the 'qrcode' package and '@meronex/icons' for QR code generation and icons.

```bash
npx install qr-code @meronex/icons
```

--------------------------------

### Install Polotno and React Dependencies

Source: https://polotno.com/docs/vue-js

Install the necessary npm packages for Polotno, React, and ReactDOM. Optionally, install mobx-vue-lite for reactivity in Vue templates.

```bash
npm install react react-dom polotno
```

```bash
npm install mobx-vue-lite
```

--------------------------------

### Install @polotno/schema

Source: https://polotno.com/docs/schema

Install the @polotno/schema package to use its features for handling Polotno design formats.

```bash
npm install @polotno/schema
```

--------------------------------

### Install Polotno and React Dependencies

Source: https://polotno.com/docs/angular

Install the necessary npm packages for Polotno and React. Optionally, install mobx-angular for MobX integration.

```bash
npm install react react-dom polotno
```

```bash
npm install mobx-angular
```

--------------------------------

### Full Drawing Mode Example

Source: https://polotno.com/docs/drawing

This example demonstrates initializing the Polotno store, configuring drawing options, enabling drawing mode, and later returning to selection mode.

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

const store = createStore({ key: 'YOUR_API_KEY' });

// configure drawing options
store.setToolOptions({
  strokeWidth: 10,
  stroke: '#0066ff',
  opacity: 1
});

// enable drawing
store.setTool('draw');

// later, return to selection mode
store.setTool('selection');
```

--------------------------------

### Install SVG Import Package

Source: https://polotno.com/docs/import-and-export

Install the @polotno/svg-import package using npm.

```bash
npm install @polotno/svg-import
```

--------------------------------

### Quick Start: Create Demo App

Source: https://polotno.com/docs/overview

Initializes a demo Polotno application. Ensure you have a valid API key and consider keeping the credit link for project support.

```javascript
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,
});
```

--------------------------------

### Install PPTX Export Package

Source: https://polotno.com/docs/pptx-export

Install the necessary package for PPTX export using npm.

```bash
npm install @polotno/pptx-export
```

--------------------------------

### Practical Limits and High-Quality Export

Source: https://polotno.com/docs/hd-exports

Start with `pixelRatio: 2` for good quality and increase to `4` or `8` for very large formats. Test on target devices as very high values may cause browser issues. This example exports at 8x quality to achieve a 9,600px output for a large banner.

```javascript
// 4ft × 4ft banner at 200 DPI = 9,600 × 9,600 pixels
// Editor canvas: 1,200 × 1,200 px (manageable size)
store.setSize(1200, 1200);

// Export at 8× quality to reach 9,600px output
await store.saveAsImage({ pixelRatio: 8 });
```

--------------------------------

### Complete Client-Side Example for High-DPI Export

Source: https://polotno.com/docs/hd-exports

This example demonstrates setting up a 4ft x 4ft banner at 200 DPI. It calculates a manageable editor size using 72 DPI and then determines the appropriate `pixelRatio` for the export to achieve the target DPI. The `pixelRatio` is calculated as `targetDPI / 72`.

```javascript
// Setup: 4ft × 4ft banner at 200 DPI
const widthInches = 48; // 4 feet
const heightInches = 48;
const targetDPI = 200;

// Calculate manageable editor size (use 72 DPI for editor)
const editorWidth = widthInches * 72;  // 3,456 px
const editorHeight = heightInches * 72; // 3,456 px

store.setSize(editorWidth, editorHeight);

// Calculate pixelRatio for 200 DPI export
// PDF uses 72 DPI internally, so: pixelRatio = targetDPI / 72
const pixelRatio = targetDPI / 72; // ≈ 2.78

// Export high-quality image
await store.saveAsImage({
  pixelRatio: pixelRatio,
});
```

--------------------------------

### Add and Install Claude Code Plugin

Source: https://polotno.com/docs/ai-dev-tools

Use these commands to add the polotno-project/polotno-ai-rules marketplace and install the polotno-sdk plugin for Claude Code.

```bash
# 1. Add the marketplace
claude plugin marketplace add polotno-project/polotno-ai-rules

# 2. Install the plugin
claude plugin install polotno-sdk@polotno-sdk
```

```bash
/plugin marketplace add polotno-project/polotno-ai-rules
/plugin install polotno-sdk@polotno-sdk
```

--------------------------------

### Install QR Code Component via CLI

Source: https://polotno.com/docs/components/qr-code

Use this command to add the QR Code component to your project. It installs the necessary files to the specified path.

```bash
npx shadcn@latest add http://registry.polotno.com:/r/qr-code.json --path ./src/components/side-panel/qr-code.tsx
```

--------------------------------

### Quick Setup for Context7

Source: https://polotno.com/docs/ai-dev-tools

Run this command to quickly set up Context7 for your AI editor. Use flags to target specific editors like Cursor, Claude, or OpenCode.

```bash
npx ctx7 setup
```

--------------------------------

### Install Blueprint v6 for Blueprint UI

Source: https://polotno.com/docs/polotno-4-migration

When keeping the Blueprint UI, install Blueprint v6 and its required peer dependencies.

```bash
npm i @blueprintjs/core@6 @blueprintjs/icons@6 @blueprintjs/select@6
```

--------------------------------

### PPTX Export Function Example

Source: https://polotno.com/docs/pptx-export

An example demonstrating how to trigger a PPTX export with a specified output filename. This function should be called when the user initiates an export action.

```javascript
import { jsonToPPTX } from '@polotno/pptx-export';

const handleExport = () => {
  jsonToPPTX({
    json: store.toJSON(),
    output: 'my-presentation.pptx',
  });
};
```

--------------------------------

### store.play()

Source: https://polotno.com/docs/store

Preview animations inside the workspace. Can be configured to start from a specific time, pause on a specific time, animate only selected elements, or loop.

```APIDOC
## store.play()

### Description
Preview animations inside the workspace.

### Method
```javascript
store.play(options?: {
  startTime?: number;
  endTime?: number;
  animatedElementsIds?: string[];
  repeat?: boolean;
});
```

### Parameters
#### Optional Parameters
- **startTime** (number) - The time in milliseconds from which to start playback.
- **endTime** (number) - The time in milliseconds at which to pause playback.
- **animatedElementsIds** (string[]) - An array of element IDs to animate.
- **repeat** (boolean) - Whether to loop the animation.
```

--------------------------------

### Add Polotno AI Rules for Cursor, Copilot, etc.

Source: https://polotno.com/docs/ai-dev-tools

Install Polotno AI rules for editors like Cursor, Copilot, Windsurf, and Cline using npx.

```bash
npx skills add polotno-project/polotno-ai-rules
```

--------------------------------

### Install Polotno for React 19

Source: https://polotno.com/docs/react-19-support

Install the default Polotno package for React 19 compatibility. This is the recommended choice for new and existing projects.

```bash
npm i polotno
```

--------------------------------

### Start Parcel Development Server

Source: https://polotno.com/docs/non-react-integration

Starts the Parcel development server for the Polotno editor. Access the editor at http://localhost:1234 (or the port shown in the terminal).

```bash
parcel ./editor/index.html
```

--------------------------------

### Install Polotno for React 18 (Legacy)

Source: https://polotno.com/docs/react-19-support

Install the legacy 3.x line of Polotno for React 18 support. This package is published under the 'next-react18' tag.

```bash
npm i polotno@next-react18
```

--------------------------------

### store.addAudio({ src })

Source: https://polotno.com/docs/store

Add audio into the design. Supports specifying start and end times for the audio, volume, and a delay before playback.

```APIDOC
## store.addAudio({ src })

### Description
Add audio into the design.

### Method
```javascript
store.addAudio({
  src: string,
  startTime?: number,
  endTime?: number,
  volume?: number,
  delay?: number;
});
```

### Parameters
#### Request Body
- **src** (string) - The URL or path to the audio file. Required.
- **startTime** (number) - Optional. Defines the relative point in time of the original sound to start the play. Defaults to 0.
- **endTime** (number) - Optional. Defines the relative point in time of the original sound to stop the play.
- **volume** (number) - Optional. The volume of the audio, from 0 to 1. Defaults to 1.
- **delay** (number) - Optional. The delay in milliseconds between the start of the video (final scene) and the audio play time. Defaults to 0.
```

--------------------------------

### Integrate PageRotate Component into Toolbar

Source: https://polotno.com/docs/one-click-page-rotation

This example shows how to integrate the `PageRotate` component into your Polotno `Toolbar`. Ensure the `store` object is available in the scope where you render the toolbar.

```javascript
<Toolbar store={store} components={{ PageRotate }} />

```

--------------------------------

### Add Audio with Background Music Settings

Source: https://polotno.com/docs/audio

Use this to add background music to your design. Adjust the 'delay' to control when the music starts and 'volume' to set its loudness.

```javascript
store.addAudio({
  src: '/music.mp3',
  delay: 1000,      // Start 1 second into video
  volume: 0.3,      // Lower volume to not overpower content
});
```

--------------------------------

### Export Design as Vector PDF using Node Package

Source: https://polotno.com/docs/hd-exports

This snippet demonstrates how to export a design to a PDF file using the Polotno Node package (`@polotno/pdf-export`). Ensure the package is installed before use.

```javascript
import { jsonToPDF } from '@polotno/pdf-export';

const json = store.toJSON();
await jsonToPDF(json, './output.pdf');
```

--------------------------------

### Browser PDF to JSON Conversion

Source: https://polotno.com/docs/pdf-import

Example of converting a PDF file uploaded by a user to Polotno JSON format in a browser environment. Uses File.arrayBuffer() to get the PDF data.

```javascript
import { pdfToJson } from '@polotno/pdf-import';

async function handleFileUpload(file: File) {
  const buffer = await file.arrayBuffer();
  const json = await pdfToJson({ pdf: buffer });
  store.loadJSON(json);
}
```

--------------------------------

### Recolor Editor Canvas Chrome

Source: https://polotno.com/docs/theme-and-ui-styles

Customize the appearance of canvas elements like selection rectangles, transformer handles, and snap guides by passing props to the Workspace component. This example recolors the accent color.

```jsx
<Workspace
  store={store}
  selectionRectStroke="#c8c52d"
  selectionRectFill="rgba(200, 197, 45, 0.3)"
  snapGuideStroke="#c8c52d"
  transformLabelFill="#c8c52d"
  highlighterStyle={{ stroke: '#c8c52d' }}
/>
```

--------------------------------

### Core Concepts: Store Initialization and Element Addition

Source: https://polotno.com/docs/overview

Demonstrates how to create a Polotno store, add a new page, and add a text element to that page.

```javascript
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',
});
```

--------------------------------

### Toggle Distance Guides

Source: https://polotno.com/docs/store

Show or hide distance guides on the workspace. These guides normally appear when an element is selected and ALT is held.

```javascript
store.toggleDistanceGuides();
```

```javascript
store.toggleDistanceGuides(false);
```

--------------------------------

### Creating Export-Only Guide Layers

Source: https://polotno.com/docs/user-roles

Add guide layers, such as rectangles, that are visible during editing but hidden when the design is exported. These guides are typically non-selectable.

```javascript
store.activePage.addElement({
  type: 'figure',
  subType: 'rect',
  stroke: 'red',
  strokeWidth: 2,
  fill: 'transparent',
  selectable: false,
  showInExport: false, // Hidden in export
});

// Admin can toggle this via UI
// Regular users can't interact with it
```

--------------------------------

### Import and Initialize Editor in Host Project

Source: https://polotno.com/docs/non-react-integration

Shows how to import the generated 'editor.js' and initialize the Polotno editor within your main project.

```javascript
import { createEditor } from './editor.js';

// somewhere in your code
createEditor({ container: document.getElementById('editor') });
```

--------------------------------

### Initialize Polotno Workspace

Source: https://polotno.com/docs/workspace

Set up the main React Workspace component with a store. Ensure your API key is provided. The component will fill its parent container.

```javascript
import { Workspace } from 'polotno/canvas/workspace';
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 App = () => {
  return (
    <div style={{ height: '100vh' }}>
      <Workspace store={store} />
    </div>
  );
};

```

--------------------------------

### store.toggleDistanceGuides()

Source: https://polotno.com/docs/store

Toggles the visibility of distance guides on the workspace. These guides appear when an element is selected and ALT is held, but this method can force them on.

```APIDOC
## store.toggleDistanceGuides([show])

### Description
Show or hide distance guides on the workspace. Distance guides appear when a user selects an element and holds `ALT`; this method forces them on even without the modifier key.

### Method
POST

### Endpoint
N/A (Direct method call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **show** (boolean) - Optional - If true, shows the distance guides; if false, hides them. If omitted, toggles the current state.

### Request Example
```json
{
  "show": true
}
```

### Response
#### Success Response (200)
Indicates the distance guides visibility state was toggled or set.

#### Response Example
```json
{
  "message": "Distance guides visibility toggled."
}
```
```

--------------------------------

### store.distanceGuidesVisible

Source: https://polotno.com/docs/store

Getter for the current state of distance guides visibility. Returns true if distance guides are currently visible, false otherwise.

```APIDOC
## store.distanceGuidesVisible

### Description
Getter for current state of distance guides visibility.

### Method
GET

### Endpoint
N/A (Direct property access)

### Response
#### Success Response
- **distanceGuidesVisible** (boolean) - True if distance guides are visible, false otherwise.

### Response Example
```json
{
  "distanceGuidesVisible": true
}
```
```

--------------------------------

### Embed Polotno Bundle and Initialize Editor

Source: https://polotno.com/docs/frameworkless-integration

Include the Polotno CSS and JavaScript bundle, set up a container, and initialize the Polotno editor using a script tag. Ensure the script is added within the body of the document. A demo API key is used; obtain your own for production.

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

<!-- add polotno bundle -->
<!-- (!) important: make sure it is added into body of document (not <head>) -->
<script src="https://unpkg.com/polotno@4/polotno.bundle.js"></script>

<!-- set styles for the editor -->
<style>
  body {
    padding: 0;
    margin: 0;
  }
  #container {
    width: 100vw;
    height: 100vh;
  }
  /* optionally enable dark theme */
  /* body.dark { background: #1e1e1e; } */
  /* <body class="dark"> */
</style>

<!-- create container for editor -->
<div id="container"></div>

<!-- init the editor -->
<script>
  const { store } = createPolotnoApp({
    // this is a demo key just for that project
    // (!) please don't use it in your projects
    // to create your own API key please go here: https://polotno.com/cabinet
    key: 'nFA5H9elEytDyPyvKL7T',
    // 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,
    container: document.getElementById('container'),
    // also optionally you can specify which side panels you want to show
    // by default all panels are shown
    // sections: ['photos', 'text', 'elements', 'upload', 'background', 'layers']
  });

  // you can use full store API available here: /docs/store
  // for any configurations you can use window.polotnoConfig object
  // it gives you full configs available in: import { something } from 'polotno/config'
  window.polotnoConfig.setAnimationsEnabled(true);
</script>
```

--------------------------------

### Non-Interactive Overlay: Watermark or Guide

Source: https://polotno.com/docs/element-locking

Configure an element to be non-selectable and non-removable, allowing clicks to pass through to elements underneath. Useful for watermarks or guides.

```javascript
element.set({
  selectable: false,  // Clicks pass through
  draggable: false,
  removable: false,
  alwaysOnTop: true,
});
```

--------------------------------

### Import Polotno Math Utilities

Source: https://polotno.com/docs/programmatic-transform

Import necessary math utilities from Polotno for programmatic transformations. These utilities help in calculating bounding boxes, finding element centers, and rotating shapes.

```javascript
import {
  getTotalClientRect,
  getCenter,
  rotateAroundPoint,
} from 'polotno/utils/math';
import { forEveryChild } from 'polotno/model/group-model';
```

--------------------------------

### Get Image Dimensions

Source: https://polotno.com/docs/utils

Asynchronously detects the dimensions of an image from a URL or data URL. Use this to get image dimensions before setting element properties.

```javascript
import { getImageSize } from 'polotno/utils/image';

const { width, height } = await getImageSize('https://example.com/image.jpg');
console.log(`Image is ${width}x${height} pixels`);
```

--------------------------------

### Configure Main Entry Point for Build

Source: https://polotno.com/docs/non-react-integration

Specifies 'editor.js' as the main output file for the compiled editor bundle in package.json.

```json
{
  "main": "editor.js"
}
```

--------------------------------

### Frameworkless Polotno Integration with Credit Disabled

Source: https://polotno.com/docs/credit

This snippet shows how to initialize Polotno for frameworkless integrations while disabling the credit. Remember to use your paid license API key and set `showCredit: false`.

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

const { store } = createDemoApp({
  container: document.getElementById('root'),
  key: 'YOUR_API_KEY',
  showCredit: false,
});
```

--------------------------------

### Pre-populate Table Cells

Source: https://polotno.com/docs/element

Shows how to create a table and pre-fill its cells with initial content.

```APIDOC
## Pre-populating Table Cells

### Description
Creates a table element and populates its cells with provided data. Cells are defined in row-major order.

### Method
`page.addElement(options)`

### Parameters
- **type** (string) - Required - Must be 'table'.
- **x** (number) - Required - The x-coordinate of the table.
- **y** (number) - Required - The y-coordinate of the table.
- **width** (number) - Required - The width of the table.
- **height** (number) - Required - The height of the table.
- **rows** (number) - Required - The number of rows.
- **cols** (number) - Required - The number of columns.
- **cells** (Array<object>) - Optional - An array of cell objects to pre-populate.
  - Each cell object can have properties like `id`, `text`, and other styling properties that override table defaults.

### Request Example
```javascript
page.addElement({
  type: 'table',
  x: 50,
  y: 50,
  width: 400,
  height: 200,
  rows: 2,
  cols: 3,
  cells: [
    { id: 'h1', text: 'Name' },
    { id: 'h2', text: 'Role' },
    { id: 'h3', text: 'Email' },
    { id: 'r1', text: 'Alice' },
    { id: 'r2', text: 'Engineer' },
    { id: 'r3', text: 'alice@example.com' },
  ]
});
```
```

--------------------------------

### Get Rotated Bounding Box of Single Element

Source: https://polotno.com/docs/utils

Gets the bounding box of a single element, accounting for its rotation and transformations. Returns the visual bounding box after applying rotation. Use this when you need precise element bounds for layout calculations.

```javascript
import { getClientRect } from 'polotno/utils/math';

const box = getClientRect(element);
// Returns: { x: number, y: number, width: number, height: number }

// Use for full-width backgrounds
backgroundEl.set({
  x: 0,
  y: box.y,
  width: element.page.computedWidth,
  height: box.height,
});
```

--------------------------------

### Basic Video Export and Download

Source: https://polotno.com/docs/video-export

Export a Polotno design to a video Blob and initiate a download. Configure frames per second and pixel ratio for quality. Progress is logged to the console.

```javascript
import { storeToVideo } from '@polotno/video-export';
import { createStore } from 'polotno/model/store';

const store = createStore({ key: 'YOUR_KEY' });

// Export video
const videoBlob = await storeToVideo({
  store,
  fps: 30, // Frames per second (default: 30)
  pixelRatio: 2, // Pixel ratio for quality (default: 1)
  onProgress: (progress, frameTime) => {
    console.log(`Progress: ${Math.round(progress * 100)}%`);
    console.log(`Frame render time: ${frameTime}ms`);
  },
});

// Download the video
const url = URL.createObjectURL(videoBlob);
const link = document.createElement('a');
link.href = url;
link.download = 'video.mp4';
link.click();
```

--------------------------------

### store.currentTime

Source: https://polotno.com/docs/store

Get the current playback time of the animations.

```APIDOC
## store.currentTime

### Description
Returns the current time of playback in milliseconds.

### Method
```javascript
const currentTime = store.currentTime;
```
```

--------------------------------

### Hybrid Export Strategy Logic

Source: https://polotno.com/docs/hd-exports

This example demonstrates a hybrid approach to exporting designs. It checks device capabilities and design dimensions to decide between client-side or server-side rendering. Use this when you need to balance performance and compatibility across different devices.

```javascript
const isHighEndDevice = navigator.hardwareConcurrency >= 8 && 
                       navigator.deviceMemory >= 8;

const exportDesign = async (store, pixelRatio = 2) => {
  const maxSide = Math.max(store.width, store.height) * pixelRatio;
  
  if (maxSide > 8000 || !isHighEndDevice) {
    // Use server-side rendering
    return await exportViaCloudAPI(store);
  } else {
    // Use client-side rendering
    return await store.saveAsImage({ pixelRatio });
  }
};
```

--------------------------------

### Create Polotno Store

Source: https://polotno.com/docs/store

Initializes the Polotno store with an API key and options for showing credits. Ensure you have a valid API key.

```javascript
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,
});
```

--------------------------------

### Get Selected Elements

Source: https://polotno.com/docs/store

Access an array of elements currently selected on the canvas.

```javascript
const firstSelected = store.selectedElements[0];
```

--------------------------------

### Using useInfiniteAPI Hook

Source: https://polotno.com/docs/utils-api

Demonstrates how to use the useInfiniteAPI hook to fetch paginated data for a list of images. It shows configuration options like getAPI, defaultQuery, timeout, getSize, and fetchFunc.

```javascript
import { useInfiniteAPI } from 'polotno/utils/use-api';

export const SidePanel = () => {
  const { data, isLoading, loadMore, isReachingEnd, hasMore, reset, error } = useInfiniteAPI({
    // a function that will return a URL to request
    getAPI: ({ page, query }) => `https://example.com/api?page=${page}&query=${query}`,
    // default search query for the first call call
    defaultQuery: '',
    // timeout before making a new call when you change search query, useful for debouncing
    timeout: 500,
    // a function that should return number of pages available from the first API response
    // usually API response has a "totalPages", "size" or other field that tells you how many pages are available
    getSize: (firstResult) => firstResult.total_pages,
    // a function to make an API request
    // here is example of default fetch function
    // you can customize it to add for example headers
    fetchFunc: (url) => fetch(url).then((r) => r.json()),
  });

  // data - is an array of responses from the API
  // each item in the array corresponds to a page

  // loadMore - function to be called when you want to request for more data
  // ImagesGrid will use it when you scrape the bottom of the list

  // isReachingEnd - true if you are at the end of the list

  // hasMore - true if you can request for more data
  // reset - function to be called when you want to reset the list
  // error - error object if something went wrong
};
```

--------------------------------

### Get Current Canvas Tool

Source: https://polotno.com/docs/store

Retrieve the name of the currently active tool on the canvas.

```javascript
console.log(store.tool); // 'selection'
```

--------------------------------

### Get Element by ID

Source: https://polotno.com/docs/store

Find and retrieve a specific element from the store using its unique ID.

```javascript
const element = store.getElementById('some-id');
element.set({ x: 0 });
```

--------------------------------

### Create Editor Project Directory

Source: https://polotno.com/docs/non-react-integration

Creates a new directory named 'editor' for the standalone Polotno editor component.

```bash
mkdir editor
```

--------------------------------

### Get Current Drawing Tool Options

Source: https://polotno.com/docs/store

Retrieve the current configuration options for the drawing tool.

```javascript
console.log(store.toolOptions);
// { strokeWidth: 50, stroke: 'red', opacity: 0.4 }
```

--------------------------------

### Save Store as Image (Default)

Source: https://polotno.com/docs/store

Download the current store state as a local image file. By default, it exports the first page with a filename 'polotno.png'.

```typescript
// default export
store.saveAsImage({ fileName: 'polotno.png' });
```

--------------------------------

### Get Current Zoom Scale

Source: https://polotno.com/docs/store

Retrieve the current zoom level (scale) of the active page.

```javascript
console.log('zoom is', store.scale);
```

--------------------------------

### Get Page Width and Height

Source: https://polotno.com/docs/store

Retrieve the current width and height of every page in the store.

```javascript
console.log('Width is', store.width);
```

--------------------------------

### Add UI Components

Source: https://polotno.com/docs/components/overview

Use the shadcn-ui CLI to add UI components from the Polotno registry to your project. This command copies the component's source files into your repository.

```bash
npx shadcn@latest add http://registry.polotno.com:/r/qr-code.json
```

--------------------------------

### Get All Translations

Source: https://polotno.com/docs/editor-configuration

Retrieve the full translation object for inspection or debugging purposes using the `getTranslations` function.

```javascript
import { getTranslations } from 'polotno/config';

// log full translations object
console.log(getTranslations());
```

--------------------------------

### Add Dev Script to package.json

Source: https://polotno.com/docs/non-react-integration

Adds a 'dev' script to package.json to easily start the Parcel development server.

```json
{
  "scripts": {
    "dev": "parcel ./editor/index.html"
  }
}
```
Tokens:
Raw