Video Editor – IMG.LY Blog

Building a CapCut-Like Video Editor with CE.SDK and AI

Jan — Thu, 26 Feb 2026 22:50:34 GMT

Build this with AI in minutes

This tutorial is a great way to understand how CE.SDK works under the hood. But if you just want to get to the result, you can build this entire editor using IMG.LY Agent Skills, no manual setup required.

Install the skills, then run:

/cesdk:build Build a CapCut-like video editor with a dark theme, multi-track timeline, AI video/image/audio generation, background removal, and MP4 export.

Want to understand a specific concept in depth? Use /cesdk:explain, for example:

/cesdk:explain How does the video timeline and block hierarchy work?

Introduction

CapCut has set the standard for accessible video editing. Its dark UI, intuitive timeline, and AI-powered features make it feel like a professional tool that anyone can use. But what if you could build something similar embedded directly in your own web application in minutes? Yes, minutes!

In this tutorial, we’ll walk through how we built a CapCut-like video editor using IMG.LY’s CreativeEditor SDK (CE.SDK) for React. The finished editor includes:

A multi-track timeline for video, audio, text, and captions
Trim, split, and join operations on video clips
A CapCut-inspired dark theme built with CSS custom properties
AI video generation (text-to-video, image-to-video) via Minimax, Kling, and Pixverse
AI image generation (text-to-image, image editing) via RecraftV3, IdeogramV3, and GPT Image
AI audio generation (text-to-speech, sound effects) via ElevenLabs
AI text generation (copywriting, translation) via Anthropic Claude
Background removal — client-side, powered by WebAssembly/WebGPU
MP4 export directly from the browser

The entire editor is a single React component with roughly 180 lines of JavaScript and 100 lines of CSS.

Architecture Overview

CE.SDK has two main layers:

CreativeEngine: The headless core that manages scenes, blocks, assets, and rendering. It handles the video timeline, playback, and export entirely client-side.
CreativeEditor UI: A pre-built, customizable UI layer that wraps the engine with a dock, inspector, timeline, canvas, and navigation bar.

Plugins extend both layers. The AiApps plugin, for example, registers AI providers with the engine and injects UI components (dock buttons, canvas menu items, generation panels) into the editor.

Step 1: Project Setup

We scaffolded a React project with Vite and installed CE.SDK alongside the AI plugin packages:

npm create vite@latest capcut-like-editor -- --template react
cd capcut-like-editor
npm install

# Core SDK
npm install @cesdk/cesdk-js

# AI plugins
npm install @imgly/plugin-ai-apps-web
npm install @imgly/plugin-ai-video-generation-web
npm install @imgly/plugin-ai-image-generation-web
npm install @imgly/plugin-ai-audio-generation-web
npm install @imgly/plugin-ai-text-generation-web

# Background removal (runs locally via WASM/WebGPU)
npm install @imgly/plugin-background-removal-web onnxruntime-web@1.21.0

Why so many packages?

CE.SDK follows a modular plugin architecture. Each AI capability is a separate package with its own provider modules. This means you only bundle what you use if you don’t need audio generation, don’t install @imgly/plugin-ai-audio-generation-web. The @imgly/plugin-ai-apps-web package is the unifying layer that brings them all together into a single dock panel.

Step 2: The React Component

CE.SDK provides a first-class React wrapper via @cesdk/cesdk-js/react. The <CreativeEditor> component handles mounting, initialization, and cleanup:

import CreativeEditor from '@cesdk/cesdk-js/react';

const config = {
  // license: 'YOUR_CESDK_LICENSE_KEY',
};

const init = async (cesdk) => {
  // All setup happens here — theme, assets, plugins, UI customization
};

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

The config object is passed to the engine at creation time. The init callback fires once the cesdk instance is ready. This is where all our customization lives.

Pitfall: Silent init errors. The <CreativeEditor> component swallows errors thrown inside init. If something fails, the editor loads but appears broken with no console output. Always wrap init in a try/catch:

Step 3: Creating the Video Scene

A video editor needs three things at startup: asset sources, a video scene, and a timeline.

// Load built-in asset libraries (stickers, shapes, filters, typefaces, etc.)
await cesdk.addDefaultAssetSources();

// Load demo content (sample videos, images, audio) + enable upload slots
await cesdk.addDemoAssetSources({
  sceneMode: 'Video',
  withUploadAssetSources: true,
});

// Create a video scene with timeline
await cesdk.createVideoScene();

createVideoScene() sets up the scene hierarchy that powers the timeline:

Scene
 └── Page (represents the video canvas — 1920x1080 by default)
      ├── Track (video track — holds video clips in sequence)
      ├── Track (overlay track — text, stickers, images)
      ├── CaptionTrack (subtitles synced to playback)
      └── Audio (background music, voiceover, sound effects)

Each element on the timeline is a block with timing properties: timeOffset (when it appears) and duration (how long it plays). The engine handles rendering each frame, compositing layers, and synchronizing audio.

Browser support

Video editing relies on modern web codecs (WebCodecs API), which are available in Chromium-based browsers (Chrome, Edge, Brave). Safari and Firefox support is limited.

Step 4: The CapCut Dark Theme

CapCut’s visual identity is defined by its deep charcoal backgrounds, teal accent colors, and subtle elevation layers. CE.SDK’s theming system maps perfectly to this through CSS custom properties.

Setting the base theme

cesdk.ui.setTheme('dark');

This activates CE.SDK’s built-in dark theme. But we want to go further. We need CapCut’s specific color palette.

Custom CSS overrides

CE.SDK scopes all its UI under .ubq-public with data-ubq-theme and data-ubq-scale attributes. We override the CSS custom properties to inject our palette:

.ubq-public[data-ubq-theme='dark'][data-ubq-scale='normal'],
.ubq-public[data-ubq-theme='dark'][data-ubq-scale='modern'] {
  /* Deep charcoal backgrounds — darker than CE.SDK's default dark */
  --ubq-canvas: hsl(220, 15%, 8%) !important;
  --ubq-elevation-1: hsl(220, 13%, 12%) !important;
  --ubq-elevation-2: hsl(220, 12%, 15%) !important;
  --ubq-elevation-3: hsl(220, 10%, 18%) !important;

  /* High-contrast white text */
  --ubq-foreground-default: hsla(0, 0%, 100%, 0.92) !important;
  --ubq-foreground-light: hsla(0, 0%, 100%, 0.55) !important;

  /* CapCut's signature teal/cyan accent */
  --ubq-interactive-accent-default: hsl(190, 85%, 48%) !important;
  --ubq-interactive-accent-hover: hsl(190, 85%, 42%) !important;
  --ubq-interactive-accent-pressed: hsl(190, 85%, 36%) !important;

  /* Subtle borders — barely visible, like CapCut */
  --ubq-border-default: hsla(0, 0%, 100%, 0.08) !important;
}

The key design decisions:

Property	Value	Why
`--ubq-canvas`	`hsl(220, 15%, 8%)`	Near-black with a slight blue tint — matches CapCut’s canvas area
`--ubq-elevation-1/2/3`	12% → 15% → 18% lightness	Subtle elevation steps create depth without harsh contrast
`--ubq-interactive-accent-*`	`hsl(190, 85%, 48%)`	CapCut’s teal — used for buttons, selections, and progress bars
`--ubq-border-default`	8% opacity white	Nearly invisible borders that only appear on close inspection

Responsive scale

We also configure responsive scaling so the editor adapts to touch devices:

cesdk.ui.setScale(({ containerWidth, isTouch }) => {
  if ((containerWidth && containerWidth < 768) || isTouch) {
    return 'large'; // Bigger touch targets on small/touch screens
  }
  return 'normal'; // Standard desktop sizing
});

Step 5: AI Plugin Integration

This is where the editor transforms from a basic video tool into something that feels like CapCut’s AI-powered experience. CE.SDK’s plugin system lets us add all AI capabilities through a single unified AiApps plugin.

The unified AiApps approach

Instead of registering each AI plugin separately, @imgly/plugin-ai-apps-web provides a single entry point:

import AiApps from '@imgly/plugin-ai-apps-web';
import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai';
import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai';
import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai';
import Elevenlabs from '@imgly/plugin-ai-audio-generation-web/elevenlabs';
import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic';

await cesdk.addPlugin(
  AiApps({
    dryRun: true, // Simulate for development — no API calls
    providers: {
      text2text: Anthropic.AnthropicProvider({ proxyUrl: PROXY_URL }),
      text2image: [FalAiImage.RecraftV3({ proxyUrl }) /* ... */],
      image2image: [FalAiImage.GeminiFlashEdit({ proxyUrl }) /* ... */],
      text2video: [FalAiVideo.MinimaxVideo01Live({ proxyUrl }) /* ... */],
      image2video: [
        FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl }) /* ... */,
      ],
      text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl }),
      text2sound: Elevenlabs.ElevenSoundEffects({ proxyUrl }),
    },
  })
);

Provider categories explained

Category	What it does	Models we configured
`text2text`	AI copywriting — improve text, translate, change tone	Anthropic Claude
`text2image`	Generate images from text prompts	RecraftV3, IdeogramV3, GPT Image
`image2image`	Transform existing images with AI	Gemini Flash Edit, GPT Image
`text2video`	Generate video clips from text descriptions	Minimax Video, Kling Video, Pixverse
`image2video`	Animate a static image into video	Minimax Video, Kling Video
`text2speech`	Convert text to spoken audio with voice selection	ElevenLabs Multilingual V2
`text2sound`	Generate sound effects from text	ElevenLabs Sound Effects

When multiple providers are configured in an array (like text2image), the UI automatically shows a provider/model selection dropdown so users can choose which AI model to use.

The proxy server requirement

Every provider takes a proxyUrl parameter. This is critical for production:

Browser  →  Your Proxy Server  →  AI Provider (fal.ai, ElevenLabs, etc.)
                ↑
          Injects API keys
          server-side

Your API keys should never be in client-side code. The proxy server receives requests from CE.SDK, attaches your API key, and forwards to the AI provider. During development, dryRun: true simulates generation without any API calls.

Background removal

Background removal is a separate plugin because it runs entirely client-side, no proxy needed:

import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';

await cesdk.addPlugin(
  BackgroundRemovalPlugin({
    ui: { locations: ['canvasMenu'] },
  })
);

This uses ONNX Runtime (WebAssembly + WebGPU) to run an AI segmentation model directly in the browser. The first run downloads ~40MB of model weights, which are then cached. Select any image on the canvas and click “Remove Background” in the context menu.

Step 6: UI Customization with the Component Order API

CE.SDK’s UI is built from five customizable areas: Dock, Inspector Bar, Canvas Menu, Navigation Bar, and Canvas Bar. The Component Order API lets us insert, remove, and reorder components in each area.

Adding the AI button to the dock

We want the AI Apps button to be the first thing users see in the dock:

cesdk.ui.insertOrderComponent(
  { in: 'ly.img.dock', position: 'start' },
  'ly.img.ai.apps.dock'
);

insertOrderComponent takes a location specifier and the component(s) to insert. position: 'start' puts it at the top of the dock. Alternative positions include 'end', a numeric index, or relative placement with before/after matchers.

When a user selects a text or image block and right-clicks, we want AI options available:

cesdk.ui.insertOrderComponent({ in: 'ly.img.canvas.menu', position: 'start' }, [
  'ly.img.ai.text.canvasMenu',
  'ly.img.ai.image.canvasMenu',
]);

Passing an array inserts multiple components at once.

We add an Export button with a real click handler that triggers MP4 export:

cesdk.ui.insertOrderComponent(
  { in: 'ly.img.navigation.bar', position: 'end' },
  {
    id: 'ly.img.action.navigationBar',
    key: 'export',
    label: 'Export',
    icon: '@imgly/Download',
    onClick: async () => {
      const engine = cesdk.engine;
      const page = engine.block.findByType('page')[0];
      if (page) {
        const blob = await engine.block.exportVideo(page, {
          mimeType: 'video/mp4',
        });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'video.mp4';
        a.click();
        URL.revokeObjectURL(url);
      }
    },
  }
);

The exportVideo method renders every frame of the timeline (compositing video tracks, overlays, text, captions, and audio) into an MP4 blob entirely in the browser.

Step 7: Wiring Generated Audio into the Asset Library

AI-generated audio (speech and sound effects) is stored in provider-specific history sources. To make this audio browsable alongside regular audio assets, we inject the history source into the audio asset library entry:

const audioEntry = cesdk.ui.getAssetLibraryEntry('ly.img.audio');
if (audioEntry != null) {
  const existingSourceIds = Array.isArray(audioEntry.sourceIds)
    ? audioEntry.sourceIds
    : audioEntry.sourceIds({});
  cesdk.ui.updateAssetLibraryEntry('ly.img.audio', {
    sourceIds: [...existingSourceIds, 'ly.img.ai.audio-generation.history'],
  });
}

Now when users open the Audio panel in the dock, they’ll see their AI-generated audio alongside the sample library.

Step 8: Custom Labels with i18n

CE.SDK’s i18n system lets us customize any UI string. We used it to make the AI prompt fields more inviting:

cesdk.i18n.setTranslations({
  en: {
    'ly.img.plugin-ai-video-generation-web.fal-ai/minimax/video-01-live.property.prompt':
      'Describe your video...',
    'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.prompt':
      'Describe your image...',
  },
});

Translation keys follow the pattern {plugin-id}.{provider-id}.property.{field}. You can also add multi-language support by including keys for de, fr, es, etc.

The Complete File Structure

capcut-like-editor/
├── src/
│   ├── App.jsx              # Root — imports VideoEditor + theme CSS
│   ├── VideoEditor.jsx      # The entire editor (single component, ~180 lines)
│   ├── capcut-theme.css     # CapCut dark theme overrides (~100 lines)
│   ├── index.css            # Global reset (margin/padding/overflow)
│   └── main.jsx             # React entry point
├── index.html
├── package.json
└── vite.config.js

That’s it. The entire CapCut-like editor is three files: one React component, one CSS file, and a thin App wrapper.

What We Get Out of the Box

Because CE.SDK’s video UI is pre-built, we didn’t write any code for these features. They come from createVideoScene() and the default UI:

Multi-track timeline with drag-to-reorder, drag-to-resize
Trim and split — drag clip edges or use the split tool
Join and arrange — drag clips between tracks
Transform — crop, flip, rotate via the inspector
Playback controls — play, pause, seek, scrub
Text overlays — add styled text with the text tool
Stickers and graphics — from the asset library
Filters and effects — LUT-based color grading
Undo/redo — full history stack
Zoom and pan — standard canvas navigation

The AI plugins add their own UI components (dock buttons, generation panels, context menu items) through the plugin system. We just positioned them where we wanted.

Going to Production

To take this from a prototype to production, you need three things:

1. License key

Get a free trial key at https://img.ly/forms/contact-sales/ and set it in the config (yes, if you want to ship to production you’ll have to talk to our lovely colleagues in sales):

const config = {
  license: 'YOUR_CESDK_LICENSE_KEY',
};

2. Proxy server

Set up a server that forwards AI requests with your API keys:

const PROXY_URL = 'https://your-server.com/api/ai-proxy';

See the CE.SDK Proxy Server guide for Express.js and other server examples.

3. Disable dry run

Remove dryRun: true from the AiApps configuration to enable real AI generation.

Key Takeaways

