Serve Assets

Self-hosting assets is required for production use. The IMG.LY CDN is intended for development and prototyping only—you’ll see a console warning when using the default CDN configuration. Hosting assets yourself gives you control over performance, availability, and compliance requirements.

This guide covers the asset categories CE.SDK uses, how to configure baseURL and asset source paths, and how to automate asset updates during SDK upgrades.

Quick Start#

Download and extract the essential assets for your SDK version:

# Download assets for current SDK version
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.67.0/imgly-assets.zip

# Create versioned directory and extract assets
mkdir -p public/cesdk/1.67.0
unzip imgly-assets.zip -d public/cesdk/1.67.0/
rm imgly-assets.zip

Then configure CE.SDK to use your self-hosted assets:

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

const config = {
  license: 'YOUR_CESDK_LICENSE_KEY',
  baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`,
};

CreativeEditorSDK.create(container, config).then(cesdk => {
  cesdk.addDefaultAssetSources({
    baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`,
  });
});

Understanding CE.SDK Assets#

CE.SDK assets are distributed in an imgly-assets.zip file available for download from the IMG.LY CDN. Understanding what’s in this archive helps you decide which assets to host and how to keep them updated.

Asset Categories#

The ZIP file contains directories organized by function:

For most integrations, you need core/, ui/, emoji/, fonts/, and the ly.img.* asset sources you use.

Version-Locked vs. Independent Assets#

Version-locked assets (core/, ui/, i18n/) must match your SDK version. Mismatched versions cause load errors—the engine will fail to initialize if core files don’t match.

Independent assets (ly.img.* directories) can be updated separately. Configure these via addDefaultAssetSources({ baseURL }) and addDemoAssetSources({ baseURL }). Check the changelog when upgrading to see if asset versions have changed.

Default Asset Sources#

Calling addDefaultAssetSources() registers these asset sources:

• ly.img.sticker - Stickers
• ly.img.sticker.misc - Additional stickers
• ly.img.vectorpath - Shapes and arrows
• ly.img.typeface - Font definitions
• ly.img.colors.defaultPalette - Color palettes
• ly.img.filter.lut - LUT effects
• ly.img.filter.duotone - Duotone effects
• ly.img.effect - Visual effects
• ly.img.blur - Blur presets
• ly.img.crop.presets - Crop aspect ratios
• ly.img.page.presets - Page format presets
• ly.img.page.presets.video - Video page presets
• ly.img.captionPresets - Caption formatting
• ly.img.animation - Animation presets
• ly.img.animation.text - Text animation presets

Demo Asset Sources#

Calling addDemoAssetSources() registers sample content sources for development:

• ly.img.image - Sample images
• ly.img.video - Sample videos
• ly.img.audio - Sample audio
• ly.img.template - Design templates
• ly.img.video.template - Video templates
• ly.img.textComponents - Text components
• ly.img.image.upload, ly.img.video.upload, ly.img.audio.upload - Upload sources

These are intended for development and prototyping—replace them with your own content in production.

Configuration Options#

Browser configuration involves three settings: baseURL, core.baseURL, and the baseURL option for asset sources.

Editor Configuration#

Pass configuration to CreativeEditorSDK.create():

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

const config = {
  baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`,
  core: {
    baseURL: 'core/',
  },
};

CreativeEditorSDK.create(container, config).then(cesdk => {
  // Editor initialized with self-hosted assets
});

baseURL — Base path for all engine assets. Can be an absolute URL or a relative path. Relative paths resolve against window.location.href. Defaults to the IMG.LY CDN.

core.baseURL — Path to WASM files. Defaults to core/ relative to baseURL. Usually you don’t need to change this unless hosting WASM files separately.

Asset Sources Configuration#

Configure asset sources after initializing the editor:

CreativeEditorSDK.create(container, config).then(cesdk => {
  // Point default assets to your server
  cesdk.addDefaultAssetSources({
    baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`,
  });

  // Optional: Add demo assets for development
  cesdk.addDemoAssetSources({
    baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`,
  });
});

The baseURL for asset sources must be an absolute URL. The engine looks up asset definitions at {baseURL}/{sourceId}/content.json and references files like {baseURL}/{sourceId}/images/example.png.

Excluding Unused Asset Sources#

If you only need a subset of default assets, use excludeAssetSourceIds to skip loading sources you don’t use:

cesdk.addDefaultAssetSources({
  baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`,
  excludeAssetSourceIds: ['ly.img.sticker', 'ly.img.page.presets.video'],
});

This reduces initial load time by not fetching unused asset definitions.

Troubleshooting#

WASM Load Errors#

If the engine fails to initialize with missing .wasm or .data errors, verify:

1. The assets ZIP version matches your SDK version
2. The core.baseURL points to the correct directory
3. Your server returns correct MIME types for .wasm files (application/wasm)

404 Errors for Assets#

If the console shows 404 errors for content.json files:

1. Verify the baseURL in addDefaultAssetSources() is correct
2. Check that asset directories exist at the expected paths
3. Configure CORS headers if serving assets from a different domain

CDN Warning in Console#

The warning “You’re using the IMG.LY CDN” appears when using default configuration. Set baseURL in your config to use self-hosted assets and remove the warning.

API Reference#