To v1.69+

Version 1.69 introduces Starter Kits, a new asset source plugin system, and consolidated asset naming conventions. This guide walks you through the breaking changes and migration steps.

TL;DR#

Key changes:

• Editor now initializes with a blank canvas by default
• addDefaultAssetSources() and addDemoAssetSources() are deprecated
• createDesignScene() and createVideoScene() are deprecated
• Asset source IDs have been renamed and consolidated (v5 naming)
• UI configuration options moved from create() to runtime APIs
• New plugin-based system for loading assets
• Unified scene.create action for scene creation

Migration time: ~15-30 minutes for most projects

What’s New in v1.69#

Starter Kits#

Starter Kits are complete project templates with editable configuration files. Each kit provides a ready-to-run project with a well-defined architecture:

• A config/ folder containing all editor configuration
• Separate files for UI layout, features, settings, and translations
• A configuration plugin class that wires everything together
• Clean separation between your app code and editor config

Asset Restructuring#

Version 1.69 introduces v5 assets and demo-v4 assets with updated naming conventions. This restructuring consolidates asset sources, establishes consistent naming patterns for asset source and asset IDs, and improves the developer experience when working with assets.

Step-by-Step Migration#

Step 1: Adopt Starter Kit Configuration#

Extract a Starter Kit config folder into your project:

npx degit imgly/starterkit-design-editor-ts-web/src/imgly/config ./src/config

npx degit imgly/starterkit-design-editor-ts-web/src/imgly/config ./src/config

git clone https://github.com/imgly/starterkit-design-editor-ts-web.git
cp -r starterkit-design-editor-ts-web/src/imgly/config ./src/config
rm -rf starterkit-design-editor-ts-web

git clone https://github.com/imgly/starterkit-design-editor-ts-web.git
cp -r starterkit-design-editor-ts-web/src/imgly/config ./src/config
rm -rf starterkit-design-editor-ts-web

Which Starter Kit Should I Use?#

Choose based on your previous editor setup:

• Design Editor — You used createDesignScene() for multi-page designs (social posts, flyers, presentations)
• Video Editor — You used createVideoScene() for video timeline editing
• Advanced Design Editor — You used createDesignScene() with the advanced inspector enabled to author design templates with placeholders for end-users to customize
• Advanced Video Editor — You used createVideoScene() with the advanced inspector enabled to author video templates with placeholders for end-users to customize

Available Starter Kits#

Repository Structure#

The config/ folder contains all configuration files you can modify:

config/
├── index.ts                # Exports configuration class
├── plugin.ts               # Main plugin class, orchestrates all setup
├── features.ts             # Feature flags (text, stickers, audio, etc.)
├── settings.ts             # Engine settings (page size, margins, etc.)
├── i18n.ts                 # Custom translations and labels
├── actions.ts              # Export, save, and share button handlers
└── ui/
    ├── index.ts            # UI setup entry point
    ├── canvas.ts           # Canvas behavior (zoom, pan, selection)
    ├── components.ts       # Custom UI components
    ├── dock.ts             # Left dock panel order and items
    ├── inspectorBar.ts     # Right inspector panel configuration
    ├── navigationBar.ts    # Top navigation bar buttons
    └── panel.ts            # Panel settings and behavior

Step 2: Use the Configuration Plugin#

import CreativeEditorSDK from '@cesdk/cesdk-js';
import { DesignEditorConfig } from './config/plugin';

