Improve Performance

CE.SDK has a large bundle size that can impact initial page load. Optimizing how you load, use, and dispose of the editor improves application performance and user experience.

This guide covers code splitting techniques to defer loading, source sets for managing large assets, export optimization with workers and quality settings, and proper lifecycle management.

Code Splitting#

Delay loading the engine module to improve initial page load time. Use dynamic imports to load the engine only when needed.

Using a Bundler#

Use dynamic import() with bundlers like Webpack, Rollup, or Vite to create separate chunks that load on demand. The bundler automatically handles code splitting when you use dynamic imports.

async function loadCreativeEditorSDK(): Promise<typeof CreativeEditorSDK> {
  const { default: CreativeEditorSDK } = await import('@cesdk/cesdk-js');
  return CreativeEditorSDK;
}

This approach keeps CE.SDK in a separate bundle that loads only when loadCreativeEditorSDK() is called. Users who never open the editor avoid downloading the SDK entirely.

Using CDN#

Load CE.SDK directly from CDN using dynamic imports. This works in modern browsers without any build tooling.

async function loadCreativeEditorSDK(): Promise<typeof CreativeEditorSDK> {
  const { default: CreativeEditorSDK } = await import(
    'https://cdn.img.ly/packages/imgly/cesdk-js/1.82.0/index.js'
  );
  return CreativeEditorSDK;
}

CDN loading offloads bandwidth from your servers and leverages global CDN caching for faster delivery.

Managing Large Assets#

High-resolution images and videos consume significant memory. Optimize asset loading to reduce memory pressure and improve performance.

Use Source Sets#

Source sets allow you to provide multiple resolution variants of the same image. The engine automatically selects the most appropriate resolution based on the current display size, loading smaller images for previews and higher resolution assets only when needed for exports.

const imageFill = engine.block.createFill('image');

engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [
  {
    uri: 'https://img.ly/static/ubq_samples/sample_1_512x341.jpg',
    width: 512,
    height: 341
  },
  {
    uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg',
    width: 1024,
    height: 683
  },
  {
    uri: 'https://img.ly/static/ubq_samples/sample_1_2048x1366.jpg',
    width: 2048,
    height: 1366
  }
]);

engine.block.setFill(block, imageFill);

This approach reduces initial load times and memory usage during editing while ensuring high-quality exports. See Source Sets for more details.

Additional Optimization Tips#

• Remove unused assets from the scene when no longer needed
• Dispose the engine when the editing session ends
• Use optimized image formats (WebP, AVIF) for faster loading

Export Optimization#

Optimize export performance through worker configuration and export settings.

Use Export Workers#

CE.SDK can offload export rendering to a Web Worker, keeping the main thread responsive during exports. Video and audio exports use a worker by default. Image and other static exports, such as PDF, run on the main thread unless you opt in.

The exportWorker feature flag controls worker usage for all export types:

const config = {
  license: 'YOUR_CESDK_LICENSE_KEY',
  featureFlags: {
    exportWorker: true // Opt image exports in; video and audio already use a worker
  }
};

const cesdk = await CreativeEditorSDK.create('#cesdk_container', config);

Setting the flag to false disables the worker for every export type, including video and audio.

Enabling the worker for image exports runs the export in a second engine instance in the background, which increases memory usage while the export runs.

Optimize Export Settings#

Adjust export parameters to balance quality and performance:

• Lower resolution: Reduce targetWidth and targetHeight for faster exports on slower devices
• Adjust quality: Use lower JPEG quality (0.7-0.8) for smaller file sizes and faster encoding
• Choose efficient formats: WebP typically offers better compression than PNG for images with transparency

// Export with optimized settings for performance
const blob = await engine.block.export(page, 'image/jpeg', {
  targetWidth: 1920,
  targetHeight: 1080,
  jpegQuality: 0.8
});

Large PDF Exports Are Staged on Disk#

engine.block.export() writes a PDF into a temporary file (origin private file system) while the export runs, and returns a Blob backed by that file, so the finished document never sits in memory as a whole. Browsers without that support assemble the Blob in memory instead, where a large multi-page document such as a photo book or a magazine becomes the peak allocation.

The temporary file backs the returned Blob, so it stays on disk after the export. CE.SDK collects the staging files of earlier page loads for you.

See Export to PDF for the full API.

Export Size Limits#

Check device export capabilities before attempting large exports using engine.editor.getMaxExportSize().

const maxExportSize = engine.editor.getMaxExportSize();

// Verify design fits within limits
const pageWidth = engine.block.getWidth(page);
const pageHeight = engine.block.getHeight(page);

if (pageWidth > maxExportSize || pageHeight > maxExportSize) {
  console.warn('Design exceeds maximum export size - consider reducing dimensions');
}

This returns the maximum dimension in pixels that the device can reliably export.

Engine Lifecycle#

Follow proper patterns for initializing and disposing the engine to prevent memory leaks and ensure consistent behavior.

Initialization#

Initialize the engine once and reuse the instance. Pass essential configuration including license key and baseURL.

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

const config = {
  license: 'YOUR_CESDK_LICENSE_KEY',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.82.0/assets'
};

const cesdk = await CreativeEditorSDK.create('#cesdk_container', config);
const engine = cesdk.engine;

When using the full CE.SDK (not just the engine), the editor creates a managed canvas element accessible via cesdk.engine. Avoid creating multiple engine instances simultaneously.

Disposal#

Call dispose() when the editing session ends to free all resources including GPU memory, textures, and native allocations.

cesdk.dispose();

After disposal, the engine instance becomes unusable. Create a new instance if the user returns to the editor.

Asset Loading#

For production deployments, host engine assets on your own servers to improve reliability and reduce dependency on external CDNs. Configure baseURL to point to your asset location.

See Serve Assets From Your Server for detailed setup instructions.

Troubleshooting#

Large Initial Load Time#

Implement code splitting to defer engine loading until needed. Use dynamic imports with bundlers or CDN loading to keep the main bundle small.

Slow Export Performance#

Enable export workers with the exportWorker feature flag and reduce export resolution or quality settings. For complex scenes, consider exporting at a lower resolution and scaling up if needed.

Memory Leaks#

Ensure dispose() is called when the editor is closed. In SPAs, use cleanup functions in component lifecycle hooks to dispose the engine on unmount.

API Reference#

Next Steps#

• Architecture - Understand CE.SDK structure and components
• Headless Mode - Run the engine without UI for automation
• Export Overview - Learn about export formats and options