Search Docs
Loading...
Skip to content

Video Editor for React

Professional video editing for your React app—edit clips, add effects, trim footage, and export to MP4. Runs entirely in the browser with no server dependencies.

Video Editor starter kit showing a professional video editing interface

10 mins
estimated time
Download
StackBlitz
GitHub

Prerequisites#

Before you begin, make sure you have the following:

  • Node.js v22+ 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.

Get Started#

Integrate the Video Editor into your React application using the official React wrapper.

New Project
Existing Project

Step 1: Create a New Project#

Terminal 
npm create vite@latest your-project-name – –template react-ts
cd your-project-name
npm create vite@latest your-project-name – –template react-ts
cd your-project-name

Step 2: Clone the Starter Kit#

Clone the starter kit and copy the editor configuration to your project:

Terminal 
git clone https://github.com/imgly/starterkit-video-editor-ts-web.git
cp -r starterkit-video-editor-ts-web/src/imgly ./src/imgly
rm -rf starterkit-video-editor-ts-web
git clone https://github.com/imgly/starterkit-video-editor-ts-web.git
cp -r starterkit-video-editor-ts-web/src/imgly ./src/imgly
rm -rf starterkit-video-editor-ts-web

The imgly/ folder contains the editor configuration:

imgly/
├── index.ts                  # Editor initialization function
├── config/
│   ├── plugin.ts             # Main configuration plugin
│   ├── actions.ts            # Export/import actions
│   ├── features.ts           # Feature toggles
│   ├── i18n.ts               # Translations
│   ├── settings.ts           # Engine settings
│   └── ui/                   # UI customization
│       ├── index.ts          # Combines UI customization exports
│       ├── canvas.ts         # Canvas configuration
│       ├── components.ts     # Custom component registration
│       ├── dock.ts           # Dock layout configuration
│       ├── inspectorBar.ts   # Inspector bar layout
│       ├── navigationBar.ts  # Navigation bar layout
│       └── panel.ts          # Panel configuration
└── plugins/
    └── background-removal.ts # Background removal plugin

Step 3: Install Dependencies#

Install the required packages for the editor:

Core Editor#

Install the Creative Editor SDK:

Terminal 
npm install @cesdk/cesdk-js@1.80.0
npm install @cesdk/cesdk-js@1.80.0

Background Removal#

Add AI-powered background removal:

Terminal 
npm install @imgly/background-removal onnxruntime-web
npm install @imgly/background-removal onnxruntime-web

Step 4: 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.80.0/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.80.0/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip

Step 5: Create the Editor Component#

Create a React component using the official CE.SDK React wrapper:

import CreativeEditor from '@cesdk/cesdk-js/react';
import { initVideoEditor } from './imgly';


export default function VideoEditor() {
  return (
    <CreativeEditor
      config={{ baseURL: '/assets' }}
      init={initVideoEditor}
      width="100vw"
      height="100vh"
    />
  );
}

Step 6: Use the Component#

Import and use the Video Editor component in your application:

import VideoEditor from './components/VideoEditor';


function App() {
  return <VideoEditor />;
}


export default App;

The imgly/ folder contains the editor configuration:

imgly/
├── index.ts                  # Editor initialization function
├── config/
│   ├── plugin.ts             # Main configuration plugin
│   ├── actions.ts            # Export/import actions
│   ├── features.ts           # Feature toggles
│   ├── i18n.ts               # Translations
│   ├── settings.ts           # Engine settings
│   └── ui/                   # UI customization
│       ├── index.ts          # Combines UI customization exports
│       ├── canvas.ts         # Canvas configuration
│       ├── components.ts     # Custom component registration
│       ├── dock.ts           # Dock layout configuration
│       ├── inspectorBar.ts   # Inspector bar layout
│       ├── navigationBar.ts  # Navigation bar layout
│       └── panel.ts          # Panel configuration
└── plugins/
    └── background-removal.ts # Background removal plugin

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
// Load from a video URL - creates a new scene with the video
await cesdk.createFromVideo('https://example.com/video.mp4');


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


// Create a blank video canvas - starts with an empty video scene
await cesdk.actions.run('scene.create', { mode: 'Video' });


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

The createFromVideo() method is ideal for video editing workflows, as it automatically creates a scene with the video on a timeline.

Customize Assets#

The Video Editor uses asset source plugins to provide built-in libraries for video clips, audio, effects, stickers, 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/index.ts. Enable or disable individual sources:

