Choose a suitable Frames per Second option and export videos in SD, HD, FHD, 2K, 4K, or define custom quality. Built with CE.SDK by IMG.LY, runs entirely in the browser with no server dependencies.
git clone https://github.com/imgly/starterkit-video-export-options-ts-web.git
cd starterkit-video-export-options-ts-webnpm installCE.SDK requires engine assets (fonts, icons, UI elements) served from your public/ directory.
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ_VERSION$/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zipnpm run devOpen http://localhost:5173 in your browser.
Load content into the editor using one of these methods:
// Create a blank video scene
await cesdk.createVideoScene();
// Load from a template archive
await cesdk.loadFromArchiveURL('https://example.com/video-template.zip');
// Load from a scene file
await cesdk.loadFromURL('https://example.com/scene.json');
// Load from a video URL
await cesdk.createFromVideo('https://example.com/video.mp4');See Open the Editor for all loading methods.
cesdk.ui.setTheme('dark'); // 'light' | 'dark' | 'system'See Theming for custom color schemes and styling.
cesdk.i18n.setTranslations({
de: { 'common.export': 'Exportieren' }
});
cesdk.i18n.setLocale('de');See Localization for supported languages and translation keys.
src/
├── imgly/
│ ├── config/
│ │ ├── actions.ts # Export/import actions
│ │ ├── features.ts # Feature toggles
│ │ ├── i18n.ts # Translations
│ │ ├── plugin.ts # Main configuration plugin
│ │ ├── settings.ts # Engine settings
│ │ └── ui/
│ │ ├── canvas.ts # Canvas configuration
│ │ ├── components.ts # Custom component registration
│ │ ├── dock.ts # Dock layout configuration
│ │ ├── index.ts # Combines UI customization exports
│ │ ├── inspectorBar.ts # Inspector bar layout
│ │ ├── navigationBar.ts # Navigation bar layout
│ │ └── panel.ts # Panel configuration
│ ├── index.ts # Editor initialization function
│ └── plugins/
│ └── export-video-panel.ts
└── index.ts
- Video Trimming – Cut and arrange video clips on timeline
- Text Overlays – Add animated text and titles
- Transitions – Smooth transitions between clips
- Audio – Add background music and sound effects
- Stickers & Graphics – Overlay graphics and animations
- Export – MP4 video with configurable quality
- Node.js v22+ with npm – Download
- Supported browsers – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
| Issue | Solution |
|---|---|
| Editor doesn't load | Verify assets are accessible at baseURL |
| Assets don't appear | Check public/assets/ directory exists |
| Video doesn't play | Check browser autoplay policies and video format (MP4, WebM) |
| Watermark appears | Add your license key |
For complete integration guides and API reference, visit the Video Editor Documentation.
This project is licensed under the MIT License - see the LICENSE file for details.