Class: CreativeEditorSDK

The main entry point for the Creative Editor SDK.

This class provides a comprehensive interface for creating, configuring, and managing creative editing experiences using our ready-made editor. The SDK can be configured to serve a multitude of use cases, offering a wide range of features such as asset management, scene creation, export operations, and plugin management.

Categories#

Members#

Instance members that allow access to the underlying engine, user interface, and configuration APIs.

engine#

Access to the CreativeEngine instance that powers the editor.

ui#

Access to the UserInterfaceAPI for controlling the editor’s user interface

i18n#

Access to the InternationalizationAPI to control locale and translations

feature#

Access to the FeatureAPI to control feature availability

version#

The version of the Creative Editor SDK

Lifecycle Management#

Methods for SDK initialization, cleanup, and resource management.

dispose()#

Disposes the editor and engine if no longer needed.

Returns#

void

Signature#

dispose(): void

create()#

Creates an editor and renders it for the given container.

This method gives you more control over the initialization process of the editor. After the returned Promise resolves, you can execute configuration commands on the CreativeEditorSDK instance. Once that is done, you can load or create an initial scene. Until then the CreativeEditorSDK will display a loading spinner

Parameters#

Parameter	Type	Description
`container`	`string`	`HTMLDivElement`
`config?`	`Partial`<`CombinedConfiguration`>	the initial configuration to create the editor

Returns#

Promise<CreativeEditorSDK>

a promise which resolves after the engine is ready to receive further commands on the CreativeEditorSDK instance

Signature#

create(container: string | HTMLDivElement, config?: Partial<CombinedConfiguration>): Promise<CreativeEditorSDK>

Configuration#

Methods for configuring SDK behavior, translations, and runtime settings.

disableNoSceneWarning()#

Disable the warning logged when no scene is available.

If no scene is available, 2 seconds after CreativeEditorSDK.create(), a warning is shown on the console. This method disables this warning. That can be useful in situation where you are waiting for long running async processes to finish before creating the scene.

Returns#

void

Signature#

disableNoSceneWarning(): void

setTranslations()#

Adds translations to be used by the editor.

Parameters#

Parameter	Type	Description
`definition`	{ [`locale`: `string`]: `object`; }	locale to a translation object

Returns#

void

Example#

setTranslations({
 en: {
   presets: {
     scene: ...
   }
 }
})

Signature#

setTranslations(definition: object): void

Plugin Management#

Methods for extending SDK functionality through plugins and custom integrations.

addPlugin()#

Adds and initializes a plugin to the editor.

Parameters#

Parameter	Type
`plugin`	`EditorPlugin`

Returns#

void

Signature#

addPlugin(plugin: EditorPlugin): void

Asset Management#

Methods for registering, managing, and refreshing asset sources including default assets, demo assets, and custom asset libraries.

addDefaultAssetSources()#

Convenience function to register a set of our default asset sources.

The sources contain our example assets. These are:

'ly.img.sticker' - Various stickers
'ly.img.vectorpath' - Shapes and arrows
'ly.img.filter.lut' - LUT effects of various kinds
'ly.img.filter.duotone' - Color effects of various kinds

These assets are parsed from the IMG.LY CDN at \{\{base_url\}\}/<id>/content.json, where baseURL defaults to ‘https://cdn.img.ly/assets/v4’. Each source is created via addLocalSource and populated with the parsed assets. To modify the available assets, you may either exclude certain IDs via excludeAssetSourceIds or alter the sources after creation.

Parameters#

Parameter	Type
`__namedParameters`	{ `baseURL?`: `string`; `excludeAssetSourceIds?`: `DefaultAssetSourceId`[]; }
`__namedParameters.baseURL?`	`string`
`__namedParameters.excludeAssetSourceIds?`	`DefaultAssetSourceId`[]

Returns#

Promise<void>

Signature#

addDefaultAssetSources(__namedParameters?: object): Promise<void>

addDemoAssetSources()#

Convenience function that registers a set of demo asset sources

These contain our example assets. These are not to meant to be used in your production code.

These are

'ly.img.image' - Sample images
'ly.img.image.upload' - Demo source to upload image assets
'ly.img.audio' - Sample audios
'ly.img.audio.upload' - Demo source to upload audio assets
'ly.img.video' - Sample videos
'ly.img.video.upload' - Demo source to upload video assets

Parameters#

Parameter	Type
`__namedParameters`	{ `baseURL?`: `string`; `excludeAssetSourceIds?`: `DemoAssetSourceId`[]; `sceneMode?`: `SceneMode`; }
`__namedParameters.baseURL?`	`string`
`__namedParameters.excludeAssetSourceIds?`	`DemoAssetSourceId`[]
`__namedParameters.sceneMode?`	`SceneMode`