src/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:

  • exportDesign – Export the current video to MP4 format
  • saveScene – Save the scene as a JSON string for later editing
  • importScene – Import a previously saved scene (.imgly or .scene)
  • exportScene – Export the scene as an .imgly file, either the scene alone or an 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('exportDesign', { mimeType: 'video/mp4' });

Customize actions in src/imgly/config/actions.ts:

Import from File Picker#

src/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/imgly/config/actions.ts
// Register export action that downloads the edited video
cesdk.actions.register('exportDesign', async exportOptions => {
  const { blobs, options } = await cesdk.utils.export(exportOptions);
  await cesdk.utils.downloadFile(blobs[0], options.mimeType);
});

Upload to Your Backend#

src/imgly/config/actions.ts
// Override the built-in exportDesign action to send to your server
cesdk.actions.register('exportDesign', async exportOptions => {
  const { blobs } = await cesdk.utils.export(exportOptions);


  const formData = new FormData();
  formData.append('video', blobs[0], 'edited-video.mp4');


  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });


  const { url } = await response.json();
  console.log('Uploaded to:', url);
});

Customize (Optional)#

Theming#

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

src/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/imgly/config/i18n.ts
// Override specific labels
cesdk.i18n.setTranslations({
  en: {
    'actions.export.video': 'Download Video',
    'common.cancel': 'Cancel',
    'common.apply': 'Apply',
  },
});


// Add a new language
cesdk.i18n.setTranslations({
  de: {
    'actions.export.video': 'Video herunterladen',
  },
});


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

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/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',
);


// Rearrange dock items
cesdk.ui.setDockOrder([
  'ly.img.assetLibrary.dock',
  'ly.img.separator',
  'my-custom-dock-item',
]);


// Customize the inspector bar
cesdk.ui.setInspectorBarOrder([
  'ly.img.fill.inspectorBar',
  'ly.img.separator',
  'ly.img.filter.inspectorBar',
]);

The Order API methods follow a consistent pattern across all UI areas:

  • get*Order() – Retrieve the current component order
  • set*Order() – Replace the entire order
  • insert*OrderComponent() – Add components relative to existing ones

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/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/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/imgly/config/features.ts
// Toggle editor features
cesdk.feature.enable('ly.img.trim', 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.

Background Removal#

Add AI-powered background removal: The background removal plugin processes images directly in the browser without sending data to external servers.

src/imgly/config/plugin.ts
import BackgroundRemovalPlugin from '@imgly/plugin-background-removal';


// Add background removal capability
await cesdk.addPlugin(BackgroundRemovalPlugin());

See Background Removal for setup instructions and configuration options.

AI Integration#

Extend the editor with generative AI capabilities for text-to-image generation, image enhancement, and intelligent editing features. CE.SDK integrates with various AI providers.

src/imgly/config/plugin.ts
import AIPlugin from '@imgly/plugin-ai-generation';


// Configure AI generation
await cesdk.addPlugin(
  AIPlugin({
    provider: 'your-ai-provider',
    apiKey: 'your-api-key',
  }),
);

See AI Integration for provider setup and supported AI features.

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/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
  • Design Presets – Pre-built design templates
  • Social Media Templates – Platform-specific sizing
  • And more – Check the repository for the latest additions

Key Capabilities#

The Video Editor includes everything needed for professional video editing.

Timeline Editing

Timeline Editing

Multi-track timeline with drag-and-drop clips, transitions, and precise trimming controls.

Visual Effects

Visual Effects

Apply filters, color grading, and visual effects to enhance your video content.

Text & Graphics

Text & Graphics

Add animated text, titles, and graphic overlays with comprehensive styling controls.

Audio Management

Audio Management

Add background music, voiceovers, and sound effects with volume and timing controls.

Asset Libraries

Asset Libraries

Access built-in collections of video clips, stickers, and graphics, plus import custom assets.

Video Export

Video Export

Export to MP4 format with customizable resolution, quality, and encoding settings.


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

Assets don’t appear#

  • Check network requests: Open DevTools Network tab and look for failed requests to cdn.img.ly
  • Self-host assets for production: See Serve Assets to host assets on your infrastructure

Export fails or produces blank video#

  • Wait for content to load: Ensure videos are fully loaded before exporting
  • Check CORS on videos: Remote videos must allow cross-origin access

Video export takes too long#

  • Reduce resolution: Lower output resolution significantly improves encoding speed
  • Shorten clip length: Longer videos take proportionally longer to encode
  • Check system resources: Video encoding is CPU-intensive; close other applications

Audio doesn’t play#

  • Check browser autoplay policies: Browsers require user interaction before playing audio
  • Verify audio format: Ensure audio files are in a supported format (MP3, WAV, AAC)

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#