OpenPolotno

Open-source alternative to Polotno with full template and API support.

https://github.com/therutvikp/OpenPolotno/assets/200716703/48e012c4-4d7b-4e8b-b718-2a277f2aae2a

A powerful, extensible React-based design editor framework for building browser-based design tools. Supports multi-page layouts, rich media elements, animations, AI features, and multiple export formats.

Features

• Multi-page design canvas with undo/redo history and history timeline panel
• Rich set of supported elements: text, image, SVG, video, GIF, figure, line, HTML, audio, and groups
• Context-sensitive toolbar with element-specific controls
• Side panel with templates, photos, videos, uploads, layers, backgrounds, and more
• Rulers and guides with element snapping
• Advanced selection by element type, color, or font
• Paste image from clipboard (Ctrl+V)
• Copy Style / Paste Style (paint format) across elements
• Gradient fill for shapes — linear and radial
• Pattern and texture fill for shapes with built-in patterns and custom image upload
• Image adjustments: brightness, contrast, saturation, highlights, shadows, temperature
• Duotone / color overlay effect on images
• Blend modes for elements
• Animation system with enter, exit, and loop effects
• Video and animation timeline with export to MP4
• Presentation mode (fullscreen slideshow)
• Keyboard shortcuts help panel
• Interactive onboarding tour
• AI image generation and AI-powered text writing
• Export to PNG, JPEG, SVG, HTML, PDF, GIF, and PowerPoint (PPTX)
• Google Fonts integration with custom font upload support
• Image filters, effects, cropping, masking, and background removal
• Element alignment, distribution, grouping, locking, and clipboard operations
• Fully extensible: register custom shapes, toolbars, and components
• Russian (ru) UI strings by default; override or extend via setTranslations()
• Optional feature flags in createRaeditorApp: page controls on canvas, AI tools in toolbars, custom SVG in Elements panel
• Text uppercase style (textTransform) applied consistently on canvas and in SVG / PPTX export (including English text)

Installation

npm install @reyka/openpolotno

Quick Start

React component approach

import { createStore } from 'openpolotno/model';
import { RaeditorContainer, SidePanelWrap, WorkspaceWrap } from 'openpolotno';
import { SidePanel } from 'openpolotno/side-panel';
import { Toolbar } from 'openpolotno/toolbar';
import { Workspace } from 'openpolotno/canvas';

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

export default function App() {
  return (
    <RaeditorContainer>
      <SidePanelWrap>
        <SidePanel store={store} />
      </SidePanelWrap>
      <WorkspaceWrap>
        <Toolbar store={store} />
        <Workspace store={store} />
      </WorkspaceWrap>
    </RaeditorContainer>
  );
}

Vanilla JS / programmatic approach

import { createRaeditorApp } from 'openpolotno';

const { store } = createRaeditorApp({
  container: document.getElementById('app'),
  key: 'YOUR_API_KEY',
  showCredit: true,
  sections: undefined, // pass string[] to show only specific side panel sections
  showPageControls: true, // canvas: duplicate / delete / add page controls (default: true)
  showAiTools: true, // toolbar: AI text + remove background (default: true)
  showCustomSvg: true, // Elements panel: built-in SVG assets vs lines/figures (default: true)
});

// Add elements programmatically
const page = store.pages[0];
page.addElement({
  type: 'text',
  text: 'Hello OpenPolotno',
  x: 100,
  y: 100,
  fontSize: 40,
});

createRaeditorApp feature flags

| Option | Default | Description | |--------|---------|-------------| | showPageControls | true | Shows page management controls on the canvas (add, duplicate, delete pages, etc.). Set to false to hide them. | | showAiTools | true | Enables AI-related toolbar actions: AI text writing on text/HTML elements and remove background on images (when removeBackgroundEnabled is on). Set to false to hide these controls. | | showCustomSvg | true | In the Elements side panel, show built-in SVG assets (true) or only lines and basic figures (false). |

Flags are applied at startup via store.setPageControlsEnabled(), store.setAiToolsEnabled(), and store.setShowCustomSvg(). You can change them later on an existing store:

store.setPageControlsEnabled(false);
store.setAiToolsEnabled(false);

Text uppercase (textTransform)

The toolbar Uppercase toggle sets textTransform: 'uppercase' on text elements. The original text in the model is unchanged; display and export apply casing via applyTextTransform() — on the Konva canvas, in SVG, and in PPTX. This fixes missing uppercase styling in exports, including for English (and other Latin) content.

Backend API URLs & endpoints

The editor talks to HTTP endpoints for stock media, Google Fonts, templates, AI features, video render jobs, background removal, and related services. By default it targets https://api.polotno.com with paths under /api/.... You can point everything to your own backend (or adjust individual path segments) without forking the library.

