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.
addPlugin()#
Add and initialize a plugin to the engine.
Parameters#
| Parameter | Type | Description |
|---|---|---|
plugin | EnginePlugin | The plugin to add and initialize. |
Returns#
void
Signature#
addPlugin(plugin: EnginePlugin): voidsetWheelEventTarget()#
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#
| Parameter | Type | Description |
|---|---|---|
target | HTMLElement | The 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): () => voidelement#
Access the canvas element used by the CreativeEngine.
Returns#
| undefined
| HTMLCreativeEngineCanvasElement
init()#
Initialize a CreativeEngine with an optional configuration.
Type Parameters#
| Type Parameter |
|---|
C extends Partial<Configuration> |
Parameters#
| Parameter | Type | Description |
|---|---|---|
config? | C | Optional 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.
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/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 | Description |
|---|---|---|
options | { baseURL?: string; excludeAssetSourceIds?: DefaultAssetSourceId[]; } | Configuration options for loading default asset sources. |
options.baseURL? | string | The source of the asset definitions, must be absolute. Defaults to 'https://cdn.img.ly/assets/v4'. |
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#
| Parameter | Type | Description |
|---|---|---|
options | { baseURL?: string; excludeAssetSourceIds?: DemoAssetSourceId[]; sceneMode?: SceneMode; withUploadAssetSources?: boolean; } | Configuration options for loading demo asset sources. |
options.baseURL? | string | The 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? | SceneMode | If ‘Video’ video specific demo asset sources will be loaded as well (default ‘Design’) |
options.withUploadAssetSources? | boolean | If ‘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#
| Parameter | Type | Description |
|---|---|---|
timeout | number | Timeout 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#
| Parameter | Type | Description |
|---|---|---|
timeout | number | Timeout in milliseconds (default: 10 000) This API is experimental and may change or be removed in future versions. |
Returns#
void