Search Docs
Loading...
Skip to content

Automated Video Generation for SvelteKit

Streamline asset production with video placeholders.

Design Editor starter kit showing a professional design editing interface

10 mins
estimated time
Download
StackBlitz
GitHub

Prerequisites#

Before you begin, make sure you have the following:

  • Node.js v20+ and npm installed locally – Download Node.js
  • A supported browser – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
    See Browser Support for the full list.
New Project
Existing Project

Get Started#

Start fresh with a standalone Automated Video Generation project. This creates a complete, ready-to-run application.

Step 1: Clone the Repository#

Terminal
git clone https://github.com/imgly/starterkit-video-placeholders-react-web.git
git clone https://github.com/imgly/starterkit-video-placeholders-react-web.git

The src/ folder contains the editor code:

src/
├── app/                          # Demo application
├── imgly/
│   ├── config/
│   │   ├── advanced-video-editor/
│   │   │   ├── actions.ts                # Export/import actions
│   │   │   ├── features.ts               # Feature toggles
│   │   │   ├── i18n.ts                   # Translations
│   │   │   ├── plugin.ts                 # Main configuration plugin
│   │   │   ├── settings.ts               # Engine settings
│   │   │   └── ui/
│   │   │       ├── canvas.ts                 # Canvas configuration
│   │   │       ├── components.ts             # Custom component registration
│   │   │       ├── dock.ts                   # Dock layout configuration
│   │   │       ├── index.ts                  # Combines UI customization exports
│   │   │       ├── inspectorBar.ts           # Inspector bar layout
│   │   │       ├── navigationBar.ts          # Navigation bar layout
│   │   │       └── panel.ts                  # Panel configuration
│   │   └── video-editor/          # Same structure as advanced-video-editor/
│   └── index.ts                  # Editor initialization function
└── index.tsx                 # Application entry point

Step 2: Install Dependencies#

Install the required packages:

Terminal
cd starterkit-video-placeholders-react-web
npm install
cd starterkit-video-placeholders-react-web
npm install

Step 3: Download Assets#

CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project’s public/ directory.

Terminal
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.73.1/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.73.1/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip
src/index.tsx
const config = {
  // ...
  baseURL: '/assets'
  // ...
};

Step 4: Run the Development Server#

Terminal
npm run dev
npm run dev

Open http://localhost:5173 in your browser.

Video Placeholders#

The Automated Video Generation starter kit uses a Creator/Adopter workflow for template-based video creation. This workflow separates template design from content filling, enabling scalable video production.

Creator Mode#

Creators design video templates with placeholder regions using the Advanced Video Editor configuration:

  • Full editing capabilities with advanced timeline and inspector panel
  • Dark theme optimized for professional editing workflows
  • Define placeholder regions for video, image, and text content
  • Complete control over template structure and design
src/lib/imgly/index.ts
export async function initVideoPlaceholdersCreatorEditor(cesdk: CreativeEditorSDK) {
  // Use advanced video editor for full editing capabilities
  await cesdk.addPlugin(new AdvancedVideoEditorConfig());


  // Dark theme for professional editing
  cesdk.ui.setTheme('dark');


  // Enable placeholder features for template creation
  cesdk.feature.enable('ly.img.placeholder*');
  cesdk.feature.enable('ly.img.inspector');


  // Set the Creator role
  cesdk.engine.editor.setRole('Creator');
}

Adopter Mode#

Adopters customize templates by filling placeholders using the simplified Video Editor configuration:

  • Streamlined interface focused on content replacement
  • Light theme for content editing workflows
  • Replace placeholder content while maintaining template structure
  • Limited editing to preserve design consistency
src/lib/imgly/index.ts
export async function initVideoPlaceholdersAdopterEditor(cesdk: CreativeEditorSDK) {
  // Use standard video editor for simplified experience
  await cesdk.addPlugin(new VideoEditorConfig());


  // Light theme for content editing
  cesdk.ui.setTheme('light');


  // Set the Adopter role
  cesdk.engine.editor.setRole('Adopter');
}

