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 text presets for video editing with custom application logic for applying captions.

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 { ColorPaletteAssetSource } from '@cesdk/cesdk-js/plugins';

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.*

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 text style presets for headlines, body text, and other typography styles.

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

await cesdk.addPlugin(new TextAssetSource());

Options:

Asset Source ID: ly.img.text

Default include patterns:

• ly.img.text.*

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.