Streamline asset production with video placeholders. Built with CE.SDK by IMG.LY, runs entirely in the browser with no server dependencies.
git clone https://github.com/imgly/starterkit-video-placeholders-react-web.git
cd starterkit-video-placeholders-react-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/
├── app/ # Demo application
├── imgly/
│ ├── config/
│ │ ├── advanced-video-editor/
│ │ │ ├── actions.ts # Export/import actions
│ │ │ ├── features.ts # Feature toggles
│ │ │ ├── i18n.ts # Translations
│ │ │ ├── plugin.ts # Main configuration plugin
│ │ │ ├── settings.ts # Engine settings
│ │ │ └── ui/
│ │ │ ├── canvas.ts # Canvas configuration
│ │ │ ├── components.ts # Custom component registration
│ │ │ ├── dock.ts # Dock layout configuration
│ │ │ ├── index.ts # Combines UI customization exports
│ │ │ ├── inspectorBar.ts # Inspector bar layout
│ │ │ ├── navigationBar.ts # Navigation bar layout
│ │ │ └── panel.ts # Panel configuration
│ │ └── video-editor/ # Same structure as advanced-video-editor/
│ └── index.ts # Editor initialization function
└── index.tsx # Application entry point
- 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.