Set Up a Scene#

CE.SDK offers multiple ways to load content into the editor. Choose the method that matches your use case:

src/index.ts
// Create a blank video canvas - starts with an empty video scene
await cesdk.actions.run('scene.create');


// Load from a template archive - restores a previously saved project
await cesdk.loadFromArchiveURL('https://example.com/template.zip');


// Load from a video URL - creates a new scene with the video
await cesdk.createFromVideo('https://example.com/video.mp4');


// Load from a scene file - restores a scene from JSON
await cesdk.loadFromURL('https://example.com/scene.json');

Customize Assets#

The editor uses asset source plugins to provide built-in libraries for templates, stickers, shapes, and fonts. The starter kit includes a curated selection—customize what’s included based on your needs.

Asset sources are added via plugins in src/imgly/index.ts. Enable or disable individual sources:

src/lib/imgly/index.ts
import {
  FiltersAssetSource,
  StickerAssetSource,
  TextAssetSource,
  VectorShapeAssetSource,
  EffectsAssetSource,
  // ...
} from '@cesdk/cesdk-js/plugins';


// Add only the sources you need
await cesdk.addPlugin(new FiltersAssetSource());
await cesdk.addPlugin(new StickerAssetSource());
await cesdk.addPlugin(new TextAssetSource());
await cesdk.addPlugin(new VectorShapeAssetSource());
await cesdk.addPlugin(new EffectsAssetSource());
// ...

For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See Serve Assets for downloading assets, configuring baseURL, and excluding unused sources to optimize load times.

Configure Actions#

Actions are functions that handle user interactions like exporting videos, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations.

Key built-in actions:

  • exportVideo – Export the current video to MP4 or other formats
  • saveScene – Save the scene as a JSON string for later editing
  • importScene – Import a previously saved scene (supports .scene and .cesdk formats)
  • exportScene – Export the scene as a JSON file or .cesdk archive with all assets
  • uploadFile – Handle file uploads with progress tracking

Use cesdk.actions.run() to execute any action:

// Run a built-in action
await cesdk.actions.run('exportVideo', { mimeType: 'video/mp4' });

Import from File Picker#

src/lib/imgly/config/actions.ts
// Let users open videos from their device
cesdk.actions.register('importVideo', async () => {
  const blobURL = await cesdk.utils.loadFile({
    accept: 'video/*',
    returnType: 'objectURL'
  });
  await cesdk.createFromVideo(blobURL);
});

Export and Save#

src/lib/imgly/config/actions.ts
// Register export action that downloads the edited video
cesdk.actions.register('exportVideo', async (exportOptions) => {
  const { blobs, options } = await cesdk.utils.export(exportOptions);
  await cesdk.utils.downloadFile(blobs[0], options.mimeType);
});

Customize (Optional)#

Theming#

CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically:

src/lib/imgly/config/settings.ts
// 'light' | 'dark' | 'system' | (() => 'light' | 'dark')
cesdk.ui.setTheme('dark');

See Theming for custom color schemes, CSS variables, and advanced styling options.

Localization#

Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements:

src/lib/imgly/config/i18n.ts
// Override specific labels
cesdk.i18n.setTranslations({
  en: {
    'actions.export.video': 'Download Video',
    'common.cancel': 'Cancel',
    'common.apply': 'Apply'
  }
});


// Set the active locale
cesdk.i18n.setLocale('en');

See Localization for supported languages, translation key reference, and right-to-left language support.

UI Layout#

CE.SDK Editor UI Areas

Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence.

src/lib/imgly/config/ui/navigationBar.ts
// Get current navigation bar components
const navOrder = cesdk.ui.getNavigationBarOrder();


// Add a custom button to the navigation bar
cesdk.ui.insertNavigationBarOrderComponent(
  'ly.img.spacer',
  { id: 'my-custom-action' },
  'after'
);

