Classes#
| Class | Description |
|---|---|
| AssetAPI | Manage asset sources and apply assets to scenes. |
| BlockAPI | Create, manipulate, and query the building blocks of your design. |
| 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. |
| EditorAPI | Control the design editor’s behavior and settings. |
| EventAPI | Subscribe to block lifecycle events in the design engine. |
| SceneAPI | Create, load, save, and manipulate scenes. |
| VariableAPI | Manage text variables within design templates. |
Functions#
| Function | Description |
|---|---|
| defaultLogger | - |
| supportsBrowser | Checks if the current browser supports necessary technologies to match our supported browsers |
| checkVideoSupport | Throws an error if the current browser does not support video editing. |
| supportsVideo | Checks if the current browser supports video editing. |
| checkVideoExportSupport | Throws an error if the current browser does not support video exporting. |
| supportsVideoExport | Checks if the current browser supports video exporting. |
| supportsWasm | Checks if the current browser supports web assembly |
| isRGBAColor | Type guard for RGBAColor |
| isSpotColor | Type guard for SpotColor |
| isCMYKColor | Type guard for CMYKColor |
Type Aliases#
| Type Alias | Description |
|---|---|
| HorizontalBlockAlignment | - Left: The blocks get left aligned. - Right: The blocks get right aligned. - Center: The blocks get center aligned. |
| VerticalBlockAlignment | - Top: The blocks get top aligned. - Bottom: The blocks get bottom aligned. - Center: The blocks get center aligned. |
| PositionMode | - Absolute: Position in absolute design units. - Percent: Position in relation to the block’s parent’s size in percent, where 1.0 means 100%. - Auto: Position is automatically determined |
| SizeMode | - Absolute: Size in absolute design units. - Percent: Size in relation to the block’s parent’s size in percent, where 1.0 means 100%. - Auto: Size is automatically determined |
| ContentFillMode | - Crop: Manual crop. - Cover: Automatically cover the entire frame. - Contain: Automatically contain content inside frame. |
| PropertyType | - |
| StrokePosition | - |
| StrokeStyle | - |
| StrokeCornerGeometry | - |
| BlendMode | - |
| TextCase | - |
| BooleanOperation | Names of boolean operations. |
| ExportOptions | - |
| VideoExportOptions | - |
| AudioExportOptions | - |
| DropShadowOptions | Options for configuring drop shadow effects on blocks. |
| AnimationEntry | Configuration options for animations. |
| AnimationOptions | Options for configuring animations (in, loop, out animations). |
| AddImageOptions | Options for adding images to the scene. |
| SettingType | - |
| SettingsBool | - |
| SettingsString | - |
| SettingsFloat | - |
| SettingsColor | - |
| - | |
| SettingsEnum | - |
| ZoomOptions | Options for zooming to a block with optional animation. |
| CreateSceneOptions | Options for creating a video scene. |
| DefaultAssetSourceId | - |
| DemoAssetSourceId | - |
| - | |
| EnginePluginContext | - |
| LogLevel | - |
| MimeType | - |
| ImageMimeType | - |
| AudioMimeType | - |
| VideoMimeType | - |
| ApplicationMimeType | - |
| AssetGroups | An asset can be member of multiple groups. Groups have a semantic meaning used to build and group UIs exploring the assets, e.g.sections in the content library, or for things like topics in Unsplash for instance. |
| SortingOrder | The order to sort by if the asset source supports sorting. If set to None, the order is the same as the assets were added to the source. |
| AssetMetaData | Generic asset information |
| AssetColor | Asset Color payload |
| AssetTransformPreset | Transform preset payload |
| AssetProperty | Asset property for payload |
| DesignBlockTypeShorthand | The shorthand block type IDs for the top-level design blocks. These are the IDs used to create new blocks using cesdk.engine.block.create(id). |
| DesignBlockTypeLonghand | The longhand block type IDs for the top-level design blocks. These are the IDs used to create new blocks using cesdk.engine.block.create(id). |
| DesignBlockType | The block type IDs for the top-level design blocks. These are the IDs used to create new blocks using cesdk.engine.block.create(id). Refer to DesignBlockTypeShorthand and DesignBlockTypeLonghand for more details. |
| ShapeTypeShorthand | The shorthand block type IDs for the shape blocks. These are the IDs used to create new shapes using cesdk.engine.block.createShape(id). |
| ShapeTypeLonghand | The longhand block type IDs for the blocks. These are the IDs used to create new shapes using cesdk.engine.block.createShape(id). |
| ShapeType | The block type IDs for the shape blocks. These are the IDs used to create new shapes using cesdk.engine.block.createShape(id). Refer to ShapeTypeShorthand and ShapeTypeLonghand for more details. |
| FillTypeShorthand | The shorthand block type IDs for the fill blocks. These are the IDs used to create new fills using cesdk.engine.block.createFill(id). |
| FillTypeLonghand | The longhand block type IDs for the fill blocks. These are the IDs used to create new fills using cesdk.engine.block.createFill(id). |
| FillType | The block type IDs for the fill blocks. These are the IDs used to create new fills using cesdk.engine.block.createFill(id). Refer to FillTypeShorthand and FillTypeLonghand for more details. |
| EffectTypeShorthand | The shorthand block type IDs for the effect blocks. These are the IDs used to create new effects using cesdk.engine.block.createEffect(id). |
| EffectTypeLonghand | The longhand block type IDs for the effect blocks. These are the IDs used to create new effects using cesdk.engine.block.createEffect(id). |
| EffectType | The block type IDs for the effect blocks. These are the IDs used to create new effects using cesdk.engine.block.createEffect(id). Refer to EffectTypeShorthand and EffectTypeLonghand for more details. |
| BlurTypeShorthand | The shorthand block type IDs for the blur blocks. These are the IDs used to create new blurs using cesdk.engine.block.createBlur(id). |
| BlurTypeLonghand | The longhand block type IDs for the blur blocks. These are the IDs used to create new blurs using cesdk.engine.block.createBlur(id). |
| BlurType | The block type IDs for the blur blocks. These are the IDs used to create new blurs using cesdk.engine.block.createBlur(id). Refer to BlurTypeShorthand and BlurTypeLonghand for more details. |
| AnimationTypeShorthand | The shorthand block type IDs for the animation blocks. These are the IDs used to create new animations using cesdk.engine.block.createAnimation(id). |
| AnimationTypeLonghand | The longhand block type IDs for the animation blocks. These are the IDs used to create new animations using cesdk.engine.block.createAnimation(id). |
| AnimationType | The block type IDs for the animation blocks. These are the IDs used to create new animations using cesdk.engine.block.createAnimation(id). Refer to AnimationTypeShorthand and AnimationTypeLonghand for more details. |
| ObjectTypeShorthand | The shorthand block type IDs for all blocks types in the Creative Engine. Those are the types that can be passed to cesdk.engine.block.findByType(type) for example. |
| ObjectTypeLonghand | The longhand block type IDs for all blocks types in the Creative Engine. Those are the Types returned by the engine when calling cesdk.engine.block.getType(blockId) for example. |
| ObjectType | The block type IDs for all blocks types in the Creative Engine. Those are the types that can be passed to cesdk.engine.block.findByType(type) for example. Refer to ObjectTypeShorthand and ObjectTypeLonghand for more details. |
| OffscreenCanvas | A simplified placeholder type for OffscreenCanvas, to avoid a dependency on @types/offscreencanvas |
| Canvas | An HTML Canvas or an Offscreen Canvas |
| HexColorString | A hexadecimal color value (RGB or RGBA) that starts with a ’#‘ |
| PaletteColor | A color definition for the custom color palette. The RGB and CMYK components must all be specified in the range [0-1]. |
| Color | A type alias for all color types supported by the engine. |
| ColorSpace | - |
| CutoutType | - |
| CutoutOperation | - |
| DesignBlockId | A numerical identifier for a design block |
| HistoryId | A numerical identifier for a history stack |
| SceneLayout | The scene layout determines how the layout stack should layout its pages. |
| AnimationEasing | The easing options for the camera animation. |
| SceneMode | The mode of the scene defines how the editor and playback should behave. |
| ZoomAutoFitAxis | The axis(es) for which to auto-fit. |
| DesignUnit | The unit type in which the page values (size, distances, etc.) are defined. |
| HorizontalTextAlignment | The horizontal text alignment options. |
| VerticalTextAlignment | The vertical text alignment options. |
| EditMode | - |
| FontWeight | - |
| FontStyle | - |
| RoleString | - |
| Scope | - |
| RGBA | - |
| CMYK | - |
| XYWH | Describes a rectangle on the screen - x and y indicate the position - w and h indicate the width and height |
| GradientstopRGBA | - |
| BlockState | Describes the state of the block which affect its rendering. |
Interfaces#
| Interface | Description |
|---|---|
| AddVideoOptions | Options for adding videos to the scene. |
| HTMLCreativeEngineCanvasElement | A wrapper around a plain canvas |
| Configuration | - |
| EnginePlugin | - |
| Reactor | The reactor coordinates the update of registered Reactions. |
| Reaction | Reactions track read calls and provide a way to react if they change. |
| Logger | - |
| PageDuration | - |
| Source | A single source width an intrinsic width & height. |
| AssetRGBColor | Asset Color payload RGB representation |
| AssetCMYKColor | Asset Color payload CMYK representation |
| AssetSpotColor | Asset Color payload SpotColor representation |
| AssetFixedAspectRatio | Asset transform preset payload fixed aspect ratio |
| AssetFreeAspectRatio | Asset transform preset payload free aspect ratio |
| AssetFixedSize | Asset transform preset payload fixed size |
| AssetStringProperty | Asset string property definition |
| AssetNumberProperty | Asset number property definition |
| AssetBooleanProperty | Asset boolean property definition |
| AssetEnumProperty | Asset enum property definition |
| AssetColorProperty | Asset color property definition |
| AssetPayload | Asset payload |
| Asset | Generic asset information |
| AssetDefinition | Definition of an asset used if an asset is added to an asset source. |
| AssetResult | Single asset result of a query from the engine. |
| CompleteAssetResult | Asset results that are returned from the engine. |
| AssetQueryData | Defines a request for querying assets |
| AssetsQueryResult | Return type of a findAssets query. |
| AssetSource | A source of assets |
| RGBColor | All components between 0 and 1 |
| RGBAColor | All components between 0 and 1 |
| CMYKColor | All components between 0 and 1 |
| SpotColor | - |
| GradientColorStop | - |
| Vec2 | - |
| Vec3 | - |
| Size2 | - |
| Range | An open range. |
| Font | - |
| Typeface | - |
| Buffer | - |
| TransientResource | - |
| BlockEvent | - |
| BlockStateError | There’s an error preventing rendering. |
| BlockStatePending | There is an ongoing operation on the block. Rendering may be affected. |
| BlockStateReady | The block is ready to be rendered. |
| CursorEvent | Dispatched on the engine canvas when the text input has been blurred. Call preventDefault() to disallow this and refocus the engine text input. |
| BlurEvent | Dispatched on the engine canvas when the text input has been blurred. Call preventDefault() to disallow this and refocus the engine text input. |
| RefocusEvent | Dispatched on the engine canvas right before the engine will refocus its text input after a blur. Call preventDefault() to prevent the refocusing. |
Variables#
| Variable | Description |
|---|---|
| - | |
| - |