Video Export

Overview

Polotno supports exporting animated designs to video (MP4) format using client-side rendering. This means all video encoding happens directly in the browser without requiring a server. This feature is available through the @polotno/video-export package.

For server-side video generation at scale, see Cloud Render API.

Installation

First, install the video export package:

npm install @polotno/video-export

Basic Usage

Import the package and use the storeToVideo function to export your design:

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();

API Reference

storeToVideo(options)

Exports a Polotno design to video format.

Parameters:

• store (required): The Polotno store instance
• fps (optional): Frames per second for the video (default: 30)
• pixelRatio (optional): Pixel ratio for quality control (default: 1)
• onProgress (optional): Callback function for progress tracking
  • progress: Number between 0 and 1 representing export progress
  • frameTime: Time in milliseconds to render the current frame
• includeAudio (optional): Include audio tracks from the design in the exported video
• signal (optional): An AbortSignal to cancel video generation. When aborted, storeToVideo rejects with an AbortError.

Returns: Promise that resolves to a Blob containing the video file

Cancelling an Export

Use an AbortController to cancel a long-running export:

const controller = new AbortController();

// Cancel after 10 seconds
setTimeout(() => controller.abort(), 10_000);

try {
  const videoBlob = await storeToVideo({
    store,
    signal: controller.signal,
  });
} catch (err) {
  if (err.name === 'AbortError') {
    console.log('Export was cancelled');
  }
}

Use Cases

• Create video content from animated designs
• Export presentations as video files
• Generate social media videos
• Create video templates with animations
• Export multi-page designs as video sequences

Notes

Multi-Page Designs with Different Dimensions

Video files require a single fixed resolution throughout playback. When your store contains pages with different dimensions, storeToVideo determines the output resolution by taking the maximum width and height across all pages (rounded to even numbers for H.264 codec compatibility).

During export, all pages are temporarily resized to match this output resolution. The resize is smart — it preserves relative positions and sizes of elements, so the layout is mostly maintained. Original page dimensions are restored after the export completes.

Common Questions

How long does video export take?

Export time depends on video length, complexity, and user hardware. Higher FPS and pixel ratios increase render time.

Can I export videos server-side?

Yes. Use the Cloud Render API for server-side video generation with consistent performance.

Does this work with animations?

Yes. Enable animations first with setAnimationsEnabled(true). See Animations and Videos for details.

Live Demo

Try out the video export feature in this interactive demo: