Serve Assets

The full editor registers asset sources through plugins imported from @cesdk/cesdk-js/plugins, each of which accepts a baseURL option.

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.77.1/imgly-assets.zip

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

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

import CreativeEditorSDK from '@cesdk/cesdk-js';
import {
  BlurAssetSource,
  ImageColorsAssetSource,
  ColorPaletteAssetSource,
  CropPresetsAssetSource,
  DemoAssetSources,
  EffectsAssetSource,
  FiltersAssetSource,
  PagePresetsAssetSource,
  StickerAssetSource,
  TextAssetSource,
  TextComponentAssetSource,
  TypefaceAssetSource,
  UploadAssetSources,
  VectorShapeAssetSource
} from '@cesdk/cesdk-js/plugins';

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

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

  // Add default asset source plugins
  await cesdk.addPlugin(new BlurAssetSource({ baseURL: assetBaseURL }));
  await cesdk.addPlugin(new ColorPaletteAssetSource({ baseURL: assetBaseURL }));
  await cesdk.addPlugin(new CropPresetsAssetSource({ baseURL: assetBaseURL }));
  await cesdk.addPlugin(new EffectsAssetSource({ baseURL: assetBaseURL }));
  await cesdk.addPlugin(new FiltersAssetSource({ baseURL: assetBaseURL }));
  await cesdk.addPlugin(new PagePresetsAssetSource({ baseURL: assetBaseURL }));
  await cesdk.addPlugin(new StickerAssetSource({ baseURL: assetBaseURL }));
  await cesdk.addPlugin(new TextAssetSource({ baseURL: assetBaseURL }));
  await cesdk.addPlugin(
    new TextComponentAssetSource({ baseURL: assetBaseURL })
  );
  await cesdk.addPlugin(new TypefaceAssetSource({ baseURL: assetBaseURL }));
  await cesdk.addPlugin(new VectorShapeAssetSource({ baseURL: assetBaseURL }));

  // Add demo and upload sources
  await cesdk.addPlugin(
    new UploadAssetSources({ include: ['ly.img.image.upload'] })
  );
  await cesdk.addPlugin(
    new DemoAssetSources({
      include: [
        'ly.img.templates.blank.*',
        'ly.img.templates.presentation.*',
        'ly.img.templates.print.*',
        'ly.img.templates.social.*',
        'ly.img.image.*'
      ]
    })
  );
});

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#

Each asset-source plugin accepts a baseURL option pointing at your self-hosted assets:

await cesdk.addPlugin(new StickerAssetSource({ baseURL: assetBaseURL }));
await cesdk.addPlugin(new TypefaceAssetSource({ baseURL: assetBaseURL }));

The baseURL must be an absolute URL. The engine looks up each source’s definition at {baseURL}/{sourceId}/content.json and references files like {baseURL}/{sourceId}/images/example.png. Register the full set the same way—the Quick Start above shows the complete list.

Default Asset Sources#

Adding the default asset source plugins registers these asset sources:

• ly.img.sticker - Stickers
• ly.img.sticker.misc - Additional stickers
• ly.img.vector.shape - Shapes and arrows
• ly.img.typeface - Font definitions
• ly.img.color.palette - Color palettes
• ly.img.filter - Filter 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.caption.presets - Caption formatting
• ly.img.text - Text style presets (Plain Text)
• ly.img.text.styles - Text style presets (Text Styles)
• ly.img.text.curves - Text style presets (Curved Text)
• ly.img.text.components - Text combinations
• ly.img.animation - Animation presets
• ly.img.animation.text - Text animation presets

Demo Asset Sources#

Adding the DemoAssetSources and UploadAssetSources plugins 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.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.

Excluding Unused Asset Sources#

If you only need a subset of default assets, simply omit the plugins you don’t need. For example, to skip stickers and video page presets, add all plugins except StickerAssetSource and the video page presets:

// Only add the plugins you need
await cesdk.addPlugin(new BlurAssetSource());
await cesdk.addPlugin(new ImageColorsAssetSource());
await cesdk.addPlugin(new ColorPaletteAssetSource());
await cesdk.addPlugin(new CropPresetsAssetSource());
await cesdk.addPlugin(new EffectsAssetSource());
await cesdk.addPlugin(new FiltersAssetSource());
await cesdk.addPlugin(new PagePresetsAssetSource());
// StickerAssetSource omitted
await cesdk.addPlugin(new TextAssetSource());
await cesdk.addPlugin(new TextComponentAssetSource());
await cesdk.addPlugin(new TypefaceAssetSource());
await cesdk.addPlugin(new VectorShapeAssetSource());

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

When you build your own UI on the headless @cesdk/engine, don’t use the @cesdk/cesdk-js/plugins asset-source plugins—they are coupled to the editor and pull it in. Instead, set baseURL when initializing the engine and register each content asset source directly through the engine API.

Quick Start#

Download and extract the assets for your SDK version:

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

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

Initialize with a Base URL#

Set baseURL to the location where you extracted the archive. The engine loads core/, fonts/, and emoji/ from this location, and resolves each asset source relative to it.

import CreativeEngine from '@cesdk/engine';

const engine = await CreativeEngine.init({
  license: 'YOUR_CESDK_LICENSE_KEY',
  baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEngine.version}/`
});

The engine’s default baseURL already points at the cesdk-engine CDN, so you only need to set it when self-hosting for production.

Register Asset Sources#

Register the content sources you need by pointing each one at its content.json under the base URL. engine.getBaseURL() returns the configured base:

const baseURL = engine.getBaseURL();

for (const sourceId of [
  'ly.img.sticker',
  'ly.img.vector.shape',
  'ly.img.typeface',
  'ly.img.color.palette'
]) {
  await engine.asset.addLocalAssetSourceFromJSONURI(
    `${baseURL}${sourceId}/content.json`
  );
}

Pass a matcher to load only a subset of a source’s assets:

await engine.asset.addLocalAssetSourceFromJSONURI(
  `${baseURL}ly.img.sticker/content.json`,
  { matcher: ['*emoji*'] }
);

For user uploads, register a local source with the MIME types it accepts:

engine.asset.addLocalSource('ly.img.image.upload', ['image/png', 'image/jpeg']);

For the full list of source IDs and matcher filtering, see the Default Assets guide.