Important (bundlers): This package builds one JavaScript file per source entry (splitting: false). That means openpolotno/config and the main openpolotno entry each embed their own copy of utils/api. If you call setApiEndpoints from openpolotno/config but mount the editor from openpolotno, you update one copy while panels use another — URLs will not change. Import API helpers from the same entry as createRaeditorApp (recommended below).

Import (recommended — same module instance as the editor):

import {
  setApiEndpoints,
  createRaeditorApp,
  getAPI,
  getUrlBase,
  getApiPathPrefix,
  joinUrlBaseParts,
  apiPathSegment,
  DEFAULT_URL_BASE,
  DEFAULT_API_PATHS,
  setAPI,
  URLS,
} from 'openpolotno'; // npm: @reyka/openpolotno

import type {
  ApiEndpointKey,
  ApiEndpointPaths,
  SetApiEndpointsOptions,
  CatalogListParams,
  SvgapiListParams,
  TemplateListParams,
  UrlsMap,
} from 'openpolotno';

If you import only from openpolotno/config for fonts, uploads, etc., keep setApiEndpoints on the main entry as above, or use Vite resolve.dedupe: ['@reyka/openpolotno'] so every subpath resolves to a single package instance.

Alternative import (only safe if your bundler dedupes the package or you re-export API from a single chunk):

import { setApiEndpoints } from 'openpolotno';

Specialized URL helpers (same module): getVideoRenderSubmitUrl, getVideoRenderPollUrl, getStableDiffusionUrl, getPexelsVideosUrl, plus the convenience wrappers unsplashList, templateList, getGoogleFontsListAPI, etc.

When to configure

Call setApiEndpoints() once at application startup (before or alongside createStore), so the first network requests from panels and toolbars already use your URLs. Calling it again merges new options into existing path overrides; omitted fields keep their previous values.

The API KEY query parameter is still supplied from your store key (createStore({ key: '...' })) via the internal getKey() helper—your proxy must accept the same query shape as the default Polotno-style API, unless you replace generators entirely with setAPI.

setApiEndpoints(options)

