Video Export

Overview

Polotno supports exporting 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.

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

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

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

Live Demo

Try out the video export feature in this interactive demo: