Asset Source Plugins

BlurAssetSource#

Provides blur effect presets for image editing.

import { BlurAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new BlurAssetSource());

Options:

Asset Source ID: ly.img.blur

Default include patterns:

• ly.img.blur.*

CaptionPresetsAssetSource#

Provides caption style presets for video editing. Captions use the same declarative style-preset format as text, so a single click applies a complete caption look (font, color, background, and alignment).

import { CaptionPresetsAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new CaptionPresetsAssetSource());

Options:

Asset Source ID: ly.img.caption.presets

Default include patterns:

• ly.img.caption.presets.*

ColorPaletteAssetSource#

Provides default color palette presets for the color picker.

import { ImageColorsAssetSource, ColorPaletteAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new ImageColorsAssetSource());
await cesdk.addPlugin(new ColorPaletteAssetSource());

Options:

Asset Source ID: ly.img.color.palette

Default include patterns:

• ly.img.color.palette.*

CropPresetsAssetSource#

Provides crop aspect ratio presets (16:9, 4:3, 1:1, etc.).

import { CropPresetsAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new CropPresetsAssetSource());

Options:

Asset Source ID: ly.img.crop.presets

Default include patterns:

• ly.img.crop.presets.*
• ly.img.crop.presets.fixed-ratio.*

DemoAssetSources#

Provides demo assets for testing and prototyping: images, videos, audio, stickers, and templates. Useful during development before integrating your own asset sources.

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

// Load all demo assets
await cesdk.addPlugin(new DemoAssetSources());

// Load specific categories using GLOB patterns
await cesdk.addPlugin(new DemoAssetSources({
  include: [
    'ly.img.templates.social.*',
    'ly.img.image.*'
  ]
}));

Options:

Asset Source IDs:

Default include patterns:

• ly.img.audio.*
• ly.img.video.*
• ly.img.image.*
• ly.img.sticker.misc.*
• ly.img.sticker.misc.3dstickers.*
• ly.img.sticker.misc.marker.*
• ly.img.sticker.misc.sketches.*
• ly.img.sticker.misc.tape.*
• ly.img.templates.*
• ly.img.templates.blank.*
• ly.img.templates.social.*
• ly.img.templates.print.*
• ly.img.templates.presentation.*
• ly.img.templates.video.*

EffectsAssetSource#

Provides visual effect presets including adjustments, vignette, and other image effects.

import { EffectsAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new EffectsAssetSource());

Options:

Asset Source ID: ly.img.effect

Default include patterns:

• ly.img.effect.*

FiltersAssetSource#

Provides photo filter presets including LUT-based color grading filters and duotone effects.

import { FiltersAssetSource } from '@cesdk/cesdk-js/plugins';

// Load all filters
await cesdk.addPlugin(new FiltersAssetSource());

// Load specific filter categories
await cesdk.addPlugin(new FiltersAssetSource({
  include: [
    'ly.img.filter.lut.bw.*',
    'ly.img.filter.duotone.*'
  ]
}));

Options:

Asset Source ID: ly.img.filter

Default include patterns:

• ly.img.filter.*
• ly.img.filter.duotone.*
• ly.img.filter.lut.*
• ly.img.filter.lut.bw.*
• ly.img.filter.lut.retro.*
• ly.img.filter.lut.analog.*
• ly.img.filter.lut.winter.*
• ly.img.filter.lut.summer.*
• ly.img.filter.lut.legacy.*

ImageColorsAssetSource#

Adds an Image Colors group to the color picker that lists the dominant colors of each image in the scene, so users can reuse a color taken straight from their artwork. The plugin reads the colors with the engine’s engine.block.getDominantColors() API and groups them per image block. It is opt-in — add the plugin to enable the group.

import { ImageColorsAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new ImageColorsAssetSource());

By default the group is added to the ly.img.colors color-library entry and only appears while the scene contains at least one image. Use assetLibraryEntries to attach it to different color-library entries.

Options:

Asset Source ID: ly.img.colors.imageColors

To extract dominant colors programmatically instead, see the Extract Dominant Colors guide.

PagePresetsAssetSource#

Provides page size presets for social media platforms and print formats.

import { PagePresetsAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new PagePresetsAssetSource());

// Load only social media presets
await cesdk.addPlugin(new PagePresetsAssetSource({
  include: ['ly.img.page.presets.instagram.*']
}));

Options:

Asset Source ID: ly.img.page.presets

Default include patterns:

• ly.img.page.presets.*
• ly.img.page.presets.facebook.*
• ly.img.page.presets.facebook.video.*
• ly.img.page.presets.instagram.*
• ly.img.page.presets.linkedin.*
• ly.img.page.presets.pinterest.*
• ly.img.page.presets.tiktok.*
• ly.img.page.presets.tiktok.video.*
• ly.img.page.presets.x.*
• ly.img.page.presets.x.video.*
• ly.img.page.presets.youtube.*
• ly.img.page.presets.video.*
• ly.img.page.presets.print.*
• ly.img.page.presets.print.brochure.*
• ly.img.page.presets.print.business_card.*
• ly.img.page.presets.print.flyer.*
• ly.img.page.presets.print.iso.*
• ly.img.page.presets.print.na.*
• ly.img.page.presets.print.postcard.*
• ly.img.page.presets.print.poster.*

StickerAssetSource#

Provides sticker graphics organized by category.

import { StickerAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new StickerAssetSource());

// Load only emoji stickers
await cesdk.addPlugin(new StickerAssetSource({
  include: ['ly.img.sticker.emoji.*']
}));

Options:

Asset Source ID: ly.img.sticker

Default include patterns:

• ly.img.sticker.*
• ly.img.sticker.3Dstickers.*
• ly.img.sticker.craft.*
• ly.img.sticker.doodle.*
• ly.img.sticker.emoji.*
• ly.img.sticker.emoticons.*
• ly.img.sticker.hand.*

TextAssetSource#

Provides reusable text style presets that apply a complete look (font, color, outline, background, shadow, and animations) in a single step. Includes text-on-curve presets (Circle, Arch, Wave, and Elevate).

import { TextAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new TextAssetSource());

Options:

Asset Source IDs: ly.img.text, ly.img.text.styles, ly.img.text.curves

Default include patterns:

• ly.img.text.*
• ly.img.text.styles.*
• ly.img.text.curves.*

TextComponentAssetSource#

Provides pre-designed text component layouts combining multiple text elements.

import { TextComponentAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new TextComponentAssetSource());

Options:

Asset Source ID: ly.img.text.components

Default include patterns:

• ly.img.text.components.*

TypefaceAssetSource#

Provides font and typeface assets for text styling.

import { TypefaceAssetSource } from '@cesdk/cesdk-js/plugins';

await cesdk.addPlugin(new TypefaceAssetSource());

Options:

Asset Source ID: ly.img.typeface

Default include patterns:

• ly.img.typeface.*

UploadAssetSources#

Provides local file upload sources for images, videos, and audio. Users can upload files from their device to use in the editor.

The include option supports two modes:

• Additive mode: When all entries are config objects, all default sources are included and objects customize them
• Explicit mode: When any string is present, only listed sources are included

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

// Enable all upload types with defaults
await cesdk.addPlugin(new UploadAssetSources());

// Explicit mode: enable only specific upload types
await cesdk.addPlugin(new UploadAssetSources({
  include: ['ly.img.image.upload']
}));

// Additive mode: customize MIME types while keeping all sources
await cesdk.addPlugin(new UploadAssetSources({
  include: [
    {
      id: 'ly.img.image.upload',
      mimeTypes: ['image/png', 'image/jpeg', 'image/webp']
    }
  ]
}));

// Explicit mode with custom MIME types
await cesdk.addPlugin(new UploadAssetSources({
  include: [
    'ly.img.image.upload',
    {
      id: 'ly.img.video.upload',
      mimeTypes: ['video/mp4', 'video/webm']
    }
  ]
}));

Options:

UploadSourceConfig:

Asset Source IDs:

VectorShapeAssetSource#

Provides vector shape assets including basic shapes, arrows, and decorative elements.

import { VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins';

// Load all shape types
await cesdk.addPlugin(new VectorShapeAssetSource());

// Load specific shape categories
await cesdk.addPlugin(new VectorShapeAssetSource({
  include: [
    'ly.img.vector.shape.filled.*',
    'ly.img.vector.shape.outline.*'
  ]
}));

Options:

Asset Source ID: ly.img.vector.shape

Default include patterns:

• ly.img.vector.shape.*
• ly.img.vector.shape.filled.*
• ly.img.vector.shape.filled.abstract.*
• ly.img.vector.shape.gradient.*
• ly.img.vector.shape.gradient.abstract.*
• ly.img.vector.shape.image.*
• ly.img.vector.shape.image.abstract.*
• ly.img.vector.shape.outline.*
• ly.img.vector.shape.outline.abstract.*

Pre-registered Asset Library Entries#

Asset library entries define where assets appear in the editor’s UI. Each asset source plugin maps its source to one or more library entries using the assetLibraryEntries option.

The following library entry IDs are pre-registered by CE.SDK:

You can also use custom entry IDs to create your own library panels.