| Option | Type | Description | |--------|------|-------------| | urlBase | string | Origin for all requests, no trailing slash (e.g. https://api.example.com). Default: same as DEFAULT_URL_BASE (https://api.polotno.com). | | apiPathPrefix | string | Extra path segment between urlBase and each endpoint segment. Default 'api' → URLs look like https://host/api/get-unsplash. Set to '' if your backend serves routes directly on the host (https://host/get-unsplash). You can also use nested prefixes such as 'v1' or 'public/rest' (no leading/trailing slashes). | | paths | Partial<ApiEndpointPaths> | Override only the path segments you need; all other keys keep their defaults from DEFAULT_API_PATHS. |

Final URL shape for most endpoints:

joinUrlBaseParts(urlBase, apiPathPrefix, segment) + '?' + query

Built with joinUrlBaseParts, which trims slashes and skips empty segments so apiPathPrefix: '' does not produce double slashes.

Google Fonts previews (special case)

The key googleFontImage is not under getAPI() / apiPathPrefix. Preview PNGs resolve as:

joinUrlBaseParts(getUrlBase(), paths.googleFontImage) + '/' + slug + '.png'

So font previews stay at https://<urlBase>/google-fonts-previews/black/... by default, independent of the /api prefix.

Default path segments (DEFAULT_API_PATHS)

Each value is the path after .../<apiPathPrefix>/ (except googleFontImage, see above). Override any key via setApiEndpoints({ paths: { ... } }).

| Key | Default segment | Feature area | |-----|-----------------|--------------| | unsplashList | get-unsplash | Photos / background stock search | | unsplashDownload | download-unsplash | Photo download | | svgapiList | get-svgapi | SVG illustrations search | | svgapiDownload | download-svgapi | SVG download | | iconscoutList | get-iconscout | IconScout search | | iconscoutDownload | download-iconscout | IconScout download | | nounProjectList | get-nounproject | Noun Project search | | nounProjectDownload | download-nounproject | Noun Project download | | templateList | get-templates | Template library | | googleFontsList | get-google-fonts | Google Fonts JSON list | | googleFontImage | google-fonts-previews/black | Font preview images (under urlBase only) | | textTemplateList | get-text-templates | Text presets | | removeBackground | remove-image-background | Background removal | | aiText | ai/text | AI text rewriting | | basicShapes | get-basic-shapes | Built-in shape catalog | | videoRenderSubmit | renders | POST design for MP4 export | | videoRenderJob | renders | Poll .../renders/<jobId> | | stableDiffusion | get-stable-diffusion | AI Images panel | | pexelsVideosSearch | pexels/videos/search | Videos panel (search) | | pexelsVideosPopular | pexels/videos/popular | Videos panel (popular) | | fileUpload | (empty) | Upload panel — empty segment keeps in-browser data URLs; if set, POST multipart/form-data to getAPI/<segment>?KEY=… | | fontUpload | (empty) | Text panel — user font upload; same rules as fileUpload |

Upload HTTP contract: field name file. Response: JSON with url or src, or plain text body with a single https://, http://, or data: URL.

Runtime helpers

| Function | Purpose | |----------|---------| | getAPI() | Root URL for JSON API routes: urlBase + apiPathPrefix. | | getUrlBase() | Current urlBase after configuration. | | getApiPathPrefix() | Current apiPathPrefix string. | | apiPathSegment(key) | Resolved segment for an ApiEndpointKey (defaults + overrides). | | joinUrlBaseParts(base, ...segments) | Safe join without duplicate slashes. | | uploadMediaFile(file) | Upload panel: uses paths.fileUpload or local data URL. | | uploadFontFile(file) | Text fonts: uses paths.fontUpload or local data URL. |

The exported object URLS holds callable URL builders (e.g. URLS.unsplashList({ query, page })). They are rebuilt whenever you call setApiEndpoints.

Fine-grained override: setAPI(name, fn)

After setApiEndpoints, you can replace a single builder by name:

import { getKey } from 'openpolotno/utils/validate-key';
import { setAPI } from 'openpolotno';

setAPI('unsplashList', ({ query, page = 1 }) =>
  `https://my-proxy.example.com/photos?q=${encodeURIComponent(query)}&page=${page}&KEY=${getKey()}`,
);

Use this when a route’s query string or HTTP semantics differ from the defaults. Call setApiEndpoints first, then setAPI for exceptions. Calling setApiEndpoints again will reset the standard generators and overwrite previous default implementations (any custom setAPI for those keys must be reapplied if still needed).

Examples

Only change the host (keep /api/... paths):

import { setApiEndpoints } from 'openpolotno';

setApiEndpoints({
  urlBase: 'https://cdn.my-company.com',
});

Backend without a dedicated /api segment:

setApiEndpoints({
  urlBase: 'https://api.my-company.com',
  apiPathPrefix: '',
});

Custom segment for one endpoint:

setApiEndpoints({
  paths: {
    unsplashList: 'v2/unsplash/search',
  },
});

Deprecated constants

• URL_BASE — frozen default host; use getUrlBase() for the configured value.
• API — frozen urlBase/api snapshot; use getAPI() instead.

They remain exported from openpolotno/utils/api for backward compatibility but do not update when setApiEndpoints runs.

Supported Elements

| Element | Description | |---------|-------------| | text | Rich text with full typography controls | | image | Raster images with crop, mask, clip, adjustments, and duotone | | svg | Vector graphics with color replacement | | video | Video playback with seeking and animation timeline | | gif | Animated GIF playback | | figure | Pre-built SVG shapes with gradient and pattern fill | | line | Customizable lines with arrow heads and dash patterns | | html | Rich HTML content using a Quill editor | | audio | Audio track metadata | | group | Nested grouping and ungrouping of elements |

All elements share common properties: position, dimensions, rotation, opacity, visibility, blend mode, filters, shadow, animations, and lock/edit states.

Side Panel Sections

• Templates — Pre-designed layout templates
• Text — Text insertion and font management with custom font upload
• Photos — Stock photo search and insertion
• Elements — Pre-built shapes, lines, and figures
• Upload — Custom image and media uploads
• Background — Page background colors and images
• Layers — Hierarchical layer management with visibility toggles
• Size — Page and element dimension controls
• Videos — Video library integration
• AI Images — Stable Diffusion text-to-image generation (requires API key)
• Animations — Element entry, exit, and loop animations
• Effects — Image filtering, color grading, duotone, and blend modes
• Image Clip — Masking and clipping tools
• Pattern Fill — Built-in patterns and custom texture upload for shapes

Toolbar

Universal controls available for all elements:

• Undo / Redo
• Position (X, Y) and alignment (left, right, top, bottom, center)
• Opacity and blend mode
• Lock / Unlock
• Duplicate
• Delete
• Group / Ungroup
• Copy Style / Paste Style (paint format)
• Export / Download
• Presentation mode
• Keyboard shortcuts reference

Type-specific toolbars:

• Text — Font, size, weight, style, letter spacing, alignment, line height, uppercase, AI writing (if showAiTools / store.isAiToolsEnabled)
• Image — Crop, flip, background removal (if showAiTools / store.isAiToolsEnabled), adjustments (brightness/contrast/saturation), duotone
• SVG / Figure — Per-color replacement, gradient fill, pattern fill
• Video — Video-specific controls, playback speed
• Line — Style, width, dash pattern, arrow heads
• GIF — Playback controls
• HTML — Bold, italic, and rich text formatting
• Multi-select — Bulk operations on multiple elements

Rulers & Guides

Rulers appear along the top and left edges of the canvas. Drag from a ruler to create a guide line. Elements snap to guides during drag. Toggle rulers via the ruler button in the toolbar.

Advanced Selection

The Advanced Select toolbar button opens a dialog to select all elements on the current page matching a given:

• Element type (text, image, figure, etc.)
• Fill / stroke color
• Font family

Copy Style / Paste Style

Click the paint-format button in the toolbar to copy the style of the selected element (fill, stroke, opacity, font, effects). Then click another element to paste those styles onto it.

Gradient & Pattern Fill

Shapes and figures support three fill modes accessible from the color picker:

• Solid — flat color fill
• Gradient — linear or radial gradient with configurable stops
• Pattern — built-in repeating textures or a custom uploaded image tile

Image Adjustments & Duotone

Select an image element and open the Adjustments panel to tune:

• Brightness, Contrast, Saturation
• Highlights, Shadows, Temperature, Hue

Enable Duotone to map the image to two colors (shadows color → highlights color) for a stylized overlay effect.

Blend Modes

Every element supports a CSS-compatible blend mode (Multiply, Screen, Overlay, Darken, Lighten, etc.) set via the toolbar opacity/blend picker.

Animations

The animation system supports three types:

• enter — Element appears at page start
• exit — Element disappears at page end
• loop — Continuous animation during page display

Available effects: Fade, Rotate, Blink, Bounce, Move (8 directions), Camera (zoom/pan), Morph, Wave

Each animation supports delay, duration, direction, strength, and enable/disable toggle.

Presentation Mode

Click the Present button to enter fullscreen slideshow mode. Pages are shown one at a time with animations playing. Press Escape to exit.

Export Options

| Format | Method | |--------|--------| | PNG / JPEG | store.saveAsImage() | | SVG | store.saveAsSVG() | | HTML | store.saveAsHTML() | | PDF | store.saveAsPDF() | | Animated GIF | store.saveAsGIF() | | MP4 Video | store.exportVideo() | | PowerPoint | via to-pptx utility | | JSON | store.toJSON() / store.loadJSON() |

AI Features

AI Image Generation

The AiImagesPanel integrates with Stable Diffusion for text-to-image generation. Requires an external API key. Generated images can be added to the canvas or used to replace a selected image element.

AI Text Writing

Requires showAiTools: true (default) or store.setAiToolsEnabled(true).

The TextAiWrite toolbar component provides GPT-powered text manipulation:

• Rewrite, shorten, continue, proofread
• Tone adjustment: friendly, professional, humorous, formal
• Custom prompt support

Filters & Effects

• Sepia, Grayscale, Natural, Warm, Cold, Temperature
• Contrast, Shadows, Highlights, White point, Black point
• Saturation, Vibrance
• Blur, Brightness
• Shadow (offset, blur, color, opacity)

Customization & Extension

import {
  registerShapeModel,
  registerShapeComponent,
  registerToolbarComponent,
  setGoogleFonts,
  addGlobalFont,
  setTranslations,
  setUploadFunc,
  setRemoveBackground,
  setHighlighterStyle,
  setTransformerStyle,
} from 'openpolotno/config';
import { setApiEndpoints } from 'openpolotno';

• Backend URLs — Call setApiEndpoints from the main package entry (openpolotno, same as createRaeditorApp) so URL state matches the editor bundle (details)
• Custom shapes — Register new element types with registerShapeModel + registerShapeComponent
• Custom toolbar — Add toolbar sections with registerToolbarComponent
• Fonts — Set Google Fonts list or add custom fonts
• Localization — UI defaults to Russian; override or extend strings with setTranslations()
• Upload — Provide your own upload handler with setUploadFunc()
• Background removal — Plug in your own removal service with setRemoveBackground()

Store API

// Pages
store.addPage()
store.deletePages(ids)
store.selectPage(id)

// Elements
store.selectElements(ids)
store.deleteElements(ids)
store.groupElements(ids)
store.ungroupElements(id)

// Playback (for animations and video)
store.play()
store.stop()
store.seek(timeMs)

// History
store.history.undo()
store.history.redo()
store.history.clear()

// Feature flags (also set via createRaeditorApp options)
store.setPageControlsEnabled(true)
store.setAiToolsEnabled(true)
store.setShowCustomSvg(true)

// State
store.toJSON()
store.loadJSON(json)
store.clear()

Tech Stack

• React — UI framework
• Konva.js — 2D canvas rendering
• MobX-State-Tree — Reactive state management
• Blueprint.js — UI component library
• MobX — Reactivity

Credits & This Fork

• Upstream: OpenPolotno by Rutvik Panchal — an open-source alternative to Polotno.
• This repository: extends the functionality of that upstream project (configurable page/AI UI, text uppercase in exports, API endpoint overrides, Russian UI, and more).
• Localization: the interface is localized to Russian; strings can still be overridden or extended with setTranslations().

License

See LICENSE for details.