CE.SDK does the heavy lifting. The timeline, playback, rendering, and export are all handled by the engine. We wrote zero video processing code.
The plugin system is powerful. Six AI capabilities were added with a single addPlugin(AiApps({ ... })) call. Background removal was one more call.
CSS custom properties make theming painless. We matched CapCut’s aesthetic by overriding ~25 CSS variables. No forking, no patching.
The Component Order API is the customization backbone. insertOrderComponent with position-based placement is the cleanest pattern for adding UI elements.
Wrap init in try/catch. CE.SDK’s <CreativeEditor> swallows errors silently. This is the single most important debugging tip.
Pin your package versions. All @imgly/* plugins must match the @cesdk/cesdk-js version exactly. A version mismatch (like 1.68 vs 1.69) will cause peer dependency conflicts.

Resources

Best Video SDKs for Mobile Applications: A Comprehensive Comparison for Developers

Klaudia — Tue, 02 Dec 2025 14:54:37 GMT

If you’re building a mobile app that needs video editing capabilities, you’re facing a tough decision: should you integrate a commercial SDK, work with open-source tools, or try to build something yourself?

Video editing on mobile isn’t just hard, it’s complex in ways that surprise even experienced developers. You’re dealing with device fragmentation, battery constraints, memory management, and user expectations shaped by apps like TikTok and CapCut. And unlike web apps, mobile video editing requires native performance optimization to feel responsive.

In this article, we’ll compare the most popular video SDK options for mobile applications: IMG.LY, Banuba, Meishe, BytePlus, FFmpeg, and GStreamer and show you how they stack up across features, platforms, integration complexity, and pricing. We’ll be honest about where each solution shines and where you’ll hit roadblocks.

We’ll also dig into what it actually takes to build with each option: difficulty of integration, performance considerations, and what happens when you need to scale beyond a prototype.

The Challenge: Building Video Editing Into Mobile Apps

Before diving into specific SDKs, let’s talk about why video editing on mobile is uniquely challenging.

Processing Power vs Battery Life

Video processing is resource-intensive. Every frame you manipulate (trimming, filtering, compositing, exporting) requires significant CPU and GPU work. On mobile devices, this creates a constant tension between delivering fast performance and not draining your user’s battery in minutes. Approximately 60% of battery usage in media apps comes from data transmission and processing. If you’re not careful with how you handle encoding, memory management, and background processes, your app will get uninstalled fast.

Device Fragmentation

Unlike web apps where you can control the environment, mobile apps run on thousands of device configurations. An iPhone 15 Pro handles 4K video editing effortlessly; a three-year-old Android phone might struggle with 1080p. You need to account for different chipsets, GPU capabilities, screen sizes, and OS versions, all while maintaining consistent UX.

User Expectations Are Higher Than Ever

Users expect mobile video editors to feel as responsive as native camera apps. They want real-time preview, smooth timeline scrubbing, instant filter application, and fast exports. Anything that feels sluggish or unpolished gets compared unfavorably to TikTok, Instagram, or CapCut (apps with massive engineering teams and years of optimization work).

Building this level of polish from scratch is a multi-month (or multi-year) undertaking. That’s why most teams reach for an SDK.

Understanding Video SDK Options

The video SDK landscape breaks down into three broad categories:

Commercial SDKs (IMG.LY Banuba, Meishe, BytePlus) provide pre-built editors with UI components, effects libraries, and dedicated support. They’re designed to integrate quickly but come with licensing costs.

Open-source frameworks (FFmpeg, GStreamer) give you powerful processing engines but no UI, no templates, and no hand-holding. You’ll need to build everything user-facing yourself.

Hybrid approaches combine open-source processing with custom UI development, giving you flexibility at the cost of significant engineering time.

When evaluating options, consider:

Do you need a user-facing editor or just backend processing?
How important is cross-platform consistency?
What’s your timeline and team size?
What happens when you need to scale or add new features?

Now let’s break down each solution.

1. IMG.LY CE.SDK (The Complete Solution)

IMG.LY CreativeEditor SDK is an enterprise-grade video editing solution built for teams that need production-ready editing features, cross-platform consistency, and automation, without spending months building and maintaining a custom solution.

Unlike processing libraries (FFmpeg, GStreamer) or social-first SDKs (Banuba, BytePlus), IMG.LY provides both interactive editing and server-side automation in one platform. You can embed the SDK for user-facing editing and use the same engine for headless creative automation on your backend.

Core Capabilities

IMG.LY delivers a complete video editing platform with timeline-based editing, design tools, and AI features:

Timeline-Based Editing:

Arrange videos on multi-track timelines
Trim, crop, and adjust duration
Merge videos and create collages
Audio overlay and mixing
Layer management and compositing

Creative Tools:

60+ filters and effects
Adjustments (brightness, contrast, saturation, exposure)
Text design with custom fonts and styles
Dynamic stickers and overlays
Frames with multiple blend modes

Template System:

Design templates with text variables and placeholders
Lockable elements for brand consistency
Automated variation generation
Server-side rendering for mass personalization

AI & Automation:

Native AI features: video generation, captions, voiceovers, thumbnails
Model-agnostic plugin system (integrate any AI model or API)
Background removal and style transfer
Smart filters and enhancements

Customization Framework:

Headless API for completely custom interfaces
Theming to match your brand
Toolbar configuration and element positioning
Multi-language localization
External asset library integration (Getty Images, Soundstripe)

Platform Support

Web: JavaScript, React, Angular, Vue.js, Svelte, Next.js
Mobile: Android (Kotlin/Java), iOS (Swift), React Native, Flutter
Desktop: macOS, Mac Catalyst, Electron
Server: Node.js for backend automation

Technical Architecture

Client-side encoding means fast editing operations run directly on devices without requiring backend infrastructure. This cuts bandwidth, reduces upload times for users, and eliminates server costs for standard editing.

Server-side rendering enables creative automation at scale, design templates once, generate thousands of variations programmatically from any data source with 100% consistent rendering.

Ideal Use Cases

Social media creation: In-app video recording with dual-camera support, advanced audio overlays, and real-time effects
Template-based workflows: Automate video creation for marketing materials, product videos, social media ads
Enterprise automation: Server-side rendering for high-volume ad generation, creative pipelines, mass personalization
E-commerce: Product video creation, user-generated content, personalized demos
SaaS platforms: In-app video editing for user-generated content, brand-controlled templates

Real Customer Examples

Social Media & Content Creation:

Mobile apps use IMG.LY SDK for in-app video recording with dual-camera support, allowing creators to capture picture-in-picture content directly
Advanced audio overlay features enable users to mix music tracks, voiceovers, and original audio in real-time
Real-time effects and filters provide instant creative feedback during recording and editing

Template-Based Video Production:

Marketing teams design video templates once and generate thousands of personalized variations programmatically using server-side rendering
E-commerce platforms automate product video creation by mapping product data to video templates, producing consistent branded content at scale
Brand teams create locked templates with variable elements, ensuring on-brand output while allowing distributed teams to customize messaging

Enterprise Creative Automation:

Ad platforms use CE.SDK’s Node.js capabilities for high-volume programmatic video generation, creating thousands of ad variations from single templates
DAM systems integrate IMG.LY for in-workflow video editing, allowing teams to make quick adjustments without leaving their asset management platform
Publishing platforms automate social media content by rendering video templates with dynamic data feeds, producing daily content without manual editing

500+ million creations per month powered by IMG.LY’s video editing and automation infrastructure across 600+ customers

Limitations

Paid solution. Unlike open-source frameworks, CE.SDK requires an enterprise license. This makes it less accessible for hobby projects or very early-stage prototypes, but the investment pays off in reduced development time, ongoing support, and scalability.

Enterprise-focused. The SDK is built for teams that need reliability, support, and scale. If you’re building a quick prototype or low-traffic app, open-source tools might be more cost-effective initially (though you’ll pay in engineering time).

Pricing / Licensing

Custom enterprise licensing based on platform, features, and usage
Dedicated support included: onboarding, SLAs, regular updates
Integration time: Most teams have a working editor in hours, not weeks

Who It’s For

Businesses that need a complete, production-ready video editing solution with cross-platform support, automation capabilities, enterprise scalability, and ongoing support. Teams that want to ship faster and focus on their unique product features rather than rebuilding video editing infrastructure.

Why IMG.LY SDK Stands Out

While other SDKs focus on either interactive editing (Banuba, BytePlus) or backend processing (FFmpeg, GStreamer), IMG.LY is the only solution that combines:

Cross-platform video editing (Web, iOS, Android, React Native, Flutter, Node.js)
Polished editor UI with complete customization options
Template system with server-side automation
AI-powered creative features
Dual-purpose architecture (client-side editing + server-side rendering)
Enterprise-grade scalability and dedicated support

If you’re evaluating other SDKs, ask yourself: how much engineering time will you spend building, maintaining, and scaling a custom solution? Our SDK eliminates that overhead so your team can focus on what makes your product unique.

2. Meishe SDK

Meishe is a Chinese video editing SDK provider with a comprehensive suite covering video editing, beauty filters, short video creation, and audio processing. They’re particularly strong in the Asian market and have been adopted by major platforms like Bilibili, OPPO, Xiaomi, and Himalaya.

Core Capabilities

Meishe offers film and television-level processing capabilities with a focus on high-quality output:

Video Editing Features:

Real-time preview through LiveWindow (preview effects during editing without pre-processing)
Support for multiple file formats with input up to 4K
Video output up to 1080P with configurable quality levels (1080P, 720P, 480P)
Unlimited audio track editing with multi-segment support
Transition effects between clips with customization options

Creative Tools:

Real-time skin beautification with adjustable parameters
Animation stickers with customizable properties
Special effects filters
Full-link HDR support
Professional video/audio editing with free function combination

Technical Details:

4K shooting capability
Real-time special effects processing
Full-link HDR processing
Professional-grade video and audio editing

Platform Support

Native: iOS, Android
Cross-Platform: Flutter (with unified display across platforms)

Ideal Use Cases

Enterprise applications requiring 4K video support
Professional video editing apps
Social media platforms (especially in Asian markets)
Streaming and content creation apps
Apps requiring HDR video processing

Limitations

Documentation primarily in Chinese. While Meishe has English documentation, many resources and examples are primarily available in Chinese, which can create barriers for Western development teams.

Less Western market presence. Most case studies and customer examples are from Chinese companies, which can make it harder to assess fit for Western markets.

Customization complexity. Getting deep customization may require more direct engagement with Meishe’s team compared to more self-service SDKs.

Pricing / Licensing

Pricing information is not publicly available. You’ll need to contact Meishe directly for quotes. This is common for enterprise-focused SDKs but can slow down evaluation.

Who It’s For

Development teams (especially in Asian markets) building professional-grade video editing apps that need 4K support, HDR processing, and advanced real-time capabilities.

How it compares to IMG.LY

Meishe offers strong professional-grade video processing with 4K and HDR support, particularly well-suited for Asian markets. IMG.LY provides similar 4K capabilities but adds cross-platform consistency (including web and server), template-driven automation, and a more developer-friendly integration experience for global teams. Meishe’s documentation is primarily in Chinese, while IMG.LY offers comprehensive English documentation and Western market support. If you’re building for Asian markets with HDR requirements, Meishe is a strong choice. For global deployment with automation needs, IMG.LY’s unified platform across client and server offers broader flexibility.

3. BytePlus Video Editor SDK

BytePlus Video Editor SDK comes from ByteDance (the company behind TikTok and CapCut). It’s designed to replicate the short-form, social-first editing experience that made those platforms successful, giving app developers similar workflows and effects libraries.

Core Capabilities

BytePlus provides three main feature sets built around social media video creation:

Camera Feature:

Real-time video capture and recording
4K video recording on any mobile device
Live filters and live beauty filters during capture

Preview Editor Feature:

Video editing and composition tools
More than 80,000 effects and filters
AR stickers and visual enhancements

Track Editor Feature:

Advanced multi-track timeline editing
Speed change effects
Transitions and audio features
Multi-layer composition

Export Options:

Support for 540p, 720p, 1080p, 4K resolutions
Frame rates: 25fps, 30fps, 50fps, 60fps

Platform Support

Native: iOS (Cocoapods, SPM, Objective-C, SwiftUI), Android (Gradle, Java, Jetpack Compose)
Cross-Platform: React Native, Flutter
Magic Template SDK: Available for both platforms

Ideal Use Cases

Social media apps focused on user-generated content
Short-form video platforms
Apps that want TikTok-like editing workflows
Content creation tools with extensive effects libraries
Apps requiring machine learning-powered visual enhancements

Limitations

Effects and beauty features are separate. The standard and lite versions of the SDK don’t include Camera props, filters, and beauty effects. You need to purchase those separately, which can complicate pricing and integration.

Customization beyond theming is limited. While you can match the SDK to your brand through theming, deeper UI customization requires more effort compared to headless SDKs.

Annual licensing only. The SDK operates on an annual subscription basis, which may not work for all business models or early-stage products.

Pricing / Licensing

Annual subscription: License valid for 1 year covering both iOS and Android
Contact sales for pricing details
Integration time: Estimated 2 weeks per platform (iOS & Android) for one developer
Customization may extend integration timeline

Who It’s For

Teams building social media-style video apps that want to replicate TikTok’s editing experience, especially if you need access to a massive effects library and ByteDance’s proven video editing architecture.

How it compares to IMG.LY

BytePlus brings TikTok’s proven social video editing architecture with 80,000+ effects and filters, making it ideal for replicating short-form social experiences. IMG.LY takes a different approach: instead of a massive pre-built effects library, it focuses on customization, templates, and automation. BytePlus excels at client-side social video creation with extensive effects; IMG.LY excels at template-driven workflows, server-side automation, and cross-platform consistency (including web and Node.js). If you want TikTok-like effects out of the box, BytePlus delivers. If you need creative automation, programmatic content generation, or want to build custom workflows with full control over the editing experience, IMG.LY offers more flexibility and a dual-purpose architecture.

4. Banuba Video Editor SDK

Banuba is a commercial video editing SDK focused on social media apps, with a strong emphasis on AR effects and beauty filters. It’s designed for teams building TikTok-like experiences or apps where user-generated video content is central to the product.

Core Capabilities

Banuba provides a full-featured video editor with AI-powered tools and creative effects:

Video Editing Features:

Picture-in-picture for multi-video layouts
AI-powered clipping that detects important segments
Customizable templates with replaceable elements
Trimming, merging, and timeline-based editing
AI-generated captions (English, Mandarin, Spanish, Portuguese)

Creative Tools:

Face AR masks with morphing effects and animated backgrounds
Video and transition effects (including “Rave” and “Cathode Flash”)
Audio editing with recording and mixing
Text and GIF overlays
Beauty effects (skin smoothing, teeth whitening)
Voice-change effects (Elf, Robot, Squirrel, Giant, Echo, Baritone)

Technical Details:

AI algorithms work offline: all processing happens on the device
No user content transmitted to servers
Requires OpenGL ES 3.0 minimum (3.1 for GPU-accelerated neural networks)

Platform Support

Native: iOS 15.0+, Android 6.0+
Cross-Platform: React Native, Flutter, NativeScript

Ideal Use Cases

Social media applications with AR filters
Photo/video editing apps for content creators
E-commerce platforms with video demos
Lifestyle and educational apps
Short-form video content creation

Limitations

Pricing complexity. Banuba’s pricing is custom and depends on platform, features, custom development, and payment terms. You’ll need to contact sales for accurate quotes, which can slow down evaluation.

AR licensing. Face AR features are optional and may require separate licensing, adding complexity to your commercial agreement.

Heavy focus on AR. If you don’t need beauty filters or AR masks, you’re paying for features you won’t use.

Pricing / Licensing

Free trial: 14 days with all features
Commercial: Custom pricing based on platform, features, and usage
Priced per platform per month

Who It’s For

Teams building social media apps or content creation tools that need AR effects, beauty filters, and TikTok-like creative features out of the box.

How it compares to IMG.LY

Banuba excels at AR effects and beauty filters for social media apps, while IMG.LY focuses on template-based workflows and cross-platform automation. If you need face masks and beauty effects, Banuba is purpose-built for that. But if you need server-side rendering, creative automation, or want the same editing engine across web, mobile, and backend, IMG.LY provides broader platform coverage and a dual-purpose architecture. Banuba is optimized for client-side social video creation; IMG.LY handles both interactive editing and programmatic content generation at scale.

5. FFmpeg (via FFmpegKit)

FFmpeg is the industry-standard open-source tool for video processing. It’s not a video SDK in the traditional sense. It’s a command-line tool and set of libraries that handle encoding, decoding, transcoding, filtering, and nearly every video operation imaginable.

FFmpegKit is a wrapper that makes FFmpeg accessible on mobile platforms (Android, iOS, React Native, Flutter) through platform-specific APIs. It’s the primary way developers integrate FFmpeg into mobile apps.

Core Capabilities

FFmpeg handles the entire video processing pipeline:

Video Operations:

Encoding and decoding (every codec imaginable)
Format conversion (MP4, MOV, AVI, MKV, WebM, etc.)
Trimming, cutting, merging, splitting
Filtering and effects
Subtitle burning
Video stabilization
Audio extraction and mixing

Technical Features:

Command-line interface (via wrapper APIs)
Support for hardware acceleration
Concurrent command execution
Extensive codec library
Professional-grade output quality

Platform Support

Native: Android (Java API), iOS (Objective-C API), Linux (C++ API), macOS, tvOS
Cross-Platform: Flutter (Dart API), React Native (JavaScript API with TypeScript definitions)
Eight prebuilt packages: Distributed via Maven Central, CocoaPods, pub, npm

Ideal Use Cases

Backend video processing and transcoding
Format conversion at scale
Apps that need specific codec support
Video compression and optimization
Building custom video processing pipelines
Server-side automation

Limitations

No UI whatsoever. FFmpeg is a processing engine. If you want users to interact with video (timelines, filters, previews), you’ll need to build the entire interface yourself from scratch.

Steep learning curve. FFmpeg’s command-line syntax is powerful but complex. Even simple tasks require understanding flags, options, and codec parameters.

GPL licensing complexity. While FFmpegKit itself is LGPL v3.0, including GPL-licensed libraries makes the entire bundle GPL v3.0, which has implications for commercial apps.

FFmpegKit has been officially retired. As of June 2025, FFmpegKit is no longer maintained. Community-maintained forks exist, but official support is ending.

Pricing / Licensing

Free and open-source: LGPL v3.0 for FFmpegKit library
GPL v3.0 when GPL-licensed libraries are included
Licensing depends on which codecs and libraries you bundle

Who It’s For

Developers who need powerful backend video processing, format conversion, or transcoding, and are willing to build all user-facing features themselves. Not suitable for teams that need a ready-to-use editor.

How it compares to IMG.LY

FFmpeg is a processing engine, not an editing SDK. It handles transcoding, format conversion, and video manipulation via command-line operations, but provides no UI, no templates, and no interactive editing components. IMG.LY includes a production-ready editor, template system, and user-facing tools out of the box, while also supporting server-side automation through Node.js. If you only need backend processing and are building all UI yourself, FFmpeg (via community forks) can work. If you need both interactive editing and automation, IMG.LY eliminates months of development by providing both in one platform. IMG.LY also avoids GPL licensing complications and the uncertainty of using a retired library with community forks.

6. GStreamer (with GStreamer Editing Services)

GStreamer is a mature open-source multimedia framework used across Linux, Android, iOS, Windows, and macOS. It’s designed for building media applications (streaming, playback, recording, and non-linear editing) with a plugin-based architecture that makes it extremely flexible.

GStreamer Editing Services (GES) is a higher-level library built on top of GStreamer to simplify video editing application development. It was originally funded by Nokia for mobile video editing (“video editing in your pocket”).

Core Capabilities

GStreamer provides the foundation for building multimedia applications:

Core Features:

Audio and video playback, recording, streaming
Non-linear editing capabilities via GES
Extensive plugin library (encoders, decoders, filters)
Hardware acceleration support
Low-latency streaming (RTSP, WebRTC)
Support for diverse codecs and formats

GStreamer Editing Services:

High-level API for creating editing applications
Timeline-based editing
Transition effects
Audio mixing
Asset management

Performance Optimizations:

Offloading work to specialized hardware (DSPs, GPUs)
Low power consumption for embedded processors
Support for ARM, MIPS, SPARC architectures

Platform Support

Cross-Platform: Linux, Android, iOS, Windows, macOS
Language Bindings: C++ (primary), Python, Java, JavaScript
Mobile: Official SDK binaries for Android and iOS

Ideal Use Cases

Custom video editing apps requiring deep control
Streaming applications (RTSP, WebRTC)
Media players and recording apps
Research and academic projects
Embedded systems and IoT devices
Apps requiring specialized codec support

Limitations

Steep learning curve. GStreamer’s plugin-based architecture is powerful but complex. Understanding pipelines, bins, and element linking takes time even for experienced developers.

No pre-built UI. GES provides editing APIs, but you’ll need to build the entire interface yourself. This means designing everything: timelines, playback controls, effect panels, and export dialogs.

Limited mobile-specific examples. While GStreamer officially supports iOS and Android, production-ready mobile editing examples are scarce. You’ll be pioneering integration patterns yourself.

Integration complexity. Getting GStreamer running on mobile requires compiling binaries, managing dependencies, and debugging platform-specific issues. This isn’t a “drop in and go” integration.

Pricing / Licensing

Free and open-source: LGPL license
GStreamer Editing Services included in main distribution
No commercial support by default, but third-party companies (like Fluendo) offer commercial support and custom development

Who It’s For

Teams with strong multimedia engineering expertise who need deep control over video processing and are willing to build everything from the ground up. Not suitable for teams that need fast time-to-market or lack video processing experience.

How it compares to IMG.LY

GStreamer provides powerful low-level control over multimedia processing through its plugin-based architecture, making it ideal for specialized use cases like streaming, embedded systems, or custom pipelines. IMG.LY provides a higher-level, production-ready solution with UI components, templates, and automation built in. GStreamer requires significant expertise and months of development to build user-facing features; IMG.LY offers a working editor in hours with customization options that don’t require multimedia engineering expertise. If you need deep control over codecs, streaming protocols, or embedded deployment, GStreamer’s flexibility is unmatched. If you need to ship a production-ready video editor quickly with cross-platform support and automation capabilities, IMG.LY eliminates the complexity and provides enterprise support.

Comparison Table: Video SDKs for Mobile Applications

Feature / SDK	Banuba	Meishe	BytePlus	FFmpeg	GStreamer	IMG.LY SDK
Platform Support	iOS 15+, Android 6+, React Native, Flutter, NativeScript	iOS, Android, Flutter	iOS, Android, React Native, Flutter	Android, iOS, React Native, Flutter, Linux, macOS	Linux, Android, iOS, Windows, macOS	Web, iOS, Android, React Native, Flutter, Desktop, Node.js
UI Included	✅ Pre-built editor	✅ Pre-built editor	✅ Pre-built editor	❌ Processing only	❌ GES provides APIs only	✅ Production-ready editor + Headless API
Timeline Editing	✅ Yes	✅ Yes	✅ Multi-track	❌ Command-line only	✅ Via GES	✅ Advanced multi-track
AR / Beauty Filters	✅ Strong focus	✅ Real-time beauty	✅ 80,000+ effects	❌ None	❌ None	✅ Filters + extensible AI plugins
Templates	✅ Customizable	⚠️ Limited info	✅ Magic Templates	❌ None	❌ None	✅ Advanced template system with variables
Server-Side Automation	❌ No	❌ No	❌ No	✅ CLI-based	✅ Possible but complex	✅ Native support (same engine)
AI Features	✅ AI clipping, captions	⚠️ Limited info	✅ ML-powered effects	❌ None	❌ None	✅ Native AI + model-agnostic plugins
4K Support	✅ Yes	✅ Up to 4K input	✅ 4K recording	✅ Yes	✅ Yes	✅ Yes
Customization Level	⚠️ UI/UX + optional API	⚠️ Requires team engagement	⚠️ Theming primarily	✅ Complete control	✅ Complete control	✅ Headless API + theming + UI config
Integration Complexity	⚠️ Moderate (GitHub samples)	⚠️ Moderate	⚠️ Moderate (~2 weeks)	⚠️ Complex (retired library)	⚠️ Very complex	✅ Simple (hours to integrate)
Documentation	✅ English, developer portal	⚠️ Primarily Chinese	✅ English, comprehensive	✅ Extensive community docs	✅ Extensive but complex	✅ Comprehensive with samples
Licensing / Pricing	Custom (free 14-day trial)	Contact for quote	Annual subscription	Free, LGPL/GPL	Free, LGPL	Enterprise license
Enterprise Support	⚠️ Custom agreements	⚠️ Direct engagement	⚠️ ByteDance support	❌ Community only	⚠️ Third-party (Fluendo)	✅ Dedicated support + SLAs
Best For	Social media apps with AR focus	Professional apps in Asian markets	TikTok-like social video apps	Backend processing / transcoding	Custom multimedia apps	Cross-platform editing + automation at scale

Making Your Decision: Which Video SDK Is Right for You?

Here’s the honest breakdown based on your use case:

Choose Banuba if:

You’re building a social media app and AR effects are central to your product
You need beauty filters, face masks, and creative effects out of the box
Your primary audience expects TikTok-style creative tools
You’re comfortable with custom pricing and optional feature licensing

Choose Meishe if:

You’re targeting Asian markets where Meishe has strong adoption
You need professional-grade 4K and HDR video processing
Real-time preview and film-quality output are critical
You have access to Chinese documentation resources or engineering support

Choose BytePlus if:

You want to replicate TikTok/CapCut’s editing experience
You need access to 80,000+ effects and filters
Machine learning-powered visual enhancements are important
You’re comfortable with annual licensing and want ByteDance’s proven architecture

Choose FFmpeg if:

You need backend video processing, transcoding, or format conversion
You’re building automation pipelines, not user-facing editors
You have strong video engineering expertise
You’re okay with command-line complexity and building all UI yourself
Be aware: FFmpegKit is officially retired; plan for community forks

Choose GStreamer if:

You need deep control over multimedia processing
You’re building custom streaming, playback, or editing applications
You have strong multimedia engineering expertise
You’re willing to invest significant time in integration and UI development
You need specialized codec support or embedded system deployment

Choose IMG.LY CE.SDK if:

You need both interactive editing and server-side automation
Cross-platform consistency is critical (Web, iOS, Android, React Native, Flutter)
You want a production-ready editor that integrates in hours, not months
Template-based workflows and creative automation are important
You need enterprise support, SLAs, and ongoing updates
Your team wants to focus on product features, not rebuilding video editing infrastructure

Build vs Buy: What’s the Real Cost?

Let’s be honest about the engineering investment required:

Building on FFmpeg or GStreamer:

Months to build a basic timeline editor with preview
Ongoing maintenance for device compatibility, codec updates, performance optimization
No UI components — you’re building everything from scratch
Scaling challenges when you need templates, automation, or new features

Commercial SDKs (Banuba, Meishe, BytePlus):

Days to weeks for basic integration
Pre-built UI and effects libraries
Dedicated support for troubleshooting
Licensing costs vary; evaluate based on your revenue model

IMG.LY SDK:

Hours to integrate a working editor
Production-ready UI with full customization
Dual-purpose: client-side editing + server-side automation
Template system and AI features included
Enterprise support and regular updates

Ask yourself:

What’s your timeline? If you need to ship in weeks, open-source frameworks won’t get you there.
What’s your team’s expertise? Video processing is complex; building from scratch requires specialized knowledge.
What happens when you scale? Adding templates, automation, or AI features to a custom-built solution takes months of additional work.

Commercial SDKs cost money upfront but save significant engineering time. Open-source tools are “free” but expensive in development hours and opportunity cost.

Conclusion: The Right SDK Depends on Your Goals

There’s no one-size-fits-all answer, but here’s the summary:

FFmpeg and GStreamer are powerful processing engines for developers who need backend automation or custom pipelines. They give you complete control but require significant expertise and offer no user-facing components. Great for transcoding, format conversion, and specialized workflows, but not for building interactive editors.

Banuba, Meishe, and BytePlus are excellent for social media apps that need AR effects, beauty filters, and TikTok-style editing. They provide pre-built editors with extensive effects libraries, but customization beyond theming can be limited, and they’re focused primarily on client-side editing (no server automation).

IMG.LY CE.SDK is the only solution that combines production-ready interactive editing with server-side creative automation. We provide cross-platform consistency, a complete template system, AI features, and enterprise support, all in one platform. Where other SDKs require you to choose between editing and automation, we give you both.

If you’re building an app where video editing is a core feature (not a side project), and you need to ship fast without compromising on quality or scalability, our SDK eliminates months of development work and ongoing maintenance headaches.

The real question isn’t “which SDK is cheapest?” It’s “how much engineering time will we spend building, maintaining, and scaling a custom solution, and what could we build instead if we had that time back?”

Ready to see what IMG.LY SDK can do? Explore our demos or get in touch to discuss your project.

Best Open Source Video Editor SDKs: 2026 Roundup

Vatsala — Mon, 10 Nov 2025 11:13:59 GMT

If you’ve ever tried building a video editing feature from scratch, you know how quickly things can get complicated. Codecs, pipelines, formats, integrations, and performance tuning all come into play.

That’s why developers often turn to open-source SDKs that make video processing more accessible and flexible.

In this guide, we’ll break down some of the most widely used open-source video SDKs, focusing on how easy these tools are to build with, their use cases, and who they’re best for. We’ll also look at where open-source flexibility meets its limits, and how commercial SDKs like IMG.LY can save you time and complexity when building production-ready video products.

1. FFmpeg

Let’s start the comparison with one of the most popular open source video editor SDKs. FFmpeg is a command-line multimedia framework that powers much of the modern video ecosystem. It supports everything from transcoding to advanced automation, making it one of the most widely adopted open-source solutions for video processing.

Features & capabilities: FFmpeg includes transcoding, filtering, cropping, resizing, overlaying, color grading, audio processing, and format conversion. Its flexibility comes from its powerful command-line interface, allowing developers to script nearly any video transformation task.
Platforms: The tool offers broad cross-platform compatibility, running natively on Windows, macOS, and Linux. Its portability allows it to integrate into a wide range of development environments.
Building difficulty & potential roadblocks: FFmpeg is quite difficult to learn and implement for beginners. It requires strong knowledge of scripting, codecs, and CLI-based workflows. Due to its steep learning curve, debugging complex filter chains can be time-consuming, and integrating it into GUI-based environments is also challenging. Developers must also navigate potential H.264 commercial licensing restrictions while using this tool.
Use Cases: FFmpeg is best suited for server-side batch processing, video pipelines, and automated transcoding. While it excels in backend automation, it lacks an interactive editor UI or cross-platform embedding.
Future-proofing, support & pricing: FFmpeg is a mature and stable project used across many industries for years, although its innovation is slow. Most developers using the tool rely on community forums and documentation for troubleshooting and setup help. It’s completely free and open-source, but encoding with certain codecs like H.264 may still require a separate commercial license.
Who it’s for: This video editor SDK is ideal for developers handling large-scale backend video processing or transcoding tasks. It’s powerful and reliable, but not beginner-friendly or suited for products needing a visual editing interface.

Comparison to IMG.LY

FFmpeg is purely backend and lacks an interactive editor or cross-platform embedding capabilities. However, it performs exceptionally well in large-scale automation pipelines, where speed, reliability, and format support are critical. IMG.LY CE.SDK, by contrast, gives you a fully embeddable video editor, UI components, and automation workflows in a unified SDK. All without the complexity of manual scripting.

Check out why IMG.LY is a great alternative to FFmpeg here.

2. MoviePy

The next open source video editor on the list is MoviePy. It’s a Python library for programmatic video editing. It allows developers to edit video through code, making it particularly useful for automated workflows or content prototyping.

Features & capabilities: It supports cutting, compositing, adding text overlays, transitions, and visual effects. Developers can use Python scripts to build video sequences and automate rendering.
Platforms: MoviePy works across all major platforms that support Python. It runs in standard Python environments without requiring extra setup, which makes it accessible for most developers.
Building difficulty & potential roadblocks: MoviePy is easier to use than FFmpeg, but still requires scripting. It’s suitable for Python developers for prototyping, but it can struggle with performance when handling large video files. Developers often face challenges with dependency management and the absence of a real-time UI.
Use cases: This tool is best for automated content generation, research, and rapid prototyping of video workflows. It’s ideal for proof-of-concept projects where scripting flexibility matters more than performance.
Future-proofing, support & pricing: MoviePy is actively maintained by its niche community of developers. While it serves a smaller user base compared to larger frameworks, its reliability and accessibility make it a consistent choice for Python-based video projects. You can find support through community documentation that explains most functions clearly. It’s free and open-source, which makes it especially appealing for experimentation, research, and smaller-scale automation setups.
Who its for: MoviePy is a great choice if you’re a Python developer wanting automation or experimental workflows. However, it’s not ideal for production-scale or interactive use cases due to performance limits and the absence of a UI.

Comparison to IMG.LY

MoviePy is designed for scripting and backend automation. It works best for creating short automated clips or experimental workflows where developers want full control through Python code.

IMG.LY CE.SDK goes beyond backend scripting by offering ready-to-embed editors, automation APIs, and full multi-platform support for web and mobile. This makes it a more complete choice if your team needs both automation and interactive editing within products.

3. OpenShot Library / MLT Framework

The OpenShot Library, built on the MLT Framework, is a C++/Python library for video compositing and timeline editing. It powers the OpenShot video editor and can be integrated into custom desktop applications.

Features & capabilities: It provides timeline editing, transitions, effects, and audio mixing. Developers can implement advanced video composition features similar to traditional desktop editors.
Platforms: The library is cross-platform, working reliably across major desktop operating systems, including Windows, macOS, and Linux. It can be integrated into various environments, which makes it useful if you’re building desktop editors or applications that require timeline-based video editing.
Building difficulty & potential roadblocks: The integration complexity is medium-high, as the API can be unstable, and managing dependencies can be difficult. Developers may also encounter documentation gaps, making it challenging to set up and maintain. Integrating the library into a GUI is not straightforward, and limited server-side automation means it is less suited for scalable or cloud-based workflows.
Use cases: OpenShot Library is suitable for you if you’re looking to build desktop-based editors, experimental timeline tools, or custom video composition applications.
Future-proofing, support & pricing: The framework is actively maintained and works well for desktop video editing applications. However, it is not designed for server-side automation or large-scale deployment. The support is community-driven, so the updates and fixes depend on volunteer contributions, which can affect long-term reliability for enterprise use. The framework is free and open-source, making it accessible to anyone looking to experiment or build lightweight video editing tools.
Who its for: OpenShot/MLT fits developers building desktop-focused editors who need timeline control but can manage API and dependency challenges. It’s less practical for cloud or mobile workflows.

Comparison to IMG.LY

While OpenShot/MLT excels in desktop-based timeline editing, it is better suited for applications that prioritize local processing and desktop workflows.

IMG.LY CE.SDK, on the other hand, offers embedded, cross-platform editors with built-in automation, making it a more versatile choice for SaaS and enterprise environments that need scalability, faster integration, and an intuitive editing experience for end users.

4. GStreamer

GStreamer is a multimedia framework for building video and audio pipelines. It’s a foundational tool in many streaming and broadcast systems and allows developers to create complex pipelines for capturing, processing, and outputting media in real time.

Features & capabilities: This open source video editor supports real-time processing, filters, and complex pipelines for media processing and streaming. Developers can construct customized processing chains for advanced workflows.
Platforms: GStreamer is cross-platform, supporting multiple programming languages with bindings for C, Python, Java, and Rust. You can run it on Windows, macOS, and Linux, and integrate it into both desktop and server environments. This makes it flexible for building diverse media workflows.
Building difficulty & potential roadblocks: Building with GStreamer is complex. It requires deep knowledge of pipelines and plugins, and debugging can be time-intensive. UI integration adds another layer of difficulty.
Use cases: Despite its building difficulty, developers use GStreamer for real-time video streaming, server-side processing, and for broadcast applications requiring precise control over data flow.
Future-proofing, support & pricing: GStreamer is mature and widely used in the media industry. It continues to be a reliable choice for building streaming and broadcast systems, but it requires significant development expertise to configure and maintain. Developers often rely on community resources for support, though some commercial assistance is available. It’s free and open-source, which makes it accessible for experimentation and custom media workflows.
Who it’s for: The tool is ideal for developers who need real-time video pipelines or streaming capabilities. But it may not be a fit for applications requiring easy embedding or interactive UIs.

Comparison to IMG.LY

GStreamer operates at the infrastructure level, ideal for backend media processing where you need precise control over data flow and performance. It gives you the flexibility to build custom video pipelines, but doing so requires significant technical effort and time.

IMG.LY provides a ready-to-embed, interactive editor with automation and multi-platform support, so you can focus on building user experiences rather than managing low-level media infrastructure.

5. Remotion

Remotion enables developers to create videos programmatically using React components. Developers can define video scenes, transitions, and animations directly in React. While it’s a flexible approach, building long or high-resolution videos can demand careful optimization to ensure smooth performance.

Features & capabilities: It supports timeline-based video composition, text overlays, animations, audio integration, and programmatic transitions, all rendered through React. Developers can create videos entirely with code, defining scenes and effects inside React components.
Platforms: Remotion is built for Node.js and browser-based environments via headless rendering. You can render videos directly in the browser or on a Node.js server, which gives developers flexibility in how they deploy and automate video creation.
Building difficulty & potential roadblocks: Building difficulty using Remotion is at a medium level because it requires React and JavaScript proficiency. The potential issues you might face while using this include debugging challenges with high-resolution or long-duration renders, along with limited server-side optimization that can affect scalability and performance.
Use cases: Remotion is well-suited for automated video generation, marketing content, and dynamic SaaS video templates. You can use it to create personalized videos or promotional content at scale, using data or user inputs to generate customized output.
Future-proofing, support & pricing: The tool is actively maintained and is built with a modern web stack using React and TypeScript, which ensures long-term stability and adaptability. You can find help through detailed documentation, GitHub issues, and an engaged developer community. While it doesn’t offer formal support, its open-source nature encourages collaboration and contributions that keep the framework improving. Like other tools we’ve discussed, this is also free and open-source, making it an accessible choice for developers exploring programmatic video creation.
Who it’s for: Based on its features and capabilities, it’s best for React developers who want to generate videos programmatically. However, it lacks an interactive editor and may not scale easily for enterprise automation.

Comparison to IMG.LY

Remotion excels in programmatic video creation, allowing you to build videos entirely through code with precision and flexibility. However, it lacks interactive editing tools or native SDKs that can be directly embedded into products.

IMG.LY CE.SDK, by comparison, gives you both automation capabilities and user-facing editors across platforms, helping teams build complete video experiences without maintaining separate systems. You can find more information on how IMG.LY compares to Remotion here.

6. IMG.LY CE.SDK

A commercial solution that offers enterprise-grade functionality and developer-friendly implementation.

IMG.LY CreativeEditor SDK is built for interactive video editing and automation. It gives developers the tools to build powerful, embeddable video editors without the complexity of starting from scratch. It balances the flexibility developers expect from open-source frameworks with the stability and support of a commercial-grade platform.

Features & capabilities: It includes timeline editing, multi-layer video composition, templates, AI-assisted editing, transitions, video export, and server-side automation. The SDK simplifies complex workflows by offering prebuilt editors and APIs for integration.
Platforms: Available on Web, iOS, Android, React Native, Flutter, Node.js, and Electron. This broad platform support allows developers to build consistent video editing experiences across desktop, mobile, and web environments. Whether you’re integrating into an existing app or launching a new product, the IMG.LY CE SDK ensures a unified editing interface and workflow across all platforms.
Building difficulty & potential roadblocks: Integration is straightforward, with minimal setup required, making it the easiest SDK to build with among all the tools we compared in this list. Most implementation effort lies in customizing workflows rather than solving technical barriers. This simplicity comes from well-documented APIs, prebuilt UI components, and consistent cross-platform behavior, which together reduce the development time. Potential roadblocks are minimal, allowing you to focus on building product features instead of managing infrastructure or compatibility issues.
Use cases: IMG.LY is best suited for SaaS apps, marketing automation, social content tools, and video personalization platforms that need seamless interactive editing.
Future-proofing, support & pricing: Frequent releases, an expanding AI roadmap, and a scalable engine ensure long-term reliability for developers and enterprises. You get access to dedicated onboarding engineers, solution architects, and enterprise SLAs that make implementation and scaling easier. Pricing follows a custom enterprise licensing model, offering flexibility for different business needs. But you can take a free trial to get started.
Who it’s for: IMG.LY is designed for companies that need scalable, interactive video editing and automation in one package. Its ideal for teams seeking low development overhead and enterprise-grade reliability.

Why IMG.LY stands out as the best open source video editor SDK

IMG.LY combines interactive editing, server-side automation, and multi-platform SDKs in one stack, giving you everything needed to build scalable, modern video products. You can create, edit, and automate workflows within the same ecosystem without relying on separate tools. None of the open-source options on this list deliver this level of integration and consistency across web, mobile, and desktop environments.

Check out how IMG.LY has helped over 600 innovative startups, government entities, and Fortune 500 companies to streamline their design, video, and photo editing workflows. Read our case studies here.

Overview table

Here’s a brief overview of all the video editor SDKs we’ve discussed to help you choose the right one.

Feature / Use Case	FFmpeg	MoviePy	OpenShot / MLT	GStreamer	Remotion	IMG.LY CE.SDK
Timeline editing	❌ No GUI timeline; timeline-like operations only possible via scripting in CLI.	⚠️ Timeline functionality simulated through Python scripts; suitable for small-scale projects.	✅ Native timeline-based video editing with GUI; library supports composition though GUI integration can be limited.	⚠️ Pipeline-centric; timeline must be assembled programmatically, no native GUI timeline.	✅ Timeline created programmatically using React components; no interactive GUI timeline.	✅ Full-featured interactive timeline, multi-layer support, drag-and-drop UI
Filters & Effects	✅ Supports CLI-based filters, overlays, color correction; requires manual configuration	✅ Python effects library; scripting needed to combine filters	✅ Built-in video effects and transitions; limited prebuilt UI	✅ Plugin-based filters; flexible but requires pipeline setup	✅ Animations, text overlays, audio effects via scripting; programmatic transitions	✅ AI-enhanced effects, transitions, multi-layer composition, background removal
Server-side automation	✅ Excellent for backend batch processing and transcoding; CLI automation is robust	✅ Python scripting enables automated content generation	⚠️ Limited server-side automation; mainly library-level	✅ Suitable for large-scale pipelines and streaming	✅ Automated video rendering via Node.js; works with server-side scripts	✅ Full automation APIs; combines server-side rendering + interactive editing in one SDK
Ease of embedding	❌ CLI only; difficult to embed in apps	⚠️ Python scripts can be integrated, but no GUI	⚠️ Library-only; integration requires custom UI	⚠️ Complex pipelines; requires deep development knowledge	⚠️ Node.js / headless browser integration possible; UI must be custom-built	✅ Ready-to-embed SDKs for Web, iOS, Android, React Native, Flutter; includes prebuilt editors
Difficulty building / integration	High — complex CLI usage, codec handling, and scripting required	Medium — Python knowledge required, scripting-intensive	Medium-High — API can be unstable, dependencies must be managed	High — pipeline setup and plugin management are challenging	Medium — React knowledge needed; performance optimization may be required	Low — SDK provides prebuilt editor components and APIs for easy integration
Potential roadblocks	CLI complexity, codec licensing (H.264), debugging pipelines, no GUI	Large videos may be slow, performance issues, dependency management	API instability, documentation gaps, integration with UI requires effort	Steep learning curve, pipeline debugging, plugin version conflicts	Rendering performance for long/high-resolution videos, debugging programmatic scripts	Minimal; most challenges relate to workflow decisions during integration
Cross-platform support	✅ Desktop/server; Windows, macOS, Linux	✅ Desktop/server; cross-platform Python	✅ Desktop/server; cross-platform	✅ Desktop/server; cross-platform	✅ Node.js + headless browser; works across server environments	✅ Web + mobile + desktop; consistent UI across platforms
AI / Automation	❌ None	❌ None	❌ None	❌ None	⚠️ Programmatic automation via scripting	✅ AI-assisted editing, automation workflows, plugin ecosystem
Scalability	✅ Excellent for batch and server pipelines	⚠️ Limited; performance depends on scripting and hardware	⚠️ Medium; suitable for desktop-scale apps	✅ Large-scale pipelines, real-time streaming	✅ Programmatic generation can scale, but may need server resources	✅ Enterprise-grade; cloud-ready, multi-platform, high-volume video workflows
Pricing	Free, OSS; H.264 encoding may require commercial license	Free, OSS	Free, OSS	Free, OSS	Free, OSS	Custom enterprise licensing
Best For	Developers building automation pipelines, server-side video processing, or streaming workflows	Python developers building scripted video content and automation	Developers building desktop-focused video apps with timeline editing	Developers needing real-time pipelines or advanced streaming	Developers using React for programmatic video generation and templating	Companies needing interactive, embedded video editing + AI automation + multi-platform SDK

Choosing the right video SDK: How to make the right choice

When choosing the right video SDK, the best option depends on what you’re building and who it’s for.

Choose open-source SDKs like FFmpeg, MoviePy, OpenShot/MLT, GStreamer, and Remotion if you prefer flexibility and complete control. These tools are free, customizable, and well-suited for automation, research, or proof-of-concept projects. However, they often require significant development time, scripting knowledge, and ongoing maintenance, which can slow down production or scaling.

For teams building commercial or enterprise-ready video products, commercial SDKs offer a more practical route. They save you time on integration, provide dedicated support, and come with consistent updates to ensure reliability across platforms.

That’s why developers choose IMG.LY SDK.

It combines interactive editing, automation, and cross-platform SDKs in a single stack, something open-source solutions can’t fully replicate. It’s designed for SaaS, social, and enterprise use cases where scalability, ease of use, and performance matter most. You can embed editors, automate workflows, and scale confidently without managing multiple systems.

So if you want a complete, production-ready platform with AI features, automation, and an intuitive editing experience, IMG.LY is the right choice.

Get in touch with our team to see how it’s deployed in over 500 applications and used by millions of users across 29 countries.

Start a free trial or book your call today!

The Top 7 Video Editing SDKs in 2026

Jan — Tue, 02 Sep 2025 11:19:08 GMT

With dozens of video editing SDKs on the market, choosing the right one can feel like a daunting task.

To help you cut through the noise, we’ve put together a breakdown of the 7 best video editing SDKs in 2026: IMG.LY, Meishe SDK, Banuba, Shotstack, BytePlus Effects, Rendley, and Picsart. We’ll cover:

Key features and capabilities
Supported platforms and customization options
Ideal use cases and trade-offs

This guide is unbiased, but we’ll also highlight how IMG.LY compares and where it stands out as the only solution that combines a polished editor with scalable automation in a single package.

1. IMG.LY CreativeEditor SDK (CE.SDK)

Choosing IMG.LY means selecting a platform that offers both: a Canva-grade editor for your users and a powerful Engine API for automation. That dual focus is what sets CE.SDK apart.

Features & capabilities: CE.SDK works best when you see it as a bridge between what end users expect and what your product team needs behind the scenes. On the surface, users get familiar tools including multi‑track editing, ready‑made templates, and a growing set of AI features like text‑to‑image, text‑to‑video, and AI voiceovers. Behind the scenes, developers can extend and customise with a plugin system so the editor adapts as your product evolves.
Platforms & customization: This flexibility carries over to platforms. CE.SDK works across Web, iOS, Android, React Native, Flutter, Electron, and Node.js. It’s also fully white‑label, which means your customers see a seamless extension of your brand, not a third‑party tool.
Implementation & use cases: Getting started with our tool doesn’t require a huge lift. Teams can spin up a proof of concept quickly, then scale into enterprise deployment when ready. That’s why you’ll see CE.SDK inside SaaS platforms, e‑commerce personalization tools, DAM systems, and even social networks.
Future‑proofing, support & pricing: What reassures teams is the long‑term roadmap: regular feature releases, AI integrations, and direct support from solution engineers. Enterprise SLAs and SSO come standard. Pricing depends on the usage, which makes it easier to scale without committing to rigid licensing.
Who it’s for: CE.SDK is valuable for SaaS, MarTech, e-commerce, and DAM platforms. These teams need to give users a simple, branded editing experience while also managing complex automation in the background. Instead of stitching together multiple tools or sacrificing one capability for another, CE.SDK provides an all-in-one foundation: polished editing, scalable automation, enterprise-grade support, and ongoing AI-driven innovation.

Key differentiator

CE.SDK doesn’t force you to choose between usability and power. On one side, it delivers a polished, user-facing editor that feels familiar to end users. On the other hand, it provides a powerful automation engine that scales with your product. Most SDKs lean heavily in one direction. They either focus on end-user editing or specialize in backend automation. CE.SDK is different because it combines both in a single platform.

2. Meishe SDK (Meicam)

Meishe SDK, also known as Meicam, is a mature Chinese SDK that has carved out a space in many professional apps across Asia. Think of it as a toolkit built for industries that need stability and advanced editing power, though it comes with a few trade‑offs that teams should weigh carefully.

Features & capabilities: Meishe offers multi‑track timelines, real‑time effects, and plugin support across mobile, web, and PC. Industries like automotive, broadcasting, and education have already used Meishe successfully, showing how it handles complex and demanding video workflows.
Platforms & customization: It supports full UI customization, white‑labeling, and plugins. And while customization depth is solid, integration tends to be heavier compared to other tools. Documentation can feel dense, which sometimes slows teams down as they work toward launch.
Implementation & use cases: Meishe SDK is beginning to layer in AI integrations like intelligent editing and motion tracking. For large organizations in Asia with strong internal dev resources, these capabilities can be appealing.
Future‑proofing, support & pricing: Meishe continues to expand with new AI features like facial recognition and virtual anchors. It also offers custom enterprise support agreements. However, teams often struggle with the integration process, and the developer experience feels less polished. Setting up complex projects can take longer, and the documentation isn’t as approachable, which leaves some developers hesitant to adopt it widely. Pricing typically follows an enterprise licensing model, which can be less flexible for fast‑scaling SaaS companies.
Who it’s for: Meishe SDK is best suited for large-scale apps in Asia and companies with internal dev resources.

How it compares to IMG.LY

Meishe delivers solid editing capabilities and is a proven choice in professional and regional contexts. But the trade‑offs become clear when you look at integration and support. It can feel heavy to implement, and documentation isn’t as approachable.

IMG.LY pulls ahead here with stronger web support, compatibility with creative file types like PSD, AI, and INDD, and a faster onboarding process that makes it easier for teams to move from idea to production.

Learn more about how IMG.LY compares to Meishe SDK here.

3. Banuba

Banuba is a mobile‑first SDK with a strong focus on augmented reality (AR). It has built its reputation on powering social and UGC apps with effects that mimic the TikTok experience. If your product relies on immersive filters, beauty effects, or virtual try‑on, Banuba often appears at the top of the evaluation list.

Features & capabilities: The SDK provides a TikTok‑like editor with AR masks, beauty filters, face tracking, background removal, and even virtual try‑on features. These tools are designed to keep users engaged with interactive and shareable content.
Platforms & customization: Banuba supports iOS, Android, Flutter, and React Native. It offers modular components with a preset UI, which makes implementation faster for mobile. That said, customization options are limited when compared to solutions designed for enterprise-level flexibility.
Implementation & use cases: Integration is relatively quick for mobile teams, and the SDK has proven popular among social media platforms, beauty apps, and e‑commerce companies offering AR try‑on. However, support for web or large‑scale enterprise environments is limited, which narrows its scope.
Future‑proofing, support & pricing: The company continues to expand its AR and AI features, focusing on personalization and beauty‑driven effects. Banuba operates with a smaller team of about 70 employees, which can affect the pace of enterprise‑grade support. Licensing costs are typically high and not publicly disclosed, which may be a barrier for smaller companies.
Who it’s for: Banuba is best suited for mobile apps that need advanced AR features like beauty filters, face tracking, or virtual try‑on to keep users engaged.

How it compares to IMG.LY

Banuba leads when it comes to AR‑driven capabilities, making it a natural fit for beauty and social platforms. But when teams look beyond filters to enterprise readiness, automation, and cross‑platform support, other options such as IMG.LY offer broader possibilities.

Learn more about how IMG.LY compares to Banuba here.

4. Shotstack

Shotstack focuses squarely on automation. It’s a cloud‑based video editing API designed for bulk rendering rather than end‑user editing. Teams often evaluate it when they need to generate thousands of videos quickly and at scale.

Features & capabilities: Shotstack runs on a JSON‑driven API that lets developers programmatically create and assemble video content. With this approach, teams can handle automated ad generation, personalization, or large‑scale marketing campaigns. While powerful for automation, it doesn’t include a native editor, which means you must build a custom UI if you want end‑user editing.
Platforms & customization: Shotstack is built as a REST API in the cloud, so it fits naturally into modern development stacks. It allows teams to design workflows programmatically, though the absence of prebuilt UI components makes it harder to use the tool right away as compared to other SDKs.
Implementation & use cases: Developers appreciate the smooth onboarding experience and clear API structure. Typical use cases include bulk rendering of ads, dynamic personalization for campaigns, and other scenarios where scaling output matters more than in‑app editing.
Future‑proofing, support & pricing: Shotstack continues to invest in automation and AI‑powered generation, offering tools that personalize video creation at scale. The vendor provides commercial SLAs, but support resources remain limited given the team size. Pricing follows a pay‑as‑you‑go model ($0.30 per minute) or subscription plans, which can work well for predictable, high‑volume usage.
Who it’s for: Shotstack is best suited for teams that need scalable rendering pipelines and automation rather than in‑app editing features.

How it compares to IMG.LY

Shotstack gives you powerful rendering automation and programmatic workflows. IMG.LY takes it further by combining those automation strengths with a complete, user‑facing editor, so you can address both your development needs and your end‑users’ experiences in one solution.

Get a detailed comparison of IMG.LY CreativeEditor SDK and Shotstack here.

5. BytePlus Effects

BytePlus Effects is modelled after TikTok and CapCut. It’s designed to give app developers the same kind of short‑form, social‑first experience that has made those platforms successful. As a result, it appeals to teams that want to replicate TikTok‑like engagement inside their own apps.

Features & capabilities: The SDK offers more than 80,000 effects and filters, including AR stickers and beautification tools. These features aim to keep users engaged by giving them endless ways to personalize and enhance their content.
Platforms & customization: BytePlus integrates with iOS, Android, React Native, and Flutter, making it a strong option for mobile‑first development. You can customise the UI to match your brand, but customization beyond theming is limited, which can be a constraint if you need deeper control.
Implementation & use cases: Since it’s optimized for mobile integration, you can embed it relatively quickly into short‑form consumer video apps. Common use cases include social platforms, beauty apps, and any consumer‑facing product that thrives on AR‑enhanced video.
Future‑proofing, support & pricing: With the backing of TikTok’s ecosystem, BytePlus is evolving rapidly, adding new AI‑driven AR and beauty effects frequently. However, commercial support feels less transparent, and licensing comes through enterprise negotiations with annual fees. This structure can work for large consumer platforms, but may be harder for smaller teams.
Who it’s for: BytePlus is best suited for apps that want to recreate TikTok‑style user experiences and rely heavily on prebuilt AR effects to keep users engaged.

How it compares to IMG.LY

BytePlus takes a step ahead when it comes to prebuilt effects and AR‑driven experiences. But if you need more flexibility in customization, automation capabilities, or enterprise‑grade workflows, IMG.LY offers a broader solution.

For a detailed comparison, take a look at our guide on IMG.LY vs BytePlus Video Editor.

6. Rendley

Rendley is a newer player in the SDK space and has gained attention because of its browser‑only approach. It’s JavaScript‑based and runs entirely in the browser, which means you don’t need a server to get started. This makes it attractive for teams that want a lightweight, client‑only setup without managing infrastructure.

Features & capabilities: The SDK supports multi‑track editing, keyframes, and even integrates with After Effects (AE). These features give frontend developers enough flexibility to build interactive editing experiences directly in the browser.
Platforms & customization: Rendley runs entirely in the browser, which makes it a natural fit for lightweight web apps and UGC platforms. Developers get flexibility through an open, in‑browser approach. However, without enterprise‑level frameworks, scaling to larger organizations becomes more difficult.
Implementation & use cases: Setting up Rendley is straightforward for frontend teams, which makes it appealing for lightweight UGC applications or smaller web projects. That ease of entry, however, comes with limits: AI integrations aren’t a core focus, so its potential for more advanced future applications remains restricted.
Future‑proofing, support & pricing: Rendley is still early‑stage and hasn’t yet proven itself at enterprise scale. Support is provided by a small vendor team, which can make long‑term stability less certain. Pricing details are not publicly available, leaving prospective users to negotiate directly.
Who it’s for: Rendley fits developers who want a browser‑native, client‑only editing tool without the need for server infrastructure.

How it compares to IMG.LY

Rendley works well as a lightweight, browser‑native solution. But if you need enterprise‑grade robustness, automation, or dedicated support, IMG.LY offers more comprehensive coverage.

Learn more about how IMG.LY is a great alternative for Rendley.

7. Picsart Video SDK

Picsart Video SDK is an embeddable video editor SDK that brings Picsart’s creative editing tools into third-party apps or websites.

Features & capabilities: This SDK brings the company’s well‑known creative editing tools into third‑party products. Out of the box, you get features like trimming, multi‑scene editing, transitions, dynamic audio, subtitles, and text overlays, enough to cover the basics of video creation. AI‑driven tools extend these capabilities with smarter image and video editing options.
Platforms & customization: The SDK is React Native‑based but optimized for web embedding, making it appealing for web‑first platforms. You can configure the UI, apply theming, white‑label the experience, toggle features on or off, and integrate your own asset library so the editor matches your product’s design and workflow.
Implementation & use cases: One of Picsart’s strengths is ease of setup: installation is fast, with a React editor installation process that reduces complexity, documentation is detailed, and the editor is designed to embed with minimal lift. This makes it a good choice for advertising or marketing platforms, edu‑tech products, and media platforms that want to give users creative tools quickly.
Future‑proofing, support & pricing: The SDK is backed by Picsart’s large ecosystem and its AI research arm (PAIR), so teams can expect regular updates, new features, and scalable performance. Support comes through developer documentation, a support team, and enterprise collaboration options. Pricing isn’t public, but it’s likely offered as enterprise or usage‑based licensing.
Who it’s for: Picsart’s Video SDK is best for teams that need a web‑based video editor to power product features or educational video production without investing heavily in custom development.

How it compares to IMG.LY

Picsart offers a fast, embeddable editor with AI effects and a strong ecosystem. However, IMG.LY provides deeper customization, more automation capabilities, cross‑platform support, and enterprise‑grade integrations.

Overview Table (Use Cases vs. Solutions)

Here is how the seven options line up on the four questions teams ask most often during an evaluation.

SDK	Best for	Platforms	Customization depth	Pricing model
IMG.LY CE.SDK	SaaS, MarTech, e-commerce and DAM platforms that need a user-facing editor and backend automation	Web, iOS, Android, React Native, Flutter, Electron, Node.js	Fully white-label, extensible through a plugin system	Usage-based
Meishe (Meicam)	Large-scale apps in Asia with strong internal dev resources	Mobile, web, PC	Full UI customization, white-labeling and plugins, though integration is heavier	Enterprise licensing
Banuba	Mobile apps built around AR: beauty filters, face tracking, virtual try-on	iOS, Android, Flutter, React Native	Modular components with a preset UI, limited beyond that	Not public, typically high
Shotstack	Bulk rendering and automation pipelines rather than in-app editing	Cloud REST API	No prebuilt UI components, you build the editor yourself	Pay-as-you-go at $0.30 per minute, or subscription
BytePlus Effects	Consumer apps recreating TikTok-style experiences from prebuilt AR effects	iOS, Android, React Native, Flutter	Theming to match your brand, limited past that	Enterprise negotiation with annual fees
Rendley	Browser-native, client-only editing with no server infrastructure	Browser (JavaScript)	Open in-browser approach, no enterprise-level frameworks	Not public
Picsart Video SDK	Web-first product, edu-tech and media teams that want a fast embed	React Native based, optimized for web embedding	Configurable UI, theming, white-label, feature toggles, own asset library	Not public, likely enterprise or usage-based

Conclusion

When you line these SDKs up side by side, it’s clear that each one has its own niche strengths and limitations. Here’s a quick overview:

Banuba / BytePlus: These are the strongest options for AR and social apps, with beauty filters, effects, and TikTok-like workflows.
Meishe: A professional, Asia-centric SDK with heavy native capabilities, but a steeper implementation curve.
Shotstack / Rendley: Both shine in automation pipelines or lightweight browser-based setups, but they don’t offer polished editor UIs.
Picsart: A strong web-first, prebuilt editor with AI effects that’s simple to embed, though limited in customization and automation.

Where does that leave you?

If you’re evaluating SDKs, you need to balance two priorities: delivering a great editor UX for your users and scaling automation behind the scenes. Only IMG.LY covers both ends: offering a polished, enterprise-ready editor and a scalable automation engine.

That makes it the go-to option for teams planning not only their current projects but also long-term growth. With IMG.LY, you can give users a polished editing experience today while building the automation backbone that will let your product scale tomorrow

If you’d like to see how IMG.LY can fit into your platform, get in touch with our experts today for a deeper look and tailored guidance.

A Modern JavaScript Video Editor: Integration Guide

Antonello — Thu, 16 Jan 2025 15:29:04 GMT

Discover how to integrate IMG.LY’s JavaScript video editor into your web application and unlock its full range of features.

Video content has always been a powerhouse for engagement, becoming even more impactful with the rise of short-form videos. Platforms like YouTube and TikTok have built their empires on video content, as that remains the preferred medium for both creating and consuming information.

Not only have those platforms changed how we consume information, but they have also transformed user behavior. We do not just want to watch videos. We want to create them, expecting the process to be both simple and professional.

Here is why embedding video creation and editing capabilities directly into your website, web or mobile application can significantly boost user engagement and satisfaction.

In this guide, you will learn how to integrate a JavaScript video editor using CreativeEditor SDK (CE.SDK). We will explore when it is most useful and what customizations it supports to suit your unique needs.

Want to jump into the code? For a quick start, visit our GitHub repository.

Let’s dive in!

Why Does Your JavaScript Web App Need a Video Editor?

The world of content is constantly evolving, from text to images, from static visuals to long-form videos, and now from long videos to bite-sized clips. What stays consistent is that video content resonates deeply with us as humans.

No wonder, TikTok tops global app download charts, while YouTube, Facebook, and Instagram rank among the most visited sites right after Google. These platforms have not just built their empires on video. They have revolutionized how we think about video production.

They set the gold standard by enabling anyone to create professional-looking videos with minimal effort, offering tools for adding filters, overlays, audio, and text in just a few clicks. This ease of use has made intuitive video editing a must-have for web applications featuring social media integration, marketing ambitions, or content management capabilities.

By embedding a user-friendly JavaScript video editor in your application, you can ride this trend, providing a feature billions of users are already familiar with. The payoff? Lower barriers to user-generated content, enhanced engagement, and wider content distribution.

CreativeEditor SDK from IMG.LY delivers a seamless, high-performance, and feature-rich JavaScript solution for in-browser design, video, and photo editing, ready to meet your users’ expectations.

Getting Started: Adding a Video Editor in JavaScript

Follow this step-by-step guide to learn how to integrate a JavaScript video editor into your site using CreativeEditor SDK.

Get started with integrating CE.SDK in a vanilla JavaScript application!

Requirements

CreativeEditor SDK runs directly in your browser’s JavaScript engine, so no specific prerequisites are needed.

If your web application relies on Node.js, ensure that you have the latest stable versions of Node.js and NPM installed.

Installation and Library Import

In a vanilla JavaScript application, create a JavaScript module file (e.g., video-editor.js) and import the CreativeEditorSDK library:

import CreativeEditorSDK from '<https://cdn.img.ly/packages/imgly/cesdk-js/1.42.0/index.js>';

Note: In this example, the SDK is served from our CDN for convenience. In a production environment, you should host assets on your own servers for improved control and performance.

Alternatively, if you are using a bundler like Webpack, Rollup, Parcel, or Vite, and you want to integrate the CreativeEditor module within your existing project, simply add the @cesdk/cesdk-js npm package as a dependency to your project:

npm install [@cesdk/cesdk-js](<https://www.npmjs.com/package/@cesdk/cesdk-js>)

You can then import it as below:

import CreativeEditorSDK from "@cesdk/cesdk-js";

Well done!

Initialize the Video Editor

In your JavaScript module, right below the library import, initialize CreativeEditor SDK with the following logic:

// src/video-editor.js

import CreativeEditorSDK from '<https://cdn.img.ly/packages/imgly/cesdk-js/1.42.0/index.js>';

// your CE.SDK license and user configs
const config = {
  license: '<YOUR_LICENSE>',
  userId: '<YOUR_USER_ID>',
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (editor) => {
  // do something with your instance of CreativeEditor SDK...

  // when done, clean up and free up resources
  editor.dispose();
});

Replace <YOUR_LICENSE> with the license key you get from CreativeEditor SDK and <YOUR_USER_ID> with your user ID. The user ID is optional and helps track MAUs (Monthly Active Users) across different devices.

To integrate the video-editor.js file, import it into your HTML page like this:

<script type="module" src="video-editor.js"></script>

Note the type=“module” attribute. This tells the browser to treat the script as an ES6 module, so that you can use import and export statements within your JavaScript code.

Make sure the same HTML page includes the following div element where the video editor will be embedded:

<div id="cesdk_container" style="width: 100%; height: 100vh;"></div>

This will load the video editor with the default video preset, giving users the ability to trim, cut, apply filters, add text overlays, include music, and more to enhance their videos.

Congratulations, you have successfully integrated the video editor!

CreativeEditor SDK: JavaScript Video Editing API for Web, Desktop, and Mobile

You just saw how to integrate the CE.SDK into a browser application. Yet, do not forget that the SDK supports a wide variety of frameworks and libraries, including mobile and web applications.

Web Framework Support

CE.SDK is designed to work with several popular JavaScript frameworks and libraries. For more detailed integration instructions, take a look at the official page on the documentation for each framework:

Additionally, the SDK is available for headless mode and works well in a Node.js environment.

Cross-Platform Support

One of the standout features of CreativeEditor SDK is its cross-platform philosophy. This extends beyond JavaScript ecosystems for the web, and includes mobile (iOS and Android) and desktop, thanks to support for:

That is made possible through a powerful engine that powers your app via features like:

Unified API: The same underlying API is shared across web, desktop, iOS, and Android applications.
Cross-Platform Feature Parity: CE.SDK guarantees that features are available consistently across platforms. Since core functionality is implemented at the engine level, features you use on one platform will be available on others, with only slight differences in release timelines.
Interoperable Designs: Designs created in the editor component on one platform work on all platforms supported by CE.SDK. Whether a user is designing on iOS, Android, or the web, their design files can be imported seamlessly between platforms.

Native iOS and Android libraries, along with other frameworks, are also available. Learn more in our documentation!

JavaScript Video Editor Use Cases

It is time to explore some key use cases. Let’s see how the unique features of the CreativeEditor SDK can cover many scenarios!

CreativeEditor SDK features what users need to create engaging and easy-to-share videos optimized for popular social media platforms like Instagram, TikTok, YouTube, LinkedIn, and more. This is possible due to a large set of capabilities, which include:

Reusable Templates: Users can either design their own templates and share them with the community or download those created by others. This variety of ready-to-use templates for different scenarios helps users skip the daunting blank canvas to bring their ideas to life. Explore various templates in our video editor demo.
Music and Audio Library: In CE.SDK, adding audio to videos is simple and intuitive. Given the impact of audio, users can set the tone with music or narration in just a few clicks, creating a more immersive atmosphere for their content.
Animations: The SDK includes a wide selection of animations to enhance the design elements positioned within video scenes.

After creating a video within your web app, users can export it directly from CE.SDK in the appropriate formats and aspect ratios for their target social media platforms.

Product Showcase for E-Commerce Applications

Images have long been a simple yet powerful tool for showcasing products on e-commerce platforms, and sites like eBay, Amazon, AliExpress, and Walmart have relied on them for years (and still do!).

However, in recent years, customer expectations have shifted. Today’s buyers crave more interactive and immersive ways to visualize products. They want to see how items look and perform in real-world settings.

Short, dynamic product videos offer a superior presentation experience. According to an analysis by Firework, video content increases purchase likelihood by 51%, highlighting its undeniable impact on buying decisions. This is why many sellers have already embraced video to enhance product displays.

With a CE.SDK-powered JavaScript video editor, producing compelling videos that deliver a seamless, multi-device shopping experience becomes effortless. Plus, reusable templates help you generate unique product videos while maintaining brand consistency.

Engaging Video Messages for Sales Outreach

Marketers and sales teams know that cold emails often come across as impersonal and boring. The solution to this challenge? Personalized video messages!

Customized video messages are proving to be an effective outreach tool, with studies showing significantly higher conversion rates.

With CreativeEditor SDK, sales and marketing teams can easily create personalized videos tailored to individual clients or leads, making their outreach more engaging and impactful. Unlike traditional email campaigns, personalized videos create a sense of real, one-on-one interaction.

Additionally, the SDK’s translation features help sales teams break down language barriers, allowing them to reach a global audience. This ensures that the personalized messages resonate with clients from different regions.

Explore this feature in our translation and internationalization demo.

Digital Asset Management

DAM, short for Digital Asset Management, is the process of organizing, storing, and managing digital assets, including video content. As your business grows, an effective DAM system becomes key to enabling multiple teams to easily access and collaborate on assets across different projects.

CreativeEditor SDK backs DAM workflows by offering powerful tools to organize, edit, and repurpose video content through an embeddable, centralized interface. Its core JavaScript video editor component empowers users to:

Effortlessly adapt and customize video assets.
Ensure brand consistency while automating updates across various assets.
Edit content efficiently within a collaborative environment.

Although CE.SDK does not provide built-in role-based permissions, it integrates smoothly with backend systems to control user access. In particular, its flexible architecture supports the definition of custom hooks for permission checks to customize the editor’s behavior.

Automated Video Creation

CreativeEditor SDK streamlines the automation of asset creation by enabling users to generate on-brand video content variations for multiple channels. Thanks to adaptable templates, dynamic text variables, and lockable designs, the SDK ensures consistency and brand compliance over all produced videos.

Given a template, the creative engine automates the generation of countless personalized assets by populating them with resources from various data sources. That eliminates manual effort, reduces design bottlenecks, and accelerates production, making it perfect for scaling campaign-specific videos or building dedicated marketing tech.

Customizing your CreativeEditor SDK Instance

CreativeEditor SDK is not a one-size-fits-all JavaScript video editor. Instead, it is built for flexibility, offering a wide set of customization options to tailor the editor to your unique requirements and brand identity. These include:

Theming Options: Match the editor’s look to your app’s style with built-in themes, generate new ones using the theme generator, or create custom themes manually. Explore theming possibilities in our dedicated demo.
Custom UI: Build entirely bespoke JavaScript video editing user interfaces that align with your specific use case.
Media Library Integration: Set up sortable, flexible media libraries and integrate popular third-party libraries like Unsplash and others. Get easy access to external assets.
Localization: Adapt the editor to different languages and regions with full i18n support, letting you extend or overwrite any language setting.
Toolbar Customization: Rearrange toolbar elements, update icons, or rename tools to deliver a tailored user experience.

With these customization options, CreativeEditor SDK ensures your video editor is as unique as your JavaScript application.

Conclusion

Implementing a JavaScript video editor in your web app can greatly improve the user experience and provide a powerful feature to drive higher engagement, retention, and even product distribution. This is true whether you are developing an e-commerce platform, a social media app, a tool for influencers, or a SaaS web solution.

With the CreativeEditor SDK, adding a fully customizable video editing experience to your web application takes only a few minutes. Explore CE.SDK’s video capabilities and dive into the docs.

Stay tuned for more updates, and please reach out if you have any questions. Thank you for reading.

Over 3,000 creative professionals gain early access to our new features, demos, and updates. Don’t miss out, and subscribe to our newsletter.

How I Built a Short Video Generator with AI & CE.SDK in One Day

Eray — Thu, 09 Jan 2025 11:27:13 GMT

Here’s the crux of product development in the age of LLMs: how much can AI truly accelerate the development process?

We have seen videos of solo developers building small apps entirely with AI with just a few prompts. But how does it scale to more complex development projects? As LLMs rapidly evolve, their scope and impact will only increase.

That’s why I regularly challenge myself to build a small project with the help of AI. I’m a prime candidate to test the AI productivity boost: a jack-of-all-trades (and a master of none) with a background in both design and engineering, yet no hands-on experience in the past five years. My latest challenge? Build a web-based short video generator within one day.

In this post, I’ll share the most intriguing takeaways from tackling this project.

Why a Short Video Generator?

Why focus on this idea? It’s simple: to ride the wave of a new trend. A format called “faceless” short videos is gaining traction among creators on platforms like YouTube and TikTok.

What’s fascinating about these videos is their automation: an LLM generates a script, which is then transformed into speech, images, and text assets using various AI services. These assets are automatically assembled into a cohesive video.

The general concept is compelling: It’s still generative content, but mixed with classic video composition techniques. This approach offers greater accuracy, consistency, and control over pure generative AI.

The potential to automate video production at this scale is exciting. Add its relatively low complexity and high production value, and it became the perfect topic for my challenge.

Enter CE.SDK

Another reason I chose this challenge was its compatibility with CE.SDK, our design and video editor library. CE.SDK offers a robust editing toolkit that integrates into any product with just a few lines of code. Its features, like headless mode, are ideal for automating workflows like video generation.

Most faceless video services use React-based video generation and achieve fair results. However, using CE.SDK instead of a react-based library could potentially boost the overall experience with three critical improvements:

Editable Outputs: This is huge. Full automation often needs human adjustments for fine-tuning. CE.SDK enables automated video generation while allowing manual refinement of the results.
Enhanced Visual Quality: CE.SDK has its own rendering pipeline, allowing for more nuanced visual effects and animations. When you’re competing against others in this space, it can make a huge difference if you’re able to produce higher fidelity in the visual output.
Visual Design Workflow: Create design components or even entire templates visually, and then use them via code. This authoring workflow can be extremely helpful in creating rich, interesting designs for the generated videos.

The Ground Rules

To keep the challenge focused, I set strict rules:

Time Limit: Spend no more than 12 hours on the challenge.
No Manual Coding: Avoid writing any code yourself. Everything should be built through conversations with AI.
Trust the AI: Do not read or analyze code generated by the AI. Rely entirely on its decisions.
Skip External Research: Do not read or explore the APIs you intend to use. Instead, provide links to the AI and let it determine how to use them.
Compare AI Performance: Alternate Claude Sonnet 3.5 and ChatGPT o1 for code generation to evaluate which performs better.

The Tools & Workflow

Code Editor: Cursor
Built on VSCode’s foundation, Cursor stood out as the only editor offering both an integrated chat interface and the ability to switch between different LLMs. However, with GitHub’s recent significant updates to Copilot, I’ll switch to VSCode with Copilot for future challenges.

UI Prototyping: Claude Artifacts
Rather than building the entire project in my code editor, I chose to prototype the UI directly through Claude’s web interface. The benefits were immense:

Instant results: To create an artifact, Claude streamlines development by automatically writing and compiling code while leveraging essential UI libraries and components. This automation eliminates setup time and technical overhead, allowing me to focus purely on design iterations.
Instants Variations: Claude enables rapid prototyping through parallel conversations. When a design direction didn’t quite work, I could simply start a fresh conversation with modified requirements and evaluate a new prototype. This approach helped me develop three viable concepts quickly - a pace that would have been impossible in a traditional code editor.
Quality of execution: Claude transforms rough concepts into polished, intuitive interfaces. Its suggestions often surpassed my initial ideas, offering sophisticated solutions I hadn’t considered.
Keep it clean: By prototyping outside the code editor, I kept the main project’s codebase clean and focused. This separation prevented the accumulation of experimental code and maintained the clarity of our primary development environment.

Quickly prototype your interface with Claude Artifacts.

APIs
Key APIs used in the project included:

Script Generation: Claude Sonnet 3.5 vs various ChatGPT models.
Image/Video Assets: Fal.ai Flux models.
Speech Synthesis: ElevenLabs.

Building the App: Divide and Conquer

After having prototyped the UI, I started to chat with the LLM inside the code editor so that it can code the app. To work with the AI efficiently, I followed a divide-and-conquer approach. Rather than simply asking it to “build me a video app,” I broke down the problem into manageable steps:

Generate a video script
Create an AI prompt that includes user input and examples of the desired output format. Pass this prompt to the LLM API.
Parse the script to generate assets (speech, images, text)
Parse the LLM’s response to extract image prompts and speech paragraphs. Send these to their respective APIs.
Compose the final video
Load all the generated assets into a predefined template to generate the finished video through the CE.SDK library.

After completing these steps, I was finally able to generate my first fully automated videos! With a few more tweaks and additions, I had an MVP ready within twelve hours.

The final result: A Short Video Generator

There are still some missing features, partly because I spent a significant amount of time refining the prompt to generate the video script. I also had to bend the rules occasionally: sometimes the LLM would hit a wall, and I had to read or write small snippets of code.

Key Takeaways

Engineering Knowledge Is Essential
You should have some engineering background to achieve the AI productivity boost in development.

AI doesn’t solve everything for you. You are still the architect. You provide a lot of input and guidance. AI often needs to be pointed to the right strategy. Foundational knowledge of computer science is hugely advantageous for working with AI effectively.
As mentioned, I had to read and write a few lines of code myself. Without coding experience, I would have probably not been able to progress, as the LLM was not able to.
The getting started experience is nowhere close to novice-friendly. How do you get started with a new project in a code editor that actually requires you to do the setup manually? My workaround was to create an empty project, and then ask the LLM to instruct me to use a boilerplate for react. Again, this is engineering knowledge, any novice would have hit a wall already at this point.

Claude Outperformed ChatGPT
Claude was a clear winner in the side-by-side comparison, because of three reasons:

Claude Artifacts was a game changer for UI prototyping.
It was generally better at writing and understanding code. Difficult to quantify, but in some cases Claude fixed the mess ChatGPT left in the code
Claude can process URLs, which makes working with APIs much smoother.

Who would have thought new LLMs would catch up to OpenAI so quickly after they released the first version of ChatGPT?

Complexity Slows AI
The more code in my project, the slower the overall progress. LLMs struggled with the growing complexity. Their context windows filled more quickly, and their responses became increasingly unreliable. At some point, it becomes extremely difficult to make architectural changes, especially if this affects multiple parts of the app. When trying to fix errors, you’ll often find yourself in a whack-a-mole game. While the AI would resolve one issue, it would inadvertently introduce new problems elsewhere, creating an endless loop of fixes and regressions.

Ultimately, the time invested in this challenge was well worth it. While LLMs can’t build products end to end on their own, they can significantly streamline product development when paired with the right human collaboration. The real question is whether development teams are ready to adapt their habits and explore new workflows to boost productivity.

Next Steps

This challenge has inspired me to refine and expand on this project. Future iterations will focus on harnessing CE.SDK’s unique features to push the boundaries of automated video generation.

Stay tuned for part two of this series. There’s much more to explore!

UPDATE: Read part two - a cookbook how to build your own short video creator!

Over 3,000 creative professionals gain early access to our new features, insights and updates. Don’t miss out, and subscribe to our newsletter.

A Modern Vue.js Video Editor: Setup Guide

Antonello — Wed, 08 Jan 2025 11:24:43 GMT

Discover how to integrate IMG.LY’s video editor into your Vue.js application.

Users who trim and caption clips every day in TikTok or CapCut expect to do the same inside your product. When they cannot, they export, edit somewhere else, and upload again. That round trip is where people drop out of the workflow and where your assets stop being yours to template or version.

This guide covers adding a video editor to a Vue.js app with CreativeEditor SDK (CE.SDK): the component, the timeline and export APIs underneath it, and the customization points that come up once it runs.

Check browser support before you scope the work

CE.SDK’s video mode encodes and decodes in the browser through the WebCodecs API. That is what makes client-side MP4 export possible without a render backend, and it is also the constraint. Video mode requires a recent Chromium browser: Chrome, Edge, Opera, Arc, and Brave all work. Safari and Firefox do not currently support video editing.

Design and photo editing run everywhere, so this only limits the video path. If a large share of your traffic is on Safari, plan a fallback message now rather than during QA.

Why put the editor inside the app

YouTube Shorts passes 70 billion daily views and TikTok reports more than a billion monthly active users. Those numbers matter here for one reason: they set the baseline for how easy people think video editing should be.

Two things follow. Users expect filters, overlays, audio, and text within a few clicks, and they expect it where they already are. Vue’s single-file components suit this well, because the editor becomes one component you mount with a config object and an init hook.

How to integrate a video editor in Vue.js

Requirements

Node.js 20+ and npm 10+. Download Node.js if needed.
A Vue 3 project, typically scaffolded with create-vue.
A CE.SDK license key. Start a free trial to get one.

If you need a project, scaffold one and answer the prompts however you like. Selecting “No” throughout is fine for following along:

npm create vue@latest my-vue-video-editor
cd my-vue-video-editor

Step 1: Install CE.SDK

npm install @cesdk/cesdk-js

Step 2: Create the editor component

CE.SDK ships a Vue component, so you do not manage the editor instance or its teardown yourself. Import it from the /vue entry point and give it a config object and an init function.

Create src/components/VideoEditor.vue:

<!-- src/components/VideoEditor.vue -->
<template>
  <CreativeEditor :config="config" :init="init" width="100vw" height="100vh" />
</template>

<script setup>
import CreativeEditor from '@cesdk/cesdk-js/vue';

const config = {
  license: 'YOUR_LICENSE_KEY', // replace with your key
  userId: 'YOUR_USER_ID', // optional, for MAU tracking across devices
};

const init = async (cesdk) => {
  await Promise.all([
    cesdk.addDefaultAssetSources(),
    cesdk.addDemoAssetSources({
      sceneMode: 'Video',
      withUploadAssetSources: true,
    }),
  ]);

  await cesdk.createVideoScene();
};
</script>

sceneMode: 'Video' loads the video and audio demo libraries instead of the design ones, so the asset panel holds clips and music. In production you swap these for your own sources, whether that is your backend or a third-party library such as Unsplash.

createVideoScene() is what gives you the timeline. Calling createDesignScene() instead produces the design editor with no time dimension, which is the usual reason a first integration loads without a timeline.

Step 3: Use the component

<!-- src/App.vue -->
<template>
  <VideoEditor />
</template>

<script setup>
import VideoEditor from './components/VideoEditor.vue';
</script>

Run npm run dev. You should get a full editor with a timeline: trimming, splitting, text overlays, audio tracks, and filters.

Name your wrapper something other than CreativeEditor, or it will collide with the imported component.

Gotchas worth knowing up front

init fails silently. If a line inside init throws, the rest is skipped and nothing reaches the console. You get a half-built scene with no error. Wrap it while developing:

const init = async (cesdk) => {
  try {
    await cesdk.addDefaultAssetSources();
    await cesdk.createVideoScene();
  } catch (error) {
    console.error('[CE.SDK init] failed:', error);
  }
};

Relative asset URLs resolve against the CDN. CE.SDK resolves relative URIs against config.baseURL, which points at the IMG.LY CDN, so /videos/intro.mp4 will not hit your origin. Make local paths absolute before passing them to the engine.

Trim calls need loaded media. setTrimOffset and setTrimLength depend on duration metadata. Call await engine.block.forceLoadAVResource(fill) first or they quietly do nothing.

Nuxt needs a client-only boundary. The editor is browser-only, so server-side rendering will break it. Wrap it in <ClientOnly> or use a .client.vue component.

Let an agent do the integration

If you work in an AI-assisted editor, Agent Skills for CE.SDK load the current documentation and conventions into Claude Code, Cursor, and similar tools, so the generated integration matches the current API rather than a remembered one. There is also an MCP server for live doc lookup during a session. We wrote about the reasoning in Introducing IMG.LY Agent Skills.

Building compositions in code

The default UI handles user-facing editing. For templates, automation, or a custom interface, work through cesdk.engine.

Create a scene and a page

In video mode a page owns a timeline, and its duration is the duration of the export.

const engine = cesdk.engine;

const scene = engine.scene.createVideo();

const page = engine.block.create('page');
engine.block.appendChild(scene, page);
engine.block.setWidth(page, 1280);
engine.block.setHeight(page, 720);
engine.block.setDuration(page, 20); // seconds

Add clips

Video is not a block type of its own. You create a graphic block and attach a video fill, so the same positioning and animation APIs apply to video as to anything else.

const clip = engine.block.create('graphic');
engine.block.setShape(clip, engine.block.createShape('rect'));

const fill = engine.block.createFill('video');
engine.block.setString(
  fill,
  'fill/video/fileURI',
  'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'
);
engine.block.setFill(clip, fill);

Sequence with a track

A track keeps its children playing back to back and recalculates offsets when a duration changes, so you do not position clips by hand.

const track = engine.block.create('track');
engine.block.appendChild(page, track);
engine.block.appendChild(track, clip1);
engine.block.appendChild(track, clip2);
engine.block.fillParent(track);

engine.block.setDuration(clip1, 15); // track shifts clip2 automatically

Size the children, not the track. A track derives its dimensions from what it contains.

Trim and audio

Blocks default to 5 seconds. A longer clip gets cut off, a shorter one loops.

await engine.block.forceLoadAVResource(fill);
engine.block.setTrimOffset(fill, 1); // skip the first second
engine.block.setTrimLength(fill, 10);
engine.block.setMuted(fill, true);

const audio = engine.block.create('audio');
engine.block.appendChild(page, audio);
engine.block.setString(
  audio,
  'audio/fileURI',
  'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'
);
engine.block.setVolume(audio, 0.7);
engine.block.setTimeOffset(audio, 2);

Export to MP4

Encoding runs in a background worker, so the editor stays usable. The scene freezes when the export starts, so later edits will not show up in the file.

const page = engine.scene.getCurrentPage();

const blob = await engine.block.exportVideo(page, {
  mimeType: 'video/mp4',
  onProgress: (rendered, encoded, total) => {
    progress.value = Math.round((encoded / total) * 100);
  },
});

const anchor = document.createElement('a');
anchor.href = URL.createObjectURL(blob);
anchor.download = 'export.mp4';
anchor.click();

Bind onProgress to a ref and you have a progress bar. Long compositions take a while to encode, and silence reads as a hang.

You can also extract just the audio with engine.block.exportAudio(page, { mimeType: 'audio/wav' }), which is handy for transcription and caption pipelines. Speaking of which, caption presets and transitions between clips are both worth a look once the basics work.

Full reference: the create and edit videos guide and the timeline editor docs.

Customizing the editor

Component order. Add, remove, and reorder UI elements with setComponentOrder({ in: location }, order) across locations like 'ly.img.dock', 'ly.img.canvas.menu', and 'ly.img.inspector.bar'.
Theming. cesdk.ui.setTheme() for light, dark, or system, or build one with the theme generator. See the theming demo.
Asset libraries. Serve media from your own backend or connect third-party sources. Users can browse and search both from inside the editor.
Feature API. Show and hide functionality by context, which is how you reflect backend permissions in the UI.
Localization. Override and extend every string with full i18n support.

Reusable customizations belong in a plugin. Background removal and vectorization ship that way.

Where a Vue video editor pays off

Marketing automation. Generate campaign variants from one template with text variables, and push template edits across every asset built on it. Bulk import of PSD files turns existing design work into editable scenes. This is mostly an engine job rather than a UI one.

E-learning. Instructors record, trim, and caption in the browser and build a template library instead of one-off files. Plugins can add quizzes and polls.

Sales outreach. Personalized video at volume, with localization for teams selling into several markets.

Social publishing. Templates, an audio library, and configurable animations, then export per platform aspect ratio.

Digital asset management. Teams adapt approved footage centrally. CE.SDK has no built-in role model, so permissions live in your backend and surface through the Feature API.

Next steps

Start from the Vue video editor starter kit, which is a working project rather than a snippet, or try the demo first.

On a different framework? We have the same guide for React and Angular, plus a broader JavaScript video editing guide on the underlying browser tech. Still comparing vendors? See our breakdown of the leading video editing SDKs.

Questions about your use case? Talk to us.

A Modern React Video Editor: Integration Guide

Antonello — Wed, 08 Jan 2025 09:31:11 GMT

Learn how to integrate IMG.LY’s video editor for React into your web app and make the most of all its features.

Short-form video changed what users expect from software. People who edit clips daily in TikTok or CapCut arrive at your product assuming they can trim, caption, and rearrange without leaving it. Sending them to a desktop tool and asking them to come back with an MP4 is where the workflow breaks.

This guide covers integrating a video editor into a React app with CreativeEditor SDK (CE.SDK): the component setup, the timeline and export APIs underneath it, and the customization points you will reach for once the default editor is running.

For a working reference, see the React video editor starter kit or try the interactive demo.

Check browser support before you scope the work

CE.SDK’s video mode encodes and decodes in the browser using the WebCodecs API. That is what lets you export an MP4 with no render farm behind it, and it is also the catch. Video mode needs a recent Chromium browser: Chrome, Edge, Opera, Arc, and Brave all work. Safari and Firefox do not currently support video editing.

Design and photo editing have no such restriction, so this only limits the video path. If your traffic skews heavily to Safari, plan for a fallback message rather than discovering it in QA. The supported browsers list has the current detail.

Why a video editor belongs in the app rather than beside it

TikTok reports over a billion monthly active users, and Google’s earnings calls have put YouTube Shorts around 70 billion daily views. Those products taught a very large number of people that trimming a clip and adding a caption takes seconds.

That expectation is why the round trip hurts. Every export-and-reupload cycle gives the user a chance to abandon the task, and every asset that leaves your system is one you can no longer template, version, or keep on brand. Editing in place keeps both the user and the asset.

React’s component model fits this well, because the editor is one mounted component with a configuration object and an initialization hook, not a page you navigate away to.

Getting started: adding a video editor in React

Requirements

Node.js 20+ and npm 10+. Download Node.js if needed.
A React 18+ project on a build tool such as Vite, Parcel, or RSBuild.
A CE.SDK license key. Start a free trial to get one.

If you do not have a project yet, create one with Vite:

npm create vite@latest my-react-video-editor -- --template react
cd my-react-video-editor

Step 1: Install CE.SDK

npm install @cesdk/cesdk-js

Step 2: Create the editor component

CE.SDK ships a React component, so you do not need to manage the instance lifecycle by hand. Import it from the /react entry point and pass it a config object and an init function.

Create src/VideoEditor.jsx:

// src/VideoEditor.jsx
import CreativeEditor from '@cesdk/cesdk-js/react';

const config = {
  license: 'YOUR_LICENSE_KEY', // replace with your key
  userId: 'YOUR_USER_ID', // optional, for MAU tracking across devices
};

// Runs once, after the SDK instance is created
const init = async (cesdk) => {
  await Promise.all([
    cesdk.addDefaultAssetSources(),
    cesdk.addDemoAssetSources({
      sceneMode: 'Video',
      withUploadAssetSources: true,
    }),
  ]);

  // Open the editor in video mode with an empty composition
  await cesdk.createVideoScene();
};

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

sceneMode: 'Video' on addDemoAssetSources loads the video and audio demo libraries rather than the design ones, so the asset panel contains clips and music instead of shapes. In production you will swap these for your own asset sources, which can be your backend or a third-party library such as Unsplash.

createVideoScene() is what puts the editor into video mode and gives you the timeline. Calling createDesignScene() instead gives you the design editor with no time dimension, which is the most common reason a first integration comes up without a timeline.

Step 3: Mount it

// src/App.jsx
import VideoEditor from './VideoEditor';

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

Run npm run dev and open http://localhost:5173. You should get a full editor with a timeline: trimming, splitting, text overlays, audio tracks, filters, and transitions.

Name your own component something other than CreativeEditor or CreativeEditorSDK. Reusing either name collides with the import and produces an Identifier has already been declared error.

Four things that will cost you an afternoon

These are the failure modes that come up most often in React integrations. None of them produce a useful error message, which is what makes them expensive.

`init` swallows its own errors

If any line inside the init callback throws, the remaining lines are skipped and nothing appears in the console. You get an editor that loads with a half-built scene and no explanation.

Wrap the body while you are developing:

const init = async (cesdk) => {
  try {
    await cesdk.addDefaultAssetSources();
    await cesdk.createVideoScene();
    // scene setup...
  } catch (error) {
    console.error('[CE.SDK init] failed:', error);
  }
};

Symptoms to recognize: the editor renders, some blocks are missing, the console is clean, and the behavior changes depending on network timing.

Strict Mode runs `init` twice

In development, React 18+ Strict Mode mounts, unmounts, and remounts the component. init runs twice, and the first engine is disposed partway through. The editor you end up looking at is the second one.

This confuses debugging because logs from both runs interleave, and errors from the first run’s async continuation are noise. If you are chasing an initialization bug, tag your logs:

let runCount = 0;

const init = async (cesdk) => {
  const run = ++runCount;
  console.log(`[init ${run}] start`);
  await cesdk.createVideoScene();
  console.log(`[init ${run}] scene ready`);
};

Production builds run init once. There is nothing to fix here, only something to know.

Relative asset URLs resolve against the CDN

CE.SDK resolves relative URIs against config.baseURL, which points at the IMG.LY CDN. A path like /videos/intro.mp4 will not hit your own origin. Make local asset paths absolute before handing them to the engine:

const resolveUri = (uri) =>
  uri.startsWith('/') ? `${window.location.origin}${uri}` : uri;

Trim calls do nothing on unloaded media

setTrimOffset and setTrimLength need the clip’s duration metadata. Call them before the resource has loaded and they fail quietly. Always await engine.block.forceLoadAVResource(fill) first.

One more, if you are on Next.js: the editor is browser-only and will break server-side rendering. Load it with next/dynamic and ssr: false, or keep it behind a client component boundary.

Let an agent do the integration

If you work in an AI-assisted editor, you can skip most of the above. IMG.LY publishes Agent Skills for CE.SDK, which load CE.SDK’s documentation and conventions directly into Claude Code, Cursor, and other agent tools. The agent then writes the integration against the current API instead of whatever it remembers from training.

There is also an MCP server that exposes the docs for live lookup during a session.

In practice this matters most for the parts that change between versions, such as component names and configuration shapes. We wrote about the reasoning behind it in Introducing IMG.LY Agent Skills.

Working with the timeline in code

The default UI covers most user-facing editing. When you need to build compositions programmatically, for templates, automation, or a custom UI, you work with the engine directly through cesdk.engine.

Create a video scene and a page

A page in video mode owns a timeline. Its duration is the duration of the exported video.

const engine = cesdk.engine;

const scene = engine.scene.createVideo();

const page = engine.block.create('page');
engine.block.appendChild(scene, page);
engine.block.setWidth(page, 1280);
engine.block.setHeight(page, 720);
engine.block.setDuration(page, 20); // seconds

Add video clips

Video is not its own block type. You create a graphic block and give it a video fill, which means the same positioning, cropping, and animation APIs apply to video as to any other element.

const video1 = engine.block.create('graphic');
engine.block.setShape(video1, engine.block.createShape('rect'));

const fill1 = engine.block.createFill('video');
engine.block.setString(
  fill1,
  'fill/video/fileURI',
  'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'
);
engine.block.setFill(video1, fill1);

Sequence clips with a track

You could position each clip by hand with time offsets, but a track does it for you. A track keeps its children playing back to back with no gaps, and recalculates the offsets whenever a duration changes.

const track = engine.block.create('track');
engine.block.appendChild(page, track);
engine.block.appendChild(track, video1);
engine.block.appendChild(track, video2);
engine.block.fillParent(track); // size children to the page

// The track shifts video2 automatically
engine.block.setDuration(video1, 15);

Do not call setWidth or setHeight on a track. A track derives its dimensions from its children, so size the children or use fillParent.

Trim clips

Blocks default to 5 seconds. If a clip is longer than its block it gets cut off; if shorter, it loops. To control which portion plays, set a trim offset and length on the fill, after the resource has loaded.

await engine.block.forceLoadAVResource(fill1);
engine.block.setTrimOffset(fill1, 1); // skip the first second
engine.block.setTrimLength(fill1, 10); // play 10 seconds
engine.block.setLooping(fill1, true);

The forceLoadAVResource call is required. Trim APIs need the duration metadata, and calling them on an unloaded resource is a common source of silent no-ops.

Add audio

A video fill plays its own audio track by default, which you can mute. Separate audio blocks handle music and voiceover.

engine.block.setMuted(fill1, true);

const audio = engine.block.create('audio');
engine.block.appendChild(page, audio);
engine.block.setString(
  audio,
  'audio/fileURI',
  'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'
);
engine.block.setVolume(audio, 0.7);
engine.block.setTimeOffset(audio, 2); // start 2s in
engine.block.setDuration(audio, 7);

Export to MP4

Export runs in a background worker, so the editor stays interactive while it encodes. The scene state is frozen when the export starts, so later edits will not appear in the file.

const page = engine.scene.getCurrentPage();

const blob = await engine.block.exportVideo(page, {
  mimeType: 'video/mp4',
  onProgress: (rendered, encoded, total) => {
    setProgress(Math.round((encoded / total) * 100));
  },
});

const url = URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = 'export.mp4';
anchor.click();
URL.revokeObjectURL(url);

Wire onProgress to React state and you get an export progress bar for free. Encoding a long composition takes time, and a silent wait is the fastest way to make users think the app has hung.

You can also pull just the audio with engine.block.exportAudio(page, { mimeType: 'audio/wav' }), which is useful for transcription and caption pipelines.

Two features worth knowing about once the basics work: transitions between clips, and caption presets for styling subtitles consistently. Captions in particular tend to arrive as a request about a week after launch, because most social video is watched muted.

For the full API surface, see the create and edit videos guide and the timeline editor reference.

Customizing the editor

CE.SDK is not a fixed editor with a theme switch. The main customization points:

Component order. Add, remove, and reorder UI elements with setComponentOrder({ in: location }, order), where locations include 'ly.img.dock', 'ly.img.canvas.menu', 'ly.img.inspector.bar', 'ly.img.navigation.bar', and 'ly.img.canvas.bar'.
Theming. Use cesdk.ui.setTheme() for light, dark, or system, or build a custom theme with the theme generator. See the theming demo.
Custom components. Register your own buttons, dropdowns, and inputs and place them alongside the built-ins, or replace built-ins entirely.
Feature API. Show and hide functionality by context, for example hiding controls for a particular block type.
Asset sources. Serve video, audio, and image libraries from your own backend, or connect a third-party source such as Unsplash.
Localization. Override and extend every string in any language with full i18n support.

When a customization is worth reusing across projects, package it as a plugin. Background removal and vectorization ship as plugins built on the same API you would use.

Where a React video editor pays off

Social publishing. Templates, an audio library, and configurable animations let users produce platform-ready clips, then export at the right aspect ratio per destination.

Digital asset management. Teams adapt and repurpose approved footage inside a central system. Templates with placeholders and locked layers keep output on brand. CE.SDK has no built-in role model, so you gate access in your own backend and use the Feature API to reflect it in the UI.

Marketing automation. Generate campaign variants from one template using text variables, and push template changes across every asset that uses it. This is where the headless engine matters more than the UI, and it is worth reading about automated video generation.

Sales outreach. Personalized video at volume, with localization for multi-market teams.

E-learning. Instructors record, trim, and caption in the browser, building a reusable template library rather than one-off files.

Next steps

The fastest path from here is the video editor starter kit, which is a working project rather than a snippet. If you would rather see it running first, the demo is the same editor this guide produces.

Building the same thing on another framework? We have equivalent guides for Vue.js and Angular, and a broader JavaScript video editing guide covering the underlying browser technologies. If you are still comparing options rather than writing code, we put together a breakdown of the leading video editing SDKs.

Questions about a specific use case? Talk to us.

A Modern Angular Video Editor: Setup Guide

Antonello — Wed, 08 Jan 2025 08:19:25 GMT

Learn how to integrate IMG.LY’s video editor for Angular into your web application.

People who trim and caption clips daily in TikTok or CapCut expect the same inside your product. When they cannot, they export, edit elsewhere, and upload again. Each round trip is a chance to abandon the task, and every asset that leaves your system stops being one you can template or keep on brand.

This guide covers adding a video editor to an Angular app with CreativeEditor SDK (CE.SDK): the component wiring, the timeline and export APIs underneath, and the customization points you will reach for once it runs.

Check browser support before you scope the work

Design and photo editing have no such limit. If a meaningful share of your users are on Safari, plan a fallback now rather than in QA.

How to set up a video editor in Angular

Unlike React and Vue, Angular has no first-class CE.SDK component. You create the editor yourself in ngAfterViewInit and dispose of it in ngOnDestroy. That is a few more lines, but it is explicit and it gives you a clear place to hold the instance.

Requirements

Node.js 20+ and npm 10+. Download Node.js if needed.
An Angular project. Create one with ng new my-angular-video-editor if you do not have one.
A CE.SDK license key. Start a free trial to get one.

Step 1: Install CE.SDK

npm install @cesdk/cesdk-js

Step 2: Generate the component

ng generate component video-editor

Step 3: Wire up the editor

Open src/app/video-editor/video-editor.component.ts. The editor mounts into a <div> you reference with @ViewChild, created after the view initializes and disposed when the component goes away.

// src/app/video-editor/video-editor.component.ts
import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  ViewChild,
} from '@angular/core';
import CreativeEditorSDK, { Configuration } from '@cesdk/cesdk-js';

@Component({
  selector: 'app-video-editor',
  standalone: true,
  templateUrl: './video-editor.component.html',
  styleUrl: './video-editor.component.css',
})
export class VideoEditorComponent implements AfterViewInit, OnDestroy {
  @ViewChild('cesdk_container') containerRef!: ElementRef;

  private cesdk?: CreativeEditorSDK;

  async ngAfterViewInit(): Promise<void> {
    const config: Configuration = {
      license: 'YOUR_LICENSE_KEY', // replace with your key
      userId: 'YOUR_USER_ID', // optional, for MAU tracking
      baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`,
      callbacks: { onUpload: 'local' },
    };

    const instance = await CreativeEditorSDK.create(
      this.containerRef.nativeElement,
      config
    );

    this.cesdk = instance;

    await Promise.all([
      instance.addDefaultAssetSources(),
      instance.addDemoAssetSources({
        sceneMode: 'Video',
        withUploadAssetSources: true,
      }),
    ]);

    await instance.createVideoScene();
  }

  ngOnDestroy(): void {
    this.cesdk?.dispose();
    this.cesdk = undefined;
  }
}

Three details are easy to get wrong here.

createVideoScene() is what produces the timeline. createDesignScene() gives you the design editor with no time dimension, which is the most common reason a video integration comes up without a timeline.

ngOnDestroy matters more in Angular than the equivalent does elsewhere. The engine holds WebAssembly memory and worker threads, and navigating away without calling dispose() leaks both. Route between two views a few times without it and you will watch memory climb.

The baseURL line pins asset loading to the CDN build matching your installed version, which avoids version skew between the JavaScript and the assets it fetches.

Then define the template at video-editor.component.html:

<div #cesdk_container [style.height.vh]="100" [style.width.vw]="100"></div>

Step 4: Use the component

// src/app/app.component.ts
import { Component } from '@angular/core';
import { VideoEditorComponent } from './video-editor/video-editor.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [VideoEditorComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {}

And in app.component.html:

<app-video-editor></app-video-editor>

Run ng serve. You should get a full editor with a timeline: trimming, splitting, text overlays, audio tracks, and filters. Compare against the interactive demo.

Two more things that bite

Relative asset URLs resolve against the CDN. Because baseURL points at IMG.LY’s CDN, a relative URI like /videos/intro.mp4 resolves there rather than against your own origin. Make local asset paths absolute before handing them to the engine.

Angular Universal needs a guard. The editor is browser-only. If you server-side render, keep the component behind an isPlatformBrowser check or it will fail during SSR.

Let an agent do the integration

If you work in an AI-assisted editor, Agent Skills for CE.SDK load CE.SDK’s current documentation and conventions into Claude Code, Cursor, and similar tools, so the code you get back matches the current API instead of a remembered one. There is also an MCP server for live lookup during a session. Background in Introducing IMG.LY Agent Skills.

Building compositions in code

The default UI covers user-facing editing. For templates, automation, or a custom interface, go through this.cesdk.engine.

Scene and page

A page in video mode owns a timeline, and its duration is the duration of the export.

const engine = instance.engine;

const scene = engine.scene.createVideo();

const page = engine.block.create('page');
engine.block.appendChild(scene, page);
engine.block.setWidth(page, 1280);
engine.block.setHeight(page, 720);
engine.block.setDuration(page, 20); // seconds

Clips and tracks

Video is not its own block type. A graphic block with a video fill gets you the same positioning and animation APIs as any other element. A track keeps children playing back to back and recalculates offsets when durations change.

const clip = engine.block.create('graphic');
engine.block.setShape(clip, engine.block.createShape('rect'));

const fill = engine.block.createFill('video');
engine.block.setString(
  fill,
  'fill/video/fileURI',
  'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'
);
engine.block.setFill(clip, fill);

const track = engine.block.create('track');
engine.block.appendChild(page, track);
engine.block.appendChild(track, clip);
engine.block.fillParent(track);

Size the children rather than the track. A track takes its dimensions from what it holds.

Trim and audio

Blocks default to 5 seconds. Longer clips get cut off, shorter ones loop. Trim APIs need duration metadata, so load the resource first.

await engine.block.forceLoadAVResource(fill);
engine.block.setTrimOffset(fill, 1);
engine.block.setTrimLength(fill, 10);
engine.block.setMuted(fill, true);

const audio = engine.block.create('audio');
engine.block.appendChild(page, audio);
engine.block.setString(
  audio,
  'audio/fileURI',
  'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'
);
engine.block.setVolume(audio, 0.7);
engine.block.setTimeOffset(audio, 2);

Skipping forceLoadAVResource is a common bug: the trim calls fail quietly and the clip plays in full.

Export to MP4

Encoding runs in a background worker, so the editor stays responsive. The scene freezes at the start of the export, so later edits will not appear in the output.

const page = engine.scene.getCurrentPage();

const blob = await engine.block.exportVideo(page, {
  mimeType: 'video/mp4',
  onProgress: (rendered, encoded, total) => {
    this.progress = Math.round((encoded / total) * 100);
  },
});

const anchor = document.createElement('a');
anchor.href = URL.createObjectURL(blob);
anchor.download = 'export.mp4';
anchor.click();

Bind progress to your template and you have a progress bar. Encoding a long composition takes time, and an unexplained wait reads as a hang.

engine.block.exportAudio(page, { mimeType: 'audio/wav' }) extracts just the audio, which is useful for transcription and captioning. On that note, caption presets and transitions are both worth exploring once the basics work.

Full reference: the create and edit videos guide and the timeline editor docs.

Customizing the editor

Component order. Add, remove, and reorder UI elements with setComponentOrder({ in: location }, order) across locations such as 'ly.img.dock', 'ly.img.canvas.menu', and 'ly.img.inspector.bar'.
Roles. CE.SDK supports roles, which bundle global settings and scopes. Switching role applies that role’s defaults, and you can define custom roles for specific workflows.
Theming. cesdk.ui.setTheme() for light, dark, or system, or build one with the theme generator. See the theming demo.
Export options. Control which formats users can export, plus quality and dimensions.
Asset libraries. Serve media from your own backend or connect a third-party source.
Localization. Override and extend every string with full i18n support.

Package reusable customizations as a plugin. Background removal and vectorization ship that way.

Where an Angular video editor pays off

Marketing outreach. Personalized video at volume beats a cold email, and text variables plus localization make per-recipient variants a data problem rather than an editing one.

E-learning. Instructors record, trim, and caption in the browser and build a template library instead of one-off files. Plugins can add quizzes and polls.

Social publishing. Templates, an audio library, and configurable animations, then export per platform aspect ratio.

E-commerce. Short product videos raise conversion, and Amazon’s own seller guidance points at meaningful lifts. Templates plus product data generate variations at catalogue scale without a designer per SKU.

Creative automation. Define templates once, then feed them from your data to produce campaign variants. Combined with A/B testing, teams ship several cuts and keep the one that performs.

Next steps

Start from the Angular video editor starter kit, which is a working project rather than a snippet, or try the demo first.

Building the same thing elsewhere? We have equivalent guides for React and Vue.js, plus a broader JavaScript video editing guide on the underlying browser technology. Still comparing options? See our breakdown of the leading video editing SDKs.

Questions about your use case? Talk to us.

A Modern Video Editor SDK for Your React Native App

Jan — Mon, 06 Jan 2025 10:40:35 GMT

Learn how to integrate IMG.LY’s video editor for React Native into your app and how to leverage its capabilities best.

Why Add a Video Editor to Your React Native App?

Video content is solidifying its status as the most engaging form of digital media. Platforms like TikTok, Instagram Reels, and YouTube Shorts have made video consumption and creation an engrained habit with billions of users. You can harness this trend by adding a video editor to your app significantly enhancing user engagement and retention.

React Native, with its ability to create cross-platform applications from a single codebase, is a perfect match for IMG.LY’s CreativeEditor SDK Video Editor. It ensures seamless performance on iOS and Android, powered by the same unified graphics engine across platforms.

Whether your app focuses on social media, marketing, or eCommerce, integrating a video editor empowers users with a creative tool set while elevating the overall experience.

Getting Started: Integrating the Video Editor in React Native

Requirements

Before diving into the integration, ensure your environment meets these requirements:

React Native: 0.73+
iOS: 16+
Swift: 5.10 (Xcode 15.4)
Android: 7+

To get started, add the @imgly/editor-react-native package to your project:

npm install @imgly/editor-react-native

Setting Up the Editor

Once the package is installed, initialize the editor by importing the necessary modules and creating an instance of EditorSettingsModel. You’ll need a license key, which you can obtain from the IMG.LY dashboard.

Here’s how to set up and launch the video editor:

import IMGLYEditor, { EditorSettingsModel } from '@imgly/editor-react-native';

export const openVideoEditor = async (): Promise<void> => {
  const settings = new EditorSettingsModel({
    license: 'YOUR_LICENSE_KEY',
  });

  const result = await IMGLYEditor.openEditor(settings);
};

This launches the editor with the Video Editor preset, enabling users to trim, cut, and enhance their videos with filters, text overlays, stickers, and music.

Use Cases: Building a TikTok-Like Experience

Now that the video editor is integrated into your React Native app, let’s explore some key use cases and how to configure the editor to support them.

Short-Form Video Creation

For apps targeting TikTok-style short-form video content, prioritize features that simplify the editing process:

Timeline Control: Allow users to trim clips and sync overlays like stickers or music.
Filters & Effects: Offer filters to let users add certain moods to their videos with themes like retro, high contrast, or pastel tones.
Text & Stickers: Add captions and playful stickers for videos that are often consumed on mute.
Music & Audio: Let users add soundtracks or sound effects, with a library of trending music for inspirational background music.
Video Templates: Provide ready-made templates that users can customize for specific occasions or themes.

This setup allows influencers and brands to create professional-looking videos that they can share across social media platforms with ease.

Influencers and Marketing

If your app serves influencers or businesses, the ability to create polished, on-brand videos is key. Features to consider:

Branded Templates: Pre-designed templates aligned with specific brand aesthetics, simplifying content creation for marketing campaigns.
Watermarks: Add brand logos or watermarks to videos, ensuring creators and brands maintain visibility.

These features empower influencers and businesses to quickly generate content that’s ready for distribution across platforms.

E-commerce and User-Generated Content

Video editing is a powerful tool for e-commerce apps, enabling sellers and customers to create engaging product demos, unboxing videos, reviews and tutorials. Features like trimming, filters, and music tools make it easy to produce compelling content that enhances the shopping experience.

For example:

Vendors can create promotional videos for products.
Customers can share authentic reviews or tutorials, increasing trust and boosting sales.

Customization Options with CreativeEditor SDK

The React Native plugin offers a range of customization options to adapt the editor to your app’s needs:

UI Customization: Change themes, colors, and layouts to match your app’s branding.
Video Presets: Configure presets for specific use cases, such as limiting video length or optimizing for a particular resolution.
Custom Assets: Add unique filters, stickers, and fonts to create a personalized experience for your audience.
Templates: Use the CreativeEditor SDK Web UI to create custom templates, enabling users to start with professional-grade designs.

Conclusion

Integrating a video editor into your React Native appwill improve your UX, and help boost engagement, retention, and potential distribution of your product, whether you’re building a social media platform, an influencer tool, or an e-commerce app.
With CreativeEditor SDK, you can create a TikTok-like video editing experience or offer specialized tools for businesses and creators.

By following the steps in this guide, you can empower your users to create professional-quality video content directly within your app. Explore the full capabilities of the SDK by visiting the React Native documentation and getting started today.

Stay tuned for updates, and don’t hesitate to reach out with any questions.

Thanks for reading!

3,000+ creative professionals gain early access to new features and updates. Don’t miss out, and subscribe to our newsletter.

Javascript Video Editing: Ultimate Guide for Developers and PMs

Jan — Fri, 20 Dec 2024 14:06:55 GMT

When developing or integrating a JavaScript-based video editor for the web, you must consider a number of factors to ensure the solution is both efficient and robust. This post is the definitive guide for anyone embarking on such a project. It explores the key technologies involved, their strengths and weaknesses, and how different use cases influence the choice of tech stack. We’ll examine diverse use cases, from lightweight, browser-based editors for quick edits to more advanced tools requiring complex processing and rendering. We’ll then discuss how these scenarios drive the selection of features and technology.

Additionally, we will show you the best open-source solutions that can accelerate development. This technical analysis will help you make an informed “build vs. buy” decision, ensuring you select the right approach for your project. Throughout this post, we will use the example of the IMG.LY’s JavaScript video editor (see here for a demo), showing you how these considerations shaped its architecture and feature set. You will learn practical insights into the decision-making process behind a successful web-based video editor.

Modern web technologies like WebGL, WebCodecs and WebAssembly have enabled browsers to efficiently perform resource-intensive tasks such as video editing that had hitherto been the sole domain of desktop applications. As a result Javascript based video editing tools such as veed.io have increased in popularity and users expects ever more sophisticated video editing capabilities inside modern video based web apps.

Video Editing Use Cases

Let’s first outline use cases and requirements of video editing applications on the web. These will inform our discussion of technical features of respective solutions below and grant a conceptual framework for evaluating potential benefits and drawbacks of each solution.

Simple Video Editing

Let’s start with the base case, simple video edits including trimming, cropping and resizing and simple effects such as adjusting brightness or saturation. This is usually sufficient feature set to support video editing for the following use cases:

Sales Outreach Videos: Sales teams often need to quickly edit customer-specific videos to personalize their outreach. This may involve trimming irrelevant portions, adding company logos, or adjusting brightness to ensure visual clarity.

Messaging Applications: These often require basic editing tools to allow users to crop, trim, or apply simple filters to shared videos, ensuring they’re concise and visually appealing.

Screencasting: Screencasting tools benefit from trimming and resizing capabilities to focus on key parts of recorded screens. Adding effects like brightness adjustment can make tutorials clearer and more professional.

CMS Systems: Content management systems may offer built-in video editing to help users optimize media assets for specific platform requirements, such as resizing for web embeds or adding subtle branding.

Screen Recording Applications: Screen recording applications often include simple editing options for cleaning up recorded content by trimming extraneous sections or cropping to highlight the most relevant parts.

Video Annotation

Next, users might want to add an additional layer of information to videos and overlay other assets, such as stickers, shapes, overlays, or text. Crucially these assets need to be time-based. That is, users need control over when the asset is shown so that particular video sequences can be referenced. This introduces the need for a timeline to arrange different video components relative to each other in time, as well as features like voice-over and audio track support.

E-commerce Reviews: Sellers and reviewers can annotate product demo videos with callouts, price tags, and feature highlights to make the content more engaging and informative.

Claims Management / Insurance: Insurance companies can use annotation to highlight key details in submitted video claims, such as timestamps of damage or explanatory text overlaying critical sections of footage.

Real Estate: Realtors might annotate property walkthroughs by adding labels, dimensions, or descriptive text overlays to highlight key features of the home or property.

Educational Applications: Instructors can use annotation tools to emphasize key moments in lectures or tutorials, such as overlaying text with formulas or concepts, or adding visual shapes to guide attention.

Productivity Tools: Users can annotate meeting recordings with timestamps, text notes, or overlay diagrams to summarize key decisions or action points.

Healthcare and Telemedicine: Medical professionals might annotate diagnostic videos or procedure recordings to explain findings or highlight areas of interest for training purposes.

Customer Support & Onboarding Tools: Companies can add annotations to video tutorials or troubleshooting guides to direct users through specific steps or highlight important information.

Video Composition

As we’re moving away from single media editing to creating video compositions of several types of media such as audio tracks, text, images, animations, and effects to create appealing visual designs, a well-designed timeline becomes even more important. Users need to manage many different video components in time, requiring user-friendly ways to browse and integrate external assets. This editor variant is most relevant for the following use cases:

Marketing Tech (Promotional Videos): Marketers can create visually stunning promotional videos by combining custom animations, background music, and text overlays for branding.

Social Media (Stories and Reels): Social media creators can quickly craft short, engaging videos that combine multiple assets like stickers, animations, and dynamic transitions tailored to platform-specific formats.

Event Highlight Reels: Event organizers can compile videos, photos, and music into cohesive highlight reels that encapsulate the essence of the occasion.

Template-based Video Creation

For many applications, users need starting points and examples for their designs. Starting from a blank canvas is rarely necessary for most use cases. Take a simple product video that includes promotional text, a brand logo, and animations. There is no need to reinvent the wheel for these types of videos. Instead, design applications should offer template libraries to accelerate user workflows.

Once we introduce workflows involving several stakeholders, such as designers setting up a certain brand framework and marketers working with and adapting these preconfigured designs, templates need to be able to constrain what edit operations adaptors can perform. These requirements are particularly important for these use cases:

Digital Asset Management: Organizations can manage and deploy branded video templates across teams, ensuring consistent design and messaging.

Social Media Publishing: Social media managers can utilize templates for quick turnaround on platform-specific video formats, such as Instagram Stories or LinkedIn posts.

Marketing Tech: Marketing teams can rely on pre-designed templates to churn out campaign videos at scale while maintaining brand consistency.

Training Videos: HR or L&D departments can adapt existing templates to quickly produce training materials customized for different teams or scenarios.

Creative Automation for Video

Finally, you can leverage data and automation to generate variations of your templates at scale, significantly boosting the productivity of use cases where users need to either test a large number of designs, publish to different channels with different requirements, or adapt designs to many slightly different instances, for example, menu designs for a franchise.

Marketing Tech: Marketers can generate hundreds of ad variations for A/B testing or localization by dynamically adjusting text, visuals, or calls to action.

Social Media Publishing: Social media teams can automate the creation of videos tailored to platform specifications, such as aspect ratios or resolution, while retaining core branding.

E-commerce: Retailers can produce personalized product showcase videos for different customer segments, featuring tailored offers, pricing, or recommendations.

Hospitality Industry: Hotels and restaurants can dynamically generate location-specific promotional videos showcasing seasonal offers, menus, or events.

Essential Video Editing Features

The above use cases are enabled by a set of features from simple transforms to complex compositions. Some video editors are focused more on manipulating individual video clips while others are more oriented towards video creation providing fully-fledged multi-media composition tool. This concise overview serves as a reference for evaluating video editing solutions:
Transforms

Cut, Trim, and Split: Basic editing tools for segmenting video clips.
Resize and Scale: Adjusts clip dimensions, ensuring proper fit or aspect ratio.
Crop and Rotate: Controls framing and orientation.
Zooming Capabilities: A UX feature enabling detailed editing and close-up views for precision.

Adjustments

Basic Adjustments: Controls brightness, contrast, and other visual enhancements.
Filters and Effects: Sets the visual appearance and atmosphere of videos.
Audio Tracks and Mixing: Supports multi-track audio adjustments and volume balancing.
Text and Overlay Options: Allows visual enhancements with text, captions, and emojis, providing opacity and layering options.

Composition

Multi-media Composition: Overlaying images, stickers, text as well as audio tracks are essential for creating videos through composition.
Multi-Track Editing: Elements and layers need to be position relative to each other in time allowing the creation of complex composition.
Canvas-Based Editing: Provides a flexible workspace for positioning and layering media elements.
Timeline Management: Split, join and arrange clips on a timeline. Manages the positioning of clips and timing for seamless transitions.
Animations: Make static elements dynamic and control their behavior in time. Can be use to create videos from scratch and enhance the storytelling workflow of existing ones.

The Technology Landscape

Some time in the early 2000s the web started to be viewed as a platform to run applications not just a distributed database to deliver static html documents. While Javascript development was not yet at a point to serve as foundation for the kind of application development we see today, Adobe Flash filled the role of development platform. Video editing in the early days of the web was mainly provided by Flash-based tools involving simple transform operations such as trimming and basic transitions. Java applets were another way to deliver processing intensive programs via the browser while executing them outside of the browser inside the JVM. These early attempts were either too clunky, since they could not run natively in the browser or lacked the performance to be useful for high quality editing.

When HTML5 arrived, reaching a W3C recommendation in 2014, it became possible to handle multimedia content natively in the browser. Coupled with significant performance advances of Javascript and the introduction of WebRTC this opened the door for video editing on the web.

Some early cloud-based editors, such as WeVideo and Magisto, while more convenient and user-friendly than its predecessors still suffered from performance issues due to latency and lacked the depth of features found in desktop software.

In the past few years advances such as WebAssembly and Javascript libraries built upon it e.g. ffmpeg.js have transformed browser-based video editing. User can now perform complex editing tasks like multi-track timelines, video effects and real-time in-browser rendering. Modern web-based solution have even come to rival desktop apps, because they can take advantage of GPU acceleration, modern APIs like WebGL and UI frameworks such as React.

Let’s have a look at the state of the art web technologies that allow us to create performant video editing experiences inside the browsers. We are going to explore their relative strength, their complexities and conclude with when to best use each of these technologies:

Canvas API

The HTML5 Canvas API should be most familiar to most modern web developers, since it’s a familiar and popular way to render 2D graphics in the browser. It’s use for video editing is limited and restricted to simple overlays, trimming, composition and animation:

Complexity: Canvas is the least complex of the technologies introduced below and overlaps with the WebGL feature set to some extend, it’s API is well-known to most web developers.
Advantages: Canvas is lightweight, compatible across all browsers, and easy to implement, making it a great choice for simple use cases that require basic effects and no timeline.
Downsides: While well suited for simpler tasks Canvas lacks the GPU-acceleration of WebGL, hence it is not recommended for resource intensive operation or performance sensitive use cases.
When to Use: Choose Canvas for simple editing tasks, like trimming or basic overlays, or if you need a fallback technology that works well on legacy browsers and devices.

WebGL

WebGL opens up the power of GPU-accelerated graphics to the browser, making it the default choice for any use case requiring high performance rendering. As such modern Javascript video editing solution are well served by webGL when looking to render visual effects in real time, add transitions or facilitate multi-layer compositions by leveraging the GPU.

Complexity: WebGL comes with a steep learning curve especially if you are unfamiliar with 3D graphics processing, shaders and GPU programming.
Advantages: WebGL delivers high performance for processing complex video effects and can handle significant volume of data without latency. That makes it ideal for advanced, highly responsive video editing features.
Downsides: It can be challenging to engineer modular and maintainable WebGL code, debugging shaders and ensuring consistent performance across devices is an art in itself. WebGL might also be overpowered for simple editing use cases that do not justify the added complexity.
When to Use: Use WebGL if you’re creating a video editor with high-performance demands, particularly if real-time effects, transitions, or multi-layer compositing are needed.

WebCodecs API

Next up in our arsenal of formidable web technologies is a recent addition to modern browsers, WebCodecs, provide direct access to hardware accelerated video encoding and decoding.

The WebCodecs API is a recent addition to the browser, allowing direct access to hardware-accelerated video decoding and encoding. This API makes it easier to handle high-resolution video without delays, thanks to efficient decoding directly in the browser.

Complexity: WebCodecs is relatively easy to use for those familiar with media formats. However, you may need other technologies for rendering and complex editing.
Advantages: This API offers quick access to hardware acceleration, ideal for managing large video files. With it, you can efficiently handle high-definition video playback and streaming.
Downsides: Browser support for WebCodecs is still expanding, so compatibility might be a concern. Additionally, WebCodecs alone doesn’t provide a full editing suite; it needs to be combined with rendering and compositing technologies.
When to Use: WebCodecs is perfect if you need efficient decoding and encoding, especially for handling high-definition playback or live streaming.

WebAssembly (Wasm)

The next performance frontier browser pushed towards was enabling near-native performance by compiling languages like C++ or Rust into a format that efficiently runs in Javascript. This format is WebAssembly, which makes it possible to handle computationally expensive tasks like encoding, decoding or frame manipulation inside the browser.

Complexity: Working with WebAssembly is significantly more complex that the technologies discussed above. Developers need knoweldge of C++ or Rust as well as experience compiling to Wasm.
Advantages: WebAssembly enables browsers to handle complex video processing tasks, such as encoding and decoding, with near-native performance. Libraries such as FFmpeg build upon WebAssembly to make familiar video tools available to web developers.
Downsides: Development with Wasm is complex, and debugging can be a challenge. Additionally, Wasm modules may increase load times.
When to Use: Use WebAssembly when building native libraries for complex operation and expensive computations, such as encoding and decoding.

Our article on building a video editor with React and Wasm gives you a real-world starting point for your own apps.

MediaStream API

The MediaStream API is essential for gaining easy access to live video sources from within the browser, such as webcams. If your video editing app includes a feature for real-time recording or streaming the MediaStream API is an essential tool.

Complexity: MediaStream exposes a fairly simple API and is relatively easy to learn for experienced web developers.
Advantages: This API is well-suited for video feeds with low latency such as recording or streaming and does require addition encoding or decoding.
Downsides: Any use case requiring post-production video has to rely on additional technologies or frameworks, as the MediaStream API is limited to live feeds. The quality of the stream depends on the input source and can vary.
When to Use: Use MediaStream for applications with live recording or streaming functionality.

Web Audio API

The final web technology essential for video editing is the Web Audio API. Whether you want to add effects or mix multiple audio tracks, this API offers sophisticated tools for audio manipulation.

Complexity: For developers unfamiliar with audio processing the learning curve can be stepp, however the API is well designed and there is a host of educational resources.
Advantages: Web Audio API allows precise control over audio enabling your app to offer audio adjustments such as effects or reverb and multi-track editing.
Downsides: It can be challenging to accurately synchronize audio with video, especially if your app includes a real-time component.
When to Use: Opt for Web Audio API when audio editing is a core feature of your video editor.

Using These Technologies Together

Together, these technologies can be use to build a comprehensive browser based editor that is virtually indistinguishable from its desktop based counterparts. Different parts of the video editing workflow can be handled by each technology, while some choices have to made depending on the complexity and requirements of your projects, e.g. whether you’ll need resource intensive processing or an integration will real-time sources.

Video Decoding - WebCodecs API (for efficient video loading and playback).
Rendering - WebGL (for high-performance effects) and Canvas API (for simpler editing features).
Complex Processing - WebAssembly (for encoding/decoding and using native libraries like FFmpeg).
Audio Processing - Web Audio API (for mixing and adding effects to soundtracks).
Live Recording - MediaStream API (to capture live video from devices).

Open Source Javascript Video Editing Libraries

Fortunately in many cases someone has already done the heavy lifting and abstracted those browser APIs into simple to use libraries and frameworks. We’ll explore the most prominent ones distinguishing between projects that are for processing raw video and those that already provide an API for you to use. It is important to note that the libraries introduced below do not provide a video editing UI, unfortunately there are no open source video editors offering an end user interface that meet the standards for inclusion in a production grade application. None of the projects we evaluated met the demands we place on third-party libraries with respect to robustness, stability, maintenance and future development. However many can provide good starting points and references on how to build your own UI such as Reactive Video for React UIs.

FFmpeg.js

FFmpeg.js is the JavaScript port of the popular FFmpeg library compiled into WebAssembly. It enables developers to manipulate and process raw video files entirely in the browser. You can trim, convert formats, extract audio, and apply filters to videos without needing external software. However, FFmpeg just gives you the raw toolchain for building video editing features, you are still tasked with building the entire UX and editing workflows. We have an extensive guide on FFmpeg that you can consult to explore its capabilities and get started learning FFmpeg syntax.

Advantages:
- Most comprehensive library for web based video and audio processing.
- Fully client-side, no need for server-side processing.
- Highly flexible, allowing fine-grained control over video workflows.
Downsides:
- Fairly complex for beginners with a steep learning curve, requires familiarity with FFmpeg’s command-line syntax.
- FFmpeg is licensed under LGPL which makes it ill-suited for most commercial projects.
**When to Use:**FFmpeg.js is best suited for projects with custom requirements and UI making it necessary to exert fine-grained control over video processing tasks, especially for use cases like format conversion, advanced editing pipelines, or serverless video workflows.

The following two libraries allow you to programatically create and edit videos, we focus on the most stable, popular libraries here, while there might be promising up and comers we want to ensure a degree of dependability of the third-party code to be used in production systems.

Remotion

Remotion is a React-based framework that enables developers to edit or create videos programmatically in a declarative fashion using React components. React’s declarative syntax makes it comparatively simple to manage video content and Remotion provides a convenient UI for previewing and editing videos. While its studio UI cannot be embedded directly, Remotion can serve as the graphics processing engine for custom UIs. Although it is a commercial project, it offers a generous free tier for individuals and small businesses.

Advantages:
- Leverages React’s declarative model for seamless video creation.
- Provides robust video preview capabilities for iterative development.
- Flexible integration with custom-built UIs.
- Generous free tier for non-commercial and small-scale projects.
Downsides:
- The built-in studio UI cannot be embedded, requiring developers to create their own UI for embedding.
- React-specific, limiting use in non-React environments.
**When to Use:**Use Remotion when building React-based video applications that require programmatic video generation or dynamic video content. It’s ideal for teams already familiar with React and for applications where embedding is not a core requirement.

Etro.js

Similarly to Remotion, Etro.js is a JavaScript framework for programmatic video editing, it is framework agnostic and provides an API for simple composition of layers, effects and exporting videos.

Advantages:
- Includes support for advanced effects using GLSL shaders.
- Designed for in-browser video workflows.
Downsides:
- Minimal community support compared to larger projects.
- Requires additional effort to create a full UI.
When to Use: Suitable for applications where programmatic control and customization are key.

Extensibility

An important consideration when deciding to buy a prebuilt video editing solution is the degree of customization and extensibility required by your use case versus how critical speed to market is. While most SDKs provide enough flexibility by exposing cor API to build a solution that best suits your needs, this level of technical control comes at the expense of higher development and maintenance efforts. White-label solutions on the other end of the spectrum offer limited customization often relying on iFrames for embedding while providing maximum speed to market. If you are still in the phase where you need to make the business case for video editing features these might be key to allowing to quickly iterate. To learn more about weighing the pros and cons of SDK vs. White-label explore our extensive guide on the topic.

IMG.LY’s CE.SDK achieves extensibility by providing an interface for plugins that allow developers to add custom features and UI elements.

Cross Platform Video Editing

While this post is dedicated specifically to Javascript video editing an important consideration for choosing a video editing tech stack is whether there exists an intermediary output format that preserves editing operations so that videos can be edited on other devices and platforms. This is important for collaborative video editing use cases as well as use cases where videos are captured and basic edits performed on mobile and the finishing touches performed on the desktop.
These consideration are particular pertinent for the Real Estate, Telemedicine and Productivity use cases described above, since they involve either a multi-device or collaborative component.

At most common libraries or SDKs can achieve that by offering support for some form of serialization, that is exporting the edit operations along with the unedited video to then reapply edits upon import.

IMG.LY’s CE.SDK, on the other hand, is the only video editing SDK that is truly cross-platform. That means it is built atop a single creative engine that is portable to any platform. Whether iOS, Android, Desktop, or the Web, every platform uses the same underlying tech and uses the same custom format for scenes which contain all assets and edits making error-prone serializations obsolete.

Furthermore:

iOS and Android make use of the same underlying API.
Cross platform feature parity is baked into the cake. Since core functionality is implemented at the engine level, features are guaranteed to be available on both platform, although the timeline might differ somewhat.
Designs are 100% interoperable and consistent between platforms. Exporting and importing design files across platforms works seamlessly and final renderings are guaranteed to be consistent.

Javascript Video Editing & Generative AI

Generative AI affects video editing and generation across the board. Text-to-video is the obvious case, but AI is also changing how videos get composed and edited in less visible ways: automated transitions, color grading, voice enhancement, voiceover generation, background removal, and inpainting.

These capabilities come from a shifting set of specialist providers, and which one is best changes on a scale of months. Two design consequences follow from that.

First, a JavaScript video editor has to be open enough to act as an integrator. It needs to combine voice tracks, clips, text, and other media programmatically before a user ever sees the timeline, and it needs to let you swap the model behind any one of those steps without rebuilding the editor.

Second, the human has to stay in the loop. AI output is uneven, and refining an unchangeable artifact by re-prompting is slow and imprecise. Generated material should land in the scene as editable blocks, so users can trim, replace, and regenerate individual parts rather than rolling the dice on the whole clip again.

We built an AI video clipping tool in a day on that principle, and animating between images with Veo 3 shows the generated-but-still-editable workflow end to end.

Conclusion

When building or integrating a JavaScript video editor, developers and PMs have to navigate a complex technology landscape and make myriad decisions along the way. This guide has covered everything from essential use cases and feature sets to the cutting-edge technologies that underly browser-based video editing. Whether your project requires basic trimming tools or advanced multimedia composition, understanding the benefits and downsides of the various solutions like Canvas, WebGL, WebCodecs, WebAssembly, and more is crucial for choosing the right stack.

We’ve also explored how open-source tools like FFmpeg.js, Remotion, and Etro.js can accelerate development, while SDKs like IMG.LY’s CE.SDK offer unmatched extensibility and cross-platform compatibility. For those navigating the impact of generative AI on video editing, the need for seamless integration and user-centric design remains important.

If you’re looking for a robust, modern video editing solution for your web application, explore our showcase and start a free trial.

For the framework-specific version of this, we have setup guides for React, Vue.js and Angular. If you are still comparing vendors rather than writing code, start with our breakdown of the leading video editing SDKs.

One practical note if you build with an AI assistant. The APIs in this space move quickly, and models tend to produce integrations against whichever version was in their training data. Agent Skills for CE.SDK and the MCP server load the current documentation into Claude Code, Cursor, and similar tools so the generated code matches the API that actually ships. We wrote about why in Introducing IMG.LY Agent Skills.

CE.SDK Video Editor Now Available on Android

Jan — Tue, 22 Oct 2024 11:44:02 GMT

We are excited to announce the release of CE.SDK’s video editing and video content creation tools for Android!

After the successful iOS launch, CE.SDK’s professional video editing capabilities are now available for Android. Whether your app focuses on social media, e-commerce, or marketing technology, CE.SDK enables users to create high-quality videos directly within your app.

Getting Started

Getting up and running with an instance of the CE.SDK video editor for Android is easy.

After downloading your license (get your trial license here) from your dashboard, simply invoke VideoEditor as composable function, Activity or Fragment.

Our Video Editing Backstory

Since we launched VideoEditor SDK almost ten years ago, we have seen an astounding range of creative and unique use cases of our SDK in customer projects. From Cameo connecting celebrities and their fans in new ways, over Multibrain supercharging their users marketing campaigns with editable video content, to Zigazoo powering video content within their social network for kids while putting safety and parental control first.

Since then, millions of users have experienced IMG.LY’s VideoEditor SDK through our customers’ products, shaping how they expect to interact with and modify videos. Continuous feedback from both our customers and their users has also influenced the way we approach video interface design, helping us refine and innovate along the way.

Our goal was to combine the reliability and robustness of the VideoEditor SDK with true cross-platform compatibility and the flexibility to meet diverse needs. By applying the lessons we’ve learned, we aimed to deliver an exceptional video editing user experience straight out of the box. We described how those learnings shaped the design of the mobile video editing interface.

Key Capabilities

With CE.SDK’s sleek timeline interface, your Android users can now take their video editing from simple transforms and adjustments to complex composition and multi-track editing:

Timeline-Based Editing
Split, trim, arrange video and audio tracks. Position elements such as images and stickers on the timeline and control their duration.

Multi-Track Editing
Work with multiple video and audio tracks, allowing for complex composition.

Transform & Enhance
Crop, flip, rotate, and use presets for common video formats. Add filters, effects, blur and essential adjustments.

Customizable Templates
Create and import templates using our web video editor, to jumpstart your users’ video composition and designs.

Asset Integration
Integrate your own asset libraries for audio tracks, sound effects, images, and more.

Cross-platform Interoperability
CE.SDK’s video capabilities extends across iOS, Android and the Web, enabling cross-platform applications to offer seamless video editing capabilities. Users can edit and save work in progress and pick up on any device.

Check out the showcase app for an interactive demo of these features.

Customization

The ability to tailor the video editor to your app’s particular use case has been a front and center concern in its development.

UI Customization: While theming is currently limited to dark and light model, future releases will introduce more flexible theming, allowing you to modify the look and feel of the editor to match your app’s branding. Furthermore, we expose callbacks that make it possible to hook into editor events and overlays for custom dialogues.
Configure Video Presets: You can configure the editor to create video presets based on your users’ needs. For instance, you may want to fix the video’s aspect ratio or optimize for certain resolutions, depending on the target platform.
Video Templates: With the CE.SDK video editor web UI, you can create an unlimited number of video templates, such as collages, text designs, and animations, providing your users with professional-quality starting points for their video designs.
Assets: Provide custom filters, fonts, and stickers to enhance the user experience. For niche apps, this can be an excellent way to engage users by offering content that feels unique to your community.

CE.SDK’s new Android video editing capabilities are perfect for a variety of use cases, including:

Social Media Applications: The CE.SDK video editor for Android excels at short-form video, ideal for social media applications, whether your users are publishing to other networks or you run a network yourself.
Ecommerce: Allow your users to create engaging product showcases, ads, and promotional videos, testimonials or reviews.
Marketing Tech Platforms: Users can leverage our versatile templating to easily create polished social media and marketing graphics from within your app.

What’s Next?

This Android release is just the beginning! We are about to launch a Camera UI for Android and are working on more advanced template creation features. So stay tuned.
To see some of these features in action, check out our iOS demo, where the next phase of innovation is unfolding.

Get Started

Explore our Video UI Showcase and Documentation for Android to discover how CE.SDK can streamline your content creation projects and make Android video editing easier than ever.

Over 3,000 creative professionals gain early access to new features and updates. Don’t miss out, and subscribe to our newsletter.

A Modern Video Editor SDK for your Flutter App

Jan — Fri, 13 Sep 2024 11:26:15 GMT

Mobile users who cut clips in TikTok or CapCut every day expect the same inside your app. Sending them out to another editor and back is where the workflow breaks, and where your app stops owning the content.

This guide covers adding a video editor to a Flutter app with CreativeEditor SDK (CE.SDK): the setup, the presets, and what you can customize once it runs.

Video editing works on both iOS and Android

Worth stating plainly, because this post used to say otherwise. When it was first published in September 2024, CE.SDK video editing shipped on iOS only. Android support landed the following month. Both platforms are supported from the same Flutter plugin today.

Why add a video editor to your Flutter app

Short-form video reset what people consider normal. Trimming a clip, adding a caption, and dropping in music is something a very large number of users now do without thinking about it, and they expect to do it where they already are.

For your app, the payoff is retention and ownership. Every export-and-reupload round trip is a chance to lose the user, and every video finished somewhere else is one you cannot template, moderate, or keep on brand.

Getting started

Requirements

Flutter 3.3.0 or later, Dart SDK 3.4.3 or later
iOS and Android are both supported. Check the Flutter getting-started guide for current platform minimums.
A CE.SDK license key. Start a free trial to get one.

Add the plugin to pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  imgly_editor: ^1.80.0

Pin with a caret rather than an exact version so you pick up patch releases. Check pub.dev for the current release before you start, since the plugin tracks the CE.SDK engine and moves regularly.

Open the editor

Import the package:

import 'package:imgly_editor/imgly_editor.dart';

Then open it with an EditorSettings instance and the video preset. The license key is required. userId is optional and only used for monthly active user counting across devices.

class VideoEditorSolution {
  Future<void> openEditor() async {
    final settings = EditorSettings(
      license: 'YOUR_LICENSE_KEY',
      userId: 'YOUR_USER_ID',
    );

    final result = await IMGLYEditor.openEditor(
      preset: EditorPreset.video,
      settings: settings,
    );

    if (result == null) {
      // The user closed the editor without exporting
      return;
    }

    // Handle the exported result here: upload it, store it,
    // or hand it to the next step in your flow.
  }
}

Two things people miss on the first pass. EditorPreset.video is what gives you the timeline; the other presets open design or photo editing with no time dimension. And openEditor returns null when the user backs out, so handle that before touching the result or you will crash on cancel.

That gives users trimming, splitting, filters, text overlays, stickers, and audio.

For the full configuration surface, see the Flutter video editor docs.

Building a TikTok-style experience

The default editor covers the basics. What turns it into a short-form video experience is the content you put behind it.

Trimming and timeline control. Users position clips relative to each other and to audio tracks. This is the core interaction, and it is the one worth testing on a real device early, because timeline ergonomics on a phone are genuinely hard. We wrote up what we learned building ours in designing a timeline for mobile video editing.

Filters and effects. Filters set the tone, and a curated set beats an exhaustive one. Ten good looks get used; sixty get scrolled past.

Text and stickers. Captions matter more than they look like they should, because most social video is watched on mute.

Music and audio. A library of cleared tracks removes the biggest blocker to finishing a video.

Templates. The most effective lever of the five. Build video templates in the CE.SDK web editor and deliver them to your Flutter app, so users start from something rather than an empty timeline. See the video editor demo for what they look like.

For influencers and brand accounts

Branded templates let a creator drop footage and copy into a layout that already matches the brand. Watermarks keep attribution attached when the video travels off-platform.

For e-commerce and user-generated content

Unboxing videos, reviews, and demos are the highest-intent content on a marketplace, and they are exactly the sort of thing people abandon if editing is awkward. The same trimming, filter, and music tools cover it.

Customization

The Flutter plugin is designed to adapt to your brand and use case:

UI customization. Theming, color palettes, and callbacks to hook into editor events.
Video presets. Constrain length or resolution to suit your target platform.
Templates. Generate collages, text designs, and animations in the CE.SDK web UI and ship them to your app.
Assets. Supply your own filters, fonts, and stickers. For a niche app this is often what makes the editor feel native to your community rather than generic.

Configuration options are documented in the Flutter configuration reference.

Let an agent help

CE.SDK ships an MCP server that exposes the current documentation to AI coding tools, so an assistant can look up the real API during a session rather than reconstructing it from training data. That is worth wiring up before you start, particularly given how often the plugin version moves. Background in Introducing IMG.LY Agent Skills.

Next steps

Start from the Flutter video editor documentation, or try the web demo to see the editing model before you integrate.

Shipping on more than Flutter? We have equivalent guides for React, Vue.js, Angular, and React Native. If you are still comparing vendors, we broke down the video SDKs available for mobile apps.

Questions about your use case? Talk to us.

Designing A Timeline For Mobile Video Editing

Frank — Tue, 20 Aug 2024 13:08:58 GMT

This article documents the most surprising insights from our journey building timeline user interface. We’ll explore everything from overcoming usability challenges, visualizing data, prioritizing information, and refining touch interactions.

IMG.LY’s CE.SDK for iOS now comes with a native video editor, built from scratch in SwiftUI. I was responsible for coding and polishing the timeline user interface, working with both our design team and our cross-platform engine team. When I started implementing the timeline, we had the basic design concept sketched out in Figma. However, for an advanced UI like this, nothing beats rapid prototyping and iteration between design and development to make it feel right.

I. Visualizing Time

Timelines are a well-known convention, at least to modern humans. Timelines show durations in time as segments in space, distributed along the horizontal axis, with multiple tracks for things that happen in parallel. This is a simple yet effective way of representing moments in time visually. As obvious as it may seem today, this flavor of data visualization first appeared only 250 years ago. One of the earliest known examples is Joseph Priestley’s A Chart of Biography, published in 1765. Here is Priestley’s A New Chart of History from 1769, which is even more impressive:

Video editing timelines are built on this exact principle of mapping time to space: A digital video composition consists of tracks for simultaneous audio and video layers. These tracks contain individual clips that can be rearranged, trimmed, and transformed. Navigating the video’s time dimension is as easy as scrolling left and right. The tracks and clips serve as landmarks for orientation, forming the mental model of what the video composition is.

Timelines map time to space

Horizontal Direction

Modern iOS user interfaces appear flipped in right-to-left languages: the buttons and controls are in different horizontal positions. The layout follows the reading direction of the language. Even the familiar drill-down navigation animates to the left when drilling deeper into the hierarchy, and the Back button sits in the upper right corner, its chevron pointing to the right. So, naturally, one of the first things we checked was whether timelines should run right-to-left in writing systems like Arabic or Hebrew. According to a trustworthy source, this is not the case: we found an old version of Apple’s developer guides stating that editor timelines in software are universally left-to-right, even if the surrounding interface layout is flipped by the operating system for right-to-left system languages.

Cognitive Load vs. Discoverability

When designing our video timeline, we experimented with both the size of the clips and with the dimensions of the timeline itself. How much can you fit on a screen before it looks cluttered? How large can the controls be without being clumsy and inefficient? The only way to find out is to try it out right on the device.

Hiding features in dropdown menus is easy. Banishing them to separate screens is even easier. But hiding functionality hurts discoverability. Out of sight, out of mind. We think user interfaces in productivity apps should be the opposite. They should prioritize high information density and avoid extra navigation steps as much as possible.

We increased the density of the toolbar that sits below the timeline: Our goal was to make all the important features easily accessible, despite the small screen. We achieved this by changing the single floating Add button from the initial designs to a more granular set of buttons to add specific asset types, like stickers and text. This not only increases efficiency for frequent users, it also makes the capabilities of the video editor more obvious and approachable.

Adaptive Height

As space is at a premium on a small screen, we wanted to make the video preview as large as possible. We decided to allow the user to collapse the timeline at any time to focus on the video canvas. And even without manually minimizing the timeline, it doesn’t waste space: the timeline adjusts its height to fit snugly around its contents. It only grows as you add more clips.

Units and Scale

The numeric scale is an essential part of any timeline. It helps you see the in and out time of a clip at a glance, and the permanently visible ruler makes changes in the zoom level easy to understand. We added dots as subdivisions between the ruler’s numeric labels, which gives it a nice tool-like character. At full zoom (when the ruler shows 5-second intervals), we decided to use four dots in between, so there is one dot for each second. We think this detail adds a welcome sense of precision.

The clips themselves have a duration label when they are selected. If the duration is below 10, you get a fractional digit (e.g., 4.2s). For the ruler, we went with the same short format (5s, 10s, 30s, etc.) for all values below one minute, and the technical format (1:00, 1:30, etc.) for the rest. Of course, we use iOS’s built-in number formatters to get properly formatted and localized strings for our labels.

An important detail for the label that shows the current playback timecode: The seconds must always be rounded down. If the playhead sits between two seconds, the lower number must be displayed until the playhead crosses the indicator for the higher second. Simple rounding to the nearest integer would be confusing, because it doesn’t match our expectations when dealing with timelines. Five seconds do not count as five seconds until they have elapsed in their entirety.

II. Manipulating Time

What looks good is not guaranteed to feel good when you interact with it. A video editor timeline is more than just a visualization; it’s also a user interface. As such, it should be self-explanatory and provide constant feedback as the user manipulates it.

Fingertip-sized

The clips must be large enough to be easy to touch and at the same time detailed enough to give a decent overview. The size that can be easily tapped by most people is around one square centimeter, which matches the 44 × 44 pt default size of iPhone system controls. Our testing showed that we could go a little smaller. Editing video is a focused task, so the tap targets don’t need to be as robust as for tasks that happen while you, say, run for the bus. And all user interfaces should be scalable for accessibility anyhow, so we didn’t hard-code any sizes and we also made the dimensions adjustable. And, speaking of adapting to individual user needs: of course, all the text labels in our timeline are automatically scaled depending on your device settings.

Handles

Selected clips in the timeline get a bold blue frame with large handles on either side. These handles are used to trim the clip’s length. For comfortable tapping and dragging, the handles must be larger than their visual size. In fact, we made the hit area more than twice as wide as the visual appearance suggests.

Early on in our design process, we realized that the trim handles had to sit on the outside of the clip, extending beyond the left and right edge. This made it hard to see the clip’s actual size, so we added little grooves: little triangular indents that point to the start and end of the selected clip.

Some clips in the timeline can be extended to any duration, like text or stickers. Other clips have a finite footage duration, like video and audio clips. To make this difference visible, clips with a finite footage duration reveal a ghost outline in the background while they are resized, featuring marching ants. The handle icon changes from an outward-pointing chevron to a vertical line when the clip can’t be made longer.

Scrolling and Zooming

A rather invisible detail was one of the trickiest things to get right: the coordination of all the different finger gestures on the timeline.

Horizontal Scrolling: Timeline scrolls horizontally to move in time.
Vertical Scrolling: Timeline scrolls vertically providing room for tracks.
Clip Movement: Dragging horizontally on a selected clip moves it.
Duration Adjustment: Dragging the trim handles adjusts the clip’s duration.
Pinch-to-Zoom: Pinching with two fingers changes the zoom level of the visualization.

All these gestures must behave as expected and not interfere with each other. We found it unexpectedly difficult to fine-tune and harmonize these interactions with pure SwiftUI, so we used some proven legacy iOS techniques to get it right. If you’re interested in the technical details of our solution with SwiftUIIntrospect and UIGestureRecognizers, check the source code.

Snapping

Video editing must feel precise, even on a small screen. When you trim or move clips, they should snap to other clips, to the playhead, and to the start and the end of the timeline. To show which position the selected clip snaps to, we designed animated dotted lines. We use the iPhone’s haptic engine to provide subtle feedback for snapping, which really helps to make the interaction feel natural, like a notch snapping into a detent. Something that we didn’t get right at first: Snapping should only respect those snapping points that are currently visible in the viewport. Of course! Otherwise, a partially visible clip may snap to something offscreen, which is very confusing.

Scrubbing Preview

For editing a video clip to feel precise, you need to be able to see exactly where you’re trimming. But the playback position in our mobile timeline can’t change while you’re trimming, because that would mean scrolling the timeline, which would move the very clip you’re trimming. The trim preview needs to be independent of the composition’s playback position. We solved this by adding a temporary overlay with its own playback time to the canvas. When you start dragging one of the handles on either side of the clip, the overlay shows the exact trim position of the video clip. When you release, the preview returns to the playback position.

Try it out!

“The only way to experience an experience is to experience it,” said interaction designer Bill Moggridge, and we couldn’t agree more! If you’re curious how our new video timeline feels, download our iOS app and try editing your own videos in our brand-new timeline experience.

If you’re a developer, check out the video editor documentation. With IMG.LY’s SDK, you can add all of these video editing capabilities to your own apps in a breeze.

And if you are weighing this against building the timeline yourself, or against another vendor, we compared the video SDKs available for mobile apps on the details that matter once you get past the demo.

CE.SDK v1.21 Release Notes

Neslihan — Thu, 22 Feb 2024 16:22:28 GMT

Since our last release, we’ve been crafting new features to empower your users’ creative journey. Today, we are happy to introduce CE.SDK v1.21!

Create Videos With A New Timeline for Web

Create eye-catching videos within your web app for any platform, including Instagram, TikTok, or YouTube! Here’s what’s new: the integrated timeline supports the arrangement of elements like videos, photos, text, audio, shapes and stickers. Users can fine-tune their projects with adjustments or filters, and personalize their creations with audio from a customizable library.

To simplify your content creation, use our formats that automatically set your canvas size for social media and other popular video resolutions.

Effectively arrange and edit multiple elements within your videos, offering precise control over the editing process. Easily split, trim, and replace. Lastly, make it pop by adding audio files to the composition.

Creating templates with placeholders for your users is just as easy. Simply select an element, click ‘Placeholder’, and decide which elements can be edited.

To integrate, browse our Guide. Try the video editor live demo yourself. This showcase contains templates, audio and video examples for you to try.

Keep Designs in Focus on iOS

Our new Camera Zoom Limits make editing a design easier. Your page stays in focus to avoid accidental scrolling outside the design. The zoom level is set within a minimum and maximum range, ensuring a practical, usable view at all times. When you select an element in your design, it stays in focus when opening adjustments or other inspectors. It allows you to immediately see changes made to the selected element. This improvement is available for iOS and Android, and can be tested in our Design Editor Demo on the App Store and Google Play.

Ensure Color Purity in Print

Our newly introduced Underlayer API guarantees the preservation of color purity whenever you export designs using our CE.SDK for print. This solution specifically addresses the challenge of maintaining the richness and vibrancy of colors, irrespective of the color of the canvas, which could range from apparel to paper.

When you’re ready to export your design, this feature adds a special ‘underbase’ layer, underneath your design. This layer, typically a white or specific primer coat, makes sure the final printed colors match your original vision perfectly.

Very soon: Integrate Short-Form Video Creation

Video remains key for attracting, engaging and retaining audiences, especially on mobile. Creating a video editor can be tough, thus we’re thrilled to soon release our turnkey solution for mobile video content creation.

Combined with our new Camera SDK, users can seamlessly blend video, audio, text, and graphics on a sleek timeline. It includes features like voiceover, zoom, tap to record, and the popular split screen modes for reactions and duets. You may recognize these from Instagram or TikTok!

Last chance: Secure your waitlist spot to our Video Content Creation Release. You will also receive access to our TestFlight app.
Registration is only open until March 6, 2024.

? Gain Access to our Video Content Creation Release
? Download Feature Exposé instantly (PDF)

We can’t wait to hear your feedback!

Thanks for reading. Join over 3000 specialists with powerful apps, and subscribe to our newsletter. We keep you in the loop with brand-new features and updates.

How To Build a Video Editor With Wasm in React

Antonello — Mon, 16 Jan 2023 16:31:57 GMT

You may think that video processing can only be performed on a server, but this is not true. Thanks to WebAssembly (Wasm), you can run high-performance code written in C or C++ in your browser. This opens up a lot of possibilities and gives you the ability to build a client-side video editor. Let’s now learn how to create a Wasm-based video editor in React.

Follow this tutorial and learn how to build the application below:

This React video editor allows users to upload a video, select a portion of it, convert it to GIF, and download the resulting image file – all of this in your browser.

What is WebAssembly?

WebAssembly (also called Wasm) is a new type of code that modern web browsers can run and understand. Specifically, Wasm provides new functionality to web development and brings significant performance benefits. This applies to both frontend and backend, since Wasm can be used by both clients and servers.

Wasm code should not be written by hand. This is because Wasm is a binary instruction format. So, Wasm is designed to be a compilation target for source languages such as C, C++, Rust, and others. Learn more about Wasm on the WebAssembly MDN Web Docs page.

Wasm provides a way to run code written in several languages on the Web at near-native speed. This means that WebAssembly forms can be easily imported and executed by a Web client or server application. In other words, you can use WebAssembly functions via JavaScript and achieve results that were not previously possible on a browser, especially in terms of performance.

What is `ffmpeg.wasm`?

As stated on the GitHub page of the project, ffmpeg.wasm is a WebAssembly and JavaScript port of FFmpeg. If you are not familiar with it, FFmpeg is an open-source software suite that includes several libraries and programs for managing audio, video, streams, and other media files. All of these tools can be invoked and executed via the ffmpeg command-line instruction.

Therefore, ffmpeg.wasm enables video and audio processing in JavaScript-based web applications. In detail, it enables video and audio recording, format transcoding, video and audio editing, and video scaling. Even though it is a WebAssembly-based library, you can use it in your JavaScript code just like any other npm library. This is the power of Wasm.

Since it transpiles to Wasm, you can take advantage of ffmpeg.wasm directly in your browser without performance concerns. This means that ffmpeg.wasm opens the door to client-side audio and video processing. Let’s now learn how to use ffmpeg.wasm to build a client-side video editor in React!

Building a Video Editor in React with WASM

In this step-by-step tutorial, you will learn how to build a Wasm-based video editor in React with ffmpeg.wasm. This React video editor application will allow you to upload a video, trim it, and convert it to GIF in the browser, without using any backend functionality or external API.

Clone the GitHub repository that supports the tutorial and try the video editor application by launching the following commands:

git clone https://github.com/Tonel/video-editor-wasm-react
cd video-editor-wasm-react
npm install
npm run start

Let’s waste no more time and see how to build a video editor application in React.

Prerequisites

This is the list of libraries the video editor application you are about to build depends on:

Node.js and npm 8+ and higher
React 18.2+
[ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm)
[antd](https://www.npmjs.com/package/antd) >= 4.3
[video-react](https://www.npmjs.com/package/video-react) >= 0.15

antd is one of the most popular UI libraries for React. In this tutorial, its [Slider](https://ant.design/components/slider/) component will be used to implement the video cutting feature. So, any other UI library including a slider component with a range option will do.

video-react is one of the most advanced and reliable HTML5 video players for React. You can replace it with any other React video player library.

Initializing a React Project

Let’s initialize a new Create React App React project called video-editor-wasm-react with the command below:

npx create-react-app video-editor-wasm-react

Your video-editor-wasm-react directory should now contain the following files:

video-editor-wasm-react
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Enter the video-editor-wasm-react folder in your terminal and launch a React local server with the commands below:

cd video-editor-wasm-react
npm start

Now, visit the [http://localhost:3000/](http://localhost:3000/) page in your browser, and you should be seeing the default Create React App screen.

Before installing ffmpeg.wasm, you need to get your server ready. As stated in the official documentation, fmmpeg.wasm depends on [SharedArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer). This means that only browsers that support SharedArrayBuffer can run ffmpeg.wasm. You can find a complete list of all browsers here.

In the most popular browsers, SharedArrayBuffer is only available to cross-origin isolated webpages. To enable this, you need to set the following headers in your server hosting the React application:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

In a Create-React-App application, you achieve this by creating a src/setupProxy.js file and making sure it contains the following code:

module.exports = function (app) {
    app.use(function (req, res, next) {
        res.setHeader("Cross-Origin-Opener-Policy", "same-origin")
        res.setHeader("Cross-Origin-Embedder-Policy", "require-corp")
        next()
    })
}

Your local development server is now ready to use ffmpeg.wasm!

Installing the Project’s Dependencies

It is now time to add the aforementioned required dependencies to your project.

First, install ffmpeg.wasm with the following command:

npm install @ffmpeg/ffmpeg @ffmpeg/core

Now, let’s install Antd Design:

npm install antd

Finally, it is time to install Video-React:

npm install video-react redux

Note that video-react also requires [redux](https://www.npmjs.com/package/redux) to work.

You have now everything you need to start developing your React video editor!

Uploading a Video to the Video Editor

Create a VideoUpload component as below:

// src/components/VideoUpload.js

import { Button, Upload } from 'antd';

function VideoUpload({ disabled, onChange = () => {}, onRemove = () => {} }) {
  return (
    <>
      <Upload
        disabled={disabled}
        beforeUpload={() => {
          return false;
        }}
        accept="video/*"
        onChange={(info) => {
          if (info.fileList && info.fileList.length > 0) {
            onChange(info.fileList[0].originFileObj);
          }
        }}
        showUploadList={false}
      >
        <Button>Upload Video</Button>
      </Upload>
      <Button
        danger={true}
        disabled={!disabled}
        onClick={() => {
          onRemove(undefined);
        }}
      >
        Remove
      </Button>
    </>
  );
}

export default VideoUpload;

As you can see, this component uses the Antd Design Upload component to allow users to upload a video file. Then, a “Remove” button gives users the ability to remove the uploaded video. Note that when the Upload component is enabled, the “Remove” button is disabled and vice versa. This way, users can deal with only one video at a time.

Playing a Video in React

You now need a VideoPlayer component to play the uploaded video. You can build it as below:

// src/components/VideoPlayer.js

import {
  BigPlayButton,
  ControlBar,
  LoadingSpinner,
  Player,
  PlayToggle,
} from 'video-react';
import 'video-react/dist/video-react.css';
import { useEffect, useState } from 'react';

export function VideoPlayer({
  src,
  onPlayerChange = () => {},
  onChange = () => {},
  startTime = undefined,
}) {
  const [player, setPlayer] = useState(undefined);
  const [playerState, setPlayerState] = useState(undefined);

  useEffect(() => {
    if (playerState) {
      onChange(playerState);
    }
  }, [playerState]);

  useEffect(() => {
    onPlayerChange(player);

    if (player) {
      player.subscribeToStateChange(setPlayerState);
    }
  }, [player]);

  return (
    <div className={'video-player'}>
      <Player
        ref={(player) => {
          setPlayer(player);
        }}
        startTime={startTime}
      >
        <source src={src} />
        <BigPlayButton position="center" />
        <LoadingSpinner />
        <ControlBar autoHide={false} disableDefaultControls={true}>
          <PlayToggle />
        </ControlBar>
      </Player>
    </div>
  );
}

This is a simple video-react-based video player component, which only allows playing or stop the video file received with the src prop.

Cutting a Video in React

Your goal is to allow users to select a portion of the video and watch it before converting it into GIF. Implement this with the logic below:

import { Slider } from "antd"
import { sliderValueToVideoTime } from "../utils/utils"

function VideoEditor() {
  const [sliderValues, setSliderValues] = useState([0, 100])

  // logic to handle videoFile, videoPlayer, and videoPlayerState...

  useEffect(() => {
      const min = sliderValues[0]
      // when the slider values are updated, updating the
      // video time
      if (min !== undefined && videoPlayerState && videoPlayer) {
          videoPlayer.seek(sliderValueToVideoTime(videoPlayerState.duration, min))
      }
  }, [sliderValues])

  useEffect(() => {
      if (videoPlayer && videoPlayerState) {
          // allowing users to watch only the portion of
          // the video selected by the slider
          const [min, max] = sliderValues

          const minTime = sliderValueToVideoTime(videoPlayerState.duration, min)
          const maxTime = sliderValueToVideoTime(videoPlayerState.duration, max)

          if (videoPlayerState.currentTime < minTime) {
              videoPlayer.seek(minTime)
          }
          if (videoPlayerState.currentTime > maxTime) {
              // looping logic
              videoPlayer.seek(minTime)
          }
      }
  }, [videoPlayerState])

  return (
          // other video editor components...
          <Slider
            disabled={!videoPlayerState}
            value={sliderValues}
            range={true}
            onChange={(values) => {
              setSliderValues(values)
            }}
            tooltip={{
              formatter: null,
            }}
          />
        // ...
}

This component equips users with the ability to select a portion of the uploaded video with the Antd Design Slider component and watch it in loop, before converting it into a GIF file.

Specifically, the logic here uses the sliderValueToVideoTime() function below to transform the slider values into time coordinates:

// src/utils/utils.js

export function sliderValueToVideoTime(duration, sliderValue) {
    return Math.round(duration * sliderValue / 100)
}

Note that the actual video processing slider will be performed by the next component through ffmpeg.

Converting a Video to GIF in React

To convert a video to GIF, create a VideoConversionButton component as follows:

// src/components/VideoConversionButton.js

import { Button } from 'antd';
import { fetchFile } from '@ffmpeg/ffmpeg';
import { sliderValueToVideoTime } from '../utils/utils';

function VideoConversionButton({
  videoPlayerState,
  sliderValues,
  videoFile,
  ffmpeg,
  onConversionStart = () => {},
  onConversionEnd = () => {},
  onGifCreated = () => {},
}) {
  const convertToGif = async () => {
    // starting the conversion process
    onConversionStart(true);

    const inputFileName = 'gif.mp4';
    const outputFileName = 'output.gif';

    // writing the video file to memory
    ffmpeg.FS('writeFile', inputFileName, await fetchFile(videoFile));

    const [min, max] = sliderValues;
    const minTime = sliderValueToVideoTime(videoPlayerState.duration, min);
    const maxTime = sliderValueToVideoTime(videoPlayerState.duration, max);

    // cutting the video and converting it to GIF with an FFMpeg command
    await ffmpeg.run(
      '-i',
      inputFileName,
      '-ss',
      `${minTime}`,
      '-to',
      `${maxTime}`,
      '-f',
      'gif',
      outputFileName
    );

    // reading the resulting file
    const data = ffmpeg.FS('readFile', outputFileName);

    // converting the GIF file created by FFmpeg to a valid image URL
    const gifUrl = URL.createObjectURL(
      new Blob([data.buffer], { type: 'image/gif' })
    );
    onGifCreated(gifUrl);

    // ending the conversion process
    onConversionEnd(false);
  };

  return <Button onClick={() => convertToGif()}>Convert to GIF</Button>;
}

export default VideoConversionButton;

This component uses ffmpeg.wasm to launch an ffmpeg command. This command takes care of clipping the video to the time limits defined by sliderValues and converting it to GIF. Note that all these operations are performed client-side in the browser.

In detail, the ffmpeg -ss flag defines the time from which to start reading the video file, while -to defines the end time. Then, the gif option specifies that you want to produce a GIF file. Learn more about the flags and options offered by ffmpeg here.

The resulting GIF image is stored in the output.gif memory file, loaded as a valid "image/gif" Blob, and finally converted to a valid image URL with the [URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static) native function.

Putting It All Together

Now, let’s see the full code of the VideoEditor component:

// src/components/VideoEditor.js

import { createFFmpeg } from '@ffmpeg/ffmpeg';
import { useEffect, useState } from 'react';
import { Slider, Spin } from 'antd';
import { VideoPlayer } from './VideoPlayer';
import { sliderValueToVideoTime } from '../utils/utils';
import VideoUpload from './VideoUpload';
import VideoConversionButton from './VideoConversionButton';
const ffmpeg = createFFmpeg({ log: true });

function VideoEditor() {
  const [ffmpegLoaded, setFFmpegLoaded] = useState(false);
  const [videoFile, setVideoFile] = useState();
  const [videoPlayerState, setVideoPlayerState] = useState();
  const [videoPlayer, setVideoPlayer] = useState();
  const [gifUrl, setGifUrl] = useState();
  const [sliderValues, setSliderValues] = useState([0, 100]);
  const [processing, setProcessing] = useState(false);

  useEffect(() => {
    // loading ffmpeg on startup
    ffmpeg.load().then(() => {
      setFFmpegLoaded(true);
    });
  }, []);

  useEffect(() => {
    const min = sliderValues[0];
    // when the slider values are updated, updating the
    // video time
    if (min !== undefined && videoPlayerState && videoPlayer) {
      videoPlayer.seek(sliderValueToVideoTime(videoPlayerState.duration, min));
    }
  }, [sliderValues]);

  useEffect(() => {
    if (videoPlayer && videoPlayerState) {
      // allowing users to watch only the portion of
      // the video selected by the slider
      const [min, max] = sliderValues;

      const minTime = sliderValueToVideoTime(videoPlayerState.duration, min);
      const maxTime = sliderValueToVideoTime(videoPlayerState.duration, max);

      if (videoPlayerState.currentTime < minTime) {
        videoPlayer.seek(minTime);
      }
      if (videoPlayerState.currentTime > maxTime) {
        // looping logic
        videoPlayer.seek(minTime);
      }
    }
  }, [videoPlayerState]);

  useEffect(() => {
    // when the current videoFile is removed,
    // restoring the default state
    if (!videoFile) {
      setVideoPlayerState(undefined);
      setSliderValues([0, 100]);
      setVideoPlayerState(undefined);
      setGifUrl(undefined);
    }
  }, [videoFile]);

  return (
    <div>
      <Spin
        spinning={processing || !ffmpegLoaded}
        tip={!ffmpegLoaded ? 'Waiting for FFmpeg to load...' : 'Processing...'}
      >
        <div>
          {videoFile ? (
            <VideoPlayer
              src={URL.createObjectURL(videoFile)}
              onPlayerChange={(videoPlayer) => {
                setVideoPlayer(videoPlayer);
              }}
              onChange={(videoPlayerState) => {
                setVideoPlayerState(videoPlayerState);
              }}
            />
          ) : (
            <h1>Upload a video</h1>
          )}
        </div>
        <div className={'upload-div'}>
          <VideoUpload
            disabled={!!videoFile}
            onChange={(videoFile) => {
              setVideoFile(videoFile);
            }}
          />
        </div>
        <div className={'slider-div'}>
          <h3>Cut Video</h3>
          <Slider
            disabled={!videoPlayerState}
            value={sliderValues}
            range={true}
            onChange={(values) => {
              setSliderValues(values);
            }}
            tooltip={{
              formatter: null,
            }}
          />
        </div>
        <div className={'conversion-div'}>
          <VideoConversionButton
            onConversionStart={() => {
              setProcessing(true);
            }}
            onConversionEnd={() => {
              setProcessing(false);
            }}
            ffmpeg={ffmpeg}
            videoPlayerState={videoPlayerState}
            sliderValues={sliderValues}
            videoFile={videoFile}
            onGifCreated={(girUrl) => {
              setGifUrl(girUrl);
            }}
          />
        </div>
        {gifUrl && (
          <div className={'gif-div'}>
            <h3>Resulting GIF</h3>
            <img
              src={gifUrl}
              className={'gif'}
              alt={'GIF file generated in the client side'}
            />
            <a
              href={gifUrl}
              download={'test.gif'}
              className={'ant-btn ant-btn-default'}
            >
              Download
            </a>
          </div>
        )}
      </Spin>
    </div>
  );
}

export default VideoEditor;

Since ffmpeg takes time to load, you need to let users know that they need to wait a while before they can use the video editor component. Also, ffmpeg operations take time to execute. This wait logic is implemented by using the Antd Design [Spin](https://ant.design/components/spin/) component.

Also, note that by passing the log: true option to the createFFmpeg() function, ffmpeg will log useful debug info in the console. For example, after ffmpeg gets loaded, you should be able to see the following lines in the browser console:

[info] use ffmpeg.wasm v0.11.5
createFFmpeg.js:43 [info] load ffmpeg-core
createFFmpeg.js:43 [info] loading ffmpeg-core
createFFmpeg.js:43 [info] ffmpeg-core loaded

What the VideoComponent does is use all the components presented earlier to allow users to upload a video, select a portion through a slider, convert it to GIF, and download the resulting GIF file.

Et voilà! You just learned how to build a client-side video editor in React without using any backend functionality!

Commercial Alternative

VideoEditor SDK by IMG.LY provides powerful video editing features, including cropping and trimming videos in your project. You will receive staples of video editing, including straightening videos, filters, brightness, color adjustments, and more.

Conclusion

Building a client-side video processing and editing application that uses only the browser possible. With WebAssembly, you can run high-performance code written in C or C++ in JavaScript. This allows you to perform complex operations at lightning speed directly in the browser, without having to delegate the work to a server.

In this tutorial, you learned how to use ffmpeg.wasm to build a video editor in React. ffmpeg.wasm is the Wasm port of ffmpeg and enables video and audio processing and editing directly in the browser. Using it to build a web application to upload a video, cut it, and export it to GIF requires only a few lines of code, and here we have seen how to implement such a video editing application.

If your app goes beyond merely displaying video, and you want to allow your users to also edit video or create video based templates in the browser, explore our VideoEditor SDK for the Web – a performant video editing solution based on WASM and WebCodecs. Try the editor for yourself in action with our showcases.

Thanks for reading! Let us know what you think on Twitter! To stay in the loop, subscribe to our Newsletter.

CE.SDK v1.9.0 Release

Neslihan — Tue, 13 Dec 2022 08:21:50 GMT

We are happy to shine light on more new features since our CE.SDK v1.8.0 Release. To build powerful features for your application, we are excited to hear your feedback and suggestions.

CE.SDK v1.9.0 is out now, and it includes:

Video Support for Web
Video Timelines
Web Audio Support
Native iOS Platform Support
Swift Package
Common Touch Gesture Support
Apparel UI Showcase
Spot and Named Colors
More Showcases

Video Support for Web

We now support adding and editing videos in your web browser. You can apply video fills, add blocks to the scene, and combine any other block to create videos and stories with CE.SDK. For now this feature is only supported in Chromium based browsers.

Video Timelines

Video Timelines and Trimming is coming to our Studio and Design UIs. This adds complete client-side video editing in the browser to our User Interfaces.

Web Audio Support

In addition to video support, we also introduce a new block type for audio. You can use audio blocks to add audio files in MP3 and M4a formats to your scene. Like design blocks, you can add and modify them via the Block APIs and attach them to a scene. Note that audio blocks have no visual representation on the canvas, but only in the timeline.

We dedicate our first implementation to the web. However, native mobile implementations will follow soon.

Native iOS Support

With this feature, we support developing native iOS applications with our SDK. It comes with full Swift API support and many integration examples.

Additionally, CE.SDK v1.9.0 comes with Common Touch Gesture to improve the editing experience on touchpads and mobile devices. That includes gestures like pinch, spread, drag, rotate, tap, and double tap.

Spot and Named Colors

With this release we are extending our support for print use cases by adding spot colors which enable the use of custom color mixes in the printing process. Consult the guides on creating spot colors for more information.

More Showcases

To explore CE.SDK capabilities firsthand, and to look into cases that might be comparable to yours, we provide more showcases on our website.

Easily build a

Mobile UI
Photo UI for easy photo editing
Post & Greeting Card UI to provide templates and easy adaption for print
Apparel UI to let users create fantastic apparel designs
Apparel UI Mobile.

Thanks for reading! Let us know what you think on Twitter! To stay in the loop, subscribe to our Newsletter.

How To Build a Video Player in JavaScript

Paul — Tue, 27 Sep 2022 17:02:49 GMT

Probably a decade ago, it was impossible to play video or audio inside your browser without any third-party services such as Flash or Silverlight. You needed to install a plugin and only play your media while using it, so as you can see, it was very uncomfortable, with low speed and high delays. Nowadays, we have JavaScript with the new version of HTML5. With these new technologies and tools, we can stream our video much quicker, easier, and without any latency. To do it, you will need only a simple tag and give a link to your video stored on your computer. The simple attribute controls will give you a default video player built into the browser. It’s elementary and doesn’t have many features, so if you want to stream a video on your website in a more professional way using your video player, you’ll need to use JavaScript. And we’ll teach you how to do it in this article!

By the end of this guide, you’ll have something similar to this, so if you’re excited, keep reading and follow this tutorial step-by-step!

See the Pen How to build a video player in Javascript by Paul Knulst (@paulknulst) on CodePen.

Setting Up the Project

Assuming you are working with UNIX system (or have Git BASH on Windows) you can create all three files that are necessary to build a video player in JavaScript with this command:

mkdir video-player
cd video-player
touch index.html script.js style.css

To add a simple video player to our application, we have to add the following code to our index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>How to build a video player in Javascript</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="player">
            <video class="video" controls>
                <source
                    src="<https://ftp.f1nalboss.de/data/imgly/videoplayer/testvideo.mp4>"
                    type="video/mp4"
                />
                <source
                    src="<https://ftp.f1nalboss.de/data/imgly/videoplayer/testvideo.mp4>"
                    type="video/webm"
                />
                <p>No HTML5 video supported</p>
            </video>
        </div>
        <script src="script.js"></script>
    </body>
</html>

Within the above code, the <video> element uses a remote video from my FTP. You can either use my default video or add any video from your local computer by adjusting the src attribute. HTML5 specification supports three different video formats, and the snippet used multiple <source> tags to make the videos available in MP4 and WebM. Furthermore, the <p> tag is used to display pre-defined content to user agents that do not support the video element.

The HTML5 <video> tag accepts several native attributes. For example, the controls attribute displays the standard player controls when added or set to true. You can find out more about all video attributes here.

Before continuing, you should apply all styles that are needed within this tutorial by populating your style.css with all styles from this CodePen. Save and open your index.html and load it within the browser to see the embedded video player as seen below:

Customize the Video Player With JavaScript

To customize the video player, you first have to remove the controls attribute that displays Play, Pause, Volume, etc. because you will implement your own custom controls within this tutorial. Now, check your browser, you will recognize that the controls are gone, and you cannot play the video anymore.

Add Play and Pause

To enable play and pause the video, you have to add a new button to the index.html:

<div class="controls">
    <button
            class="controls__btn playPauseBtn"
            title="Toggle Play"
            >
        ►
    </button>
</div>

Afterward, open your script.js and enable functionality by adding this code:

const videoContainer = document.querySelector(".video-container");
const playPauseBtn = document.querySelector(".playPauseBtn");
function togglePlay() {
  if (videoContainer.paused || videoContainer.ended) {
    videoContainer.play();
  } else {
    videoContainer.pause();
  }
}
function updatePlayBtn() {
  playPauseBtn.innerHTML = videoContainer.paused ? "►" : "❚❚";
}
playPauseBtn.addEventListener("click", togglePlay);
videoContainer.addEventListener("click", togglePlay);
videoContainer.addEventListener("play", updatePlayBtn);
videoContainer.addEventListener("pause", updatePlayBtn);

Within this javascript code, first, the video-container element and the playPauseBtn is selected (Line 1 and 2). Then two functions are defined: togglePlay() and updatePlayBtn(). togglePlay() is used to stop and start the video based on its actual state. updatePlayBtn is used to switch between the Icon which is shown within the video player.

In the last part of the snippet, a click event listener is added to the playPauseBtn that executes the togglePlay() function. Next, three click event listeners are added to the videoContainer that executes togglePlay() on mouse click and also executes updatePlayBtn based on the video’s state.

Now you can reload your index.html and should be able to play and pause the video by either clicking the video or the button:

Add Progress Bar

Next, a progress bar will be implemented to show the current timestamp of the video when played. First, add a div tag to the index.html which will act as the progress bar:

<div class="controls">
    <div class="progress">
    	<div class="progress__filled"></div>
    </div>
    // ..
</div>

Then open the script.js and add the following snippet:

const progress = document.querySelector(".progress");
const progressBar = document.querySelector(".progress__filled");

function handleProgress() {
  const progressPercentage = (videoContainer.currentTime / videoContainer.duration) * 100;
  progressBar.style.flexBasis = `${progressPercentage}%`;
}

function jump(e) {
  const position = (e.offsetX / progress.offsetWidth) * videoContainer.duration;
  videoContainer.currentTime = position;
}

videoContainer.addEventListener("timeupdate", handleProgress);
progress.addEventListener("click", jump);
let mousedown = false;
progress.addEventListener("mousedown", () => (mousedown = true));
progress.addEventListener("mousemove", (e) => mousedown && jump(e));
progress.addEventListener("mouseup", () => (mousedown = false));

In this snippet, the progress container and the progress__filled element will be selected, and two functions will be added: handleProgress() and jump(e). handleProgress() will be responsible for updating the progress bar. The jump(e) function is used to enable clicking on the progress bar to jump to the position within the video.

The last part contains all event listeners that are needed for the progress bar. The handleProgress() will be called on every timeupdate event. Also, clicking anywhere on the progress bar will call the jump(e) method and the video will jump to the position. Additionally, mousedown, mousemove, and mouseup will be used to enable sliding through the video while holding the mouse button down on the progress bar.

Closing Notes

Congratulations! If you followed the tutorial, you learned how to implement your own video player and add custom controls using JavaScript. Now, you can use my CodePen and start implementing more controls like volume control, keyboard shortcuts, or skip controls to build your own customized video player.

If your app goes beyond merely displaying video, and you want to allow your users to also edit video or create video based templates in the browser, check out our Video Editor for Web!

How to Crop and Trim Videos in Flutter

Michael H. — Tue, 27 Sep 2022 08:45:16 GMT

If you are looking for a package that crops and trims videos in Flutter, you must have already come across the video_trimmer Flutter package. This package can trim videos but does not provide video cropping (at least not out-of-the-box). In fact, none of the packages on pub.dev, as of today, allow cropping a video in Flutter. If you have dug deeper, you might have come across FFmpeg, a powerful video editing command line tool, that is not the easiest to get started with. See the Ultimate Guide to FFmpeg for help.In this article we will use the FFmpeg library to crop and trim a video in a Flutter project.

Here is a list of packages that we will be using; ffmpeg_kit_flutter package for cropping and trimming videos, the path_provider package to get the path to the application or external directory where the video files will be stored, and the video_player package to play the video preview.

This article will not cover building any UI for cropping and trimming. But, it will discuss in brief how to crop the video using the video_trimmer library as well. If you want to package this workflow for production, check out our guide on running FFmpeg inside a Docker container. Also, you can try out the code used in this article from this GitHub repository.

Get Started

The end result of this tutorial will be a simple app that would look like the following screenshot.

When you tap the Save Video, the preview will refresh with the cropped and trimmed video replacing the original video. Follow the instructions in this article, and you will be able to develop a similar Flutter app.

First, let us start by adding dependencies to a new Flutter project.

Add Dependencies

In your project’s pubspec.yaml file add the following 3 dependencies.

dependencies:
  ...
  ffmpeg_kit_flutter: ^4.5.1
  path_provider: ^2.0.11
  video_player: ^2.4.6

Then, execute flutter pub get command from the project folder root.

Set Minimum SDK Version and Platform Version

The ffmpeg_kit_flutter plugin runs on Android SDK API level 24+ and iOS SDK 12.1+. Therefore, modify the module level build.gradle file to declare the minSdkVersion.

android {
  defaultConfig {
    ...
    minSdkVersion 24
    ...
  }
}

Then, modify the Podfile to declare the minimum global platform.

# Uncomment this line to define a global platform for your project
platform :ios, '12.1'

Add a Video Asset

For simplicity, we will be using a video asset instead of implementing a file picker. Choose a video file you would like to work with or download this sample video file. Next, copy the video file to a new directory named assets at the root of your project folder.

And then reference the video file from the pubspec.yaml file.

flutter:
  assets:
    - assets/file1.mp4

Execute flutter pub get again.

Having added the required dependencies, let us move on to coding.

Implement Video Crop and Trim

Replace the code in your main.dart file with the following code in the code block. This will be our starter code.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Crop and Trim Demo',
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Crop and Trim"),
      ),
      body: Column(
        children: [

        ],
      ),
    );
  }
}

Initialize the Input Player

Add the following code to the _MyHomePageState class.

import 'dart:io';

...
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:video_player/video_player.dart';

...

class _MyHomePageState extends State<MyHomePage> {
  late String inputPath;
  VideoPlayerController? controller;
  String outputPath = "";

  ...

  @override
  void initState() {
    super.initState();
    copyVideoToApplicationDirectory().then((path) async {
      inputPath = path;
      controller = VideoPlayerController.file(File(inputPath));
      await controller?.initialize();
      await controller?.play();
      setState(() {});
      outputPath = await getOutputPath();
    });
  }

  ///Copy input file to ApplicationStorage Directory
  ///returns path to copied video
  Future<String> copyVideoToApplicationDirectory() async {
    const filename = "file1.mp4";
    var bytes = await rootBundle.load("assets/file1.mp4");
    String dir = (await getApplicationDocumentsDirectory()).path;
    writeToFile(bytes, '$dir/$filename');

    return '$dir/$filename';
  }

  ///Write to Path.
  Future<void> writeToFile(ByteData data, String path) {
    final buffer = data.buffer;
    return File(path).writeAsBytes(
        buffer.asUint8List(data.offsetInBytes, data.lengthInBytes));
  }
}

The copyVideoToApplicationDirectory method is copying the video from Assets to the Application directory on the phone’s file system. The resulting path is then stored in the inputPath variable which is then supplied to the FFmpeg command. For large‑scale workloads, you can move this FFmpeg command to AWS Spot Instances; our AWS guide shows how to configure a cloud environment for scalable video processing.

Next, add the VideoPlayer widget to the Column widget.

body: Column(
  children: [
    (controller != null)
        ? AspectRatio(
        aspectRatio: controller!.value.aspectRatio,
        child: VideoPlayer(controller!))
        : const SizedBox(),
  ],
),

Run the app and the video should start playing.

In the next step, we will add the FFmpeg command, but before that add the following 2 more methods to the _MyHomePageState class.

...

import 'package:ffmpeg_kit_flutter/ffmpeg_kit.dart';
import 'package:ffmpeg_kit_flutter/log.dart';
import 'package:ffmpeg_kit_flutter/return_code.dart';

...

class _MyHomePageState extends State<MyHomePage> {
  ...

  /// Output path with a file name where the result will be stored.
  Future<String> getOutputPath() async {
    final appDirectory = Platform.isAndroid
        ? await getExternalStorageDirectory()
        : await getApplicationDocumentsDirectory();
    final externalPath = '${appDirectory?.path}/out_file.mp4';
    return externalPath;
  }

  ///Executes the FFMPEG [command]
  ///Note: Green bar on the right is a Flutter issue. <https://github.com/flutter/engine/pull/24888>
  ///Should get fixed in a 3.1.0+ stable release <https://github.com/flutter/engine/pull/24888#issuecomment-1212374010>
  Future<void> ffmpegExecute(String command) async {

    final session = await FFmpegKit.execute(command);

    final returnCode = await session.getReturnCode();
    if (ReturnCode.isSuccess(returnCode)) {

      print("Success");
      //Replace the preview video
      await controller?.pause();
      await controller?.dispose();
      controller = VideoPlayerController.file(File(outputPath));
      await controller?.initialize();
      await controller?.play();
      setState(() {});

    } else if (ReturnCode.isCancel(returnCode)) {

      print("Cancel");

    } else {

      print("Error");
      final failStackTrace = await session.getFailStackTrace();
      print(failStackTrace);
      List<Log> logs = await session.getLogs();
      for (var element in logs) {
        print(element.getMessage());
      }

    }
  }
}

The getOutputPath method provides the path where the resulting video will be saved. The outputPath will be passed to the FFmpeg command whereas the ffmpegExecute method is where the FFmpeg magic takes place.

The ffmpegExecute method expects a valid FFmpeg String command. The String command is then passed to the FFmpegKit.execute method which returns an instance of FFMpegSession . It will tell us whether our command was executed successfully or not. If it was not executed successfully, we can extract error logs from it.

FFmpeg Execute Command

Add a TextButton from where the FFmpeg command shall be sent.

TextButton(
  child: Text('Save Video'),
  onPressed: () async {
    //TODO: Call FFMPEG Execute
  },
),

Next, call the following ffmpegExecute method from the onPressed property.

ffmpegExecute('-ss 0:00:15 -to 0:00:45 -y -i $inputPath -filter:v "crop=320:150" -c:a copy $outputPath');

Run the app and tap the Save Video button. You will notice that the player is now playing the new cropped and trimmed video.

If you were able to successfully follow the instructions up till here, it is time to dig a little deeper into the FFmpeg command that we just ran earlier.

Understanding the FFmpeg Command

Because command FFmpeg is a command line tool, it expects string-only commands. For this reason, we do not have any dart Classes, Methods, or Parameters to work with that we usually get when working with a dart plugin. Let us dissect the above command line command that is helping us crop and trim a video.

Command	Description
-ss 0:00:15	Seeks to position on the input video. The trim starts from this position.
-to 0:00:45	Stops reading at the position in the input video. The trim stops at this position. The total length of the video is 0:02:05.
-y	Overwrite output files. Helpful when the Save Video button is tapped more than once.
-i $inputPath	Input file location. This is the file on which the crop and trim are applied.
-filter:v	Apply a filter to the video stream.
”crop=320:150”	Apply a crop filter from the center of the video that is 320 pixels wide and 150 pixels tall. The original dimensions of the video were 320 x 240.
-c:a copy $outputPath	Specifies the codec with which the output file must be encoded. Here, copy is a special value to indicate the stream is not to be re-encoded. The a after the colon is a stream specifier for the audio stream.

That will be either the application directory or the external directory of the application, depending on whether the app is running on iOS or Android.

You can check out the app’s code and play with it by downloading it from this GitHub Repository. This project allows you to tweak the duration of the trim and dimensions of the crop, so it has more code, but at the heart of it, it still uses the above FFmpeg command.

Cropping Using the video_trimmer Plugin

As a bonus, here is a tip on how to use the video_trimmer plugin for cropping videos.

The video_trimmer plugin also uses FFmpeg at its core and allows us to pass on an FFmpeg command while saving the video. For this reason, it is an easy task for us to apply the crop to a video using the video_trimmer plugin.

To do this, pass the following command to the saveTrimmedVideo method’s ffmpegCommand parameter as shown in the code block below. The video_trimmer package expects the customVideoFormat parameter argument when the ffmpegCommand parameter is used.

await _trimmer
    .saveTrimmedVideo(
        startValue: _startValue,
        endValue: _endValue,
        ffmpegCommand:
            '-filter:v "crop=320:150"',
        customVideoFormat: '.mp4')
    .then((value) {
  setState(() {
    _value = value;
  });
});

Limitations of this Approach

The crop that we are applying is from the center of the frame. The present command would also need starting coordinates to crop a non-center frame.

The project will need a refined UI for cropping and trimming videos to offer a complete app experience to users. The current approach is miles away from creating that experience.

But perhaps the most significant limitation is FFmpeg’s licensing. FFmpeg is available with both LGPL and GPL licenses, so you must ensure your project is compatible with those licenses. For many commercial projects, this is a non-starter. Alternatively, you can run FFmpeg on Google Cloud Platform; our GCP tutorial walks you through setup.

Commercial Alternative

VideoEditor SDK (VE.SDK) from IMG.LY provides powerful video editing features, including cropping and trimming videos in a Flutter project. You will receive staples of video editing, including straightening videos, filters, brightness, color adjustments, and more. Follow our guide to learn how to integrate IMG.LY’s video editor for Flutter into your app.

Conclusion

While still a complex topic, video manipulation is more attainable to implement on Flutter than on native Android. Nevertheless, FFmpeg is the only open-source, free-to-use option to edit videos on Flutter right now. To automate cropping and trimming across many files or build a transcoding server, see our article on building a production‑ready batch video processing server.

PE.SDK and VE.SDK 10 for Android and 11 for iOS Release

Sascha — Wed, 04 May 2022 12:46:21 GMT

We are thrilled to announce the release of PhotoEditor SDK and VideoEditor SDK 10 for Android and 11 for iOS. This new major version is packed with features and improvements.

This release is adding:

Custom Watermarks
Background Removal for Photos
Background Removal for Stickers
Custom Sticker Libraries
Giphy Integration
And More Updates for Android and iOS

Custom Watermarks

With our new support for custom watermarks, you can add your company logo or any other image to photo and video exports. You can place your watermark in either corner or the center of your photo and video. Additionally, you can specify the size of the watermark and determine its distance from the outline if you choose to place it near a corner. Your users will not be able to remove nor modify the watermark.

For more details on Custom Watermarks, take a look at our documentation for Android or iOS.

Background Removal for Photos

You have unwaveringly requested this feature: we are excited to offer the automatic removal of backgrounds for static content! Background Removal is fully running on-device and currently specializes in images containing a person only. PE.SDK enables this feature exclusively when it detects a person in the photo.

The removed background will turn transparent if your selected output supports transparency, such as PNG. In other cases, such as JPG, your background removal will be tinted black.

This feature is available on Android and iOS 15.0 and higher only. Easily enable Background Removal for Photos with our Android guide or iOS guide.

Background Removal for Stickers

A more common use case for automatic background removal is with stickers, so we’ve also added this functionality. Select a sticker including a person and tap the Remove BG button. Simple!

This feature is available on Android and iOS 15.0 and higher only. Easily enable Background Removal for Stickers with our Android documentation or iOS documentation.

Custom Sticker Libraries

We wanted to make it easier for you to provide your users with more sticker tool content. So far, you were able to create multiple sticker categories with different stickers that could either be part of your app or stored on a server. Additionally, you could enable our personal stickers feature on iOS or Android), giving your users the option to select stickers from their camera roll.

We have now added more ways to provide your users with stickers.

Android

You can now create sticker categories that do not present our sticker selection interface, but will instead load any arbitrary Fragment. That gives you complete control over the sticker selection screen, and you can use it to load and display any content. When the user selects any of your stickers, all you have to do is pass it back to the SDK with a callback. Get started with your Custom Sticker Library with our Android documentation.

iOS

You can now create sticker categories that do not present our sticker selection interface, but will instead load any arbitrary view controller that conforms to the StickerCollection protocol. That gives you complete control over the sticker selection screen, and you can use it to load and display any content. When the user selects any of your stickers, simply pass it back to the SDK using a delegate method.
Additionally, we’ve created a new StickerProviderCategory that you can pass any object conforming to the StickerProvider protocol. This category provides most of the features required to interact with sticker content providers, such as search and pagination. You can use this category to very quickly integrate any sticker service.

Find more information on Custom Sticker Libraries in the iOS documentation.

GIPHY Integration

This online database and search engine for funny GIFs and beautiful animations is a staple in many social applications. Easily integrate GIPHY into your app:

Android

Using our new Custom Sticker Library, we’ve also created an integration for GIPHY on Android. All you have to do is head over to GIPHY, create your API key, pass it to your GiphySettings and create a GiphyStickerCategoryItem. Your users will then immediately have access to all the content GIPHY has to offer.

For more details, visit our documentation on adding GIPHY for Android.

iOS

Using the new StickerProviderCategory, we added GIPHY support on iOS. All you have to do is head over to GIPHY, create your API key, and pass this to the GIPHY sticker category. Your users will then immediately have access to all the content GIPHY has to offer.

For more details, visit our documentation here.

More Updates for Android

Additionally, we have:

Increased the minimum API level for PhotoEditor SDK from 16 (Android 4) to 21 (Android 5), which ensures support for 98% of all phones in use.
Added support for headless video exporting.
Increased video playback stability.
Fixed a number of issues with degraded audio quality in videos.
And added the ability to choose a theme at runtime.

More Updates for iOS

Additionally, we have:

Increased our deployment target from iOS 9 to iOS 13.
Migrated all usage of OpenGL to Metal.
Added a better result API.
Added support for SwiftUI.
Enhanced our video export to display a progress indicator and the option to cancel the export.

Video Editor – IMG.LY Blog

Building a CapCut-Like Video Editor with CE.SDK and AI

Build this with AI in minutes

Introduction

Architecture Overview

Step 1: Project Setup

Why so many packages?

Step 2: The React Component

Step 3: Creating the Video Scene

Browser support

Step 4: The CapCut Dark Theme

Setting the base theme

Custom CSS overrides

Responsive scale

Step 5: AI Plugin Integration

The unified AiApps approach

Provider categories explained

The proxy server requirement

Background removal

Step 6: UI Customization with the Component Order API

Adding the AI button to the dock

AI options in the canvas context menu

Custom export button in the navigation bar

Step 7: Wiring Generated Audio into the Asset Library

Step 8: Custom Labels with i18n

The Complete File Structure

What We Get Out of the Box

Going to Production

1. License key

2. Proxy server

3. Disable dry run

Key Takeaways

Resources

Best Video SDKs for Mobile Applications: A Comprehensive Comparison for Developers

The Challenge: Building Video Editing Into Mobile Apps

Processing Power vs Battery Life

Device Fragmentation

User Expectations Are Higher Than Ever

Understanding Video SDK Options

1. IMG.LY CE.SDK (The Complete Solution)

Core Capabilities

Platform Support

Technical Architecture

Ideal Use Cases

Real Customer Examples

Limitations

Pricing / Licensing

Who It’s For

Why IMG.LY SDK Stands Out

2. Meishe SDK

Core Capabilities

Platform Support

Ideal Use Cases

Limitations

Pricing / Licensing

Who It’s For

How it compares to IMG.LY

3. BytePlus Video Editor SDK

Core Capabilities

Platform Support

Ideal Use Cases

Limitations

Pricing / Licensing

Who It’s For

How it compares to IMG.LY

4. Banuba Video Editor SDK

Core Capabilities

Platform Support

Ideal Use Cases

Limitations

Pricing / Licensing

Who It’s For

How it compares to IMG.LY

5. FFmpeg (via FFmpegKit)

Core Capabilities

Platform Support

Ideal Use Cases

Limitations

Pricing / Licensing

Who It’s For