const cesdk = await CreativeEditorSDK.create('#editor', {
  license: 'YOUR_CESDK_LICENSE_KEY',
  baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`
});

// Add plugin first (resets configuration to clean slate)
await cesdk.addPlugin(new DesignEditorConfig());

// Apply custom configuration on top
// ...

// Create the scene
await cesdk.actions.run('scene.create');

Step 3: Replace Deprecated Asset Loading Methods#

Replace calls to addDefaultAssetSources() and addDemoAssetSources() with the new plugin-based approach.

Replacing addDefaultAssetSources()#

Before (deprecated):

await cesdk.addDefaultAssetSources();

After (v1.69+):

The snippets below show the asset sources that addDefaultAssetSources() previously loaded by default. Include only the plugins your application requires:

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

await cesdk.addPlugin(new ColorPaletteAssetSource());
await cesdk.addPlugin(new TypefaceAssetSource());
await cesdk.addPlugin(new TextAssetSource());
await cesdk.addPlugin(new TextComponentAssetSource());
await cesdk.addPlugin(new VectorShapeAssetSource());
await cesdk.addPlugin(new StickerAssetSource());
await cesdk.addPlugin(new EffectsAssetSource());
await cesdk.addPlugin(new FiltersAssetSource());
await cesdk.addPlugin(new BlurAssetSource());
await cesdk.addPlugin(new PagePresetsAssetSource());
await cesdk.addPlugin(new CropPresetsAssetSource());

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

await cesdk.addPlugin(new ColorPaletteAssetSource());
await cesdk.addPlugin(new TypefaceAssetSource());
await cesdk.addPlugin(new TextAssetSource());
await cesdk.addPlugin(new TextComponentAssetSource());
await cesdk.addPlugin(new VectorShapeAssetSource());
await cesdk.addPlugin(new StickerAssetSource());
await cesdk.addPlugin(new EffectsAssetSource());
await cesdk.addPlugin(new FiltersAssetSource());
await cesdk.addPlugin(new BlurAssetSource());
await cesdk.addPlugin(new CaptionPresetsAssetSource());
await cesdk.addPlugin(new PagePresetsAssetSource({
  include: [
    'ly.img.page.presets.facebook.*',
    'ly.img.page.presets.instagram.*',
    'ly.img.page.presets.linkedin.*',
    'ly.img.page.presets.pinterest.*',
    'ly.img.page.presets.tiktok.*',
    'ly.img.page.presets.video.*',
    'ly.img.page.presets.x.*',
    'ly.img.page.presets.youtube.*'
  ]
}));
await cesdk.addPlugin(new CropPresetsAssetSource());

Replacing addDemoAssetSources()#

Before (deprecated):

await cesdk.addDemoAssetSources();

After (v1.69+):

The snippets below show the demo assets and upload sources that addDemoAssetSources() previously loaded by default. Include only the plugins your application requires:

import { DemoAssetSources, UploadAssetSources } from '@cesdk/cesdk-js/plugins';

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

import { DemoAssetSources, UploadAssetSources } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(
  new UploadAssetSources({
    include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload']
  })
);
await cesdk.addPlugin(
  new DemoAssetSources({
    include: [
      'ly.img.audio.*',
      'ly.img.image.*',
      'ly.img.templates.video.*',
      'ly.img.video.*'
    ]
  })
);

Asset Source Plugins Reference#

All plugins are imported from @cesdk/cesdk-js/plugins:

Each plugin accepts an optional configuration object with:

• baseURL: Custom base URL for loading assets
• include: GLOB patterns to filter which assets to load
• assetLibraryEntries: Map asset source IDs to UI library entry IDs

Demo Asset Sources#

The DemoAssetSources plugin provides sample content for development and testing:

Upload Asset Sources#

The UploadAssetSources plugin enables file uploads:

Breaking Changes#

Asset Source ID Renames#

The following asset source IDs have been renamed to align with v5 naming conventions:

Merged Asset Sources#

The following asset sources have been consolidated:

Merged Feature API Identifiers#

The following Feature API identifiers have been consolidated:

Translation Key Updates#

Translation keys have been updated to match the new asset source naming:

• Keys containing captionPresets → caption.presets
• Keys containing colors.defaultPalette → color.palette
• Keys containing vectorpath → vector.shape
• Keys containing textComponents → text.components
• Keys containing filter.lut or filter.duotone → filter

Scene Creation Methods#

The createDesignScene() and createVideoScene() methods are deprecated. Use the unified scene.create action instead.

await cesdk.createDesignScene();

await cesdk.actions.run('scene.create');

await cesdk.createVideoScene();

await cesdk.actions.run('scene.create', { mode: 'Video' });

The new action provides a single entry point for scene creation with flexible configuration:

// Create a scene with specific page dimensions
await cesdk.actions.run('scene.create', {
  page: { width: 1080, height: 1920, unit: 'Pixel' }
});

// Create a scene from a page preset asset
await cesdk.actions.run('scene.create', {
  page: {
    sourceId: 'ly.img.page.presets',
    assetId: 'ly.img.page.presets.instagram.story'
  }
});

// Create multiple pages at once
await cesdk.actions.run('scene.create', {
  page: { width: 1080, height: 1080, unit: 'Pixel' },
  pageCount: 3
});

await cesdk.actions.run('scene.create', {
  page: {
    sourceId: 'ly.img.page.presets',
    assetId: 'ly.img.page.presets.instagram.story'
  }
});

Migration Checklist#

Use this checklist to ensure a complete migration:

• Adopt a Starter Kit configuration for your editor type
• Replace addDefaultAssetSources() and addDemoAssetSources() calls with individual asset source plugins
• Update any hardcoded asset source IDs to use the new v5 naming conventions (see Breaking Changes)
• Test asset loading and UI configuration

Want a Complete, Ready-to-Run App?#

Extracting the configuration folder is ideal for existing projects where you need full control over editor setup. If you’re starting fresh and want a complete application scaffold with build tooling, asset management, and framework integration already configured, explore our Starter Kits instead.

Starter Kits provide complete applications with everything wired together—clone, install, and start building.