Polotno
Export & Import

Import and Export

Overview of Polotno's import (JSON, SVG) and export (PNG, JPEG, PDF, PPTX, HTML, SVG, GIF, MP4) options

Polotno offers comprehensive import and export capabilities for designs, from open JSON format to high-quality images, PDFs, and video exports. The SDK supports both client-side and server-side rendering for automated design generation.

Import: JSON (open, developer-friendly format), SVG, PDF, PSD

Export: JSON, PNG, JPEG, PDF, PPTX, GIF, MP4, HTML, SVG

Key use cases: Template systems, programmatic generation, print production, digital graphics, animations, web embedding.

JSON Import and Export

Polotno uses an open JSON format designed for developer flexibility. You can export, read, modify, and re-import designs programmatically.

Key features:

  • Simple, readable format — JSON structure is straightforward and documented
  • Fully modifiable — export, modify properties, and re-import
  • Programmatic generation — create or modify designs in code
  • Template system — save and load templates, generate variations dynamically

Export to JSON

const json = store.toJSON();
console.log(json); // readable JSON structure

// modify programmatically
json.pages[0].children[0].text = 'Updated text';

// save or send to backend
localStorage.setItem('design', JSON.stringify(json));

Import from JSON

// load previously saved design
const json = JSON.parse(localStorage.getItem('design'));
store.loadJSON(json);

// import template or generated design
store.loadJSON({
  width: 800,
  height: 600,
  pages: [/* ... */]
});

The JSON must follow Polotno's store structure. See JSON Schema for complete reference.

Note: PPTX import isn't first-party yet — for now you can build a converter that emits Polotno JSON, or contact us to collaborate.

SVG Import

Import SVG files into Polotno using the @polotno/svg-import package.

npm install @polotno/svg-import
import { svgToJson } from '@polotno/svg-import';

const json = await svgToJson({ svg: svgContent });
store.loadJSON(json);

Note: Text converted to paths cannot be restored as editable text. See SVG Import for full details and workflow recommendations.

Try it without code: SVG to JSON · SVG to PDF — both run svgToJson() in the browser on your own files.

PDF Import

Import PDF files into Polotno using the @polotno/pdf-import package.

npm install @polotno/pdf-import
import { pdfToJson } from '@polotno/pdf-import';

const buffer = await file.arrayBuffer();
const json = await pdfToJson({ pdf: buffer });
store.loadJSON(json);

Works both client-side and server-side. See PDF Import for full details.

Try it without code: PDF to JSON · PDF to SVG · PDF to HTML — all three run pdfToJson() in the browser on your own files.

PSD Import

Import Photoshop .psd files into Polotno using the @polotno/psd-import package. Layers come through as separate, editable elements: text stays editable text, vector shapes stay vector, raster layers stay images. Masks and unsupported effects are baked per layer so the rest of the document remains separable.

npm install @polotno/psd-import
import { psdToJson } from '@polotno/psd-import';

const buffer = await file.arrayBuffer();
const json = await psdToJson({ psd: buffer });
store.loadJSON(json);

Works both client-side and server-side. See PSD Import for full details.

Try it without code: PSD to PNG · PSD to JPG · PSD to PDF · PSD to SVG · PSD to HTML · PSD to JSON — all six run psdToJson() in the browser on your own files.

Image Export (PNG, JPEG)

Export designs as PNG or JPEG images. Available client-side and server-side.

// basic export
await store.saveAsImage();

// with quality control
await store.saveAsImage({ 
  pixelRatio: 2,
  mimeType: 'image/png'
});

// with DPI metadata for print workflows
await store.saveAsImage({
  dpi: 300,
  dpiMetadata: 'auto' // 'auto' | 'always' | 'never'
});

// as data URL or blob
const dataURL = await store.toDataURL();
const blob = await store.toBlob();

DPI Metadata: PNG and JPEG exports support embedding resolution metadata via the dpi parameter (defaults to store.dpi value). By default (dpiMetadata: 'auto'), metadata is embedded only when DPI differs from 72. Use dpiMetadata: 'always' to force embedding or 'never' to skip it.

PDF Export

Export designs as PDF files. Two paths, both available client-side:

  • Rasterstore.saveAsPDF() flattens each page into an image embedded in the PDF.
  • VectorjsonToPDFBlob() from @polotno/pdf-export/browser keeps paths, strokes, and selectable text. Same package supports Node and PDF/X-1a print-ready output.
// raster — built-in
await store.saveAsPDF({
  includeBleed: true,
  cropMarkSize: 20,
  pixelRatio: 2,
});

// vector — browser entry
import { jsonToPDFBlob } from '@polotno/pdf-export/browser';
const blob = await jsonToPDFBlob(store.toJSON());

See PDF Export for the full comparison, bleed/crop marks, PDF/X-1a, spot colors, and the Cloud Render API option.

GIF Export

Export animated designs as GIF files. Available client-side and server-side.

await store.saveAsGIF();

// with custom settings
await store.saveAsGIF({
  fps: 30,
  pixelRatio: 2
});

Video Export (MP4)

Export animated designs as MP4 video files.

Client-side: Use @polotno/video-export package for browser-based video encoding. See Video Export for details.

Server-side: Use Cloud Render API.

HTML and SVG Export

Export designs as HTML or SVG for embedding in websites or further processing.

// export as HTML
const html = await store.toHTML();
await store.saveAsHTML();

// export as SVG
const svg = await store.toSVG();
await store.saveAsSVG();

Note: May not support all elements or features. For pixel-perfect exports, use PNG/JPEG or PDF.

PPTX Export (PowerPoint)

Export designs as PowerPoint presentations. Multi-page designs become multi-slide presentations.

await store.saveAsPPTX();

See PPTX Export for details.

Server-Side Rendering

All export formats can be generated server-side for high-volume or automated workflows.

Options:

  1. Node.js with Polotno SDK — run Polotno in Node.js environment. See Server-Side Image Generation.
  2. Cloud Render API — fully managed rendering service, no infrastructure needed. See Cloud Render API.

Complete API Reference

For all export options and parameters, see Store API.

On this page