Search
Loading...
Skip to content

Class: CreativeEngine

The CreativeEngine is the core processing unit of CE.SDK and handles state management, rendering, input handling, and much more. It provides APIs to directly interact with assets, blocks, scenes, and variables. These APIs can be used in a headless environment to build and manipulate designs programmatically, or in a browser to create interactive applications.

Engine Management#

Methods for initializing, configuring, and managing the engine lifecycle.

version#


The SDK version


addPlugin()#


Add and initialize a plugin to the engine.

Parameters#

ParameterTypeDescription
pluginEnginePluginThe plugin to add and initialize.

Returns#

void

Signature#

addPlugin(plugin: EnginePlugin): void

setWheelEventTarget()#


Install the mousewheel event handler for the CreativeEngine on a different element than the canvas.

This can be useful if you are rendering HTML elements on top of the canvas and want to scroll the canvas when the mouse is over those elements.

Parameters#

ParameterTypeDescription
targetHTMLElementThe HTML element to attach the wheel event handler to.

Returns#

A function that removes the event handler from the target and adds it back to the canvas.

(): void;
Returns#

void

Signature#

setWheelEventTarget(target: HTMLElement): () => void

element#


Access the canvas element used by the CreativeEngine.

Returns#

| undefined | HTMLCreativeEngineCanvasElement


dispose()#


Dispose the engine and clean up all resources.

Returns#

void

Signature#

dispose(): void

init()#


Initialize a CreativeEngine with an optional configuration.

Type Parameters#

Type Parameter
C extends Partial<Configuration>

Parameters#

ParameterTypeDescription
config?COptional configuration object for engine initialization.

Returns#

Promise<CreativeEngine & C extends object ? object : object>

A promise that resolves to an engine instance.

Signature#

init(config?: C): Promise<CreativeEngine & C extends { canvas: any } ? { element: undefined } : { element: HTMLCreativeEngineCanvasElement }>

Core APIs#

Primary interfaces for working with assets, blocks, scenes, variables, editing, and events.

asset#


Manage and interact with assets in the engine.


block#


Create, find, delete and modify with blocks in the engine.


editor#


Manage the editor state, including edit modes and undo/redo operations.


event#


Subscribe to events in the engine.


scene#


Manage scenes, including creating, modifying, and deleting scenes.


variable#


Manage variables in the engine, allowing for dynamic data handling and manipulation.

Asset Sources#

Methods for adding default and demo asset sources to the engine.

addDefaultAssetSources()#


Register a set of asset sources containing default assets.

Available default asset sources:

  • '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 base_url defaults to ‘https://cdn.img.ly/assets/v3’. 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#

ParameterTypeDescription
options{ baseURL?: string; excludeAssetSourceIds?: DefaultAssetSourceId[]; }Configuration options for loading default asset sources.
options.baseURL?stringThe source of the asset definitions, must be absolute. Defaults to 'https://cdn.img.ly/assets/v3'.
options.excludeAssetSourceIds?DefaultAssetSourceId[]A list of IDs, that will be ignored during load.

Returns#

Promise<void>

A promise that resolves when all asset sources are loaded.

Signature#

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

addDemoAssetSources()#


Register a set of demo asset sources containing example assets.

Note: These are demonstration assets not meant for production use.

Available demo asset sources:

  • '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#

ParameterTypeDescription
options{ baseURL?: string; excludeAssetSourceIds?: DemoAssetSourceId[]; sceneMode?: SceneMode; withUploadAssetSources?: boolean; }Configuration options for loading demo asset sources.
options.baseURL?stringThe source of the demo asset definitions, must be absolute. Defaults to 'https://cdn.img.ly/assets/demo/v2'.
options.excludeAssetSourceIds?DemoAssetSourceId[]A list of IDs, that will be ignored during load
options.sceneMode?SceneModeIf ‘Video’ video specific demo asset sources will be loaded as well (default ‘Design’)
options.withUploadAssetSources?booleanIf ‘true’ asset sources for uploads are added (default false)

Returns#

Promise<void>

A promise that resolves when all demo asset sources are loaded.

Signature#

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

Experimental Features#

Experimental APIs that may change or be removed in future versions.

unstable_setVideoExportInactivityTimeout()#

Configure the timeout for video export inactivity detection.

Some browsers exhibit a bug where support for certain video codecs is offered, but when attempting to decode or encode in these codecs, the request will simply never return. We detect that situation using a timeout. To prevent this mechanism from triggering in situations where the export simply takes long because of a slow device, you can configure the timeout here.

Parameters#

ParameterTypeDescription
timeoutnumberTimeout in milliseconds. Defaults to 10 seconds. This API is experimental and may change or be removed in future versions.

Returns#

void


unstable_setExportInactivityTimeout()#

Configure the timeout for block-exports in WebWorkers.

If exporting a block hangs because resources take too long to initialize, the export will be aborted after this many ms.

Parameters#

ParameterTypeDescription
timeoutnumberTimeout in milliseconds (default: 10 000) This API is experimental and may change or be removed in future versions.

Returns#

void