Returns#

Promise<void>

Signature#

addDemoAssetSources(__namedParameters?: object): Promise<void>

refetchAssetSources()#

Trigger a refetch of the asset source and update the asset library panel with the new items accordingly.

Parameters#

Parameter	Type	Description
`sourceId`	`string`	`string`[]

Returns#

void

Deprecated#

Please use cesdk.engine.asset.assetSourceContentsChanged instead.

Scene Creation#

Methods for creating new scenes from scratch, including design scenes, video scenes, and scenes from existing images.

createDesignScene()#

Create a scene with a single empty page with the given format.

Parameters#

Parameter	Type	Description
`format?`	`PageFormatDefinition`	A `PageFormatDefinition` object specifying the page format to use.

Returns#

Promise<number>

Signature#

createDesignScene(format?: PageFormatDefinition): Promise<number>

createVideoScene()#

Create a scene with a single empty page with the given format.

Parameters#

Parameter	Type	Description
`format?`	`PageFormatDefinition`	The page format to use. Can be either a string, identifying a page format that has been configured or a `PageFormatDefinition` object.

Returns#

Promise<number>

Signature#

createVideoScene(format?: PageFormatDefinition): Promise<number>

createFromImage()#

Create a scene from the provided image.

Parameters#

Parameter	Type	Description
`url`	`string`	The url of the image

Returns#

Promise<number>

a promise which resolves if the scene was successfully loaded.

Signature#

createFromImage(url: string): Promise<number>

Scene Loading#

Methods for loading existing scenes from various sources including strings, URLs, and encoded scene data.

load()#

Load an encoded scene from the provided string.

Parameters#

Parameter	Type	Description
`scene`	`string`	A string starting with UBQ1 and containing the encoded scene.

Returns#

Promise<number>

Deprecated#

Use loadFromString instead.

loadFromString()#

Load an encoded scene from the provided string.

Parameters#

Parameter	Type	Description
`scene`	`string`	A string starting with UBQ1 and containing the encoded scene.

Returns#

Promise<number>

a promise which resolves if the scene was successfully loaded.

Signature#

loadFromString(scene: string): Promise<number>

loadFromURL()#

Load the scene stored in the file at the given URL.

Parameters#

Parameter	Type	Description
`url`	`string`	The url to fetch to acquire the scene string.

Returns#

Promise<number>

a promise which resolves if the scene was successfully loaded.

Signature#

loadFromURL(url: string): Promise<number>

Scene Saving#

Methods for persisting and exporting scene data as strings or files.

save()#

Save and return a scene as a base64 encoded string.

Returns#

Promise<string>

a promise with the scene as a string

Signature#

save(): Promise<string>

Export Operations#

Methods for exporting scenes and pages as files in various formats and mimeTypes.

export()#

Exports one or multiple page(s) as an file in the given mimeType

Please note: the onExport callback provided in the configuration will be not called. This callback is for exports triggered by an user interaction.

Parameters#

Parameter	Type	Description
`options`	`ExportOptions`	options for the export

Returns#

Promise<{ blobs: Blob[]; options: ExportOptions; }>

a promise with an object holding blobs of the export pages and the provided options.

Signature#

export(options: ExportOptions): Promise<object>

Upload Operations#

Methods for handling file uploads and asset creation from user-provided files.

unstable_upload()#

Uses the configured upload handler to upload the given file.

Parameters#

Parameter	Type	Description
`file`	`File`	The file to upload
`onProgress`	(`progress`) => `void`	A callback to track the progress of the upload This API is experimental and may change or be removed in future versions.

Returns#

Promise<AssetDefinition>

Page Management#

This API is experimental and may change or be removed in future versions.

unstable_switchPage()#

Parameters#

Parameter	Type
`pageId`	`number`

Returns#

Promise<void>

unstable_getPages()#

Returns#

Promise<number[]>

unstable_onActivePageChanged()#

Parameters#

Parameter	Type
`callback`	(`id`) => `void`

Returns#

(): void;

Returns#

void

unstable_focusPage()#

Parameters#

Parameter	Type
`pageId`	`number`

Returns#

Promise<void>

Upload Operations#

This API is experimental and may change or be removed in future versions.

unstable_supportsUpload()#

Returns true if a upload handler was configured. If mime types are given as an argument, it will return true if the upload handler supports all of the given mime types.

Parameters#

Parameter	Type
`mimeTypes?`	`string`

Returns#

boolean