See Dock, Inspector Bar, Navigation Bar, Canvas Menu, and Canvas for detailed layout customization options.

Custom Components#

Build custom UI components using the builder system and integrate them in the editor. Custom components receive reactive state updates and can interact with the engine API.

src/lib/imgly/config/ui/components.ts
// Register a custom component
cesdk.ui.registerComponent('my-custom-button', ({ builder, engine }) => {
  const selectedBlocks = engine.block.findAllSelected();


  builder.Button('apply-effect', {
    label: 'Apply Effect',
    isDisabled: selectedBlocks.length === 0,
    onClick: () => {
      // Apply custom logic to selected blocks
    }
  });
});


// Add the component to the navigation bar
cesdk.ui.insertNavigationBarOrderComponent(
  'ly.img.spacer',
  'my-custom-button',
  'after'
);

Custom components automatically re-render when the engine state they depend on changes—no manual subscription management required.

See Register New Component for the complete builder API and component patterns.

Settings & Features#

Fine-tune editor behavior through settings and features.

Settings configure core engine behavior—rendering, input handling, and history management:

src/lib/imgly/config/settings.ts
cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true);
cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true);
cesdk.engine.editor.setSettingBool('features/undoHistory', true);

Features toggle which editing tools and panels appear in the UI:

src/lib/imgly/config/features.ts
// Toggle editor features
cesdk.feature.enable('ly.img.crop', true);
cesdk.feature.enable('ly.img.filter', true);
cesdk.feature.enable('ly.img.adjustment', true);

See Settings and Features for the complete reference.

Explore Plugins#

CE.SDK has a rich plugin ecosystem that extends the editor with powerful capabilities. Plugins can add new features, integrate third-party services, or customize editor behavior.

Custom Asset Sources#

Connect external asset libraries like Unsplash, Getty Images, or your own content management system. Asset sources let users browse and insert content from any source.

src/lib/imgly/config/plugin.ts
import UnsplashAssetSource from '@imgly/plugin-unsplash';


// Add Unsplash integration
await cesdk.addPlugin(UnsplashAssetSource({
  accessKey: 'your-unsplash-access-key'
}));

See Custom Asset Sources for integration patterns.

Discover More Plugins#

Explore the full plugin ecosystem in the IMG.LY plugins repository. Available plugins include:

  • Vectorizer – Convert raster images to vectors
  • AI Integration – Text-to-image generation and enhancement
  • And more – Check the repository for the latest additions

Key Capabilities#

The Automated Video Generation starter kit enables template-based video creation at scale.

Video Placeholders

Video Placeholders

Define swappable video placeholder regions that users or scripts can customize with content.

Text Placeholders

Text Placeholders

Create editable text areas that maintain styling while allowing content changes.

Creator/Adopter Workflow

Creator/Adopter Workflow

Separate template design from content filling with dedicated Creator and Adopter modes.

Scalable Output

Scalable Output

Generate multiple video variations by swapping placeholder content programmatically.

Video Export

Video Export

Export finished videos in MP4 format with customizable quality settings.

Media Library

Media Library

Access built-in media assets or integrate custom asset libraries.


Troubleshooting#

Editor doesn’t load#

  • Check the container element exists: Ensure your container element is in the DOM before calling create()
  • Verify the baseURL: Assets must be accessible from the CDN or your self-hosted location
  • Check console errors: Look for CORS or network errors in browser developer tools

Video playback issues#

  • Check video format: Ensure video files are in supported formats (MP4, WebM)
  • Browser compatibility: Some codecs may not be supported in all browsers

Watermark appears in production#

  • Add your license key: Set the license property in your configuration
  • Sign up for a trial: Get a free trial license at img.ly/forms/free-trial

Next Steps#

  • Configuration – Complete list of initialization options
  • Serve Assets – Self-host engine assets for production
  • Actions – Build custom export and save workflows
  • Theming – Customize colors and appearance
  • Localization – Add translations and language support
  • Placeholders – Create and manage placeholder regions