@imgly/plugin-ai-video-generation-web
Advanced tools
AI video generation plugin for the CE.SDK editor
A plugin for integrating AI video generation capabilities into CreativeEditor SDK.
The @imgly/plugin-ai-video-generation-web package enables users to generate videos using AI directly within CreativeEditor SDK. This shipped provider leverages the fal.ai platform to provide high-quality video generation from text-to-video and image-to-video transformations.
Features include:
npm install @imgly/plugin-ai-video-generation-web
To use the plugin, import it and configure it with your preferred providers:
import CreativeEditorSDK from '@cesdk/cesdk-js';
import VideoGeneration from '@imgly/plugin-ai-video-generation-web';
import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai';
// Initialize CreativeEditor SDK
CreativeEditorSDK.create(domElement, {
license: 'your-license-key'
// Other configuration options...
}).then(async (cesdk) => {
// Add the video generation plugin
cesdk.addPlugin(
VideoGeneration({
// Text-to-video provider
text2video: FalAiVideo.MinimaxVideo01Live({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
},
// Optional: Configure default property values
properties: {
duration: { default: 5 }, // Default duration in seconds
aspect_ratio: { default: '16:9' } // Default aspect ratio
}
}),
// Image-to-video provider (optional)
image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
}
}),
// Optional configuration
debug: false,
dryRun: false
})
);
});
You can configure multiple providers for each generation type, and users will see a selection box to choose between them:
import CreativeEditorSDK from '@cesdk/cesdk-js';
import VideoGeneration from '@imgly/plugin-ai-video-generation-web';
import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai';
// Initialize CreativeEditor SDK
CreativeEditorSDK.create(domElement, {
license: 'your-license-key'
// Other configuration options...
}).then(async (cesdk) => {
// Add the video generation plugin with multiple providers
cesdk.addPlugin(
VideoGeneration({
// Multiple text-to-video providers
text2video: [
FalAiVideo.MinimaxVideo01Live({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
}
}),
FalAiVideo.PixverseV35TextToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
}
})
],
// Image-to-video provider (optional)
image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
}
}),
// Optional configuration
debug: false,
dryRun: false
})
);
});
The plugin comes with pre-configured providers for fal.ai models:
A model that generates videos based on text prompts:
text2video: FalAiVideo.MinimaxVideo01Live({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
},
// Optional: Configure default property values
properties: {
prompt_optimizer: { default: true } // Enable automatic prompt enhancement
}
});
Key features:
Custom Translations:
cesdk.i18n.setTranslations({
en: {
'ly.img.plugin-ai-video-generation-web.fal-ai/minimax/video-01-live.property.prompt': 'Describe your Minimax video'
}
});
A model that transforms still images into videos:
image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
},
// Optional: Configure default property values
properties: {
prompt_optimizer: { default: true } // Enable automatic prompt enhancement
}
});
Key features:
An advanced model that transforms still images into videos using Hailuo 02 Standard:
image2video: FalAiVideo.MinimaxHailuo02StandardImageToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
},
// Optional: Configure default property values
properties: {
resolution: { default: '768P' }, // Options: '512P' (912×512), '768P' (1280×720)
duration: { default: 6 } // Duration in seconds (6 or 10)
}
});
Key features:
An alternative text-to-video model:
text2video: FalAiVideo.PixverseV35TextToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
},
// Optional: Configure default property values
properties: {
seed: { default: 42 } // Fixed seed for reproducible generation
}
});
Key features:
A model based on KlingVideo V2.1 that generates videos from text prompts:
text2video: FalAiVideo.KlingVideoV21MasterTextToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
// Optional: Configure default property values
properties: {
aspect_ratio: { default: '16:9' }, // Options: '16:9', '9:16', '1:1'
duration: { default: '5s' } // Options: '5s', '10s'
}
});
Key features:
Custom Translations:
cesdk.i18n.setTranslations({
en: {
'ly.img.plugin-ai-video-generation-web.fal-ai/kling-video/v2.1/master/text-to-video.property.prompt': 'Describe your KlingVideo',
'ly.img.plugin-ai-video-generation-web.fal-ai/kling-video/v2.1/master/text-to-video.property.aspect_ratio': 'Video Format',
'ly.img.plugin-ai-video-generation-web.fal-ai/kling-video/v2.1/master/text-to-video.property.duration': 'Video Length (seconds)'
}
});
A model that converts still images into videos using KlingVideo V2.1:
image2video: FalAiVideo.KlingVideoV21MasterImageToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
// Optional: Configure default property values
properties: {
duration: { default: '5s' } // Options: '5s', '10s'
}
});
Key features:
A model that transforms images into videos using ByteDance Seedance v1 Pro:
image2video: FalAiVideo.ByteDanceSeedanceV1ProImageToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
// Optional: Configure default property values
properties: {
aspect_ratio: { default: 'auto' }, // Options: '21:9', '16:9', '4:3', '1:1', '3:4', '9:16', 'auto'
duration: { default: 5 }, // Duration in seconds (3-12)
resolution: { default: '720p' } // Options: '480p', '720p', '1080p'
}
});
Key features:
A model that generates videos from text using ByteDance Seedance v1 Pro:
text2video: FalAiVideo.ByteDanceSeedanceV1ProTextToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
// Optional: Configure default property values
properties: {
aspect_ratio: { default: '16:9' }, // Options: '21:9', '16:9', '4:3', '1:1', '3:4', '9:16'
duration: { default: 5 }, // Duration in seconds (3-12)
resolution: { default: '720p' } // Options: '480p', '720p', '1080p'
}
});
Key features:
An advanced text-to-video model:
text2video: FalAiVideo.Veo3TextToVideo({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
// Optional: Configure default property values
properties: {
aspect_ratio: { default: '16:9' }, // Options: '16:9', '9:16', '1:1'
duration: { default: 8 } // Fixed at 8 seconds for this provider
}
});
Key features:
generate_audioYou can control various aspects of the video generation plugin using the Feature API:
// Disable text-to-video generation
cesdk.feature.enable('ly.img.plugin-ai-video-generation-web.fromText', false);
// Disable image-to-video generation
cesdk.feature.enable('ly.img.plugin-ai-video-generation-web.fromImage', false);
// Disable provider selection
cesdk.feature.enable('ly.img.plugin-ai-video-generation-web.providerSelect', false);
// Disable specific quick actions
cesdk.feature.enable('ly.img.plugin-ai-video-generation-web.quickAction.createVideo', false);
For more information about Feature API and available feature flags, see the @imgly/plugin-ai-generation-web documentation.
You can customize all labels and text in the AI video generation interface using the translation system. This allows you to provide better labels for your users in any language.
The system checks for translations in this order (highest to lowest priority):
ly.img.plugin-ai-video-generation-web.${provider}.property.${field} - Override labels for a specific AI providerly.img.plugin-ai-generation-web.property.${field} - Override labels for all AI plugins// Customize labels for your AI video generation interface
cesdk.i18n.setTranslations({
en: {
// Generic labels (applies to ALL AI plugins)
'ly.img.plugin-ai-generation-web.property.prompt': 'Describe what you want to create',
'ly.img.plugin-ai-generation-web.property.duration': 'Video Duration',
// Provider-specific for MinimaxVideo01Live
'ly.img.plugin-ai-video-generation-web.fal-ai/minimax/video-01-live.property.prompt': 'Describe your video',
'ly.img.plugin-ai-video-generation-web.fal-ai/minimax/video-01-live.property.duration': 'Video Length',
// Provider-specific for KlingVideoV21Master
'ly.img.plugin-ai-video-generation-web.fal-ai/kling-video/v2.1/master/text-to-video.property.aspect_ratio': 'Video Aspect Ratio',
'ly.img.plugin-ai-video-generation-web.fal-ai/kling-video/v2.1/master/text-to-video.property.duration': 'Video Duration (seconds)'
}
});
Video QuickActions (like "Create Video from Image") use their own translation keys with provider-specific overrides:
cesdk.i18n.setTranslations({
en: {
// Provider-specific translations (highest priority)
'ly.img.plugin-ai-video-generation-web.fal-ai/minimax/video-01-live.quickAction.createVideo': 'Generate Minimax Video...',
'ly.img.plugin-ai-video-generation-web.fal-ai/minimax/video-01-live.quickAction.createVideo.prompt': 'Minimax Video Prompt',
// Generic plugin translations
'ly.img.plugin-ai-video-generation-web.quickAction.createVideo': 'Create Video...',
'ly.img.plugin-ai-video-generation-web.quickAction.createVideo.prompt': 'Video Prompt',
'ly.img.plugin-ai-video-generation-web.quickAction.createVideo.prompt.placeholder': 'e.g. "Make the image move slowly"',
'ly.img.plugin-ai-video-generation-web.quickAction.createVideo.apply': 'Generate'
}
});
QuickAction Translation Priority:
ly.img.plugin-ai-video-generation-web.${provider}.quickAction.${action}.${field}ly.img.plugin-ai-video-generation-web.quickAction.${action}.${field}Translation Structure:
.quickAction.createVideo): Button text when QuickAction is collapsed.prompt: Label for input field when expanded.prompt.placeholder: Placeholder text for input field.apply: Text for action/submit buttonThe plugin accepts the following configuration options:
| Option | Type | Description | Default |
|---|---|---|---|
text2video | Provider | Provider[] | Provider(s) for text-to-video generation. When multiple providers are provided, users can select between them | undefined |
image2video | Provider | Provider[] | Provider(s) for image-to-video transformation. When multiple providers are provided, users can select between them | undefined |
debug | boolean | Enable debug logging | false |
dryRun | boolean | Simulate generation without API calls | false |
middleware | Function[] | Array of middleware functions for the generation | undefined |
The middleware option allows you to add pre-processing and post-processing capabilities to the generation process:
import VideoGeneration from '@imgly/plugin-ai-video-generation-web';
import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai';
import { loggingMiddleware, rateLimitMiddleware } from '@imgly/plugin-ai-generation-web';
// Create middleware functions
const logging = loggingMiddleware();
const rateLimit = rateLimitMiddleware({
maxRequests: 5,
timeWindowMs: 300000, // 5 minutes
onRateLimitExceeded: (input, options, info) => {
console.log(`Video generation rate limit exceeded: ${info.currentCount}/${info.maxRequests}`);
return false; // Reject request
}
});
// Create custom middleware
const customMiddleware = async (input, options, next) => {
console.log('Before generation:', input);
// Add custom fields or modify the input
const modifiedInput = {
...input,
customField: 'custom value'
};
// Call the next middleware or generation function
const result = await next(modifiedInput, options);
console.log('After generation:', result);
// You can also modify the result before returning it
return result;
};
// Apply middleware to plugin
cesdk.addPlugin(
VideoGeneration({
text2video: FalAiVideo.MinimaxVideo01Live({
proxyUrl: 'http://your-proxy-server.com/api/proxy'
}),
middleware: [logging, rateLimit, customMiddleware] // Apply middleware in order
})
);
Built-in middleware options:
You can also create custom middleware functions to meet your specific needs.
For security reasons, it's recommended to use a proxy server to handle API requests to fal.ai. The proxy URL is required when configuring providers:
text2video: FalAiVideo.MinimaxVideo01Live({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
}
});
The headers option allows you to include custom HTTP headers in all API requests. This is useful for:
You'll need to implement a proxy server that forwards requests to fal.ai and handles authentication.
VideoGeneration(options: PluginConfiguration): EditorPlugin
Creates and returns a plugin that can be added to CreativeEditor SDK.
interface PluginConfiguration {
// Provider(s) for text-to-video generation
text2video?: AiVideoProvider | AiVideoProvider[];
// Provider(s) for image-to-video generation
image2video?: AiVideoProvider | AiVideoProvider[];
// Enable debug logging
debug?: boolean;
// Skip actual API calls for testing
dryRun?: boolean;
// Extend the generation process
middleware?: GenerationMiddleware;
}
FalAiVideo.MinimaxVideo01Live(config: {
proxyUrl: string;
headers?: Record<string, string>;
debug?: boolean;
}): AiVideoProvider
FalAiVideo.MinimaxVideo01LiveImageToVideo(config: {
proxyUrl: string;
headers?: Record<string, string>;
debug?: boolean;
}): AiVideoProvider
FalAiVideo.MinimaxHailuo02StandardImageToVideo(config: {
proxyUrl: string;
headers?: Record<string, string>;
debug?: boolean;
}): AiVideoProvider
FalAiVideo.PixverseV35TextToVideo(config: {
proxyUrl: string;
headers?: Record<string, string>;
debug?: boolean;
}): AiVideoProvider
FalAiVideo.KlingVideoV21MasterTextToVideo(config: {
proxyUrl: string;
debug?: boolean;
}): AiVideoProvider
FalAiVideo.KlingVideoV21MasterImageToVideo(config: {
proxyUrl: string;
debug?: boolean;
}): AiVideoProvider
FalAiVideo.ByteDanceSeedanceV1ProImageToVideo(config: {
proxyUrl: string;
debug?: boolean;
}): AiVideoProvider
FalAiVideo.ByteDanceSeedanceV1ProTextToVideo(config: {
proxyUrl: string;
debug?: boolean;
}): AiVideoProvider
FalAiVideo.Veo3TextToVideo(config: {
proxyUrl: string;
debug?: boolean;
}): AiVideoProvider
The plugin automatically registers the following UI components:
ly.img.ai.video-generationly.img.ai.video.canvasMenuly.img.ai.fal-ai/minimax/video-01-lively.img.ai.fal-ai/minimax/video-01-live/image-to-videoly.img.ai.fal-ai/minimax/hailuo-02/standard/image-to-videoly.img.ai.fal-ai/pixverse/v3.5/text-to-videoly.img.ai.fal-ai/kling-video/v2.1/master/text-to-videoly.img.ai.fal-ai/kling-video/v2.1/master/image-to-videoly.img.ai.fal-ai/bytedance/seedance/v1/pro/image-to-videoly.img.ai.fal-ai/bytedance/seedance/v1/pro/text-to-videoly.img.ai.fal-ai/veo3Generated videos are automatically stored in asset sources with the following IDs:
fal-ai/minimax/video-01-live.historyfal-ai/minimax/video-01-live/image-to-video.historyfal-ai/minimax/hailuo-02/standard/image-to-video.historyfal-ai/pixverse/v3.5/text-to-video.historyfal-ai/kling-video/v2.1/master/text-to-video.historyfal-ai/kling-video/v2.1/master/image-to-video.historyfal-ai/bytedance/seedance/v1/pro/image-to-video.historyfal-ai/bytedance/seedance/v1/pro/text-to-video.historyfal-ai/veo3.historyThe plugin automatically registers a dock component with a sparkle icon that opens the video generation panel. To customize the component's position in the dock, use the setDockOrder method:
// Add the AI Video component to the beginning of the dock
cesdk.ui.setDockOrder([
'ly.img.ai.video-generation.dock',
...cesdk.ui.getDockOrder()
]);
// Or add it at a specific position
const currentOrder = cesdk.ui.getDockOrder();
currentOrder.splice(2, 0, 'ly.img.ai.video-generation.dock');
cesdk.ui.setDockOrder(currentOrder);
For customization and localization, see the translations.json file which contains provider-specific translation keys for video generation interfaces.
This plugin is part of the IMG.LY plugin ecosystem for CreativeEditor SDK. Please refer to the license terms in the package.
FAQs
AI video generation plugin for the CE.SDK editor
We found that @imgly/plugin-ai-video-generation-web demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ruby Central’s incident report on the RubyGems.org access dispute sparks backlash from former maintainers and renewed debate over project governance.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.