Export Using Renderer Starter Kit

The Renderer brings CE.SDK's design engine to your backend with fast, compliant, enterprise-ready export for images, PDFs, and video, enabling organizations to generate media at scale with full fidelity and predictable performance. Built with CE.SDK by IMG.LY, this starterkit demonstrates how to export videos using the CE.SDK Renderer service for server-side rendering.

Documentation

Getting Started

Clone the Repository

git clone https://github.com/imgly/starterkit-export-using-renderer-ts-web.git
cd starterkit-export-using-renderer-ts-web

Install Dependencies

npm install

Download Assets

CE.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.zip

Run the Development Server

npm run dev

Open http://localhost:5173 in your browser.

Configuration

Renderer URL

Configure the CE.SDK Renderer endpoint for server-side video rendering:

import { getRendererURL } from './imgly';

const customRendererUrl = 'https://your-renderer.example.com/api/render';

Loading Content

Load content into the editor using one of these methods:

// Create a blank video scene
await cesdk.actions.run('scene.create');

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

// Load from a scene file
await cesdk.load('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.

Theming

cesdk.ui.setTheme('dark'); // 'light' | 'dark' | 'system'

See Theming for custom color schemes and styling.

Architecture

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
│   └── renderer.ts
└── index.ts

Key Capabilities

• Server-Side Rendering – Export videos using CE.SDK Renderer service
• Video Editing – Full video editing capabilities with timeline
• Custom Export Actions – New Design, New Video, and Export using Renderer buttons
• Multi-Track Timeline – Layer video, audio, and graphics tracks
• Professional Export – High-quality video rendering on the server

Prerequisites

• Node.js v22+ with npm – Download
• Supported browsers – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
• CE.SDK Renderer – Server-side rendering service (cloud-hosted or self-hosted)

Troubleshooting

Issue	Solution
Editor doesn't load	Verify assets are accessible at baseURL
Assets don't appear	Check public/assets/ directory exists
Export fails	Verify renderer URL is correct and accessible
Watermark appears	Add your license key

Documentation

For complete integration guides and API reference, visit the Export Using Renderer Documentation.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with CE.SDK by IMG.LY