[Source](https:/img.ly/docs/cesdk/angular/user-interface-5a089a) # User Interface --- [Source](https:/img.ly/docs/cesdk/angular/what-is-cesdk-2e7acd) # Angular Creative Editor The CreativeEditor SDK offers a robust Angular library designed for crafting and editing rich visual designs directly within the browser. ### What is CE.SDK?[#](#what-is-cesdk) This CE.SDK configuration is fully customizable and extendable, providing a comprehensive suite of design editing features, such as templating, layout management, asset integration, and more, including advanced capabilities like background removal. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Key Features of the Angular Creative Editor SDK[#](#key-features-of-the-angular-creative-editor-sdk) ![Transforms](/docs/cesdk/_astro/Transform.By5kJRew_2acCrV.webp) ### Transforms Execute operations like cropping, rotating, and resizing design components. ![Templating](/docs/cesdk/_astro/Templating.eMNm9_jD_ycnVt.webp) ### Templating Build and apply design templates with placeholders and text variables for dynamic content. ![Placeholders & Lockable Design](/docs/cesdk/_astro/Placeholders.DzG3E33B_bmQxQ.webp) ### Placeholders & Lockable Design Constrain templates to guide your users’ design and ensure brand consistency. ![Asset Handling](/docs/cesdk/_astro/AssetLibraries.Ce9MfYvX_HmsaC.webp) ### Asset Handling Import and manage images, shapes, and other assets for your design projects. ![Design Collages](/docs/cesdk/_astro/VideoCollage.23LDUE8e_1VDFAj.webp) ### Design Collages Arrange multiple elements on a single canvas to create intricate layouts. ![Text Editing](/docs/cesdk/_astro/TextEditing.B8Ra1KOE_2lGC8C.webp) ### Text Editing Incorporate and style text blocks using various fonts, colors, and effects. ![Client-Side Operations](/docs/cesdk/_astro/ClientSide.CECpQO_1_c6mBh.webp) ### Client-Side Operations All design editing tasks are performed directly in the browser, eliminating the need for server dependencies. ![Headless & Automation](/docs/cesdk/_astro/Headless.qEVopH3n_20CWbD.webp) ### Headless & Automation Programmatically edit designs within your React application using the engine API. ![Extendible](/docs/cesdk/_astro/Extendible.CRYmRihj_BmNTE.webp) ### Extendible Easily enhance functionality with plugins and custom scripts. ![Customizable UI](/docs/cesdk/_astro/CustomizableUI.DtHv9rY-_2fNrB2.webp) ### Customizable UI Develop and integrate custom UIs tailored to your application’s design requirements. ![Background Removal](/docs/cesdk/_astro/GreenScreen.CI2APgl0_Z8GtPY.webp) ### Background Removal This plugin simplifies the process of removing backgrounds from images entirely within the browser. ![Print Optimization](/docs/cesdk/_astro/CutoutLines.kN4c7WBK_lB3LB.webp) ### Print Optimization Ideal for web-to-print scenarios, supporting spot colors and cut-outs. ## Browser Compatibility[#](#browser-compatibility) The CE.SDK Design Editor is optimized for use in modern web browsers, ensuring compatibility with the latest versions of Chrome, Firefox, Edge, and Safari. See the full list of [supported browsers here](angular/browser-support-28c1b0/) . ## Supported Formats[#](#supported-formats) CE.SDK supports a wide range of file types to ensure maximum flexibility for developers: ### Importing Media[#](#importing-media) | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. ### Exporting Media[#](#exporting-media) | Category | Supported Formats | | --- | --- | | **Images** | `.png` (with transparency), `.jpeg`, `.webp`, `.tga` | | **Video** | `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) | | **Print** | `.pdf` (supports underlayer printing and spot colors) | | **Scene** | `.scene` (description of the scene without any assets) | | **Archive** | `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) | Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. ### Importing Templates[#](#importing-templates) | Format | Description | | --- | --- | | `.idml` | InDesign | | `.psd` | Photoshop | | `.scene` | CE.SDK Native | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs to generate scenes programmatically. For detailed information, see the [full file format support list](angular/file-format-support-3c4b2a/) . ## Understanding CE.SDK Architecture & API[#](#understanding-cesdk-architecture--api) The following sections provide an overview of the key components of the CE.SDK design editor UI and its API structure. If you’re ready to begin integrating CE.SDK into your Angular application, refer to our [Getting Started guide](angular/get-started/overview-e18f40/) or delve into the Essential Guides. ### CreativeEditor Design UI[#](#creativeeditor-design-ui) The CE.SDK design UI is optimized for intuitive design creation and editing. Key components and customizable elements within the UI include: ![](/docs/cesdk/_astro/CESDK-UI.BD2Iwmum_2gw9UM.webp) * **Canvas:** The primary interaction area for design content. * **Dock:** An entry point for interactions not directly related to the selected design block, often used for accessing asset libraries. * **Canvas Menu:** Access block-specific settings such as duplication or deletion. * **Inspector Bar:** Manage block-specific functionalities, such as adjusting the properties of the selected block. * **Navigation Bar:** Handles global scene actions like undo/redo and zoom. * **Canvas Bar:** Offers tools for managing the overall canvas, such as adding pages or controlling zoom. * **Layer Panel:** Manage the stacking order and visibility of design elements. Learn more about interacting with and manipulating design controls in our design editor UI guide. ### CreativeEngine[#](#creativeengine) The CreativeEngine is the core of CE.SDK, responsible for rendering and manipulating design scenes. It can operate in headless mode or be integrated with the CreativeEditor UI. Key features and APIs provided by CreativeEngine include: * **Scene Management:** Create, load, save, and modify design scenes programmatically. * **Block Manipulation:** Create and manage design elements such as shapes, text, and images. * **Asset Management:** Load assets like images and SVGs from URLs or local sources. * **Variable Management:** Define and manipulate variables within scenes for dynamic content. * **Event Handling:** Subscribe to events like block creation or updates for dynamic interaction. ## API Overview[#](#api-overview) CE.SDK’s APIs are categorized into several groups, reflecting different aspects of scene management and manipulation. [**Scene API:**](angular/concepts/scenes-e8596d/) * **Creating and Loading Scenes**: ``` engine.scene.create();engine.scene.loadFromURL(url); ``` * **Zoom Control**: ``` engine.scene.setZoomLevel(1.0);engine.scene.zoomToBlock(blockId); ``` [**Block API:**](angular/concepts/blocks-90241e/) : * **Creating Blocks**: ``` const block = engine.block.create('shapes/rectangle'); ``` * **Setting Properties**: ``` engine.block.setColor(blockId, 'fill/color', { r: 1, g: 0, b: 0, a: 1 });engine.block.setString(blockId, 'text/content', 'Hello World'); ``` * **Querying Properties**: ``` const color = engine.block.getColor(blockId, 'fill/color');const text = engine.block.getString(blockId, 'text/content'); ``` [**Variable API:**](angular/create-templates/add-dynamic-content/text-variables-7ecb50/) Variables enable dynamic content within scenes, allowing programmatic creation of design variations. * **Managing Variables**: ``` engine.variable.setString('myVariable', 'value');const value = engine.variable.getString('myVariable'); ``` [**Asset API:**](angular/import-media/concepts-5e6197/) : * **Managing Assets**: ``` engine.asset.add('image', 'https://example.com/image.png'); ``` [**Event API:**](angular/concepts/events-353f97/) : * **Subscribing to Events**: ``` // Subscribe to scene changesengine.scene.onActiveChanged(() => { const newActiveScene = engine.scene.get();}); ``` ## Customizing the Angular Creative Editor[#](#customizing-the-angular-creative-editor) CE.SDK provides extensive customization options to adapt the UI to various use cases. These options range from simple configuration changes to more advanced customizations involving callbacks and custom elements. ### Basic Customizations[#](#basic-customizations) * **Configuration Object:** When initializing the CreativeEditor, pass a configuration object that defines basic settings such as the base URL for assets, language, theme, and license key. ``` const config = { baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, // license: 'YOUR_CESDK_LICENSE_KEY',}; ``` * **Localization:** Customize the language and labels used in the editor to support different locales. ``` const config = {}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Set theme using the UI API cesdk.ui.setTheme('light'); // 'dark' | 'system' cesdk.i18n.setLocale('en'); cesdk.i18n.setTranslations({ en: { variables: { my_custom_variable: { label: 'Custom Label', }, }, }, });}); ``` * [Custom Asset Sources](angular/import-media/concepts-5e6197/) : Serve custom image or SVG assets from a remote URL. ### UI Customization Options[#](#ui-customization-options) * **Theme:** Select from predefined themes like ‘dark’, ‘light’, or ‘system’. ``` CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Set theme using the UI API cesdk.ui.setTheme('dark'); // 'light' | 'system'}); ``` * **UI Components:** Enable or disable specific UI components as per your requirements. ``` const config = { ui: { elements: { toolbar: true, inspector: false, }, },}; ``` ## Advanced Customizations[#](#advanced-customizations) Explore more ways to extend editor functionality and customize its UI to your specific needs by consulting our detailed [customization guide](angular/user-interface-5a089a/) . Below is an overview of the available APIs and components. ### Order APIs[#](#order-apis) The Order APIs manage the customization of the web editor’s components and their order within these locations, allowing the addition, removal, or reordering of elements. Each location has its own Order API, such as `setDockOrder`, `setCanvasMenuOrder`, `setInspectorBarOrder`, `setNavigationBarOrder`, and `setCanvasBarOrder`. ### Layout Components[#](#layout-components) CE.SDK offers special components for layout control, such as `ly.img.separator` for separating groups of components and `ly.img.spacer` for adding space between components. ### Registration of New Components[#](#registration-of-new-components) Custom components can be registered and integrated into the web editor using builder components like buttons, dropdowns, and inputs. These components can replace default ones or introduce new functionalities, seamlessly integrating custom logic into the editor. ### Feature API[#](#feature-api) The Feature API allows for the conditional display and functionality of components based on the current context, enabling dynamic customization. For instance, certain buttons can be hidden for specific block types. ## Plugins[#](#plugins) Customizing the CE.SDK web editor during its initialization is possible through the APIs outlined above. For many use cases, this will be sufficient. However, there are situations where encapsulating functionality for reuse is necessary. Plugins come in handy here. Follow our [guide on building your own plugins](angular/user-interface-5a089a/) to learn more or explore some of the plugins we’ve created using this API: * **Background Removal**: Adds a button to the canvas menu to remove image backgrounds. * **Vectorizer**: Adds a button to the canvas menu to quickly vectorize a graphic. ## Ready to get started? With a free trial and pricing that fits your needs, it's easy to find the best solution for your product. [Free Trial](https://img.ly/forms/free-trial) ### 500M+ video and photo creations are powered by IMG.LY every month ![HP logo](/docs/cesdk/_astro/HP.BZ1qDNii_ZpK5Lk.webp) ![Shopify logo](/docs/cesdk/_astro/Shopify.Dmyk4png_ZRKWXF.webp) ![Reuters logo](/docs/cesdk/_astro/Reuters.B8BV2Fek_ZLrHFJ.webp) ![Hootsuite logo](/docs/cesdk/_astro/Hootsuite.C94d5fhs_Zsc4gx.webp) ![Semrush logo](/docs/cesdk/_astro/Semrush.B2YsPaIn_23cDNx.webp) ![Shutterfly logo](/docs/cesdk/_astro/Shutterfly.Cc7Sw48y_Z3TjCs.webp) ![Sprout Social logo](/docs/cesdk/_astro/Sprout-Social.VxlY6_Tc_E0Dzh.webp) ![One.com logo](/docs/cesdk/_astro/Onecom.BQ_oPnlz_Z1btrtu.webp) ![Constant Contact logo](/docs/cesdk/_astro/Constant-Contact.1rh975Q__Z2ob7wU.webp) --- [Source](https:/img.ly/docs/cesdk/angular/use-templates-a88fd4) # Use Templates --- [Source](https:/img.ly/docs/cesdk/angular/upgrade-4f8715) # Upgrade --- [Source](https:/img.ly/docs/cesdk/angular/to-v1-32-1b6ae8) # To v1.32 Version v1.32 introduced powerful new APIs for customizing the CE.SDK web editor. These new APIs render some of the existing configurations obsolete, requiring code migration to leverage the more flexible new options. This guide will help you navigate these changes and explain what you need to do to update your integration. ## Configuring the Dock[#](#configuring-the-dock) Until version 1.32, the dock was configured by two configuration options (although most users only used one of them and kept the others default): * `config.ui.elements.libraries.insert.entries` and * `config.ui.elements.dock` If your configuration adapted one of these two (mostly `config.ui.elements.libraries.insert.entries`), you are affected by this change. For now, it is only deprecated and we will try to do an internal migration for you, but this still might include a breaking change depending on how you used the configuration options before. ### Breaking Change[#](#breaking-change) `config.ui.elements.libraries.insert.entries` was called repeatedly with a context of currently selected blocks. Most users and configurations have not used this behavior and just returned the same static list of entries for every call. In this case, your configuration should work as before, but if you have relied on this fact, you have to migrate your configuration to the new API, listen to selection changes, and update the asset library entries accordingly. ### Migration to new APIs[#](#migration-to-new-apis) Defining the dock is now done by our new APIs in a consistent way to all other customizable locations of the editor. With the [Dock API](angular/user-interface/customization/dock-cb916c/) , you now have much greater control of how and what is displayed in the dock. This does not only include dock buttons to open asset libraries but also arbitrary buttons and other elements. Please take a look at the [Dock API](angular/user-interface/customization/dock-cb916c/) or learn about the general concept [here](angular/user-interface/overview-41101a/) . If you aren’t affected by the breaking change mentioned above, the easiest way to migrate is to first copy your current dock order after the editor has been inialized. This can be done by calling the new `cesdk.ui.getDockOrder()` method. Now you can take this order and set it during the initialization of the editor by using `cesdk.ui.setDockOrder(copiedDockOrder)`. The old configuration (`config.ui.elements.libraries.insert.entries` and `config.ui.elements.dock`) can be removed afterwards. Of course, you could also just remove the old configuration and use the new API to define the dock order from scratch. Please note, that changes to the asset library entries are now done by the [Asset Library Entry API](angular/import-media/asset-panel/basics-f29078/) and the dock order is just referring to these. So if you, for instance, want to add an asset source id to be shown in a library, you have to add this asset source id to the asset library entry and not to the dock order. ``` // Before// ======const config: Configuration = { ui: { elements: { libraries: { insert: { entries: (defaultEntries) => { return [ // Changing some of the default entries ...defaultEntries.map((entry) => { if (entry.id === 'ly.img.image') { entry.sourceIds.push('my-own-image-source'); } return entry; }), // Adding a new entry { id: 'my-own-entry', sourceIds: ['my-own-source'] } ]; } } } } }}; // After// ======cesdk.ui.setDockOrder([ ...cesdk.ui.getDockOrder(), // Add a new button referencing your new entry { id: 'ly.img.assetLibrary.dock', label: 'My Own Entry', icon: [...], entries: ['my-own-entry'] }]); // Adding your custom entrycesdk.ui.addAssetLibraryEntry({ id: 'my-own-entry', sourceIds: ['my-own-source']}); // Updating an existing default entrycesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ({ currentIds }) => [...currentIds, 'my-own-image-source']}); ``` ## Configuring the Asset Replacement Panel[#](#configuring-the-asset-replacement-panel) Similar to the definition of the dock, we deprecate the configuration `config.ui.elements.libraries.replace.entries` of the asset library entries for the replacement panel. This method is deprecated but we will try to migrate your configuration internally until it is removed. We recommend you to migrate to the new API as soon as possible. The new API is similar with subtle differences. With `cesdk.ui.setReplaceAssetLibraryEntries` you register a function that is called with the current context (of selected blocks) but only returns ids of entries. ### Breaking Change[#](#breaking-change-1) With the `config.ui.elements.libraries.replace.entries` it was possible to take the default entries and modify them. In theory, you could change the entries and have different “default” entries for insert or replace. Now a change to a default entry provided by the editor via the [Asset Library Entry API](angular/import-media/asset-panel/basics-f29078/) will be reflected in both the insert and replace entries. To solve this you can just copy one entry for replacement, modify it, and return its id instead. ### Migration to new APIs[#](#migration-to-new-apis-1) Take the function from `config.ui.elements.libraries.replace.entries` and use it in `cesdk.ui.setReplaceAssetLibraryEntries` by replacing the entries with their ids. If you have made changes to the default entries or added new custom ones you need to add or change them via the [Asset Library Entry API](angular/import-media/asset-panel/basics-f29078/) on initialization of the editor. --- [Source](https:/img.ly/docs/cesdk/angular/to-v1-19-55bcad) # To v1.19 Version v1.19 of CreativeEngineSDK and CreativeEditorSDK introduces structural changes to many of the current design blocks, making them more composable and more powerful. Along with this update, there are mandatory license changes that require attention. This comes with a number of breaking changes. This document will explain the changes and describe the steps you need to take to adapt them to your setup. ## **License Changes**[#](#license-changes) The `license` parameter is now required for CreativeEngineSDK and CreativeEditorSDK. This means that you will need to update your license parameter in the `CreativeEngine.init` and `CreativeEditorSDK.create` configuration object properties. There is also a new `userId`, an optional unique ID tied to your application’s user. This helps us accurately calculate monthly active users (MAU). Especially useful when one person uses the app on multiple devices with a sign-in feature, ensuring they’re counted once. Providing this aids in better data accuracy. ## **Graphic Design Block**[#](#graphic-design-block) A new generic `Graphic` design block with the type id `//ly.img.ubq/graphic` has been introduced, which forms the basis of the new unified block structure. ## **Shapes**[#](#shapes) Similar to how the fill of a block is a separate object which can be attached to and replaced on a design block, we have now introduced a similar concept for the shape of a block. You use the new `createShape`, `getShape` and `setShape` APIs in order to define the shape of a design block. Only the new `//ly.img.ubq/graphic` block allows for its shape to be changed with these APIs. The new available shape types are: * `//ly.img.ubq/shape/rect` * `//ly.img.ubq/shape/line` * `//ly.img.ubq/shape/ellipse` * `//ly.img.ubq/shape/polygon` * `//ly.img.ubq/shape/star` * `//ly.img.ubq/shape/vector_path` The following block types are now removed in favor of using a `Graphic` block with one of the above mentioned shape instances: * `//ly.img.ubq/shapes/rect` * `//ly.img.ubq/shapes/line` * `//ly.img.ubq/shapes/ellipse` * `//ly.img.ubq/shapes/polygon` * `//ly.img.ubq/shapes/star` * `//ly.img.ubq/vector_path` (The removed type ids use the plural “shapes” and the new shape types use the singular “shape”) This structural change means that the shape-specific properties (e.g. the number of sides of a polygon) are not available on the design block any more but on the shape instances instead. You will have to add calls to `getShape` to get the instance id of the shape instance and then pass that to the property getter and setter APIs. Also remember to change property key strings in the getter and setter calls from the plural `shapes/…` to the singular `shape/…` to match the new type identifiers. ## **Image and Sticker**[#](#image-and-sticker) Previously, `//ly.img.ubq/image` and `//ly.img.ubq/sticker` were their own high-level design block types. They do not support the fill APIs nor the effects APIs. Both of these blocks are now removed in favor of using a `Graphic` block with an image fill (`//ly.img.ubq/fill/image`) and using the effects APIs instead of the legacy image block’s numerous effects properties. At its core, the sticker block has always just been an image block that is heavily limited in its capabilities. You can not crop it, nor apply any effects to it. In order to replicate this difference as closely as possible in the new unified structure, more fine-grained scopes have been added. You can now limit the adopter’s ability to crop a block and to edit its appearance. Note that since these scopes only apply to a user of the editor with the “Adopter” role, a “Creator” user will now have all of the same editing options for both images and for blocks that used to be stickers. ## **Scopes**[#](#scopes) The following is the list of changes to the design block scopes: * (Breaking) The permission to crop a block was split from `content/replace` and `design/style` into a separate scope: `layer/crop`. * Deprecated the `design/arrange` scope and renamed `design/arrange/move` → `layer/move` `design/arrange/resize` → `layer/resize` `design/arrange/rotate` → `layer/rotate` `design/arrange/flip` → `layer/flip` * Deprecated the `content/replace` scope. For `//ly.img.ubq/text` blocks, it is replaced with the new `text/edit` scope. For other blocks it is replaced with `fill/change`. * Deprecated the `design/style` scope and replaced it with the following fine-grained scopes: `text/character`, `stroke/change`, `layer/opacity`, `layer/blendMode`, `layer/visibility`, `layer/clipping`, `appearance/adjustments`, `appearance/filter`, `appearance/effect`, `appearance/blur`, `appearance/shadow` * Introduced `fill/change`, `stroke/change`, and `shape/change` scopes that control whether the fill, stroke or shape of a block may be edited by a user with an “Adopter” role. * The deprecated scopes are automatically mapped to their new corresponding scopes by the scope APIs for now until they will be removed completely in a future update. ## **Kind**[#](#kind) While the new unified block structure both simplifies a lot of code and makes design blocks more powerful, it also means that many of the design blocks that used to have unique type ids now all have the same generic `//ly.img.ubq/graphic` type, which means that calls to the `findByType` cannot be used to filter blocks based on their legacy type ids any more. Simultaneously, there are many instances in which different blocks in the scene which might have the same type and underlying technical structure have different semantic roles in the document and should therefore be treated differently by the user interface. To solve both of these problems, we have introduced the concept of a block “kind”. This is a mutable string that can be used to tag different blocks with a semantic label. You can get the kind of a block using the `getKind` API and you can query blocks with a specific kind using the `findByKind` API. CreativeEngine provides the following default kind values: * `image` * `video` * `sticker` * `scene` * `camera` * `stack` * `page` * `audio` * `text` * `shape` * `group` Unlike the immutable design block type id, you can change the kind of a block with the new `setKind` API. It is important to remember that the underlying structure and properties of a design block are not strictly defined by its kind, since the kind, shape, fill and effects of a block can be changed independent of each other. Therefore, a user-interface should not make assumptions about available properties of a block purely based on its kind. **Note** Due to legacy reasons, blocks with the kind “sticker” will continue to not allow their contents to be cropped. This special behavior will be addressed and replaced with a more general-purpose implementation in a future update. ​ ## **Asset Definitions**[#](#asset-definitions) The asset definitions have been updated to reflect the deprecation of legacy block type ids and the introduction of the “kind” property. In addition to the “blockType” meta property, you can now also define the `“shapeType”` ,`“fillType”` and `“kind”` of the block that should be created by the default implementation of the applyAsset function. * `“blockType”` defaults to `“//ly.img.ubq/graphic”` if left unspecified. * `“shapeType”` defaults to `“//ly.img.ubq/shape/rect”` if left unspecified * `“fillType”` defaults to `“//ly.img.ubq/fill/color”` if left unspecified Video block asset definitions used to specify the `“blockType”` as `“//ly.img.ubq/fill/video“`. The `“fillType”` meta asset property should now be used instead for such fill type ids. ## **Automatic Migration**[#](#automatic-migration) CreativeEngine will always continue to support scene files that contain the now removed legacy block types. Those design blocks will be automatically replaced by the equivalent new unified block structure when the scene is loaded, which means that the types of all legacy blocks will change to `“//ly.img.ubq/graphic”`. Note that this can mean that a block gains new capabilities that it did not have before. For example, the line shape block did not have any stroke properties, so the `hasStroke` API used to return `false`. However, after the automatic migration its `Graphic` design block replacement supports both strokes and fills, so the `hasStroke` API now returns `true` . Similarly, the image block did not support fills or effects, but the `Graphic` block does. ## List of all Removed Block Type IDs[#](#list-of-all-removed-block-type-ids) * `//ly.img.ubq/image` * `//ly.img.ubq/sticker` * `//ly.img.ubq/shapes/rect` * `//ly.img.ubq/shapes/line` * `//ly.img.ubq/shapes/ellipse` * `//ly.img.ubq/shapes/polygon` * `//ly.img.ubq/shapes/star` * `//ly.img.ubq/vector_path` ## **UI Configuration**[#](#ui-configuration) The configuration options for the legacy blocks have also been removed under `config.ui.elements.blocks` and a new configuration option for the `ly.img.ubq/graphic` block type have been introduced which will then define which UI controls to enable for graphic blocks (crop, filters, adjustments, effects, blur). This new configuration option follows the same structure as before. Here is a list of the deprecated block configuration options: * `//ly.img.ubq/image` * `//ly.img.ubq/fill/video` * `//ly.img.ubq/shapes/rect` * `//ly.img.ubq/shapes/line` * `//ly.img.ubq/shapes/star` * `//ly.img.ubq/shapes/polygon` * `//ly.img.ubq/shapes/ellipse` * `//ly.img.ubq/vector_path` ## Translations[#](#translations) Some of the translation keys related to Scopes and Placeholder-Settings have been also updated: * Removed the following keys: * `scope.content.replace` * `scope.design.arrange` * `scope.design.style` * Renamed the following keys: * `scope.design.arrange.flip` is now `scope.layer.flip` * `scope.design.arrange.move` is now `scope.layer.move` * `scope.design.arrange.resize` is now `scope.layer.resize` * `scope.design.arrange.rotate` is now `scope.layer.rotate` * Added the following keys: * `component.placeholder.appearance.description` * `component.placeholder.appearance` * `component.placeholder.arrange.description` * `component.placeholder.arrange` * `component.placeholder.disableAll` * `component.placeholder.enableAll` * `component.placeholder.fill.description` * `component.placeholder.fill` * `component.placeholder.general.description` * `component.placeholder.general` * `component.placeholder.shape.description` * `component.placeholder.shape` * `component.placeholder.stroke.description` * `component.placeholder.stroke` * `component.placeholder.text.description` * `component.placeholder.text` * `scope.appearance.adjustments` * `scope.appearance.blur` * `scope.appearance.effect` * `scope.appearance.filter` * `scope.appearance.shadow` * `scope.fill.change` * `scope.layer.blendMode` * `scope.layer.opacity` * `scope.shape.change` * `scope.stroke.change` * `scope.text.character` * `scope.text.edit` ## **Types and API Signatures**[#](#types-and-api-signatures) To improve the type safety of our APIs, we have moved away from using the `DesignBlockType` enum and replaced with a set of types. Those changes have affected the following APIs: * `CESDK.engine.block.create()` * `CESDK.engine.block.createFill()` * `CESDK.engine.block.createEffect()` * `CESDK.engine.block.createBlur()` * `CESDK.engine.block.findByType()` * `CESDK.engine.block.getType()` **Note** The `create`, `findByType`, and `getType` APIs will no longer accept the IDs of the deprecated legacy blocks and will throw an error when those are passed ## **Code Examples**[#](#code-examples) This section will show some code examples of the breaking changes and how it would look like after migrating. ``` /** Block Creation */ // Creating an Image before migrationconst image = cesdk.engine.block.create('image');cesdk.engine.block.setString( image, 'image/imageFileURI', 'https://domain.com/link-to-image.jpg',); // Creating an Image after migrationconst block = cesdk.engine.block.create('graphic');const rectShape = cesdk.engine.block.createShape('rect');const imageFill = cesdk.engine.block.createFill('image');cesdk.engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://domain.com/link-to-image.jpg',);cesdk.engine.block.setShape(block, rectShape);cesdk.engine.block.setFill(block, imageFill);cesdk.engine.block.setKind(block, 'image'); // Creating a star shape before migrationconst star = cesdk.engine.block.create('shapes/star');cesdk.engine.block.setInt(star, 'shapes/star/points', 8); // Creating a star shape after migrationconst block = cesdk.engine.block.create('graphic');const starShape = cesdk.engine.block.createShape('star');const colorFill = cesdk.engine.block.createFill('color');cesdk.engine.block.setInt(starShape, 'shape/star/points', 8);cesdk.engine.block.setShape(block, starShape);cesdk.engine.block.setFill(block, colorFill);cesdk.engine.block.setKind(block, 'shape'); // Creating a sticker before migrationconst sticker = cesdk.engine.block.create('sticker');cesdk.engine.setString( sticker, 'sticker/imageFileURI', 'https://domain.com/link-to-sticker.png',); // Creating a sticker after migrationconst block = cesdk.engine.block.create('graphic');const rectShape = cesdk.engine.block.createShape('rect');const imageFill = cesdk.engine.block.createFill('image');cesdk.engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://domain.com/link-to-sticker.png',);cesdk.engine.block.setShape(block, rectShape);cesdk.engine.block.setFill(block, imageFill);cesdk.engine.block.setKind(block, 'sticker'); /** Block Creation */ ``` ``` /** Block Exploration */ // Query all images in the scene before migrationconst images = cesdk.engine.block.findByType('image'); // Query all images in the scene after migrationconst images = cesdk.engine.block.findByType('graphic').filter(block => { const fill = cesdk.engine.block.getFill(block); return ( cesdk.engine.block.isValid(fill) && cesdk.engine.block.getType(fill) === '//ly.img.ubq/fill/image' );}); // Query all stickers in the scene before migrationconst stickers = cesdk.engine.block.findByType('sticker'); // Query all stickers in the scene after migrationconst stickers = cesdk.engine.block.findByKind('sticker'); // Query all Polygon shapes in the scene before migrationconst polygons = cesdk.engine.block.findByType('shapes/polygon'); // Query all Polygon shapes in the scene after migrationconst polygons = cesdk.engine.block.findByType('graphic').filter(block => { const shape = cesdk.engine.block.getShape(block); return ( cesdk.engine.block.isValid(shape) && cesdk.engine.block.getType(shape) === '//ly.img.ubq/shape/polygon' );}); /** Block Exploration */ ``` --- [Source](https:/img.ly/docs/cesdk/angular/to-v1-13-d1ac5d) # To v1.13 In version v1.13, the way the CreativeEngine and CreativeEditor SDK are configured has changed. Several configuration options that were previously passed to `CreativeEngine.init()` or `CreativeEditor SDK.init()` have been removed or replaced. This document will explain the changes and describe the steps you can take to adapt them to your setup. #### CreativeEditorSDK initialization[#](#creativeeditorsdk-initialization) We are also introducing a new way of instantiating the CreativeEditorSDK, that provides more precise control over the initialization. Using `CreativeEditorSDK.create()`, you have the chance to configure the SDK before loading or creating a scene. This was not possible before. When using `CreativeEditorSDK.init()`, the SDK would create the initial scene before giving you the option to perform additional configuration via the API. The `create()` method will not create an initial scene for you. You need to do that yourself, using either the Scene API at `cesdk.editor.scene`, or one of the methods on the CreativeEditorSDK instance itself (`createDesignScene`, `createVideoScene`, `loadFromUrl`, `loadFromString`). ### Rationale[#](#rationale) Over time the number options you could pass into the call to `CreativeEngine.init({...config})` has grown quite a bit. Initially this was the only place where you could configure the behavior and settings of the CreativeEngine, but over the past year we introduced several new APIs. One of those APIs is the EditorAPI, which lets you [adjust](angular/settings-970c98/) many [settings](angular/settings-970c98/) at runtime, not just at the launch of the app. To improve consistency of our APIs, we decided to scale back the options available in the configuration object in favor of changing settings via the EditorAPI. The only options that remain are those that are strictly necessary for the initialization of the CreativeEngine, such as the `baseUrl` and `license`. These changes were performed with the Creative Engine in mind, but since the CreativeEditor SDK shares a lot of the same code, the changes described in this document also apply to the configuration for the CE.SDK. ### Changed configuration options[#](#changed-configuration-options) The following is a list of all configuration options that have been changed or removed, along with instructions on how to migrate the use of these options in your codebase: * `scene` options (`dpi`, `pixelScaleFactor`) have been removed. `scene/dpi` and `scene/pixelScaleFactor` can now be found as [properties on the scene in the BlockAPI](angular/concepts/blocks-90241e/) . * `page` options have been removed. * `page.title.show` has been replaced with `cesdk.engine.editor.setSettingBool('page/title/show', enabled)` * `page.title.fontFileUri` has been replaced with `cesdk.engine.editor.setSettingString('page/title/fontFileUri', uri)` * `page.dimOutOfPageAreas` has been replaced with `cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', dimEnabled)` * `assetSources` have been removed. To add asset sources, use the AssetAPI at `cesdk.engine.asset`. * `preset.colors` has been removed as it was never used, previously. * `presets.colorPalettes` has been removed from CreativeEngine as it was not used. It has been moved to `ui.colorPalette` in the CESDK. * `presets.images` has been removed. To add assets and asset sources, use the AssetAPI at `cesdk.engine.asset`. * `presets.pageFormats` has been removed from the CreativeEngine as it was not used. Is has been moved to `ui.pageFormats` in the CESDK. Previously it was possible to mark a page format as default by setting `meta: {default: true}` in it. In `ui.pageFormats`, this has been simplified, to just `default: true`. * `variables` has been removed. Use the [VariableAPI](angular/create-templates/add-dynamic-content/text-variables-7ecb50/) instead. * `callbacks.log` has been moved to `logger`. Previously the logger callback would take a `Loglevel` enum as a second parameter. This enum has been removed. Instead you can define the loglevel with plain strings `'Warning' | 'Error' | 'Info'` ### Change initialization code[#](#change-initialization-code) To ensure your users perceive a consistent UI experience, settings that have been moved to api calls should be made immediately after initializing the CreativeEngine. For the Creative Editor SDK, use the `create()` method, instead of `init()` #### CreativeEngine[#](#creativeengine) ``` const engine = await CreativeEngine.init(config);// 1. Configure Engineengine.editor.setSettingEnum('doubleClickSelectionMode', 'Direct');// ... other settings // 2. Create/load sceneconst sceneId = await engine.scene.create(); // 3. Append Engine canvas element to the DOMdocument.getElementById('my-engine-container').append(engine.element); // ... your application code ``` #### CreativeEngine SDK[#](#creativeengine-sdk) ``` const cesdk = await CreativeEditorSDK.create('my-engine-container', config);// 1. Configure SDKcesdk.engine.asset.addSource(myAssetSource);// ... other settings // 2. Create/load sceneconst sceneId = await cesdk.createDesignScene(myPageFormats[pageFormatId]); // ... your application code ``` ### Fallback and warnings[#](#fallback-and-warnings) The CreativeEngine and CreativeEditor SDK still interpret the config object with its previous settings. If removed configuration options are detected during intialization, a warning is printed to the console, with individual instructions on how to migrate them. It is recommended to adjust your configuration as described above for the best compatibility with future developments and to get rid of these warnings. The fallback mechanism is not enabled for the new `CreativeEditorSDK.create()` method! Passing removed configuration options to `create()` will cause that option to be ignored and an error will be printed to the console. ### CreativeEngine Typescript definitions[#](#creativeengine-typescript-definitions) The more complex parts of our configuration (such as the page format definitions) were previously exporting type definitions under the `ConfigTypes` namespace in the CreativeEngine package. This namespace and all the types in it have been removed or moved elsewhere. For now we still export `ConfigTypes`, but have marked it and its members as `@deprecated`. Most of them are not used at all anymore, the rest have been moved elsewhere: * `ConfigTypes.Color` can now be imported directly as `PaletteColor` * `ConfigTypes.TypefaceDefinition` can be imported directly, as `TypefaceDefinition`. * `ConfigTypes.PageFormatDefinition` can be imported directly as `PageFormatDefinition` (CE.SDK only). * `ConfigTypes.Logger` can be imported directly as `Logger` The `LogLevel` enum that was previously used by `Logger` has been replaced with a string union (`'Warning' | 'Error' | 'Info'`). ### CreativeEditorSDK Typescript definitions[#](#creativeeditorsdk-typescript-definitions) The CreativeEditor SDK package still _does_ export a `ConfigTypes` namespace. For use with the new `CreativeEditorSDK.create()`, we are offering a new type `CreateConfiguration`, which is lacking all of the removed keys instead of marking them as deprecated. ### Demo asset sources[#](#demo-asset-sources) When adding demo asset sources using `cesdk.addDemoAssetSources()`, or `engine.addDemoAssetSources()`, make sure to specify the correct scene mode. The installed demo asset sources vary between Design and Video modes. If you don’t specify a scene mode, `addDemoAssetSources()` will try to add the correct sources based on the current scene, and default to `'Design'`. If you call `addDemoAssetSources()` _without_ a scene mode, and _before_ loading or creating a video scene, the audio and video asset sources will not be added. --- [Source](https:/img.ly/docs/cesdk/angular/to-v1-10-1ff469) # To v1.10 Version v1.10 introduced major changes to how and where engine and the UI store assets. This guide helps you navigate those changes and explains what you need to do to bring your integration up to speed. ## 1\. Scene Uploads are no longer serialized[#](#1-scene-uploads-are-no-longer-serialized) Image uploads are no longer stored in the scene and will not reappear upon scene load. To offer specific assets in your editor, configure and [add an asset source](angular/serve-assets-b0827c/) containing the desired assets. ## 2\. Deprecating Extensions[#](#2-deprecating-extensions) Starting with `v1.10` we fully embrace [Asset Sources](angular/import-media/from-remote-source/unsplash-8f31f0/) as our standard interface for asset management. We’re deprecating extension packs, previously stored in `/assets/extensions` and indexed via `manifest.json` files. **Fonts are not affected by this deprecation yet, but will receive the same treatment in an upcoming version.** We’ll deprecate the `config.extensions` field for `CreativeEditorSDK`. As part of this deprecation, we’ll **no longer ship** the following packs in the `/assets/extensions` directory in our `npm` packages: * `ly.img.cesdk.images.samples` * `ly.img.cesdk.shapes.default` * `ly.img.cesdk.stickers.doodle` * `ly.img.cesdk.stickers.emoji` * `ly.img.cesdk.stickers.emoticons` * `ly.img.cesdk.stickers.hand` * `ly.img.cesdk.vectorpaths` * `ly.img.cesdk.vectorpaths.abstract` To keep offering the contained assets in your deployment, use our new [convenience functions](#making-use-of-default-and-demo-asset-sources) to instantiate asset sources holding these assets. If you have existing scenes where an asset from an extension pack might be included, you must make sure you’re still serving the corresponding files from your baseURL, so that `/extensions/…` paths still resolve properly. You can acquire a copy of the extension packs shipped in `v1.9.2` [from our CDN](https://cdn.img.ly/packages/imgly/cesdk-engine/1.9.2/assets/extensions.zip). Otherwise your scenes will **render missing asset alerts**. ### 2.1 Making use of Default and Demo Asset Sources[#](#21-making-use-of-default-and-demo-asset-sources) We still want to offer a package, that has all batteries included and quickly gets you up to speed. To do so, we introduced two new convenience functions, that can be used to add a set of predefined asset sources to your integration: #### `addDefaultAssetSources`[#](#adddefaultassetsources) Adds a set of asset sources containing our default assets. These assets may be used in production and [served from your own servers](angular/serve-assets-b0827c/) . The assets are parsed from the IMG.LY CDN at `{{base_url}}//content.json`, where `base_url` defaults to `https://cdn.img.ly/assets/v1`. Each source is created via `addLocalSource` and populated with the parsed assets. You can specify your own `base_url` or exclude certain source IDs. The following sources are added: | ID | Description | | --- | --- | | `'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. | #### `addDemoAssetSources`[#](#adddemoassetsources) Registers a set of demo asset sources containing our example assets. These are not to meant to be used in your production code. The assets are parsed from the IMG.LY CDN at `https://cdn.img.ly/assets/demo/v1`. The `sceneMode` and `withUploadAssetSources` parameters control whether audio/video and upload sources are added. The following sources are added: | ID | Description | | --- | --- | | `'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 audios | | `'ly.img.video.upload'` | Demo source to upload video assets | #### Modifying Default & Demo Sources[#](#modifying-default--demo-sources) After registration you can freely modify the contained assets using the Asset APIs. You can add or remove entire asset sources or individual assets. #### Upload Asset Sources[#](#upload-asset-sources) The upload asset sources and library entries for video and audio were added to the default configuration from `addDefaultAssetSources`. If you have added these sources manually (like mentioned in our video docs) you can remove them now. ## 3\. AssetAPI Changes[#](#3-assetapi-changes) To further streamline interaction, the following breaking changes were made to the AssetAPI: * The `applyAsset` callbacks and `defaultApplyAsset` API now return an optional design block id in their callback if they created a new block. * `thumbUri` and `size` properties in `AssetDefinition` and `AssetResult` are now part of the `meta` property dictionary. * Values of the `blockType` asset meta property must now be design block type ids (e.g. `//ly.img.ubq/image`) ## 4\. A New Way to Add Images[#](#4-a-new-way-to-add-images) Instead of specifying additional images for the `CreativeEditorSDK` in `config.presets.images`, you should make use of `asset.addAsset` and add your images into the `ly.img.image` asset source. ## 5\. General API Changes[#](#5-general-api-changes) The `blockType` `meta` property for assets changed from `ly.img.` to fully qualified block types: E.g. `'ly.img.image'` now needs to be `'//ly.img.ubq/image'`. As we’re starting to apply the ‘fill’ concept to more parts of the interface, we deprecated various fill color related APIs: * Deprecated `hasFillColor`, use `hasFill` and query `block.getEnum(id, 'fill/type')` for `Solid` type instead. * Deprecated `get/setFillColorRGBA`, use `setFillSolidColor`instead.. * Deprecated `isFillColorEnabled`, use `isFillEnabled` instead. * Deprecated `setFillType` and `setFillGradientType`, use `createFill`, e.g., with type ‘color’ and then apply the fill block with `setFill` to the block instead. If the block has a fill, it should be removed with `getFill` and `destroy`. * Deprecated `getFillType` and `getFillGradientType`, query `block.getEnum(id, 'fill/type')` and `block.getEnum(id, 'fill/gradient/type')` instead instead * Deprecated `add/removeFillGradientColorStop` and `get/setFillGradientColorStops`. * Deprecated `get/setFillGradientControlPointX/Y`, use `block.getFloat(fill, keypath)` and `block.setFloat(fill, keypath, value)` with key paths ‘fill/gradient/linear/startPointX/Y’, ‘fill/gradient/radial/centerPointX/Y’, and ‘fill/gradient/conical/centerPointX/Y’ instead. * Deprecated `get/setFillGradientRadius`, use `block.getFloat(fill, 'fill/gradient/radial/radius')` and `block.setFloat(fill, 'fill/gradient/radial/radius', value)` instead.” `camera/clearColor` property was replaced it with a global `clearColor` setting to allow controlling the clear color before loading a scene. Properties affecting playback that existed on both `Audio` and `VideoFill` where moved to a common `playback/` namespace: * `'fill/video/looping'` and `'audio/looping'` are now `'playback/looping'` * `'fill/video/volume'` and `'audio/volume'` are now `'playback/volume'` * `'fill/video/muted'` and `'audio/muted'` are now `'playback/muted'` --- [Source](https:/img.ly/docs/cesdk/angular/text-8a993a) # Text --- [Source](https:/img.ly/docs/cesdk/angular/stickers-and-shapes-a000fe) # Stickers and Shapes --- [Source](https:/img.ly/docs/cesdk/angular/settings-970c98) # Settings All keys listed below can be modified through the Editor API. The nested settings inside `UBQSettings` can be reached via key paths, e.g. `page/title/show`. ## Settings[#](#settings) ## Settings Type[#](#settings-type) Editor Settings This section describes the all available editor settings. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `alwaysHighlightPlaceholders` | `Bool` | `false` | Whether placeholder elements should always be highlighted in the scene. | | `basePath` | `String` | `"some-base-path"` | The root directory to be used when resolving relative paths or when accessing `bundle://` URIs on platforms that don’t offer bundles. | | `blockAnimations/enabled` | `Bool` | `true` | Whether animations should be enabled or not. | | `borderOutlineColor` | `Color` | `{"r":0,"g":0,"b":0,"a":1}` | The border outline color. | | `camera/clamping/overshootMode` | `Enum` | `"Reverse"` | Controls what happens when the clamp area is smaller than the viewport. Center: the clamp area is centered in the viewport. Reverse: the clamp area can move inside the viewport until it hits the edges., Possible values: `"Center"`, `"Reverse"` | | `clampThumbnailTextureSizes` | `Bool` | `true` | Whether to clamp thumbnail texture sizes to reduce memory usage. | | `clearColor` | `Color` | `{"r":0,"g":0,"b":0,"a":0}` | The color with which the render target is cleared before scenes get rendered. Only used while renderMode == RenderMode::Preview. | | `colorMaskingSettings/maskColor` | `Color` | `{"r":1,"g":1,"b":1,"a":1}` | The current mask color. Defaults to white, which disabled all masking. | | `colorMaskingSettings/secondPass` | `Bool` | `false` | Whether color masking should render the second pass. | | `controlGizmo/blockScaleDownLimit` | `Float` | `8` | Scale-down limit for blocks in screen pixels when scaling them with the gizmos or with touch gestures. The limit is ensured to be at least 0.1 to prevent scaling to size zero. | | `controlGizmo/showCropHandles` | `Bool` | `true` | Whether or not to show the handles to adjust the crop area during crop mode. | | `controlGizmo/showCropScaleHandles` | `Bool` | `true` | Whether or not to display the outer handles that scale the full image during crop. | | `controlGizmo/showMoveHandles` | `Bool` | `true` | Whether or not to show the move handles. | | `controlGizmo/showResizeHandles` | `Bool` | `true` | Whether or not to display the non-proportional resize handles (edge handles). | | `controlGizmo/showRotateHandles` | `Bool` | `true` | Whether or not to show the rotation handles. | | `controlGizmo/showScaleHandles` | `Bool` | `true` | Whether or not to display the proportional scale handles (corner handles). | | `cropOverlayColor` | `Color` | `{"r":0,"g":0,"b":0,"a":0.39}` | Color of the dimming overlay that’s added in crop mode. | | `defaultEmojiFontFileUri` | `String` | `"https://cdn.img.ly/assets/v4/emoji/NotoColorEmoji.ttf"` | URI of default font file for emojis. | | `defaultFontFileUri` | `String` | `"bundle://ly.img.cesdk/fonts/imgly_font_inter_semibold.otf"` | URI of default font file. This font file is the default everywhere unless overriden in specific settings. | | `doubleClickSelectionMode` | `Enum` | `"Hierarchical"` | The current mode of selection on double-click., Possible values: `"Direct"`, `"Hierarchical"` | | `doubleClickToCropEnabled` | `Bool` | `true` | Whether double clicking on an image element should switch into the crop editing mode. | | `errorStateColor` | `Color` | `{"r":1,"g":1,"b":1,"a":0.7}` | The error state color for design blocks. | | `fallbackFontUri` | `String` | `""` | The URI of the fallback font to use for text that is missing certain characters. | | `forceSystemEmojis` | `Bool` | `true` | Whether the system emojis should be used for text. | | `handleFillColor` | `Color` | `{"r":1,"g":1,"b":1,"a":1}` | The fill color for handles. | | `highlightColor` | `Color` | `{"r":0.2,"g":0.333,"b":1,"a":1}` | Color of the selection, hover, and group frames and for the handle outlines for non-placeholder elements. | | `license` | `String` | `""` | A valid license string in JWT format. | | `maxImageSize` | `Int` | `4096` | The maximum size at which images are loaded into the engine. Images that exceed this size are down-scaled prior to rendering. Reducing this size further reduces the memory footprint. | | `mouse/enableScroll` | `Bool` | `true` | Whether the engine processes mouse scroll events. | | `mouse/enableZoom` | `Bool` | `true` | Whether the engine processes mouse zoom events. | | `page/allowCropInteraction` | `Bool` | `true` | If crop interaction (by handles and gestures) should be possible when the enabled arrangements allow resizing. | | `page/allowMoveInteraction` | `Bool` | `false` | If move interaction (by handles and gestures) should be possible when the enabled arrangements allow moving and if the page layout is not controlled by the scene. | | `page/allowResizeInteraction` | `Bool` | `false` | If a resize interaction (by handles and gestures) should be possible when the enabled arrangements allow resizing. | | `page/allowRotateInteraction` | `Bool` | `false` | If rotation interaction (by handles and gestures) should be possible when the enabled arrangements allow rotation and if the page layout is not controlled by the scene. | | `page/dimOutOfPageAreas` | `Bool` | `true` | Whether the opacity of the region outside of all pages should be reduced. | | `page/innerBorderColor` | `Color` | `{"r":0,"g":0,"b":0,"a":0}` | Color of the inner frame around the page. | | `page/marginFillColor` | `Color` | `{"r":0.79,"g":0.12,"b":0.4,"a":0.1}` | Color filled into the bleed margins of pages. | | `page/marginFrameColor` | `Color` | `{"r":0.79,"g":0.12,"b":0.4,"a":0.15}` | Color of frame around the bleed margin area of the pages. | | `page/moveChildrenWhenCroppingFill` | `Bool` | `false` | Whether the children of the page should be transformed to match their old position relative to the page fill when a page fill is cropped. | | `page/outerBorderColor` | `Color` | `{"r":1,"g":1,"b":1,"a":0}` | Color of the outer frame around the page. | | `page/restrictResizeInteractionToFixedAspectRatio` | `Bool` | `false` | If the resize interaction should be restricted to fixed aspect ratio resizing. | | `page/selectWhenNoBlocksSelected` | `Bool` | `false` | Whether the page should automatically be selected when no blocks are selected. | | `page/title/appendPageName` | `Bool` | `true` | Whether to append the page name to the title if a page name is set even if the name is not specified in the template or the template is not shown. | | `page/title/color` | `Color` | `{"r":1,"g":1,"b":1,"a":1}` | Color of page titles visible in preview mode, can change with different themes. | | `page/title/fontFileUri` | `String` | `"bundle://ly.img.cesdk/fonts/imgly_font_inter_semibold.otf"` | Font of page titles. | | `page/title/separator` | `String` | `"-"` | Title label separator between the page number and the page name. | | `page/title/show` | `Bool` | `true` | Whether to show titles above each page. | | `page/title/showOnSinglePage` | `Bool` | `true` | Whether to hide the the page title when only a single page is given. | | `page/title/showPageTitleTemplate` | `Bool` | `true` | Whether to include the default page title from `page.titleTemplate`. | | `pageHighlightColor` | `Color` | `{"r":0.5,"g":0.5,"b":0.5,"a":0.2}` | Color of the outline of each page. | | `placeholderControls/showButton` | `Bool` | `true` | Show the placeholder button. | | `placeholderControls/showOverlay` | `Bool` | `true` | Show the overlay pattern. | | `placeholderHighlightColor` | `Color` | `{"r":0.77,"g":0.06,"b":0.95,"a":1}` | Color of the selection, hover, and group frames and for the handle outlines for placeholder elements. | | `positionSnappingThreshold` | `Float` | `4` | Position snapping threshold in screen space. | | `progressColor` | `Color` | `{"r":1,"g":1,"b":1,"a":0.7}` | The progress indicator color. | | `renderTextCursorAndSelectionInEngine` | `Bool` | `true` | Whether the engine should render the text cursor and selection highlights during text editing. This can be set to false, if the platform wants to perform this rendering itself. | | `rotationSnappingGuideColor` | `Color` | `{"r":1,"g":0.004,"b":0.361,"a":1}` | Color of the rotation snapping guides. | | `rotationSnappingThreshold` | `Float` | `0.15` | Rotation snapping threshold in radians. | | `showBuildVersion` | `Bool` | `false` | Show the build version on the canvas. | | `snappingGuideColor` | `Color` | `{"r":1,"g":0.004,"b":0.361,"a":1}` | Color of the position snapping guides. | | `textVariableHighlightColor` | `Color` | `{"r":0.7,"g":0,"b":0.7,"a":1}` | Color of the text variable highlighting borders. | | `touch/dragStartCanSelect` | `Bool` | `true` | Whether dragging an element requires selecting it first. When not set, elements can be directly dragged. | | `touch/pinchAction` | `Enum` | `"Scale"` | The action to perform when a pinch gesture is performed., Possible values: `"None"`, `"Zoom"`, `"Scale"` | | `touch/rotateAction` | `Enum` | `"Rotate"` | Whether or not the two finger turn gesture can rotate selected elements., Possible values: `"None"`, `"Rotate"` | | `touch/singlePointPanning` | `Bool` | `true` | Whether or not dragging on the canvas should move the camera (scrolling). When not set, the scroll bars have to be used. | | `upload/supportedMimeTypes` | `String` | `""` | The MIME types supported for file uploads. | | `useSystemFontFallback` | `Bool` | `false` | Whether the IMG.LY hosted font fallback is used for fonts that are missing certain characters, covering most of the unicode range. | | `web/fetchCredentials` | `String` | `"same-origin"` | The credentials mode to use for fetch requests (same-origin, include, or omit). | ### `ColorMaskingSettings`[#](#colormaskingsettings) | Member | Type | Default | Description | | --- | --- | --- | --- | | maskColor | `Color` | `{ r: 0.0, g: 0.0, b: 0.0, a: 0.0 }` | The color to use for masking. | | secondPass | `bool` | `false` | Whether to perform a second masking pass. | ### `GlobalScopes`[#](#globalscopes) | Member | Type | Default | Description | | --- | --- | --- | --- | | text | `Scope` | `Allow` | Scope for text operations. | | fill | `Scope` | `Allow` | Scope for fill operations. | | stroke | `Scope` | `Allow` | Scope for stroke operations. | | shape | `Scope` | `Allow` | Scope for shape operations. | | layer | `Scope` | `Allow` | Scope for layer operations. | | appearance | `Scope` | `Allow` | Scope for appearance operations. | | lifecycle | `Scope` | `Allow` | Scope for lifecycle operations. | | editor | `Scope` | `Allow` | Scope for editor operations. | ``` engine.editor.findAllSettings();engine.editor.getSettingType('doubleClickSelectionMode'); const unsubscribeSettings = engine.editor.onSettingsChanged(() => console.log('Editor settings have changed');); const unsubscribeRoleChange = engine.editor.onRoleChanged((role) => { console.log('Role': role);}); engine.editor.setSetting('doubleClickToCropEnabled', true);engine.editor.getSetting('doubleClickToCropEnabled');engine.editor.setSetting('maxImageSize', 4096);engine.editor.getSetting('maxImageSize');engine.editor.setSetting('positionSnappingThreshold', 2.0);engine.editor.getSetting('positionSnappingThreshold');engine.editor.setSetting('license', 'YOUR_CESDK_LICENSE_KEY');engine.editor.getSetting('license');engine.editor.setSetting('highlightColor', { r: 1, g: 0, b: 1, a: 1 }); // Pinkengine.editor.getSetting('highlightColor');engine.editor.setSetting('doubleClickSelectionMode', 'Direct');engine.editor.getSetting('doubleClickSelectionMode');engine.editor.getSettingEnumOptions('doubleClickSelectionMode');engine.editor.getRole();engine.editor.setRole('Adopter'); ``` ## Change Settings[#](#change-settings) In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to control with the `editor` API. A list of all available settings can be found above. ### Exploration[#](#exploration) ``` findAllSettings(): string[] ``` Returns a list of all the settings available. * Returns A list of settings keypaths. ``` getSettingType(keypath: string): SettingType ``` Returns the type of a setting. * `keypath`: The settings keypath, e.g. `doubleClickSelectionMode`. * Returns The setting type. ### Functions[#](#functions) ``` onSettingsChanged: (callback: () => void) => (() => void) ``` Subscribe to changes to the editor settings. * `callback`: This function is called at the end of the engine update, if the editor settings have changed. * Returns A method to unsubscribe. ``` onRoleChanged: (callback: (role: RoleString) => void) => (() => void) ``` Subscribe to changes to the editor role. This lets you react to changes in the role of the user and update engine and editor settings in response. * `callback`: This function will be called immediately after a role has been set and the default settings for that role have been applied. This function will also be called in case the role is set to the same value as before. * Returns A function for unsubscribing ``` setSettingBool(keypath: SettingsBool, value: boolean): void ``` Set a boolean setting. * `keypath`: The settings keypath, e.g. `doubleClickToCropEnabled` * `value`: The value to set. * Throws An error, if the keypath is invalid. ``` setSettingBool(keypath: `ubq://${SettingsBool}`, value: boolean): void ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` getSettingBool(keypath: SettingsBool): boolean ``` Get a boolean setting. * `keypath`: The settings keypath, e.g. `doubleClickToCropEnabled` * Throws An error, if the keypath is invalid. ``` getSettingBool(keypath: `ubq://${SettingsBool}`): boolean ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` setSettingInt(keypath: string, value: number): void ``` Set an integer setting. * `keypath`: The settings keypath. * `value`: The value to set. * Throws An error, if the keypath is invalid. ``` getSettingInt(keypath: string): number ``` Get an integer setting. * `keypath`: The settings keypath. * Throws An error, if the keypath is invalid. ``` setSettingFloat(keypath: SettingsFloat, value: number): void ``` Set a float setting. * `keypath`: The settings keypath, e.g. `positionSnappingThreshold` * `value`: The value to set. * Throws An error, if the keypath is invalid. ``` setSettingFloat(keypath: `ubq://${SettingsFloat}`, value: number): void ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` getSettingFloat(keypath: SettingsFloat): number ``` Get a float setting. * `keypath`: The settings keypath, e.g. `positionSnappingThreshold` * Throws An error, if the keypath is invalid. ``` getSettingFloat(keypath: `ubq://${SettingsFloat}`): number ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` setSettingString(keypath: SettingsString, value: string): void ``` Set a string setting. * `keypath`: The settings keypath, e.g. `license` * `value`: The value to set. * Throws An error, if the keypath is invalid. ``` setSettingString(keypath: `ubq://${SettingsString}`, value: string): void ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` getSettingString(keypath: SettingsString): string ``` Get a string setting. * `keypath`: The settings keypath, e.g. `license` * Throws An error, if the keypath is invalid. ``` getSettingString(keypath: `ubq://${SettingsString}`): string ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` setSettingColor(keypath: SettingsColor, value: Color): void ``` Set a color setting. * `keypath`: The settings keypath, e.g. `highlightColor`. * `value`: The The value to set. ``` setSettingColor(keypath: `ubq://${SettingsColor}`, value: Color): void ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` getSettingColor(keypath: SettingsColor): Color ``` Get a color setting. * `keypath`: The settings keypath, e.g. `highlightColor`. * Throws An error, if the keypath is invalid. ``` getSettingColor(keypath: `ubq://${SettingsColor}`): Color ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` setSettingEnum(keypath: T, value: SettingsEnum[T]): void ``` Set an enum setting. * `keypath`: The settings keypath, e.g. `doubleClickSelectionMode`. * `value`: The enum value as string. ``` setSettingEnum(keypath: `ubq://${T}`, value: SettingsEnum[T]): void ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` getSettingEnum(keypath: T): SettingsEnum[T] ``` Get an enum setting. * `keypath`: The settings keypath, e.g. `doubleClickSelectionMode`. * Returns The value as string. ``` getSettingEnum(keypath: `ubq://${T}`): SettingsEnum[T] ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` getSettingEnumOptions(keypath: T): string[] ``` Get the possible enum options for a given enum setting. * `keypath`: The settings keypath, e.g. `doubleClickSelectionMode`. * Returns The possible enum options as strings. ``` getSettingEnumOptions(keypath: `ubq://${T}`): string[] ``` Support for `ubq://` prefixed keypaths will be removed in a future release. ``` getRole(): RoleString ``` Get the current role of the user ``` setRole(role: RoleString): void ``` Set the role of the user and apply role-dependent defaults for scopes and settings ## Full Code[#](#full-code) Here’s the full code: ``` engine.editor.findAllSettings();engine.editor.getSettingType('doubleClickSelectionMode'); const unsubscribeSettings = engine.editor.onSettingsChanged(() => console.log('Editor settings have changed');); const unsubscribeRoleChange = engine.editor.onRoleChanged((role) => { console.log('Role': role);}); engine.editor.setSetting('doubleClickToCropEnabled', true);engine.editor.getSetting('doubleClickToCropEnabled');engine.editor.setSetting('maxImageSize', 4096);engine.editor.getSetting('maxImageSize');engine.editor.setSetting('positionSnappingThreshold', 2.0);engine.editor.getSetting('positionSnappingThreshold');engine.editor.setSetting('license', 'YOUR_CESDK_LICENSE_KEY');engine.editor.getSetting('license');engine.editor.setSetting('highlightColor', { r: 1, g: 0, b: 1, a: 1 }); // Pinkengine.editor.getSetting('highlightColor');engine.editor.setSetting('doubleClickSelectionMode', 'Direct');engine.editor.getSetting('doubleClickSelectionMode');engine.editor.getSettingEnumOptions('doubleClickSelectionMode');engine.editor.getRole();engine.editor.setRole('Adopter'); ``` --- [Source](https:/img.ly/docs/cesdk/angular/serve-assets-b0827c) # Serve Assets From Your Server In this example, we explain how to configure the Creative Engine to use assets hosted on your own servers. While we serve all assets from our own CDN by default, it is highly recommended to serve the assets from your own servers in a production environment. ## Prerequisites[#](#prerequisites) * [Get the latest stable version of **Node.js & NPM**](https://www.npmjs.com/get-npm) * (Optional): [Get the latest stable version of **Yarn**](https://yarnpkg.com/getting-started) ## 1\. Add the CreativeEngine to Your Project[#](#1-add-the-creativeengine-to-your-project) Terminal window ``` npm install @cesdk/engine# oryarn add @cesdk/engine ``` ## 2\. Decide what Assets you need[#](#2-decide-what-assets-you-need) We offer two sets of assets: * _Core_ Assets - Files required for the engine to function. * _Default_ Assets - Demo assets to quickstart your development. ### ⚠️ Warning Prior to `v1.10.0`, the `CreativeEngine` and `CreativeEditorSDK` would load referenced default assets from the `assets/extensions/*` directories and hardcode them as `/extensions/…` references in serialized scenes. To **maintain compatibility** for such scenes, make sure you’re still serving version v1.9.2 the `/extensions` directory from your `baseURL`. You can [download them from our CDN](https://cdn.img.ly/packages/imgly/cesdk-engine/1.9.2/assets/extensions.zip). ## 3\. Register IMG.LY’s default assets[#](#3-register-imglys-default-assets) If you want to use our default asset sources in your integration, call `CreativeEngine.addDefaultAssetSources({ baseURL?: string, excludeAssetSourceIds?: string[] }): void`. Right after initialization: ``` CreativeEngine.init(config).then(engine => { engine.addDefaultAssetSources();}); ``` This call adds IMG.LY’s default asset sources for stickers, vectorpaths and filters to your engine instance. By default, these include the following source ids: * `'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. * `'ly.img.colors.defaultPalette'` - Default color palette. * `'ly.img.effect'` - Default effects. * `'ly.img.blur'` - Default blurs. * `'ly.img.typeface'` - Default typefaces. If you don’t specify a `baseURL` option, the assets are parsed and served from the IMG.LY CDN. It’s it is highly recommended to serve the assets from your own servers in a production environment, if you decide to use them. To do so, follow the steps below and pass a `baseURL` option to `addDefaultAssetSources`. If you only need a subset of the IDs above, use the `excludeAssetSourceIds` option to pass a list of ignored Ids. ## 4\. Copy Assets[#](#4-copy-assets) Copy the CreativeEditorSDK `core`, `i18n`, `ui`, etc. asset folders to your application’s asset folder. The name of the folder depends on your setup and the used bundler, but it’s typically a folder called `assets` or `public` in the project root. Terminal window ``` cp -r ./node_modules/@cesdk/engine/assets public/ ``` Furthermore, if you are using our IMG.LY default assets, download them from [our CDN](https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/imgly-assets.zip) and extract them to your public directory as well. If you deploy the site that embeds the CreativeEngine together with all its assets and static files, this might be all you need to do for this step. In different setups, you might need to upload this folder to your CDN. ## 5\. Configure the CreativeEngine to use your self-hosted assets[#](#5-configure-the-creativeengine-to-use-your-self-hosted-assets) Next, we need to configure the SDK to use our local assets instead of the ones served via our CDN. There are two configuration options that are relevant for this: * `baseURL` should ideally point to the `assets` folder that was copied in the previous step. This can be either an absolute URL, or a path. A path will be resolved using the `window.location.href` of the page where the CreativeEngine is embedded. By default `baseURL` is set to our CDN. * `core.baseURL` must point to the folder containing the core sources and data file for the CreativeEngine. Defaults to `${baseURL}/core` This can be either an absolute URL, or a relative path. A relative path will be resolved using the the previous `baseURL`. By default, `core.baseURL` is set to `core/`. Normally you would simply serve the assets directory from the previous step. That directory already contains the `core` folder, and this setting does not need to be changed. For highly customized setups that separate hosting of the WASM files from the hosting of other assets that are used inside scenes, you can set this to a different URL. * `CreativeEngine.addDefaultAssetSources` offers a `baseURL` option, that needs to be set to an absolute URL. The given URL will be used to lookup the asset definitions from `{{baseURL}}//content.json` and for all file references, like `{{baseURL}}//images/example.png`. By default, default sources parse and reference assets from `https://cdn.img.ly/assets/v4`. ``` const config = { ... // Specify baseURL for all relative URLs. baseURL: '/assets' // or 'https://cdn.mydomain.com/assets' core: { // Specify location of core assets, required by the engine. baseURL: 'core/' }, ... }; // Setup engine and add default sources served from your own server. CreativeEngine.init(config).then((engine) => { engine.addDefaultAssetSources({ baseURL: 'https://cdn.mydomain.com/assets'}) }) ``` ## Versioning of the WASM assets[#](#versioning-of-the-wasm-assets) The files that the CreativeEngine loads from `core.baseURL` (`.wasm` and`.data` files, and the `worker-host.js`) are changing between different versions of the CreativeEngine. You need to ensure that after a version update, you update your copy of the assets. The filenames of these assets will also change between updates. This makes it safe to store different versions of these files in the same folder during migrations, as the CreativeEngine will always locate the correct files using the unique filenames. It also means that if you forget to copy the new assets, the CreativeEngine will fail to load them during initialization and abort with an Error message on the console. Depending on your setup this might only happen in your production or staging environments, but not during development where the assets might be served from a local server. Thus we recommend to ensure that copying of the assets is taken care of by your automated deployments and not performed manually. --- [Source](https:/img.ly/docs/cesdk/angular/rules-1427c0) # Rules --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions-d0ed07) # Prebuilt Solutions --- [Source](https:/img.ly/docs/cesdk/angular/plugins-693c48) # Plugins Learn how to extend CE.SDK functionality with plugins to add custom features, effects, and integrations. --- [Source](https:/img.ly/docs/cesdk/angular/performance-3c12eb) # Improve Performance Code Splitting ``` // When using node modulues in a bundler:async function loadCreativeEngine() { const module = await import('@cesdk/engine'); const CreativeEngine = module.default; return CreativeEngine;} // When loading the engine module directly from the CDN:async function loadCreativeEngine() { const module = await import( 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js' ); const CreativeEngine = module.default; return CreativeEngine;} ``` ### Code Splitting[#](#code-splitting) Keep in mind that the CreativeEngine bundle has a substantial size. Depending on your use case, it might make sense to delay loading of the module, using a dynamic import statement: Consult your bundler’s documentation for more information: * [Code Splitting | Webpack](https://webpack.js.org/guides/code-splitting/) * [Rollup.js](https://rollupjs.org/guide/en/#code-splitting) * [Parcel](https://parceljs.org/features/code-splitting/) ``` // When using node modulues in a bundler:async function loadCreativeEngine() { const module = await import('@cesdk/engine'); const CreativeEngine = module.default; return CreativeEngine;} ``` You can also make use of code splitting in the browser, without a bundler. It works in the same way, but you would load our code from the CDN. ``` // When loading the engine module directly from the CDN:async function loadCreativeEngine() { const module = await import( 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js' ); const CreativeEngine = module.default; return CreativeEngine;} ``` --- [Source](https:/img.ly/docs/cesdk/angular/overview-8cc730) # Overview --- [Source](https:/img.ly/docs/cesdk/angular/overview-7d12d5) # Video Editor SDK Use CreativeEditor SDK (CE.SDK) to build robust video editing experiences directly in your app. CE.SDK supports both video and audio editing — including trimming, joining, adding text, annotating, and more — all performed client-side without requiring a server. Developers can integrate editing functionality using a built-in UI or programmatically via the SDK API. CE.SDK also supports music and sound effects alongside video editing. You can integrate custom or third-party AI models to streamline creative workflows, such as converting image to video or generating clips from text. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Core Capabilities[#](#core-capabilities) CreativeEditor SDK includes a comprehensive set of video editing tools, accessible through both a UI and programmatic interface. Supported editing actions include: * **Trim, Split, Join, and Arrange**: Modify clips, reorder segments, and stitch together content. * **Transform**: Crop, rotate, resize, scale, and flip. * **Audio Editing**: Add, adjust, and synchronize audio including music and effects. * **Programmatic Editing**: Control all editing features via API. CE.SDK is well-suited for scenarios like short-form content, reels, promotional videos, and other linear video workflows. ## Timeline Editor[#](#timeline-editor) The built-in timeline editor provides a familiar video editing experience for users. It supports: * Layered tracks for video and audio * Drag-and-drop sequencing with snapping * Trim handles, in/out points, and time offsets * Real-time preview updates The timeline is the main control for video editing: ![The editor timeline control.](/docs/cesdk/_astro/video_mode_timeline.BkrXFlTn_2e2pv5.webp) ## AI-Powered Editing[#](#ai-powered-editing) CE.SDK allows you to easily integrate AI tools directly into your video editing workflow. Users can generate images, videos, and audio from simple prompts — all from within the editor’s task bar, without switching tools or uploading external assets. [ Launch AI Editor Demo ](https://img.ly/showcases/cesdk/ai-editor/web) You can bring your own models or third-party APIs with minimal setup. AI tools can be added as standalone plugins, contextual buttons, or task bar actions. ## Supported Input Formats and Codecs[#](#supported-input-formats-and-codecs) CE.SDK supports a wide range of video input formats and encodings, including: | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. CE.SDK supports the most widely adopted video and audio codecs to ensure compatibility across platforms: ### **Video Codecs**[#](#video-codecs) * **H.264 / AVC** (in `.mp4`) * **H.265 / HEVC** (in `.mp4`, may require platform-specific support) ### **Audio Codecs**[#](#audio-codecs) * **MP3** (in `.mp3` or within `.mp4`) * **AAC** (in `.m4a` or within `.mp4` or `.mov`) ## Output and Export Options[#](#output-and-export-options) You can export edited videos in several formats, with control over resolution, encoding, and file size: | Category | Supported Formats | | --- | --- | | **Images** | `.png` (with transparency), `.jpeg`, `.webp`, `.tga` | | **Video** | `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) | | **Print** | `.pdf` (supports underlayer printing and spot colors) | | **Scene** | `.scene` (description of the scene without any assets) | | **Archive** | `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) | Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. ## UI-Based vs. Programmatic Editing[#](#ui-based-vs-programmatic-editing) CE.SDK offers a fully interactive editor with intuitive UI tools for creators. At the same time, developers can build workflows entirely programmatically using the SDK API. * Use the UI to let users trim, arrange, and caption videos manually * Use the API to automate the assembly or editing of videos at scale ## Customization[#](#customization) You can tailor the editor to match your product’s design and user needs: * Show or hide tools * Reorder UI elements and dock items * Apply custom themes, colors, or typography * Add additional plugin components ## Performance and File Size Considerations[#](#performance-and-file-size-considerations) All editing operations are performed client-side. While this ensures user privacy and responsiveness, it introduces some limits: | Constraint | Recommendation / Limit | | --- | --- | | **Resolution** | Up to **4K UHD** is supported for **playback** and **export**, depending on the user’s hardware and available GPU resources. For **import**, CE.SDK does not impose artificial limits, but maximum video size is bounded by the **32-bit address space of WebAssembly (wasm32)** and the **browser tab’s memory cap (~2 GB)**. | | **Frame Rate** | 30 FPS at 1080p is broadly supported; 60 FPS and high-res exports benefit from hardware acceleration | | **Duration** | Stories and reels of up to **2 minutes** are fully supported. Longer videos are also supported, but we generally found a maximum duration of **10 minutes** to be a good balance for a smooth editing experience and a pleasant export duration of around one minute on modern hardware. | Performance scales with client hardware. For best results with high-resolution or high-frame-rate video, modern CPUs/GPUs with hardware acceleration are recommended. --- [Source](https:/img.ly/docs/cesdk/angular/overview-491658) # Overview In CE.SDK, _inserting media into a scene_ means placing visual or audio elements directly onto the canvas—images, videos, audio clips, shapes, or stickers—so they become part of the design. This differs from _importing assets_, which simply makes media available in the asset library. This guide helps you understand how insertion works, how inserted media behave within scenes, and how to control them via UI or code. By the end, you’ll know how media are represented, modified, saved, and exported. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Inserting Media vs. Importing Assets[#](#inserting-media-vs-importing-assets) Before you can insert media into a scene, it must first be available to CE.SDK—this is where _importing_ comes in. Imported assets are added to the **Asset Library** (from local uploads, remote sources, etc.), where they become available for use. _Inserting_ means placing those assets into the actual scene—either as the fill of a design block (like an image inside a rectangle), or as a standalone visual/audio layer. This process creates scene elements that users can see, move, style, and manipulate. ## How Media Is Handled in Scenes[#](#how-media-is-handled-in-scenes) Internally, inserted media are structured as part of the scene graph. Most are represented as fills or as design blocks: * **Images and Videos** are typically inserted as _fills_ for graphic blocks or as independent blocks for visual layering. * **Audio** is inserted as a timeline-based media block, often invisible but timeline-active. * **Shapes and Stickers** are treated as standalone graphic blocks, with shape or vector fills. Each inserted item is assigned an ID and properties such as position, size, and rotation, and can be queried or modified programmatically. ## Inserting Media[#](#inserting-media) ### Insert via the UI[#](#insert-via-the-ui) You can insert media using the built-in CE.SDK interface. The most common methods are: * Drag-and-drop from the **Asset Library** into the canvas. * Clicking an asset in the panel to place it at the center of the scene. * Using context menus or toolbar buttons (e.g., “Add Image” or “Insert Audio”). You can also configure the UI to show or hide certain media categories, allowing for tailored user experiences. See the **Customize Asset Library** guide for more on controlling visible media types. ### Insert Programmatically[#](#insert-programmatically) Developers can insert media directly via the SDK. Whether you’re building a dynamic editor or triggering insertions via user input, CE.SDK exposes APIs for: * Creating a new design block and applying a media fill (e.g., image, video). * Controlling properties like position, size, rotation, opacity, and z-index. * Embedding logic to sync insertions with UI actions or backend data. ## Referencing Existing Assets[#](#referencing-existing-assets) Once an asset is imported, you can reference it multiple times without re-importing. Reuse is based on: * **URI** (useful for remote assets) When reusing an asset, you can apply different visual properties—each inserted instance can have its own size, position, rotation, or visual effects. ## Media Lifecycle Within a Scene[#](#media-lifecycle-within-a-scene) Inserted media are part of the live scene graph and follow CE.SDK’s scene lifecycle: * **Saving a Scene**: Inserted media references (or embedded content) are included in the saved `.scene` or `.archive`. * **Reloading a Scene**: CE.SDK reconstructs the scene graph and fetches any required media URIs or binary data. * **Exporting**: Media may be embedded directly (e.g., for self-contained exports) or referenced externally (e.g., smaller file sizes, shared assets). Keep in mind that media integrity on reload/export depends on how the asset was inserted—linked URIs must remain available, whereas embedded assets are bundled. ## Embedding vs. Linking Media[#](#embedding-vs-linking-media) CE.SDK supports two strategies for handling inserted media: | Mode | Description | Use Case | | --- | --- | --- | | **Referenced** (Scene Files) | Scene references the media via URI. | Smaller file sizes, shared asset use. | | **Embedded** (Archives) | Media is stored directly in the saved archive. | Offline editing, portable scenes. | **Embedded** media increase file size but ensure portability. **Referenced** media reduce storage needs but require external hosting. You can control this behavior when saving or exporting a scene. --- [Source](https:/img.ly/docs/cesdk/angular/security-777bfd) # Security This document provides a comprehensive overview of CE.SDK’s security practices, focusing on data handling, privacy, and our commitment to maintaining the highest standards of security for our customers and their end users. ## Key Security Features[#](#key-security-features) * **Client-Side Processing**: All image and design processing occurs directly on the user’s device or your servers, not on our servers * **No Data Transmission**: Your content (e.g. images, designs, templates, videos, audio, etc.) is never uploaded to or processed on IMG.LY servers * **Minimal Data Collection**: We only collect device identifiers and count exports for licensing purposes * **GDPR Compliance**: Our data collection practices adhere to GDPR regulations * **Secure Licensing**: Enterprise licenses are secured with RSA SHA256 encryption ## Data Protection & Access Controls[#](#data-protection--access-controls) ### Data Collection[#](#data-collection) CE.SDK requires minimal data to provide its services. The only potentially personally identifiable information (PII) collected includes device-specific identifiers such as `identifierForVendor` on iOS and `ANDROID_ID` on Android. These identifiers are: * Used solely for tracking monthly active users for our usage-based pricing models * Reset when the user reinstalls the app or resets their device * Collected under GDPR’s legitimate interest provision (no explicit consent required as they are necessary for our licensing system) Additionally, we track export operations for billing purposes in usage-based pricing models. For enterprise customers who prefer more accurate tracking, integrators can provide their own userID. This allows for more precise measurement of usage without requiring additional device identifiers. ### Data Storage & Encryption[#](#data-storage--encryption) **We do not collect or store user data beyond the device identifiers and export counts mentioned above.** Since CE.SDK operates entirely client-side: * All content processing happens on the user’s device * No images, designs, or user content is transmitted to IMG.LY servers * No content data is stored on IMG.LY infrastructure We use standard HTTPS (SSL/TLS) encryption for all communications between CE.SDK instances and our licensing backend. ### Access Controls[#](#access-controls) We are using established industry standard practices to handle sensitive customer data. Therefore access control concerns are minimized. The limited data we do handle is protected as follows: * Billing information is stored in Stripe and accessed only by members of our finance team and C-level executives * API keys and credentials are stored securely in 1Password or GitHub with granular access levels * All employees sign Confidentiality Agreements to protect customer information This refers to data of our direct customers, not their users or customers. ## Licensing System[#](#licensing-system) CE.SDK uses a licensing system that works as follows: 1. During instantiation, an API key is provided to the CE.SDK instance 2. This API key is held in memory (never stored permanently on the device) 3. The SDK validates the key with our licensing backend 4. Upon successful validation, the backend returns a temporary local license 5. This license is periodically refreshed to maintain valid usage For browser implementations, we protect licenses against misuse by pinning them to specific domains. For mobile applications, licenses are pinned to the application identifiers to prevent unauthorized use. For enterprise customers, we offer an alternative model: * A license file is passed directly to the instance * No communication with our licensing service is required * Licenses are secured using RSA SHA256 encryption ### CE.SDK Renderer[#](#cesdk-renderer) CE.SDK Renderer is a specialized variant of CE.SDK that consists of a native Linux binary bundled in a Docker container. It uses GPU acceleration and native code to render scenes and archives to various export formats. Due to bundled third-party codecs (mainly H.264 & H.265) and their associated patent requirements, CE.SDK Renderer implements additional licensing communication beyond the standard licensing handshake: 1. **Initial License Validation**: The tool performs the standard license validation with our licensing backend 2. **Periodic Heartbeats**: After successful validation, it sends periodic heartbeats to our licensing backend to track the number of active instances 3. **Instance Limits**: We limit the maximum number of active instances per license based on the settings in your dashboard 4. **Activation Control**: If the instance limit is exceeded, further activations (launches) of the tool will fail with a descriptive error message This additional communication allows us to ensure compliance with codec licensing requirements while providing transparent usage tracking for your organization. As with all CE.SDK products, no user data (images, videos, designs, or other content) is transmitted to IMG.LY servers - only device identifiers and instance counts are collected for licensing purposes. ## Security Considerations for User Input[#](#security-considerations-for-user-input) As CE.SDK deals primarily with arbitrary user input, we’ve implemented specific security measures to handle data safely: * The CreativeEngine reads files from external resources to fetch images, fonts, structured data, and other sources for designs. These reads are safeguarded by platform-specific default measures. * The engine never loads executable code or attempts to execute any data acquired from dynamic content. It generally relies on provided mime types to decode image data or falls back to byte-level inspection to choose the appropriate decoder. * For data writing operations, we provide a callback that returns a pointer to the to-be-written data. The engine itself never unconditionally writes to an externally defined path. If it writes to files directly, these are part of internal directories and can’t be modified externally. * Generated PDFs may have original image files embedded if the image was not altered via effects or blurs and the `exportPdfWithHighCompatibility` option was **not** enabled. This means a malicious image file could theoretically be included in the exported PDF. * Inline text-editing allows arbitrary input of strings by users. The engine uses platform-specific default inputs and APIs and doesn’t apply additional sanitization. The acquired strings are stored and used exclusively for text rendering - they are neither executed nor used for file operations. ## Security Infrastructure[#](#security-infrastructure) ### Vulnerability Management[#](#vulnerability-management) We take a proactive approach to security vulnerability management: * We use GitHub to track dependency vulnerabilities * We regularly update affected dependencies * We don’t maintain a private network, eliminating network vulnerability concerns in that context * We don’t manually maintain servers or infrastructure, as we don’t have live systems beyond those required for licensing * For storage and licensing, we use virtual instances in Google Cloud which are managed by the cloud provider * All security-related fixes are published in our public changelog at [https://img.ly/docs/cesdk/changelog/](https://img.ly/docs/cesdk/changelog/) ### Security Development Practices[#](#security-development-practices) Our development practices emphasize security: * We rely on established libraries with proven security track records * We don’t directly process sensitive user data in our code * Secrets (auth tokens, passwords, API credentials, certificates) are stored in GitHub or 1Password with granular access levels * We use RSA SHA256 encryption for our enterprise licenses * We rely on platform-standard SSL implementations for HTTPS communications ### API Key Management[#](#api-key-management) API keys for CE.SDK are handled securely: * Keys are passed during instantiation and held in memory only * Keys are never stored permanently on client devices * For web implementation, keys are pinned to specific domains to prevent unauthorized use * Enterprise licenses use a file-based approach that doesn’t require API key validation ## Compliance[#](#compliance) IMG.LY complies with the General Data Protection Regulation (GDPR) in all our operations, including CE.SDK. Our Privacy Policy is publicly available at [https://img.ly/privacy-policy](https://img.ly/privacy-policy). Our client-side approach to content processing significantly reduces privacy and compliance concerns, as user content never leaves their device environment for processing. ## FAQ[#](#faq) ### Does CE.SDK upload my images or designs to IMG.LY servers?[#](#does-cesdk-upload-my-images-or-designs-to-imgly-servers) No. CE.SDK processes all content locally on the user’s device. Your images, designs, and other content are never transmitted to IMG.LY servers. ### What data does IMG.LY collect through CE.SDK?[#](#what-data-does-imgly-collect-through-cesdk) CE.SDK only collects device identifiers (such as identifierForVendor on iOS or ANDROID\_ID on Android) for licensing purposes and export counts. No user content or personal information is collected. ### How does IMG.LY protect API keys?[#](#how-does-imgly-protect-api-keys) API keys are never stored permanently; they are held in memory during SDK operation. For web implementations, keys are pinned to specific domains to prevent unauthorized use. ### Has IMG.LY experienced any security breaches?[#](#has-imgly-experienced-any-security-breaches) No, IMG.LY has not been involved in any cybersecurity breaches in the last 12 months. ### Does IMG.LY conduct security audits?[#](#does-imgly-conduct-security-audits) As we don’t store customer data directly, but rely on third parties to do so, we focus our security efforts on dependency tracking and vulnerability management through GitHub’s security features. We don’t conduct security audits. ## Additional Information[#](#additional-information) For more detailed information about our data collection practices, please refer to our Data Privacy and Retention information below. Should you have any additional questions regarding security practices or require more information, please contact our team at [support@img.ly](mailto:support@img.ly). ## Data Privacy and Retention[#](#data-privacy-and-retention) At IMG.LY, we prioritize your data privacy and ensure that apart from a minimal contractually stipulated set of interactions with our servers all other operations take place on your local device. Below is an overview of our data privacy and retention policies: ### **Data Processing**[#](#data-processing) All data processed by CE.SDK remains strictly on your device. We do not transfer your data to our servers for processing. This means that operations such as rendering, editing, and other in-app functionalities happen entirely locally, ensuring that sensitive project or personal data stays with you. ### **Data Retention**[#](#data-retention) We do not store any project-related data on our servers. Since all data operations occur locally, no information about your edits, images, or video content is retained by CE.SDK. The only data that interacts with our servers is related to license validation and telemetry related to usage tied to your pricing plan. ### **License Validation**[#](#license-validation) CE.SDK performs a license validation check with our servers once upon initialization to validate the software license being used. This interaction is minimal and does not involve the transfer of any personal, project, or media data. ### **Event Tracking**[#](#event-tracking) While CE.SDK does not track user actions other than the exceptions listed below through telemetry or analytics by default, there are specific events tracked to manage customer usage, particularly for API key usage tracking. We gather the following information during these events: * **When the engine loads:** App identifier, platform, engine version, user ID (provided by the client), device ID (mobile only), and session ID. * **When a photo or video is exported:** User ID, device ID, session ID, media type (photo/video), resolution (width and height), FPS (video only), and duration (video only). This tracking is solely for ensuring accurate usage calculation and managing monthly active user billing. Enterprise clients can opt out of this tracking under specific agreements. ### **Personal Identifiable Information (PII)**[#](#personal-identifiable-information-pii) The only PII that is potentially collected includes device-specific identifiers such as `identifierForVendor` on iOS and `ANDROID_ID` on Android. These IDs are used for tracking purposes and are reset when the user reinstalls the app or resets the device. No consent is required for these identifiers because they are crucial for our usage-based pricing models. This is covered by the GDPR as legitimate interest. ### **User Consent**[#](#user-consent) As mentioned above, user consent is not required when solely using the CE.SDK. However, this may change depending on the specific enterprise agreement or additional regulatory requirements. IMG.LY is committed to maintaining compliance with **GDPR** and other applicable data protection laws, ensuring your privacy is respected at all times. For details consult our [privacy policy](https://img.ly/privacy-policy). --- [Source](https:/img.ly/docs/cesdk/angular/outlines-b7820c) # Outlines --- [Source](https:/img.ly/docs/cesdk/angular/open-the-editor-23a1db) # Open the Editor --- [Source](https:/img.ly/docs/cesdk/angular/llms-txt-eb9cc5) # LLMs.txt Our documentation is now available in LLMs.txt format, optimized for AI reasoning engines. To better support platform-specific development, we’ve created separate documentation files for each platform. For Angular developers, this means you can now access documentation tailored to your specific platform, whether it’s iOS, Android, Web, or any other supported platform. This approach allows for a more focused and efficient use of AI tools in your development workflow. [ Download /angular/llms-full.txt ](https://img.ly/docs/cesdk/angular/llms-full.txt) These documentation files are substantial in size, with token counts exceeding the context windows of many AI models. This guide explains how to download and effectively use these platform-specific documentation files with AI tools to accelerate your development process. ## What are LLMs.txt files?[#](#what-are-llmstxt-files) LLMs.txt is an emerging standard for making documentation AI-friendly. Unlike traditional documentation formats, LLMs.txt: * Presents content in a clean, markdown-based format * Eliminates extraneous HTML, CSS, and JavaScript * Optimizes content for AI context windows * Provides a comprehensive view of documentation in a single file By using our platform-specific LLMs.txt files, you’ll ensure that AI tools have the most relevant and complete context for helping with your development tasks. ## Handling Large Documentation Files[#](#handling-large-documentation-files) Due to the size of our documentation files (upward of 500 000 tokens) most AI tools will face context window limitations. Standard models typically have context windows ranging from 8,000 to 200,000 tokens, making it challenging to process our complete documentation in a single session. ### Recommended AI Model for Full Documentation[#](#recommended-ai-model-for-full-documentation) For working with our complete documentation files, we recommend: * **Gemini 2.5 Flash**: Available via Google AI Studio with a context window of 1-2 million tokens, capable of handling even our largest documentation file --- [Source](https:/img.ly/docs/cesdk/angular/licensing-8aa063) # Licensing Thanks for your interest in CreativeEditor SDK (CE.SDK). We offer flexible commercial licensing options to support teams and projects of all sizes. Whether you’re building a new product or scaling an existing one, our goal is to provide the best creative editing experience—backed by a licensing model that aligns with your needs. Get in touch with us through our [contact sales form](https://img.ly/forms/contact-sales). ## Commercial Licensing[#](#commercial-licensing) CE.SDK is offered through a subscription-based commercial model. This allows us to: * Deliver ongoing updates and performance improvements * Ensure compatibility with new browsers and devices * Provide dedicated technical support * Build long-term partnerships with our customers ## How Licensing Works[#](#how-licensing-works) CE.SDK licenses are tied to a single commercial product instance, verified by the hostname for web apps and bundle/app ID for mobile apps. Licensing typically uses remote validation and includes lightweight event tracking. It’s possible to disable tracking or use offline-compatible options. To explore these options, [contact our sales team](https://img.ly/forms/contact-sales). ## Trial License Key[#](#trial-license-key) Trial licenses are available for evaluation and testing and are valid for **30 days**. They provide full access to CE.SDK’s features so you can explore its capabilities in your environment. If you need more time to evaluate, [contact our sales team](https://img.ly/forms/contact-sales). ## Testing and Production[#](#testing-and-production) Paid license keys can be used across development, staging, and production environments. Multiple domains or app identifiers can be added to support this setup. --- [Source](https:/img.ly/docs/cesdk/angular/key-concepts-21a270) # Key Concepts CE.SDK is built on two distinct technical layers that work together seamlessly: * **User Interface** — Pre-built editors optimized for different use cases * **Engine Interface** — Core rendering and processing engine ![The different layers CE.SDK is made of, see description below.](/docs/cesdk/_astro/layers._NZlSdtG_Zyol2N.webp) This intentional separation gives you powerful advantages: 1. **Cross-platform consistency** – The engine is cross-compiled to native web, iOS, Android, and Node.js, ensuring identical output everywhere 2. **Custom UI** – Build your own UI for simpler tools and workflows 3. **Headless automation** – Run the engine independently for automations and batch processing, both client-side and server-side ## Creative Engine[#](#creative-engine) The Creative Engine powers all core editing operations. It handles rendering, processing, and manipulation across images, layouts, text, video, audio, and vectors. **What the Engine Does:** * Maintains the scene file (your structured content) * Renders the canvas in real-time * Handles block positioning and resizing * Applies filters and effects to images * Manages text editing and typography * Controls templates with role-based permissions * Displays smart guides and snap lines Every engine capability is exposed through a comprehensive API, letting you build custom UIs, workflows, and automations. ## Headless / Engine only[#](#headless--engine-only) Use the engine without any UI for powerful automation scenarios: **Client-side automation** Perfect for in-browser batch operations and dynamic content generation without server dependencies. **Server-side automation with Node.js** Use the [Node.JS SDK](node/what-is-cesdk-2e7acd/) for following scenarios: * **High-resolution processing** – Edit on the client with preview quality, then render server-side with full-resolution assets * **Bulk generation** – Create a large volume of design variations for variable data printing * **Non-blocking workflows** – Let users continue designing while exports process in the background **Server-side export with the CE.SDK Renderer** When exporting complex graphics and videos, the [CE.SDK Renderer](/linux/what-is-cesdk-2e7acd/) can make use of GPU acceleration and video codecs on Linux server environments. **Plugin development** When building CE.SDK plugins, you get direct API access to manipulate canvas elements programmatically. ## User Interface Components[#](#user-interface-components) CE.SDK includes pre-built UI configurations optimized for different use cases: * **Photo editing** — Advanced image editing tools and filters * **Video editing** — Timeline-based video editing and effects * **Design editing** — Layout and graphic design tools (similar to Canva) * **2D product design** — Apparel, postcards, and custom product templates More configurations are coming based on customer needs. ## UI Customization[#](#ui-customization) While UI configurations provide a solid foundation, you maintain control over the user experience: * Apply **custom color schemes** and branding to match your product * Add **custom asset libraries** with your own fonts, images, graphics, videos, and audio The plugin architecture lets you add custom buttons and panels throughout the interface, ensuring the editor feels native to your product. --- [Source](https:/img.ly/docs/cesdk/angular/insert-media-a217f5) # Insert Media Into Scenes --- [Source](https:/img.ly/docs/cesdk/angular/key-capabilities-dbb5b1) # Key Capabilities This guide gives you a high-level look at what CreativeEditor SDK (CE.SDK) can do—and how deeply it can integrate into your workflows. Whether you’re building a design editor into your product, enabling automation, or scaling personalized content creation, CE.SDK provides a flexible and future-ready foundation. [Launch Web Demo](https://img.ly/showcases/cesdk) It’s designed for developers, product teams, and technical decision-makers evaluating how CE.SDK fits their use case. * 100% client-side processing * Built from the ground up (not based on open-source libraries) * Flexible enough for both low-code and fully custom implementations ## Design Creation and Editing[#](#design-creation-and-editing) CE.SDK provides comprehensive tools for creating and editing images, videos, and multi-page layouts directly in the browser with full feature parity to desktop applications. ### Core Capabilities[#](#core-capabilities) * Create, edit, compose, and customize visual content * Dual control: Use the built-in editor UI or programmatic API * Rich editing tools: filters, text styling, stickers, layers, and layout controls ### Supported Workflows[#](#supported-workflows) * Social media content creation and user-generated content flows * Marketing tools for creative teams * Branded asset creation (slides, product visuals, templates) * Composition tools for multi-page layouts, collages, and background blending ## Programmatic and UI-based[#](#programmatic-and-ui-based) You get full control over how your users interact with CE.SDK. * Use the built-in UI for manual workflows * Call the same editing and rendering functionality programmatically * Combine both for hybrid use cases (e.g., users edit manually, backend creates variations) Whether you’re serving designers or developers—or both—CE.SDK adapts to your product’s needs. ## Templates and Reusable Layouts[#](#templates-and-reusable-layouts) Define reusable templates to simplify design creation. These templates support: * Role-based editing (lock/unlock elements based on user type) * Smart placeholders (predefined image/text drop zones) * Preset styles for consistent branding * Programmatic or user-driven updates Templates make it easy to scale consistent design output while keeping editing intuitive. ## Automation and Dynamic Content[#](#automation-and-dynamic-content) You can generate visuals automatically by combining templates with structured data. Common use cases include personalized ads, localizations, product catalogs, or A/B testing. The SDK works in headless mode and supports batch workflows, making it easy to automate at scale. ## Multi-modal[#](#multi-modal) CE.SDK supports a wide range of content types and formats: * Input types: images, video, audio, structured data, templates * Output formats: PNG, JPEG, WebP, MP4, PDF, raw data All operations—including export—run client-side, ensuring fast performance and data privacy. ## AI Integration[#](#ai-integration) Instantly bring best-in-class AI-powered image and video editing to your application with just a few lines of code. All tools run directly inside the existing editor interface—so users stay in the flow while benefiting from powerful automation. Examples of what you can enable: * **Text to Image** – Use prompts to generate original visual content directly in the editor * **Text to Graphics** – Create crisp, scalable illustrations from simple text input * **Style Transfer** – Change the mood or style of an image while preserving its structure * **Create Variants** – Generate endless visual variations of a single subject for campaigns or personalization * **Image to Video** – Transform static images into dynamic motion content with a click * **Text to Speech** – Turn written copy into natural-sounding voiceovers, with control over tone and speed * **Smart Text Editing** – Rewrite or refine text using intelligent editing suggestions * **Swap Background** – Remove or replace backgrounds in seconds * **Add / Remove Objects** – Modify images with generative precision—no external tools required These capabilities can be integrated connecting to any third-party AI model or API with minimal setup. ## Customizable UI[#](#customizable-ui) The built-in interface is designed to be fully customizable: * Rearrange or rename tools * Apply theming and branding * Show/hide features based on user role * Add translations for international users It works across desktop and mobile, and can be extended or replaced entirely if needed. ## Extensibility[#](#extensibility) Need to add a custom feature or integrate with your backend? CE.SDK supports extensibility at multiple levels: * Custom UI components (or build a completely custom UI) * Backend data integrations (e.g., asset management systems) * Custom logic or validation rules * Advanced export workflows The SDK’s plugin architecture ensures you can scale your functionality without rebuilding the core editor. ## Content Libraries[#](#content-libraries) CE.SDK ships with a robust system for managing reusable content: * Built-in libraries of stickers, icons, overlays, and fonts * Integration with third-party providers like Getty Images, Unsplash, or Airtable * Programmatic filtering and categorization * Access assets from both code and UI * Organize by brand, user, or use case This makes it easy to deliver a seamless editing experience—no matter how many assets you manage. --- [Source](https:/img.ly/docs/cesdk/angular/import-media-4e3703) # Import Media --- [Source](https:/img.ly/docs/cesdk/angular/guides-8d8b00) # Guides --- [Source](https:/img.ly/docs/cesdk/angular/filters-and-effects-6f88ac) # Filters and Effects --- [Source](https:/img.ly/docs/cesdk/angular/fills-402ddc) # Fills --- [Source](https:/img.ly/docs/cesdk/angular/file-format-support-3c4b2a) # File Format Support CreativeEditor SDK (CE.SDK) supports a wide range of modern file types for importing assets and exporting final content. Whether you’re working with images, videos, audio, documents, or fonts, CE.SDK provides a client-side editing environment with excellent media compatibility and performance—optimized for modern client-side hardware. This guide outlines supported formats, codecs, and known limitations across media types. ## Importing Media[#](#importing-media) | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. ### SVG Limitations[#](#svg-limitations) CE.SDK uses Skia for SVG parsing and rendering. While most SVG files render correctly, there are some important limitations to be aware of: ### Text Elements[#](#text-elements) * SVG text elements are not supported - any text in SVG files will not be rendered. * Convert text to paths in your vector editor before exporting if text is needed. ### Styling Limitations[#](#styling-limitations) * CSS styles included in SVGs are not supported - use presentation attributes instead. * RGBA color syntax is not supported - use `fill-opacity` and `stroke-opacity` attributes. * When exporting SVGs from design tools, choose the “presentation attributes” option. ### Unsupported SVG Elements[#](#unsupported-svg-elements) The following SVG elements are not supported: * Animation elements (``) * Foreign object (``) * Text-related elements (``, ``, ``) * Script elements (` ``` Text blocks in CE.SDK support the use of emojis. A default emoji font is used to render these independently from the target platform. This guide shows how to change the default font and use emojis in text blocks. ## Change the Default Emoji Font[#](#change-the-default-emoji-font) The default font URI can be changed when another emoji font should be used or when the font should be served from another website, a content delivery network (CDN), or a file path. The preset is to use the [NotoColorEmoji](https://github.com/googlefonts/noto-emoji) font loaded from our [CDN](https://cdn.img.ly/assets/v4/emoji/NotoColorEmoji.ttf). This font file supports a wide variety of Emojis and is licensed under the [Open Font License](https://cdn.img.ly/assets/v4/emoji/LICENSE.txt). The file is relatively small with 9.9 MB but has the emojis stored as PNG images. As an alternative for higher quality emojis, e.g., this [NotoColorEmoji](https://fonts.google.com/noto/specimen/Noto+Color+Emoji) font can be used. This font file supports also a wide variety of Emojis and is licensed under the [SIL Open Font License, Version 1.1](https://fonts.google.com/noto/specimen/Noto+Color+Emoji/license). The file is significantly larger with 24.3 MB but has the emojis stored as vector graphics. In order to change the emoji font URI, call the `setSetting(keypath: string, value: any)` [Editor API](angular/settings-970c98/) with ‘defaultEmojiFontFileUri’ as keypath and the new URI as value. ``` const uri = engine.editor.getSetting('defaultEmojiFontFileUri');// From a bundleengine.editor.setSetting( 'defaultEmojiFontFileUri', 'bundle://ly.img.cesdk/fonts/NotoColorEmoji.ttf');// From a URLengine.editor.setSetting( 'defaultEmojiFontFileUri', 'https://cdn.img.ly/assets/v2/emoji/NotoColorEmoji.ttf'); ``` ## Add a Text Block with an Emoji[#](#add-a-text-block-with-an-emoji) To add a text block with an emoji, add a text block and set the emoji as text content. ``` const text = engine.block.create('text');engine.block.setString(text, 'text/text', 'Text with an emoji 🧐');engine.block.setWidthMode(text, 'Auto');engine.block.setHeightMode(text, 'Auto');engine.block.appendChild(page, text); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); let uri = engine.editor.getSetting('defaultEmojiFontFileUri'); // From a bundle engine.editor.setSetting( 'defaultEmojiFontFileUri', 'bundle://ly.img.cesdk/fonts/NotoColorEmoji.ttf', ); // From a URL engine.editor.setSetting( 'defaultEmojiFontFileUri', 'https://cdn.img.ly/assets/v2/emoji/NotoColorEmoji.ttf', ); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const text = engine.block.create('text'); engine.block.setString(text, 'text/text', 'Text with an emoji 🧐'); engine.block.setWidthMode(text, 'Auto'); engine.block.setHeightMode(text, 'Auto'); engine.block.appendChild(page, text);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/text/edit-c5106b) # Edit Text ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config, document.getElementById('cesdk_canvas')).then( async (instance) => { // Add default assets used in scene. instance.addDefaultAssetSources(); instance.editor.setEditMode('Transform'); instance.editor.onStateChanged(() => { console.log('EditMode is ', instance.editor.getEditMode()); }); document.addEventListener('cesdk-blur', (event) => { const relatedTarget = event.detail; if (focusShouldStayOnEngine(relatedTarget)) { event.preventDefault(); } else if (engineShouldExitTextMode(relatedTarget)) { instance.editor.setEditMode('Transform'); } }); function focusShouldStayOnEngine(newActiveElement) { // When clicking on blank space, don't blur the engine input return newActiveElement == null; } function engineShouldExitTextMode() { return false; } document.addEventListener('cesdk-refocus', (event) => { const relatedTarget = event.detail; if (focusShouldStayOnUI(relatedTarget)) { event.preventDefault(); } }); function focusShouldStayOnUI(newActiveElement) { // User might have clicked a button that opens a dialog // Afterwards we want an input in the dialog to receive focus return newActiveElement?.id === 'open-dialog'; } await instance.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene' ); }); ``` ```
``` In this example, we want to show how to set up text editing in the Headless CreativeEngine. Depending on your use cases, text editing can require a little more complicated setup, because the focus for the user’s keyboard input might need to be managed between the CreativeEngine itself and your UI components. ## Text Edit Mode[#](#text-edit-mode) The Engine always operates in one of three `EditMode`s: * `Transform`: In this mode you can transform blocks in the scene by moving them around, selecting, or resizing them. This is the default mode. * `Crop`: This mode is used when cropping image blocks. * `Text`: Then double-clicking on a text block, the engine switches to this mode to let you edit the text content of a text block. You can query and set the `EditMode` using the EditorAPI’s `getEditMode()` and `setEditMode(mode)` methods. Certain interactions will cause the engine to switch the mode by itself (such as double-clicking on a text block). You get notified of changes in the EditorState using the `onStateChanged` method of the EditorAPI. Inside the callback, use `getEditMode()` to know the current mode. ## Text Editing Focus[#](#text-editing-focus) When the engine enters `Text` mode, it will focus the browser’s input on the text content of the block you are editing. From here, several things can happen: * The user presses `ESC`, clicks somewhere on the canvas outside of the text block, or `Text` mode is ended via a call to `setEditMode('Transform')`. In this case, the browser will blur the text input of the engine, and you are back in the `Transform` mode. * The user focuses a text input field, number input field, text area or a contentEditable element outside of the canvas. In this case the engine will stay in `Text` mode, but will no longer have focus. Keyboard input will now go to the input field that has received focus. * The user clicks on a blank space or any focusable DOM element, that does not require keyboard input. This behavior should be sufficient for most use cases. If your requirements are more complicated, we provide a way to customize what’s happening through events. ## CreativeEngine DOM Events[#](#creativeengine-dom-events) There are currently two types of custom DOM events that the CreativeEngine dispatches on the `canvas` element. You can add a listener for it there or on any of its parent elements. ### `cesdk-blur`[#](#cesdk-blur) When the text input in the engine has been blurred, this event will be dispatched. You can call `preventDefault()` on the event to force focus back to the canvas input. The `event.detail` property will contain a reference to the element that has received focus (if available, otherwise it’s `null`). You can use that element during the decision whether to call `preventDefault()`. A use case for this could be to prevent disabling the text-input heuristic, forcing refocus even if the user clicked on a text input, or to call `editor.setEditMode('Transform')` to exit the text edit mode whenever the input is blurred. ### `cesdk-refocus`[#](#cesdk-refocus) Just before the engine refocuses its text input, you can call `preventDefault()` on this event to prevent this from happening. This event also contains currently focused element (or `null`) it in its `event.detail` property. A use case for this would be to treat a particular input element as if it were a text input and let it keep keyboard focus after it’s been focused. ### Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/assets'}; CreativeEngine.init(config, document.getElementById('cesdk_canvas')).then( async (cesdk) => { // Add default assets used in scene. cesdk.addDefaultAssetSources(); cesdk.editor.setEditMode('Transform'); cesdk.editor.onStateChanged(() => { console.log('EditMode is ', cesdk.editor.getEditMode()); }); document.addEventListener('cesdk-blur', (event) => { const relatedTarget = event.detail; if (focusShouldStayOnEngine(relatedTarget)) { event.preventDefault(); } else if (engineShouldExitTextMode(relatedTarget)) { cesdk.editor.setEditMode('Transform'); } }); function focusShouldStayOnEngine(newActiveElement) { // When clicking on blank space, don't blur the engine input return newActiveElement == null; } function engineShouldExitTextMode() { return false; } document.addEventListener('cesdk-refocus', (event) => { const relatedTarget = event.detail; if (focusShouldStayOnUI(relatedTarget)) { event.preventDefault(); } }); function focusShouldStayOnUI(newActiveElement) { // User might have clicked a button that opens a dialog // Afterwards we want an input in the dialog to receive focus return newActiveElement?.id === 'open-dialog'; } await cesdk.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene' ); }); ``` ## Edit Ranges Within Text Blocks[#](#edit-ranges-within-text-blocks) ``` const text = engine.block.create('text'); engine.block.replaceText(text, 'Hello World');engine.block.removeText(text, 0, 6);engine.block.setTextColor(text, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 1, 4);const colorsInRange = engine.block.getTextColors(text, 2, 5);engine.block.setTextFontWeight(text, 'bold', 0, 5);const fontWeights = engine.block.getTextFontWeights(text);engine.block.setTextFontSize(text, 12, 0, 5);const fontSizes = engine.block.getTextFontSizes(text);engine.block.setTextFontStyle(text, 'italic', 0, 5);const fontStyles = engine.block.getTextFontStyles(text);engine.block.setTextCase(text, 'Titlecase');const textCases = engine.block.getTextCases(text);const canToggleBold = engine.block.canToggleBoldFont(text);const canToggleItalic = engine.block.canToggleItalicFont(text);engine.block.toggleBoldFont(text);engine.block.toggleItalicFont(text);const typefaceAssetResults = await engine.asset.findAssets('ly.img.typeface', { query: 'Open Sans', page: 0, perPage: 100});const typeface = typefaceAssetResults.assets[0].payload.typeface;const font = typeface.fonts.find((font) => font.subFamily === 'Bold');engine.block.setFont(text, font.uri, typeface);engine.block.setTypeface(text, typeface, 2, 5);engine.block.setTypeface(text, typeface);const defaultTypeface = engine.block.getTypeface(text);const typeface = engine.block.getTypefaces(text);const selectedRange = engine.block.getTextCursorRange();engine.block.setTextCursorRange({ from: 0, to: 5 });const lineCount = engine.block.getTextVisibleLineCount(text);const lineBoundingBox = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH( text, 0); ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to edit ranges within text blocks. ``` replaceText(id: DesignBlockId, text: string, from?: number, to?: number): void ``` Inserts the given text into the selected range of the text block. Required scope: ‘text/edit’ * `block`: The text block into which to insert the given text. * `text`: The text which should replace the selected range in the block. * `from`: The start index of the UTF-16 range that should be replaced. If the value is negative, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme that should be replaced by the inserted text. If `from` and `to` are negative, a this will fall back to the end of the entire text range, so the entire text will be replaced. If `to` is negative but `from` is greater than or equal to 0, the text will be inserted at the index defined by `from`. ``` removeText(id: DesignBlockId, from?: number, to?: number): void ``` Removes selected range of text of the given text block. Required scope: ‘text/edit’ * `block`: The text block from which the selected text should be removed. * `from`: The start index of the UTF-16 range that should be removed. If the value is negative, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme that should be removed. If the value is negative, this will fall back to the end of the entire text range. ``` setTextColor(id: DesignBlockId, color: Color, from?: number, to?: number): void ``` Changes the color of the text in the selected range to the given color. Required scope: ‘text/edit’ * `block`: The text block whose color should be changed. * `color`: The new color of the selected text range. * `from`: The start index of the UTF-16 range whose color should be changed. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose color should be changed. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` getTextColors(id: DesignBlockId, from?: number, to?: number): Array ``` Returns the ordered unique list of colors of the text in the selected range. * `block`: The text block whose colors should be returned. * `from`: The start index of the UTF-16 range whose colors should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose colors should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` setTextFontWeight(id: DesignBlockId, fontWeight: FontWeight, from?: number, to?: number): void ``` Changes the weight of the text in the selected range to the given weight. Required scope: ‘text/edit’ * `block`: The text block whose weight should be changed. * `fontWeight`: The new weight of the selected text range. * `from`: The start index of the UTF-16 range whose weight should be changed. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose weight should be changed. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` getTextFontWeights(id: DesignBlockId, from?: number, to?: number): FontWeight[] ``` Returns the ordered unique list of font weights of the text in the selected range. * `block`: The text block whose font weights should be returned. * `from`: The start index of the UTF-16 range whose font weights should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose font weights should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` setTextFontSize(id: DesignBlockId, fontSize: number, from?: number, to?: number): voidsetTextFontSize(id: DesignBlockId, fontSize: number, options?: TextFontSizeOptions): void ``` Sets the given font size for the text block. If the font size is applied to the entire text block, its font size property will be updated. Required scope: ‘text/character’ * `block`: The text block whose font size should be changed. * `fontSize`: The new font size. * `from`: The start index of the UTF-16 range whose font size should be changed. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose font size should be changed. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. * `options`: An optional object with `unit` (‘Point’ or ‘Pixel’), `from`, and `to` properties for more precise control. ``` // Examples with unit supportengine.block.setTextFontSize(text, 16, { unit: 'Pixel' });engine.block.setTextFontSize(text, 24, { unit: 'Point', from: 0, to: 10 }); ``` ``` getTextFontSizes(id: DesignBlockId, from?: number, to?: number): number[]getTextFontSizes(id: DesignBlockId, options?: TextRangeOptions): number[] ``` Returns the ordered unique list of font sizes of the text in the selected range. * `block`: The text block whose font sizes should be returned. * `from`: The start index of the grapheme range whose font sizes should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose font sizes should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. * `options`: An optional object with `unit` (‘Point’ or ‘Pixel’), `from`, and `to` properties to get font sizes in the specified unit. ``` // Example with unit supportconst pixelSizes = engine.block.getTextFontSizes(text, { unit: 'Pixel' });const pointSizes = engine.block.getTextFontSizes(text, { unit: 'Point', from: 0, to: 10}); ``` ``` setTextFontStyle(id: DesignBlockId, fontStyle: FontStyle, from?: number, to?: number): void ``` Changes the style of the text in the selected range to the given style. Required scope: ‘text/edit’ * `block`: The text block whose style should be changed. * `fontStyle`: The new style of the selected text range. * `from`: The start index of the UTF-16 range whose style should be changed. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose style should be changed. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` getTextFontStyles(id: DesignBlockId, from?: number, to?: number): FontStyle[] ``` Returns the ordered unique list of font styles of the text in the selected range. * `block`: The text block whose font styles should be returned. * `from`: The start index of the UTF-16 range whose font styles should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose font styles should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` setTextCase(id: DesignBlockId, textCase: TextCase, from?: number, to?: number): void ``` Sets the given text case for the selected range of text. Required scope: ‘text/character’ * `id`: The text block whose text case should be changed. * `textCase`: The new text case value. * `from`: The start index of the UTF-16 range whose text cases should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose text cases should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` getTextCases(id: DesignBlockId, from?: number, to?: number): TextCase[] ``` Returns the ordered list of text cases of the text in the selected range. * `block`: The text block whose text cases should be returned. * `from`: The start index of the UTF-16 range whose text cases should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose text cases should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` canToggleBoldFont(id: DesignBlockId, from?: number, to?: number): boolean ``` Returns whether the font weight of the given text block can be toggled between bold and normal. If any part of the selected range is not already bold and the necessary bold font is available, then this function returns true. * `id`: The text block whose font weight should be toggled. * `from`: The start index of the UTF-16 range whose font weight should be toggled. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose font weight should be toggled. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. * Returns Whether the font weight of the given block can be toggled between bold and normal. ``` canToggleItalicFont(id: DesignBlockId, from?: number, to?: number): boolean ``` Toggles the bold font style of the given text block. If any part of the selected range is not already italic and the necessary italic font is available, then this function returns true. * `id`: The text block whose font style should be toggled. * `from`: The start index of the UTF-16 range whose font style should be toggled. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose font style should be toggled. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. * Returns Whether the font style of the given block can be toggled between italic and normal. ``` toggleBoldFont(id: DesignBlockId, from?: number, to?: number): void ``` Toggles the font weight of the given text block between bold and normal. If any part of the selected range is not already bold, all of the selected range will become bold. Only if the entire range is already bold will this function toggle it all back to normal. Required scope: ‘text/character’ * `id`: The text block whose font weight should be toggled. * `from`: The start index of the UTF-16 range whose font weight should be toggled. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose font weight should be toggled. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` toggleItalicFont(id: DesignBlockId, from?: number, to?: number): void ``` Toggles the font style of the given text block between italic and normal. If any part of the selected range is not already italic, all of the selected range will become italic. Only if the entire range is already italic will this function toggle it all back to normal. Required scope: ‘text/character’ * `id`: The text block whose font style should be toggled. * `from`: The start index of the UTF-16 range whose font style should be toggled. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose font style should be toggled. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` setFont(id: DesignBlockId, fontFileUri: string, typeface: Typeface): void ``` Sets the given font and typeface for the text block. Existing formatting is reset. Required scope: ‘text/character’ * `id`: The text block whose font should be changed. * `fontFileUri`: The URI of the new font file. * `typeface`: The typeface of the new font. ``` setTypeface(id: DesignBlockId, typeface: Typeface, from?: number, to?: number): void ``` Sets the given typeface for the text block. The current formatting, e.g., bold or italic, is retained as far as possible. Some formatting might change if the new typeface does not support it, e.g. thin might change to light, bold to normal, and/or italic to non-italic. If the typeface is applied to the entire text block, its typeface property will be updated. If a run does not support the new typeface, it will fall back to the default typeface from the typeface property. Required scope: ‘text/character’ * `id`: The text block whose font should be changed. * `typeface`: The new typeface. * `from`: The start index of the UTF-16 range whose typeface should be changed. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose typeface should be changed. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. ``` getTypeface(id: DesignBlockId): Typeface ``` Returns the current typeface of the given text block. * `id`: The text block whose typeface should be queried. * Returns the typeface property of the text block. Does not return the typefaces of the text runs. * Throws An error if the block does not have a valid typeface. ``` getTypefaces(id: DesignBlockId, from?: number, to?: number): Typeface[] ``` Returns the current typefaces of the given text block. * `id`: The text block whose typefaces should be queried. * `from`: The start index of the grapheme range whose typefaces should be returned. If the value is negative and the block is currently being edited, this will fall back to the start of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the start of the entire text range. * `to`: The UTF-16 index after the last grapheme whose typefaces should be returned. If the value is negative and the block is currently being edited, this will fall back to the end of the current cursor index / selected grapheme range. If the value is negative and the block is not being edited, this will fall back to the end of the entire text range. * Returns The typefaces of the text block. * Throws An error if the block does not have a valid typeface. ``` getTextCursorRange(): Range ``` Returns the UTF-16 indices of the selected range of the text block that is currently being edited. If both the start and end index of the returned range have the same value, then the text cursor is positioned at that index. * Returns The selected UTF-16 range or { from: -1, to: -1 } if no text block is currently being edited. ``` setTextCursorRange(range: Range): void ``` Sets the text cursor range (selection) within the text block that is currently being edited. * `range`: The UTF-16 range to set as the selection. If `from` equals `to`, the cursor is positioned at that index. You can use -1 as a shorthand: `{from: -1, to: -1}` selects all text, `{from: -1, to: 5}` selects from start to position 5, and `{from: 5, to: -1}` selects from position 5 to the end. * Throws Error if no text block is currently being edited or if the range is invalid. ``` getTextVisibleLineCount(id: DesignBlockId): number ``` Returns the number of visible lines in the given text block. * `id`: The text block whose line count should be returned. * Returns The number of lines in the text block. ``` getTextVisibleLineGlobalBoundingBoxXYWH(id: DesignBlockId, lineIndex: number): XYWH ``` Returns the bounds of the visible area of the given line of the text block. The values are in the scene’s global coordinate space (which has its origin at the top left). * `id`: The text block whose line bounding box should be returned. * `lineIndex`: The index of the line whose bounding box should be returned. * Returns The bounding box of the line. ## Text Type[#](#text-type) A block for displaying text content. This section describes the properties available for the **Text Type** (`//ly.img.ubq/text`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `alwaysOnBottom` | `Bool` | `false` | If true, this element’s global sorting order is automatically adjusted to be lower than all other siblings. | | `alwaysOnTop` | `Bool` | `false` | If true, this element’s global sorting order is automatically adjusted to be higher than all other siblings. | | `backgroundColor/color` | `Color` | `{"r":0.667,"g":0.667,"b":0.667,"a":1}` | The color of the background. | | `backgroundColor/cornerRadius` | `Float` | `0` | The corner radius of the background. | | `backgroundColor/enabled` | `Bool` | `false` | Whether the background color is enabled. | | `backgroundColor/paddingBottom` | `Float` | `0` | The bottom padding of the background. | | `backgroundColor/paddingLeft` | `Float` | `0` | The left padding of the background. | | `backgroundColor/paddingRight` | `Float` | `0` | The right padding of the background. | | `backgroundColor/paddingTop` | `Float` | `0` | The top padding of the background. | | `blend/mode` | `Enum` | `"Normal"` | The blend mode to use when compositing the block., Possible values: `"PassThrough"`, `"Normal"`, `"Darken"`, `"Multiply"`, `"ColorBurn"`, `"LinearBurn"`, `"DarkenColor"`, `"Lighten"`, `"Screen"`, `"ColorDodge"`, `"LinearDodge"`, `"LightenColor"`, `"Overlay"`, `"SoftLight"`, `"HardLight"`, `"VividLight"`, `"LinearLight"`, `"PinLight"`, `"HardMix"`, `"Difference"`, `"Exclusion"`, `"Subtract"`, `"Divide"`, `"Hue"`, `"Saturation"`, `"Color"`, `"Luminosity"` | | `clipped` | `Bool` | `false` | This component is used to identify elements whose contents and children should be clipped to their bounds. | | `contentFill/mode` | `Enum` | `"Cover"` | Defines how content should be resized to fit its container (e.g., Cover, Contain, Stretch)., Possible values: `"Crop"`, `"Cover"`, `"Contain"` | | `dropShadow/blurRadius/x` | `Float` | `1` | The horizontal blur radius of the drop shadow. | | `dropShadow/blurRadius/y` | `Float` | `1` | The vertical blur radius of the drop shadow. | | `dropShadow/clip` | `Bool` | `false` | Whether the drop shadow should be clipped to the block’s bounds. | | `dropShadow/color` | `Color` | `{"r":0,"g":0,"b":0,"a":0.25}` | The color of the drop shadow. | | `dropShadow/enabled` | `Bool` | `false` | Whether the drop shadow is enabled. | | `dropShadow/offset/x` | `Float` | `1.76777` | The horizontal offset of the drop shadow. | | `dropShadow/offset/y` | `Float` | `1.76777` | The vertical offset of the drop shadow. | | `fill/enabled` | `Bool` | `true` | Whether the fill should be rendered or not. | | `fill/solid/color` | `Color` | `"-"` | The fill color. | | `flip/horizontal` | `Bool` | `"-"` | Whether the block is flipped horizontally. | | `flip/vertical` | `Bool` | `"-"` | Whether the block is flipped vertically. | | `globalBoundingBox/height` | `Float` | `"-"` | The height of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/width` | `Float` | `"-"` | The width of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/x` | `Float` | `"-"` | The x-coordinate of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/y` | `Float` | `"-"` | The y-coordinate of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `height` | `Float` | `100` | The height of the block’s frame. | | `height/mode` | `Enum` | `"Absolute"` | A mode describing how the height dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `highlightEnabled` | `Bool` | `true` | Show highlighting when selected or hovered | | `lastFrame/height` | `Float` | `"-"` | The height of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/width` | `Float` | `"-"` | The width of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/x` | `Float` | `"-"` | The x-coordinate of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/y` | `Float` | `"-"` | The y-coordinate of the block’s frame from the previous layout pass., _(read-only)_ | | `opacity` | `Float` | `1` | The opacity of the block. | | `placeholder/enabled` | `Bool` | `false` | Whether the placeholder behavior is enabled or not. | | `placeholderBehavior/enabled` | `Bool` | `false` | Whether the placeholder behavior is enabled or not. | | `playback/duration` | `Double` | `5` | The duration in seconds for which this block should be visible. | | `playback/timeOffset` | `Double` | `0` | The time in seconds relative to its parent at which this block should first appear. | | `position/x` | `Float` | `0` | The x-coordinate of the block’s origin. | | `position/x/mode` | `Enum` | `"Absolute"` | A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `position/y` | `Float` | `0` | The y-coordinate of the block’s origin. | | `position/y/mode` | `Enum` | `"Absolute"` | A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `rotation` | `Float` | `0` | The rotation of the block in degrees. | | `selected` | `Bool` | `false` | Indicates if the block is currently selected. | | `selectionEnabled` | `Bool` | `true` | Whether the block can be selected in the editor. | | `stroke/color` | `Color` | `{"r":0.67,"g":0.67,"b":0.67,"a":1}` | The color of the stroke. | | `stroke/cornerGeometry` | `Enum` | `"Miter"` | The geometry of the stroke at corners (e.g., Miter, Round, Bevel)., Possible values: `"Bevel"`, `"Miter"`, `"Round"` | | `stroke/enabled` | `Bool` | `false` | Whether the stroke is enabled. | | `stroke/position` | `Enum` | `"Center"` | The position of the stroke relative to the shape’s edge (Inside, Center, Outside)., Possible values: `"Center"`, `"Inner"`, `"Outer"` | | `stroke/style` | `Enum` | `"Solid"` | The style of the stroke (e.g., Solid, Dotted, Dashed)., Possible values: `"Dashed"`, `"DashedRound"`, `"Dotted"`, `"LongDashed"`, `"LongDashedRound"`, `"Solid"` | | `stroke/width` | `Float` | `4.72441` | The width of the stroke. | | `text/automaticFontSizeEnabled` | `Bool` | `false` | Whether the font size should be automatically determined to fit the entire text within the block’s frame. | | `text/clipLinesOutsideOfFrame` | `Bool` | `true` | Whether or not to display lines outside the frame. | | `text/externalReference` | `String` | `""` | An external reference that may hint at the source that was used to populate fontFileURI. | | `text/fontFileUri` | `String` | `""` | The URI of a font file. | | `text/fontSize` | `Float` | `10` | The font size in points. | | `text/hasClippedLines` | `Bool` | `false` | A tag indicating that text lines are outside the block’s frame and are hidden., _(read-only)_ | | `text/horizontalAlignment` | `Enum` | `"Left"` | The horizontal text alignment., Possible values: `"Left"`, `"Right"`, `"Center"` | | `text/letterSpacing` | `Float` | `0` | The letter spacing relative to the original spacing. | | `text/lineHeight` | `Float` | `1` | The line height relative to the font size. | | `text/maxAutomaticFontSize` | `Float` | `-1` | The upper font size limit if the font size is automatically calculated. | | `text/minAutomaticFontSize` | `Float` | `-1` | The lower font size limit if the font size is automatically calculated. | | `text/paragraphSpacing` | `Float` | `0` | The additional spacing between paragraphs relative to the font size. | | `text/text` | `String` | `"Text"` | The text content. | | `text/typeface` | `String` | `""` | The typeface of the font. | | `text/verticalAlignment` | `Enum` | `"Top"` | The vertical text alignment., Possible values: `"Top"`, `"Bottom"`, `"Center"` | | `transformLocked` | `Bool` | `false` | DesignBlocks with this tag can’t be transformed (moved, rotated, scaled, cropped, or flipped). | | `visible` | `Bool` | `true` | If the block is visible in the editor. | | `width` | `Float` | `100` | The width of the block’s frame. | | `width/mode` | `Enum` | `"Absolute"` | A mode describing how the width dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | ## Full Code[#](#full-code-1) Here’s the full code: ``` const text = engine.block.create('text'); engine.block.replaceText(text, 'Hello World');engine.block.removeText(text, 0, 6);engine.block.setTextColor(text, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 1, 4);const colorsInRange = engine.block.getTextColors(text, 2, 5);engine.block.setTextFontWeight(text, 'bold', 0, 5);const fontWeights = engine.block.getTextFontWeights(text);engine.block.setTextFontSize(text, 12, 0, 5);const fontSizes = engine.block.getTextFontSizes(text);engine.block.setTextFontStyle(text, 'italic', 0, 5);const fontStyles = engine.block.getTextFontStyles(text);engine.block.setTextCase(text, 'Titlecase');const textCases = engine.block.getTextCases(text);const canToggleBold = engine.block.canToggleBoldFont(text);const canToggleItalic = engine.block.canToggleItalicFont(text);engine.block.toggleBoldFont(text);engine.block.toggleItalicFont(text);const typefaceAssetResults = await engine.asset.findAssets('ly.img.typeface', { query: 'Open Sans', page: 0, perPage: 100});const typeface = typefaceAssetResults.assets[0].payload.typeface;const font = typeface.fonts.find((font) => font.subFamily === 'Bold');engine.block.setFont(text, font.uri, typeface);engine.block.setTypeface(text, typeface, 2, 5);engine.block.setTypeface(text, typeface);const defaultTypeface = engine.block.getTypeface(text);const typeface = engine.block.getTypefaces(text);const selectedRange = engine.block.getTextCursorRange();engine.block.setTextCursorRange({ from: 0, to: 5 });const lineCount = engine.block.getTextVisibleLineCount(text);const lineBoundingBox = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH( text, 0); ``` --- [Source](https:/img.ly/docs/cesdk/angular/text/custom-fonts-9565b3) # Customize Fonts ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' }), theme: 'light', ui: {}}; CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => { // Do something with the instance of CreativeEditor SDK, for example: // Populate the asset library with default / demo asset sources. instance.addDefaultAssetSources(); instance.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); // Add a custom typeface asset source. instance.engine.asset.addLocalSource('my-custom-typefaces'); instance.engine.asset.addAssetToSource('my-custom-typefaces', { id: 'orbitron', label: { en: 'Orbitron' }, payload: { typeface: { name: 'Orbitron', fonts: [ { uri: `${window.location.protocol}//${window.location.host}/Orbitron-Regular.ttf`, subFamily: 'Regular', weight: 'regular', style: 'normal' }, { uri: `${window.location.protocol}//${window.location.host}/Orbitron-Bold.ttf`, subFamily: 'Bold', weight: 'bold', style: 'normal' } ] } } }); instance.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: ['my-custom-typefaces'] }); await instance.createDesignScene();}); ``` ```
``` The CreativeEditor SDK allows adding text elements to the scene. The available fonts can be controlled by creating custom asset sources and then updating the typeface library entry using the API. Added typefaces are directly accessible from the typeface dropdown in the text inspector: ![](/docs/cesdk/_astro/typefaces-light.BMb5_7Kl_28hgxj.webp) ## Configuring Custom Typefaces[#](#configuring-custom-typefaces) You can define your own typefaces by [creating a custom asset source](angular/import-media/from-remote-source/unsplash-8f31f0/) and then updating the typeface library entry using `cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: [...] })`. Each of the asset objects in the asset source must define a value for its `payload.typeface` property. A typeface consists of the following properties: ``` // Add a custom typeface asset source.instance.engine.asset.addLocalSource('my-custom-typefaces');instance.engine.asset.addAssetToSource('my-custom-typefaces', { id: 'orbitron', label: { en: 'Orbitron' }, payload: { typeface: { name: 'Orbitron', fonts: [ { uri: `${window.location.protocol}//${window.location.host}/Orbitron-Regular.ttf`, subFamily: 'Regular', weight: 'regular', style: 'normal' }, { uri: `${window.location.protocol}//${window.location.host}/Orbitron-Bold.ttf`, subFamily: 'Bold', weight: 'bold', style: 'normal' } ] } }}); ``` * `name: string` the name of the typeface, which is also shown in the dropdown. ``` name: 'Orbitron', ``` * `fonts[]: Object` an array of objects, where each object describes a single font of the typeface. Each font has the following properties: * `uri: string` points at the font file for this font style. Supports `http(s)://` and relative paths which resolve to the `baseURL`. TrueType, OpenType, and WOFF (and WOFF2) formats are supported. * `subFamily: string` of the font. This is an arbitrary string as defined by the font file, e.g. ‘Regular’, ‘ExtraBold Italic’, ‘Book’, ‘Oblique’, etc. It is shown in the style dropdown in the inspector which lets users choose between all fonts of the selected typeface. * `weight: string` of the font. One of `thin`, `extraLight`, `light`, `normal`, `medium`, `semiBold`, `bold`, `extraBold`, `heavy`. Defaults to `normal`. * `style: string` of the font. One of `normal` & `italic`. Defaults to `normal`. ``` fonts: [ { uri: `${window.location.protocol}//${window.location.host}/Orbitron-Regular.ttf`, subFamily: 'Regular', weight: 'regular', style: 'normal' }, { uri: `${window.location.protocol}//${window.location.host}/Orbitron-Bold.ttf`, subFamily: 'Bold', weight: 'bold', style: 'normal' }] ``` ## Removing the Default Typefaces[#](#removing-the-default-typefaces) In case you want to remove all of the default typefaces we ship with the CE.SDK editor, you need to update the typeface library entry to exclude the default asset source `ly.img.typeface`. ``` cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: ['myCustomTypefaces'] // Only include your custom source, excluding 'ly.img.typeface'}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/stickers-and-shapes/overview-ebd6eb) # Overview CreativeEditor SDK (CE.SDK) lets you enrich your designs with **stickers** and **shapes**—two flexible building blocks for visual creativity. * **Stickers** are multi-color, multi-path graphics typically used for icons, emojis, logos, and decorative elements. Stickers cannot be recolored once imported. * **Shapes** are customizable graphical elements—such as rectangles, circles, and polygons—that you can freely recolor and adjust. You can create, edit, and combine stickers and shapes either through the CE.SDK user interface or programmatically using the API. Both elements play essential roles in designing layouts, enhancing branding, and creating marketing graphics. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Stickers vs. Shapes: Key Differences[#](#stickers-vs-shapes-key-differences) | Category | Stickers | Shapes | | --- | --- | --- | | **Color Editing** | Not recolorable after import | Fully recolorable | | **SVG Support** | Multi-color, multi-path SVGs supported | Single-color, single-path SVGs only | | **Canvas Behavior** | Movable, resizable, rotatable | Movable, resizable, rotatable, recolorable | | **Use Cases** | Icons, brand logos, emoji, detailed graphics | Graphical elements, backgrounds, visual framing | When deciding between the two: * Use a **sticker** when you need detailed, multi-colored artwork that remains fixed in appearance. * Use a **shape** when you want design elements you can recolor, style, and adapt dynamically. ## Built-In Stickers and Shapes[#](#built-in-stickers-and-shapes) CE.SDK offers a library of default assets to help you get started quickly. * **Default Stickers**: Common categories such as emojis, badges, symbols, and decorative graphics. * **Default Shapes**: Predefined types including rectangles, circles, polygons, stars, and custom paths. These assets can be inserted directly through the UI or dynamically via the API. ## Custom Stickers and Custom Shapes[#](#custom-stickers-and-custom-shapes) You can also import your own vector sticker and shape assets into CE.SDK: * **Custom Stickers**: * Supported file type: SVG. * Stickers can contain multiple paths and colors. * Once imported, stickers behave like regular sticker assets but cannot be recolored. * **Custom Shapes**: * Supported file type: SVG. * Must consist of a **single path** and **single color**. * Shapes can be recolored, resized, and customized after import. Be mindful of these structural differences when preparing your SVG files. ## Editing Stickers and Shapes[#](#editing-stickers-and-shapes) Once added to a scene, both stickers and shapes are fully interactive on the canvas. * **Editable properties for shapes**: * Fill color * Stroke color and width * Border radius (for certain shapes like rectangles) * Opacity * Rotation * Scaling * **Editable properties for stickers**: * Size * Rotation * Opacity * **Note:** Stickers cannot have their colors changed after import. Both types of elements can be manipulated manually via the UI or programmatically through the CE.SDK API. ## Combining Stickers and Shapes[#](#combining-stickers-and-shapes) CE.SDK allows you to combine multiple stickers or shapes using boolean operations to create new, complex designs. * **Combine**: Merges all selected elements into a single new shape. * **Subtract**: Removes the top element’s area from the bottom element. * **Intersect**: Keeps only the overlapping area of all selected elements. * **Exclude**: Keeps only the non-overlapping parts, removing the intersections. These operations allow you to: * Create custom compound shapes. * Subtract logos or icons from backgrounds. * Design intricate, multi-part layouts from basic elements. After combining, the resulting object behaves like a standard shape or sticker and can be resized, rotated, or styled according to its type. ## Working with Cutouts[#](#working-with-cutouts) **Cutouts**—also called **cutout lines**—define the outline path around an object, often used for printing applications like custom stickers or die-cut designs. In CE.SDK: * You can create cutouts around shapes or stickers. * Cutouts help in generating accurate printable paths or previewing how a sticker would be physically cut. * Cutouts are set in a specific spot color to control advanced print & cutting workflows. Cutouts are an essential tool when preparing designs for production or physical printing workflows. --- [Source](https:/img.ly/docs/cesdk/angular/stickers-and-shapes/create-cutout-384be3) # Create Cutout ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 50, 50, 50, 50); const circle = engine.block.createCutoutFromPath( 'M 0,25 a 25,25 0 1,1 50,0 a 25,25 0 1,1 -50,0 Z' ); engine.block.appendChild(page, circle); engine.block.setFloat(circle, 'cutout/offset', 3.0); engine.block.setEnum(circle, 'cutout/type', 'Dashed'); const square = engine.block.createCutoutFromPath('M 0,0 H 50 V 50 H 0 Z'); engine.block.appendChild(page, square); engine.block.setPositionX(square, 50); engine.block.setFloat(square, 'cutout/offset', 6.0); const union = engine.block.createCutoutFromOperation( [circle, square], 'Union' ); engine.block.appendChild(page, union); engine.block.destroy(circle); engine.block.destroy(square); engine.editor.setSpotColorRGB('CutContour', 0.0, 0.0, 1.0);}); ``` ```
``` Cutouts are a special feature one can use with cuttings printers. When printing a PDF file containing cutouts paths, a cutting printer will cut these paths with a cutter rather than print them with ink. Use cutouts to create stickers, iron on decals, etc. Cutouts can be created from an SVG string describing its underlying shape. Cutouts can also be created from combining multiple existing cutouts using the boolean operations `Union`, `Difference`, `Intersection` and `XOR`. Cutouts have a type property which can take one of two values: `Solid` and `Dashed`. Cutting printers recognize cutouts paths through their specially named spot colors. By default, `Solid` cutouts have the spot color `"CutContour"` to produce a continuous cutting line and `Dashed` cutouts have the spot colors `"PerfCutContour"` to produce a perforated cutting line. You may need to adjust these spot color names for you printer. **Note** Note that the actual color approximation given to the spot color does not affect how the cutting printer interprets the cutout, only how it is rendered. The default color approximations are magenta for “CutContour” and green for “PerfCutContour”. ​Cutouts have an offset property that determines the distance at which the cutout path is rendered from the underlying path set when created. ## Setup the scene[#](#setup-the-scene) We first create a new scene with a new page. ``` document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page');engine.block.setWidth(page, 800);engine.block.setHeight(page, 600);engine.block.appendChild(scene, page);engine.scene.zoomToBlock(page, 50, 50, 50, 50); ``` ## Create cutouts[#](#create-cutouts) Here we add two cutouts. First, a circle of type `Dashed` and with an offset of 3.0. Second, a square of default type `Solid` and an offset of 6.0. ``` const circle = engine.block.createCutoutFromPath( 'M 0,25 a 25,25 0 1,1 50,0 a 25,25 0 1,1 -50,0 Z');engine.block.appendChild(page, circle);engine.block.setFloat(circle, 'cutout/offset', 3.0);engine.block.setEnum(circle, 'cutout/type', 'Dashed'); const square = engine.block.createCutoutFromPath('M 0,0 H 50 V 50 H 0 Z');engine.block.appendChild(page, square);engine.block.setPositionX(square, 50);engine.block.setFloat(square, 'cutout/offset', 6.0); ``` ## Combining multiple cutouts into one[#](#combining-multiple-cutouts-into-one) Here we use the `Union` operation to create a new cutout that consists of the combination of the earlier two cutouts we have created. Note that we destroy the previously created `circle` and `square` cutouts as we don’t need them anymore and we certainly don’t want to printer to cut through those paths as well. When combining multiple cutouts, the resulting cutout will be of the type of the first cutout given and an offset of 0. In this example, since the `circle` cutout is of type `Dashed`, the newly created cutout will also be of type `Dashed`. **Warning** When using the Difference operation, the first cutout is the cutout that is subtracted _from_. For other operations, the order of the cutouts don’t matter. ``` const union = engine.block.createCutoutFromOperation( [circle, square], 'Union');engine.block.appendChild(page, union);engine.block.destroy(circle);engine.block.destroy(square); ``` ## Change the default color for Solid cutouts[#](#change-the-default-color-for-solid-cutouts) For some reason, we’d like the cutouts of type `Solid` to not render as magenta but as blue. Knowing that `"CutContour"` is the spot color associated with `Solid`, we change it RGB approximation to blue. Thought the cutout will render as blue, the printer will still interpret this path as a cutting because of its special spot color name. ``` engine.editor.setSpotColorRGB('CutContour', 0.0, 0.0, 1.0); ``` ## Cutout Type[#](#cutout-type) A block that defines a cutout path for another block. This section describes the properties available for the **Cutout Type** (`//ly.img.ubq/cutout`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `alwaysOnBottom` | `Bool` | `false` | If true, this element’s global sorting order is automatically adjusted to be lower than all other siblings. | | `alwaysOnTop` | `Bool` | `true` | If true, this element’s global sorting order is automatically adjusted to be higher than all other siblings. | | `clipped` | `Bool` | `false` | This component is used to identify elements whose contents and children should be clipped to their bounds. | | `contentFill/mode` | `Enum` | `"Cover"` | Defines how content should be resized to fit its container (e.g., Cover, Contain, Stretch)., Possible values: `"Crop"`, `"Cover"`, `"Contain"` | | `cutout/offset` | `Float` | `0` | The offset from path at which to draw the cutout line. | | `cutout/path` | `String` | `""` | The path string, accepts a subset of SVG path strings. | | `cutout/smoothing` | `Float` | `0` | Pixel threshold by which to round out the path’s corners. | | `cutout/type` | `Enum` | `"Solid"` | The type of cutout line., Possible values: `"Solid"`, `"Dashed"` | | `flip/horizontal` | `Bool` | `"-"` | Whether the block is flipped horizontally. | | `flip/vertical` | `Bool` | `"-"` | Whether the block is flipped vertically. | | `globalBoundingBox/height` | `Float` | `"-"` | The height of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/width` | `Float` | `"-"` | The width of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/x` | `Float` | `"-"` | The x-coordinate of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/y` | `Float` | `"-"` | The y-coordinate of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `height` | `Float` | `100` | The height of the block’s frame. | | `height/mode` | `Enum` | `"Absolute"` | A mode describing how the height dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `highlightEnabled` | `Bool` | `true` | Show highlighting when selected or hovered | | `lastFrame/height` | `Float` | `"-"` | The height of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/width` | `Float` | `"-"` | The width of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/x` | `Float` | `"-"` | The x-coordinate of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/y` | `Float` | `"-"` | The y-coordinate of the block’s frame from the previous layout pass., _(read-only)_ | | `placeholder/enabled` | `Bool` | `false` | Whether the placeholder behavior is enabled or not. | | `placeholderControls/showButton` | `Bool` | `false` | Show the placeholder button. | | `placeholderControls/showOverlay` | `Bool` | `false` | Show the overlay pattern. | | `position/x` | `Float` | `0` | The x-coordinate of the block’s origin. | | `position/x/mode` | `Enum` | `"Absolute"` | A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `position/y` | `Float` | `0` | The y-coordinate of the block’s origin. | | `position/y/mode` | `Enum` | `"Absolute"` | A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `rotation` | `Float` | `0` | The rotation of the block in degrees. | | `selected` | `Bool` | `false` | Indicates if the block is currently selected. | | `selectionEnabled` | `Bool` | `true` | Whether the block can be selected in the editor. | | `transformLocked` | `Bool` | `false` | DesignBlocks with this tag can’t be transformed (moved, rotated, scaled, cropped, or flipped). | | `visible` | `Bool` | `true` | If the block is visible in the editor. | | `width` | `Float` | `100` | The width of the block’s frame. | | `width/mode` | `Enum` | `"Absolute"` | A mode describing how the width dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/assets'}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 50, 50, 50, 50); var circle = engine.block.createCutoutFromPath( 'M 0,25 a 25,25 0 1,1 50,0 a 25,25 0 1,1 -50,0 Z' ); engine.block.appendChild(page, circle); engine.block.setFloat(circle, 'cutout/offset', 3.0); engine.block.setEnum(circle, 'cutout/type', 'Dashed'); var square = engine.block.createCutoutFromPath('M 0,0 H 50 V 50 H 0 Z'); engine.block.appendChild(page, square); engine.block.setPositionX(square, 50); engine.block.setFloat(square, 'cutout/offset', 6.0); var union = engine.block.createCutoutFromOperation([circle, square], 'Union'); engine.block.appendChild(page, union); engine.block.destroy(circle); engine.block.destroy(square); engine.editor.setSpotColorRGB('CutContour', 0.0, 0.0, 1.0);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/stickers-and-shapes/combine-2a9e26) # Combine Shapes Combine multiple shapes using boolean operations to create custom compound designs programmatically. ![Boolean operations demonstration showing Union, Difference, Intersection, and XOR](/docs/cesdk/_astro/browser.hero.CRowjd9m_P2KDy.webp) 8 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-stickers-and-shapes-combine-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-stickers-and-shapes-combine-browser) CE.SDK provides four boolean operations for combining shapes: _Union_, _Difference_, _Intersection_, and _XOR_. These operations work with graphic blocks and text blocks, allowing you to build complex designs from simple primitives. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import { calculateGridLayout } from './utils';import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Load assets and create scene await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true, }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page dimensions before grid calculation engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); // Calculate responsive grid layout for demonstrations const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, { cols: 2, rows: 2, spacing: 20, margin: 20, }); const { blockWidth, blockHeight, getPosition } = layout; // ===== Demonstration 1: Union Operation ===== // Create three equal circles for union demonstration const circleSize = 120; const unionCircle1 = engine.block.create('graphic'); engine.block.setShape( unionCircle1, engine.block.createShape('//ly.img.ubq/shape/ellipse'), ); const unionFill1 = engine.block.createFill('color'); engine.block.setColor(unionFill1, 'fill/color/value', { r: 1.0, g: 0.4, b: 0.4, a: 1.0, }); engine.block.setFill(unionCircle1, unionFill1); engine.block.setWidth(unionCircle1, circleSize); engine.block.setHeight(unionCircle1, circleSize); engine.block.appendChild(page, unionCircle1); const unionCircle2 = engine.block.create('graphic'); engine.block.setShape( unionCircle2, engine.block.createShape('//ly.img.ubq/shape/ellipse'), ); const unionFill2 = engine.block.createFill('color'); engine.block.setColor(unionFill2, 'fill/color/value', { r: 0.4, g: 1.0, b: 0.4, a: 1.0, }); engine.block.setFill(unionCircle2, unionFill2); engine.block.setWidth(unionCircle2, circleSize); engine.block.setHeight(unionCircle2, circleSize); engine.block.appendChild(page, unionCircle2); const unionCircle3 = engine.block.create('graphic'); engine.block.setShape( unionCircle3, engine.block.createShape('//ly.img.ubq/shape/ellipse'), ); const unionFill3 = engine.block.createFill('color'); engine.block.setColor(unionFill3, 'fill/color/value', { r: 0.4, g: 0.4, b: 1.0, a: 1.0, }); engine.block.setFill(unionCircle3, unionFill3); engine.block.setWidth(unionCircle3, circleSize); engine.block.setHeight(unionCircle3, circleSize); engine.block.appendChild(page, unionCircle3); // ===== Demonstration 2: Difference Operation ===== // Create image block for punch-out effect const imageBlock = engine.block.create('graphic'); engine.block.setShape( imageBlock, engine.block.createShape('//ly.img.ubq/shape/rect'), ); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg', ); engine.block.setFill(imageBlock, imageFill); engine.block.setWidth(imageBlock, blockWidth * 0.9); engine.block.setHeight(imageBlock, blockHeight * 0.9); engine.block.appendChild(page, imageBlock); // Create text block for punch-out const textBlock = engine.block.create('text'); engine.block.replaceText(textBlock, 'CUTOUT'); engine.block.setFloat(textBlock, 'text/fontSize', 120); engine.block.setWidth(textBlock, blockWidth * 0.9); engine.block.appendChild(page, textBlock); // ===== Demonstration 3: Intersection Operation ===== // Create two overlapping circles for intersection (20% larger) const intersectCircleSize = circleSize * 1.2; const intersectCircle1 = engine.block.create('graphic'); engine.block.setShape( intersectCircle1, engine.block.createShape('//ly.img.ubq/shape/ellipse'), ); const intersectFill1 = engine.block.createFill('color'); engine.block.setColor(intersectFill1, 'fill/color/value', { r: 1.0, g: 0.6, b: 0.2, a: 1.0, }); engine.block.setFill(intersectCircle1, intersectFill1); engine.block.setWidth(intersectCircle1, intersectCircleSize); engine.block.setHeight(intersectCircle1, intersectCircleSize); engine.block.appendChild(page, intersectCircle1); const intersectCircle2 = engine.block.create('graphic'); engine.block.setShape( intersectCircle2, engine.block.createShape('//ly.img.ubq/shape/ellipse'), ); const intersectFill2 = engine.block.createFill('color'); engine.block.setColor(intersectFill2, 'fill/color/value', { r: 1.0, g: 0.6, b: 0.2, a: 1.0, }); engine.block.setFill(intersectCircle2, intersectFill2); engine.block.setWidth(intersectCircle2, intersectCircleSize); engine.block.setHeight(intersectCircle2, intersectCircleSize); engine.block.appendChild(page, intersectCircle2); // ===== Demonstration 4: XOR Operation ===== // Create two overlapping circles for XOR const xorCircle1 = engine.block.create('graphic'); engine.block.setShape( xorCircle1, engine.block.createShape('//ly.img.ubq/shape/ellipse'), ); const xorFill1 = engine.block.createFill('color'); engine.block.setColor(xorFill1, 'fill/color/value', { r: 1.0, g: 0.8, b: 0.2, a: 1.0, }); engine.block.setFill(xorCircle1, xorFill1); engine.block.setWidth(xorCircle1, 140); engine.block.setHeight(xorCircle1, 140); engine.block.appendChild(page, xorCircle1); const xorCircle2 = engine.block.create('graphic'); engine.block.setShape( xorCircle2, engine.block.createShape('//ly.img.ubq/shape/ellipse'), ); const xorFill2 = engine.block.createFill('color'); engine.block.setColor(xorFill2, 'fill/color/value', { r: 0.2, g: 0.8, b: 1.0, a: 1.0, }); engine.block.setFill(xorCircle2, xorFill2); engine.block.setWidth(xorCircle2, 140); engine.block.setHeight(xorCircle2, 140); engine.block.appendChild(page, xorCircle2); // Position all blocks in grid layout before combining // Position union circles at vertices of equilateral triangle in top-left quadrant const unionPos = getPosition(0); const unionCenterX = unionPos.x + blockWidth / 2; const unionCenterY = unionPos.y + blockHeight / 2; const triangleRadius = 55; // Distance from center to each vertex const halfCircle = circleSize / 2; // Top vertex engine.block.setPositionX(unionCircle1, unionCenterX - halfCircle); engine.block.setPositionY(unionCircle1, unionCenterY - triangleRadius - halfCircle); // Bottom-right vertex (angle -30°) engine.block.setPositionX(unionCircle2, unionCenterX + triangleRadius * 0.866 - halfCircle); engine.block.setPositionY(unionCircle2, unionCenterY + triangleRadius * 0.5 - halfCircle); // Bottom-left vertex (angle 210°) engine.block.setPositionX(unionCircle3, unionCenterX - triangleRadius * 0.866 - halfCircle); engine.block.setPositionY(unionCircle3, unionCenterY + triangleRadius * 0.5 - halfCircle); // Center image in top-right quadrant, then center text on image const diffPos = getPosition(1); const imageX = diffPos.x + (blockWidth - engine.block.getWidth(imageBlock)) / 2; const imageY = diffPos.y + (blockHeight - engine.block.getHeight(imageBlock)) / 2; engine.block.setPositionX(imageBlock, imageX); engine.block.setPositionY(imageBlock, imageY); // Center text on the image block (not the quadrant) const textX = imageX + (engine.block.getWidth(imageBlock) - engine.block.getWidth(textBlock)) / 2; const textY = imageY + (engine.block.getHeight(imageBlock) - engine.block.getHeight(textBlock)) / 2; engine.block.setPositionX(textBlock, textX); engine.block.setPositionY(textBlock, textY); // Center intersection circles in bottom-left quadrant with vertical overlap const intersectPos = getPosition(2); const intersectCenterX = intersectPos.x + blockWidth / 2; const intersectCenterY = intersectPos.y + blockHeight / 2; const halfIntersectCircle = intersectCircleSize / 2; // Position circles to overlap vertically by about 50% (72px offset for 144px circles) engine.block.setPositionX(intersectCircle1, intersectCenterX - halfIntersectCircle); engine.block.setPositionY(intersectCircle1, intersectCenterY - halfIntersectCircle - 36); engine.block.setPositionX(intersectCircle2, intersectCenterX - halfIntersectCircle); engine.block.setPositionY(intersectCircle2, intersectCenterY - halfIntersectCircle + 36); // Center XOR circles in bottom-right quadrant const xorPos = getPosition(3); const xorCenterX = xorPos.x + blockWidth / 2; const xorCenterY = xorPos.y + blockHeight / 2; engine.block.setPositionX(xorCircle1, xorCenterX - 70); engine.block.setPositionY(xorCircle1, xorCenterY - 70); engine.block.setPositionX(xorCircle2, xorCenterX - 14); engine.block.setPositionY(xorCircle2, xorCenterY - 42); // Perform boolean operations // Check if blocks can be combined before attempting operations const canCombineUnion = engine.block.isCombinable([ unionCircle1, unionCircle2, unionCircle3, ]); const canCombineDiff = engine.block.isCombinable([imageBlock, textBlock]); const canCombineIntersect = engine.block.isCombinable([ intersectCircle1, intersectCircle2, ]); const canCombineXor = engine.block.isCombinable([xorCircle1, xorCircle2]); // Combine three circles using Union operation if (canCombineUnion) { engine.block.combine([unionCircle1, unionCircle2, unionCircle3], 'Union'); } // Create punch-out effect using Difference operation // Ensure image is at the bottom (will be the base block) if (canCombineDiff) { engine.block.sendToBack(imageBlock); engine.block.combine([imageBlock, textBlock], 'Difference'); } // Extract overlapping area using Intersection operation if (canCombineIntersect) { engine.block.combine([intersectCircle1, intersectCircle2], 'Intersection'); } // Create exclusion pattern using XOR operation if (canCombineXor) { engine.block.combine([xorCircle1, xorCircle2], 'XOR'); } // Zoom to fit all demonstrations await engine.scene.zoomToBlock(page, { padding: 40 }); }} export default Example; ``` This guide covers checking combinability, applying the four boolean operations, understanding fill inheritance, and troubleshooting common combination issues. ## Understanding Boolean Operations[#](#understanding-boolean-operations) CE.SDK offers four boolean operations for combining blocks into new shapes. Each operation applies geometric transformations to create unique compound designs. **Union** merges all blocks into a single shape, adding their areas together. **Difference** subtracts overlapping areas from a base block, creating cutouts. **Intersection** keeps only the overlapping regions. **XOR** removes overlaps while preserving non-overlapping parts. The operations use `engine.block.combine(ids, operation)` where `ids` is an array of blocks and `operation` is one of: `'Union'`, `'Difference'`, `'Intersection'`, or `'XOR'`. Combining blocks with the `'Union'`, `'Intersection'`, or `'XOR'` operation results in a new block whose fill is that of the top-most block. The operation is applied pair-wise from the top-most block to the bottom-most block. Combining blocks with the `'Difference'` operation results in a new block whose fill is that of the bottom-most block. The operation is applied pair-wise from the bottom-most block to the top-most block. The combined blocks will be destroyed if the `'lifecycle/destroy'` scope is enabled. **Only the following blocks can be combined** * A graphics block * A text block ## Checking Combinability[#](#checking-combinability) Before combining blocks, verify they can be combined using `engine.block.isCombinable(ids)`. Only graphic blocks and text blocks with the `'lifecycle/duplicate'` scope enabled can be combined. ``` // Check if blocks can be combined before attempting operationsconst canCombineUnion = engine.block.isCombinable([ unionCircle1, unionCircle2, unionCircle3,]);const canCombineDiff = engine.block.isCombinable([imageBlock, textBlock]);const canCombineIntersect = engine.block.isCombinable([ intersectCircle1, intersectCircle2,]);const canCombineXor = engine.block.isCombinable([xorCircle1, xorCircle2]); ``` The check returns `true` if all blocks meet the requirements. Attempting to combine incompatible blocks will fail. ## Combining with Union[#](#combining-with-union) Union merges multiple shapes into one compound outline. The result inherits the fill from the top-most block in the z-order. ``` // Combine three circles using Union operationif (canCombineUnion) { engine.block.combine([unionCircle1, unionCircle2, unionCircle3], 'Union');} ``` We create three circles with different colors. Union combines them into a single block with the blue fill (from the top-most circle). Use Union for merging logos, creating compound icons, and building complex shapes from simple primitives. ## Combining with Difference[#](#combining-with-difference) Difference subtracts overlapping shapes from a base block, creating cutout effects. The result inherits the fill from the bottom-most block. ``` // Create punch-out effect using Difference operation// Ensure image is at the bottom (will be the base block)if (canCombineDiff) { engine.block.sendToBack(imageBlock); engine.block.combine([imageBlock, textBlock], 'Difference');} ``` We position an image as the bottom block and text above it. Difference removes the text shape from the image, creating a punch-out effect where the text was. Use Difference for text punch-outs, logo cutouts, and mask effects. Ensure the base block is at the bottom using `engine.block.sendToBack()`. ## Combining with Intersection[#](#combining-with-intersection) Intersection keeps only the overlapping areas of all blocks. The result inherits the fill from the bottom-most block. ``` // Extract overlapping area using Intersection operationif (canCombineIntersect) { engine.block.combine([intersectCircle1, intersectCircle2], 'Intersection');} ``` We create two overlapping circles. Intersection extracts only the area where they overlap, discarding the rest. Use Intersection for lens effects, overlapping patterns, and extracting geometric intersections. ## Combining with XOR[#](#combining-with-xor) XOR (exclusive OR) keeps non-overlapping parts while removing intersections, creating an exclusion or donut effect. The result inherits the fill from the top-most block. ``` // Create exclusion pattern using XOR operationif (canCombineXor) { engine.block.combine([xorCircle1, xorCircle2], 'XOR');} ``` We create two overlapping circles. XOR removes the overlapping area while preserving the non-overlapping parts. Use XOR for donut shapes, exclusion patterns, and inverted overlaps. ## Understanding Fill Inheritance[#](#understanding-fill-inheritance) Combined blocks inherit properties from a prioritized block based on the operation. **Union, Intersection, XOR**: The new block inherits the fill from the top-most block. Operations are applied pair-wise from highest to lowest sort order. **Difference**: The new block inherits the fill from the bottom-most block. Operations are applied pair-wise from lowest to highest sort order. Original blocks are destroyed after combination if the `'lifecycle/destroy'` scope is enabled. Control which fill is inherited by reordering blocks with `engine.block.bringToFront()` and `engine.block.sendToBack()`. ## Scope Requirements[#](#scope-requirements) Combining blocks requires specific scopes: **`'lifecycle/duplicate'`**: Required on all blocks. Checked by `engine.block.isCombinable()`. If missing, combination fails. **`'lifecycle/destroy'`**: Required for destroying original blocks. If disabled, original blocks remain after combination. Check scopes with `engine.block.isScopeEnabled(id, scope)` and enable with `engine.block.setScopeEnabled(id, scope, true)`. ## Troubleshooting[#](#troubleshooting) ### Combination Fails Silently[#](#combination-fails-silently) Verify blocks are combinable using `engine.block.isCombinable(ids)` before attempting operations. Only graphic blocks and text blocks can be combined. Check that the `'lifecycle/duplicate'` scope is enabled on all blocks. ### Original Blocks Not Destroyed[#](#original-blocks-not-destroyed) Ensure the `'lifecycle/destroy'` scope is enabled on input blocks. If disabled, blocks remain after combination. Check with `engine.block.isScopeEnabled(id, 'lifecycle/destroy')`. ### Wrong Fill on Result[#](#wrong-fill-on-result) For Union/Intersection/XOR, the top-most block’s fill is inherited. For Difference, the bottom-most block’s fill is inherited. Reorder blocks before combining using `engine.block.bringToFront()` or `engine.block.sendToBack()`. ### Unexpected Shape Result[#](#unexpected-shape-result) Boolean operations are applied pair-wise in specific order. Union/Intersection/XOR start with the highest sort order (top-most). Difference starts with the lowest sort order (bottom-most). Control order with z-order methods. ## Full Code[#](#full-code) Here’s the complete implementation showing all four boolean operations: ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; const config = { license: 'YOUR_CESDK_LICENSE_KEY', callbacks: { onUpload: 'local' }}; const cesdk = await CreativeEditorSDK.create('#cesdk_container', config); await cesdk.addDefaultAssetSources();await cesdk.addDemoAssetSources({ sceneMode: 'Design' });await cesdk.createDesignScene(); const engine = cesdk.engine;const page = engine.block.findByType('page')[0]; engine.block.setWidth(page, 800);engine.block.setHeight(page, 600); const pageWidth = engine.block.getWidth(page);const pageHeight = engine.block.getHeight(page);const quadrantWidth = pageWidth / 2;const quadrantHeight = pageHeight / 2; // Union: Combine three circles in top-left quadrant (20% larger, centered)const circle1 = engine.block.create('graphic');engine.block.setShape(circle1, engine.block.createShape('//ly.img.ubq/shape/ellipse'));const fill1 = engine.block.createFill('color');engine.block.setColor(fill1, 'fill/color/value', { r: 1.0, g: 0.4, b: 0.4, a: 1.0 });engine.block.setFill(circle1, fill1);engine.block.setWidth(circle1, 96); // 80 * 1.2 = 96engine.block.setHeight(circle1, 96);engine.block.setPositionX(circle1, quadrantWidth / 2 - 48);engine.block.setPositionY(circle1, quadrantHeight / 2 - 48);engine.block.appendChild(page, circle1); const circle2 = engine.block.create('graphic');engine.block.setShape(circle2, engine.block.createShape('//ly.img.ubq/shape/ellipse'));const fill2 = engine.block.createFill('color');engine.block.setColor(fill2, 'fill/color/value', { r: 0.4, g: 1.0, b: 0.4, a: 1.0 });engine.block.setFill(circle2, fill2);engine.block.setWidth(circle2, 96); // 80 * 1.2 = 96engine.block.setHeight(circle2, 96);engine.block.setPositionX(circle2, quadrantWidth / 2 + 24);engine.block.setPositionY(circle2, quadrantHeight / 2 - 48);engine.block.appendChild(page, circle2); const circle3 = engine.block.create('graphic');engine.block.setShape(circle3, engine.block.createShape('//ly.img.ubq/shape/ellipse'));const fill3 = engine.block.createFill('color');engine.block.setColor(fill3, 'fill/color/value', { r: 0.4, g: 0.4, b: 1.0, a: 1.0 });engine.block.setFill(circle3, fill3);engine.block.setWidth(circle3, 120); // 100 * 1.2 = 120engine.block.setHeight(circle3, 120);engine.block.setPositionX(circle3, quadrantWidth / 2 - 12);engine.block.setPositionY(circle3, quadrantHeight / 2 - 12);engine.block.appendChild(page, circle3); // Check combinability and perform Unionif (engine.block.isCombinable([circle1, circle2, circle3])) { const unionResult = engine.block.combine([circle1, circle2, circle3], 'Union');} // Difference: Create punch-out text effect in top-right quadrantconst imageWidth = 360; // 300 * 1.2 = 360const imageHeight = 240; // 200 * 1.2 = 240const imageBlock = engine.block.create('graphic');engine.block.setShape(imageBlock, engine.block.createShape('//ly.img.ubq/shape/rect'));const imageFill = engine.block.createFill('image');engine.block.setString(imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg');engine.block.setFill(imageBlock, imageFill);engine.block.setWidth(imageBlock, imageWidth);engine.block.setHeight(imageBlock, imageHeight);engine.block.setPositionX(imageBlock, quadrantWidth + (quadrantWidth - imageWidth) / 2);engine.block.setPositionY(imageBlock, (quadrantHeight - imageHeight) / 2);engine.block.appendChild(page, imageBlock); const textBlock = engine.block.create('text');engine.block.replaceText(textBlock, 'CUTOUT');engine.block.setFloat(textBlock, 'text/fontSize', 170);const textWidth = 300;const textHeight = 120;engine.block.setWidth(textBlock, textWidth);engine.block.setHeight(textBlock, textHeight);// Center text on the imageengine.block.setPositionX(textBlock, quadrantWidth + (quadrantWidth - textWidth) / 2);engine.block.setPositionY(textBlock, (quadrantHeight - textHeight) / 2);engine.block.appendChild(page, textBlock); // Ensure image is at bottom for Difference operationengine.block.sendToBack(imageBlock); if (engine.block.isCombinable([imageBlock, textBlock])) { const differenceResult = engine.block.combine([imageBlock, textBlock], 'Difference');} // Zoom to see all resultsawait engine.scene.zoomToBlock(page, { padding: 40 }); ``` ## API Reference[#](#api-reference) | Method | Category | Purpose | | --- | --- | --- | | `engine.block.isCombinable(ids)` | Validation | Check if blocks can be combined | | `engine.block.combine(ids, op)` | Combination | Perform boolean operation on blocks | | `engine.block.create('graphic')` | Creation | Create graphic block for shapes | | `engine.block.create('text')` | Creation | Create text block | | `engine.block.createShape(type)` | Shapes | Create shape (ellipse, rect, etc.) | | `engine.block.setShape(id, shape)` | Shapes | Apply shape to graphic block | | `engine.block.createFill(type)` | Fills | Create fill (color, image, etc.) | | `engine.block.setFill(id, fill)` | Fills | Apply fill to block | | `engine.block.setPositionX/Y(id, val)` | Transform | Position blocks before combining | | `engine.block.setWidth/Height(id, val)` | Transform | Size blocks before combining | | `engine.block.appendChild(parent, child)` | Hierarchy | Add blocks to scene | | `engine.block.isScopeEnabled(id, scope)` | Scope | Check if scope is enabled | | `engine.block.setScopeEnabled(id, scope, enabled)` | Scope | Enable/disable scope | | `engine.block.bringToFront(id)` | Order | Control stacking order | | `engine.block.sendToBack(id)` | Order | Control stacking order | --- [Source](https:/img.ly/docs/cesdk/angular/rules/overview-e27832) # Overview In CreativeEditor SDK (CE.SDK), _rules_—referred to as **scopes** in the API and code—are automated validations that help enforce design and layout standards during editing. You can use scopes to maintain brand guidelines, ensure print readiness, moderate content, and enhance the overall editing experience. Scopes can be applied to both designs and videos, helping you deliver high-quality outputs while reducing the risk of common mistakes. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Understanding Rules in CE.SDK[#](#understanding-rules-in-cesdk) CE.SDK’s Rules system (scopes in code) can enable you to build validation logic to enforce a wide range of design and content requirements automatically. Here are some examples of what can be built on top of the SDK: * **Design constraints:** * Minimum image resolution * No elements placed outside visible canvas bounds * **Brand guidelines:** * Approved fonts, colors, and logo usage * **Print-readiness:** * Safe zones for trimming * Bleed margin requirements * High-resolution assets for print * **Content moderation:** * Flagging potentially inappropriate images or text * **UI-specific constraints:** * Safe zones to prevent critical content from being obscured by app UI elements * **Video editing rules:** * Enforcing required trimming * Protecting key content regions ## How Rules Work[#](#how-rules-work) Validation with scopes happens continuously and automatically in the background as users edit their designs or videos. When a rule (scope) violation occurs, the SDK immediately notifies the user without requiring manual checks. If the user corrects an issue (for example, by replacing a low-resolution image), the related notification clears automatically without needing a manual refresh or revalidation step. This dynamic, always-on validation keeps the editing workflow smooth and responsive. ## Automatic Notifications[#](#automatic-notifications) When a scope is violated, CE.SDK surfaces a notification directly in the user interface. Notifications provide clear feedback and guide users to correct issues easily. * **Severity indicators:** * **Critical errors** are shown in red (e.g., content outside the printable area) * **Warnings** are shown in yellow (e.g., low-resolution image detected) * **Actionable feedback:** * Clicking a notification brings the user directly to the affected element. * Users can quickly resolve issues without needing technical expertise. This system simplifies workflows, especially for users who are not familiar with technical print requirements or detailed layout standards. ## Benefits of Using Rules[#](#benefits-of-using-rules) Integrating scopes into your CE.SDK experience offers multiple advantages: * **Reduce errors:** Minimize risks of misprints, layout problems, and brand inconsistency. * **Automatic compliance:** Validate designs and videos in real time without disrupting the creative process. * **Professional results:** Help users — including those without technical or print knowledge — achieve polished, production-ready outputs. * **Streamlined workflows:** Speed up editing and reduce manual review by surfacing issues early and clearly. By leveraging scopes, you can ensure a higher standard of quality, consistency, and reliability across all designs created with CE.SDK. --- [Source](https:/img.ly/docs/cesdk/angular/rules/moderate-content-d5ff7e) # Moderate Content Use CE.SDK’s engine APIs to extract images and text from designs, then integrate with third-party moderation services to detect inappropriate content. 8 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-rules-moderate-content-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-rules-moderate-content-browser) ![Content moderation example showing a design with validation results panel displaying moderation checks for images and text](/docs/cesdk/_astro/browser.hero.DIbmfvcm_Z2wVzdo.webp) CE.SDK does not provide prebuilt content moderation workflows. Instead, it provides powerful engine APIs that make it straightforward to extract images and text from designs for moderation by third-party services of your choice. This approach is intentional: content moderation requirements are highly specific to each business, including which categories to check, what thresholds to apply, and which services to use. Similarly, when and where to check content (during editing, before export, on upload) varies based on your workflow and user experience goals. Content moderation helps maintain quality standards and comply with content policies. Unlike built-in validation rules that check technical aspects like resolution or layout, content moderation requires integration with external AI-powered services (Sightengine, AWS Rekognition, OpenAI Moderation API) to analyze visual content (images for weapons, drugs, nudity) and textual content (profanity, hate speech, threats). ``` import type { EditorPlugin, EditorPluginContext, CreativeEngine} from '@cesdk/cesdk-js';import packageJson from './package.json'; // Type definitions for content moderationinterface ImageBlockData { blockId: number; url: string; blockType: string; blockName: string;} interface TextBlockData { blockId: number; text: string; blockType: string; blockName: string;} interface ContentCategory { name: string; description: string; state: 'success' | 'warning' | 'failed';} interface ValidationResult extends ContentCategory { blockId: number; blockType: string; blockName: string; id: string; url?: string; // For image blocks text?: string; // For text blocks} // Mock moderation cachesconst imageCache: Record = {};const textCache: Record = {}; /** * CE.SDK Plugin: Content Moderation Guide * * Demonstrates implementing automated content moderation for both images and text */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; engine.block.setWidth(page, 1200); engine.block.setHeight(page, 800); const pageHeight = engine.block.getHeight(page); // Create a single sample image const imageWidth = 500; const imageHeight = 400; const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { size: { width: imageWidth, height: imageHeight } }); // Position image in center-left engine.block.setPositionX(imageBlock, 100); engine.block.setPositionY(imageBlock, (pageHeight - imageHeight) / 2); engine.block.appendChild(page, imageBlock); const textBlock = engine.block.create('text'); engine.block.setString( textBlock, 'text/text', 'Sample text content for moderation testing' ); // Position text on the right side of the image engine.block.setPositionX(textBlock, 650); engine.block.setPositionY(textBlock, (pageHeight - 120) / 2); engine.block.setWidth(textBlock, 450); engine.block.setHeight(textBlock, 120); // Make text larger and more readable engine.block.setFloat(textBlock, 'text/fontSize', 48); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Left'); engine.block.appendChild(page, textBlock); await this.demonstrateContentModeration(engine); // Zoom to fit the entire page in the viewport await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } private async demonstrateContentModeration( engine: CreativeEngine ): Promise { // Check both images and text const imageResults = await this.checkImageContent(engine); const textResults = await this.checkTextContent(engine); const allResults = [...imageResults, ...textResults]; // eslint-disable-next-line no-console console.log(`Total moderation checks: ${allResults.length}`); const failed = allResults.filter((r) => r.state === 'failed'); const warnings = allResults.filter((r) => r.state === 'warning'); const passed = allResults.filter((r) => r.state === 'success'); // eslint-disable-next-line no-console console.log('Validation Summary:'); // eslint-disable-next-line no-console console.log(` Violations: ${failed.length}`); // eslint-disable-next-line no-console console.log(` Warnings: ${warnings.length}`); // eslint-disable-next-line no-console console.log(` Passed: ${passed.length}`); if (failed.length > 0) { const blockToSelect = failed[0].blockId; engine.block .findAllSelected() .forEach((id) => engine.block.setSelected(id, false)); engine.block.setSelected(blockToSelect, true); } } /** * Extracts the image URL from a block's fill property */ private getImageUrl(engine: CreativeEngine, blockId: number): string | null { try { const imageFill = engine.block.getFill(blockId); const fillImageURI = engine.block.getString( imageFill, 'fill/image/imageFileURI' ); if (fillImageURI) { return fillImageURI; } const sourceSet = engine.block.getSourceSet( imageFill, 'fill/image/sourceSet' ); if (sourceSet && sourceSet.length > 0) { return sourceSet[0].uri; } return null; } catch (error) { return null; } } /** * Extracts text content from a text block */ private getTextContent(engine: CreativeEngine, blockId: number): string { try { return engine.block.getString(blockId, 'text/text'); } catch (error) { return ''; } } /** * Checks all images in the design for inappropriate content */ private async checkImageContent( engine: CreativeEngine ): Promise { const imageBlockIds = engine.block.findByKind('image'); const imageBlocksData: ImageBlockData[] = imageBlockIds .map((blockId) => ({ blockId, url: this.getImageUrl(engine, blockId), blockType: engine.block.getType(blockId), blockName: engine.block.getName(blockId) })) .filter((data) => data.url !== null) as ImageBlockData[]; const imagesWithValidity = await Promise.all( imageBlocksData.map(async (imageBlockData) => { const categories = await this.checkImageContentAPI(imageBlockData.url); return categories.map((checkResult) => ({ ...checkResult, blockId: imageBlockData.blockId, blockType: imageBlockData.blockType, blockName: imageBlockData.blockName, url: imageBlockData.url, id: `${imageBlockData.blockId}-${checkResult.name}` })); }) ); return imagesWithValidity.flat(); } /** * Checks all text blocks in the design for inappropriate content */ private async checkTextContent( engine: CreativeEngine ): Promise { const textBlockIds = engine.block.findByType('//ly.img.ubq/text'); const textBlocksData: TextBlockData[] = textBlockIds .map((blockId) => ({ blockId, text: this.getTextContent(engine, blockId), blockType: engine.block.getType(blockId), blockName: engine.block.getName(blockId) })) .filter((data) => data.text.trim().length > 0); const textsWithValidity = await Promise.all( textBlocksData.map(async (textBlockData) => { const categories = await this.checkTextContentAPI(textBlockData.text); return categories.map((checkResult) => ({ ...checkResult, blockId: textBlockData.blockId, blockType: textBlockData.blockType, blockName: textBlockData.blockName, text: textBlockData.text, id: `${textBlockData.blockId}-${checkResult.name}` })); }) ); return textsWithValidity.flat(); } /** * Simulates an image content moderation API call */ private async checkImageContentAPI(url: string): Promise { if (imageCache[url]) { return imageCache[url]; } await new Promise((resolve) => setTimeout(resolve, 100)); const results: ContentCategory[] = [ { name: 'Weapons', description: 'Handguns, rifles, machine guns, threatening knives', state: this.percentageToState(Math.random() * 0.3) }, { name: 'Alcohol', description: 'Wine, beer, cocktails, champagne', state: this.percentageToState(Math.random() * 0.4) }, { name: 'Drugs', description: 'Cannabis, syringes, glass pipes, bongs, pills', state: this.percentageToState(Math.random() * 0.2) }, { name: 'Nudity', description: 'Raw or partial nudity', state: this.percentageToState(Math.random() * 0.3) } ]; imageCache[url] = results; return results; } /** * Simulates a text content moderation API call */ private async checkTextContentAPI(text: string): Promise { if (textCache[text]) { return textCache[text]; } await new Promise((resolve) => setTimeout(resolve, 100)); const results: ContentCategory[] = [ { name: 'Profanity', description: 'Offensive or vulgar language', state: this.percentageToState(Math.random() * 0.3) }, { name: 'Hate Speech', description: 'Content promoting hatred or discrimination', state: this.percentageToState(Math.random() * 0.2) }, { name: 'Threats', description: 'Threatening or violent language', state: this.percentageToState(Math.random() * 0.1) } ]; textCache[text] = results; return results; } /** * Maps confidence scores to validation states */ private percentageToState( percentage: number ): 'success' | 'warning' | 'failed' { if (percentage > 0.8) { return 'failed'; } else if (percentage > 0.4) { return 'warning'; } else { return 'success'; } }} export default Example; ``` This guide demonstrates how to use CE.SDK’s engine APIs to find and extract content from designs, send it to moderation APIs, and display validation results. ## Finding Content in Designs[#](#finding-content-in-designs) Locate all images and text blocks, then extract the data needed for moderation. **Images**: Use `findByKind('image')` to find image blocks, then extract URLs from fill properties: ``` /** * Extracts the image URL from a block's fill property */private getImageUrl(engine: CreativeEngine, blockId: number): string | null { try { const imageFill = engine.block.getFill(blockId); const fillImageURI = engine.block.getString( imageFill, 'fill/image/imageFileURI' ); if (fillImageURI) { return fillImageURI; } const sourceSet = engine.block.getSourceSet( imageFill, 'fill/image/sourceSet' ); if (sourceSet && sourceSet.length > 0) { return sourceSet[0].uri; } return null; } catch (error) { return null; }} ``` Process all images by checking each URL against the moderation API: ``` /** * Checks all images in the design for inappropriate content */private async checkImageContent( engine: CreativeEngine): Promise { const imageBlockIds = engine.block.findByKind('image'); const imageBlocksData: ImageBlockData[] = imageBlockIds .map((blockId) => ({ blockId, url: this.getImageUrl(engine, blockId), blockType: engine.block.getType(blockId), blockName: engine.block.getName(blockId) })) .filter((data) => data.url !== null) as ImageBlockData[]; const imagesWithValidity = await Promise.all( imageBlocksData.map(async (imageBlockData) => { const categories = await this.checkImageContentAPI(imageBlockData.url); return categories.map((checkResult) => ({ ...checkResult, blockId: imageBlockData.blockId, blockType: imageBlockData.blockType, blockName: imageBlockData.blockName, url: imageBlockData.url, id: `${imageBlockData.blockId}-${checkResult.name}` })); }) ); return imagesWithValidity.flat();} ``` **Text**: Use `findByType('//ly.img.ubq/text')` to find text blocks, then extract content using `getString()`: ``` /** * Extracts text content from a text block */private getTextContent(engine: CreativeEngine, blockId: number): string { try { return engine.block.getString(blockId, 'text/text'); } catch (error) { return ''; }} ``` Process all text blocks by checking each text string against the moderation API: ``` /** * Checks all text blocks in the design for inappropriate content */private async checkTextContent( engine: CreativeEngine): Promise { const textBlockIds = engine.block.findByType('//ly.img.ubq/text'); const textBlocksData: TextBlockData[] = textBlockIds .map((blockId) => ({ blockId, text: this.getTextContent(engine, blockId), blockType: engine.block.getType(blockId), blockName: engine.block.getName(blockId) })) .filter((data) => data.text.trim().length > 0); const textsWithValidity = await Promise.all( textBlocksData.map(async (textBlockData) => { const categories = await this.checkTextContentAPI(textBlockData.text); return categories.map((checkResult) => ({ ...checkResult, blockId: textBlockData.blockId, blockType: textBlockData.blockType, blockName: textBlockData.blockName, text: textBlockData.text, id: `${textBlockData.blockId}-${checkResult.name}` })); }) ); return textsWithValidity.flat();} ``` Both processes use `Promise.all()` to handle multiple items concurrently. ## Integrating Moderation APIs[#](#integrating-moderation-apis) Integrate external AI services (Sightengine, AWS Rekognition, OpenAI Moderation API) to analyze content. Always proxy API requests through your backend to protect credentials. **Image Moderation** — This example shows a simulated API call that you’ll replace with your actual moderation service. The function returns content categories with confidence scores: ``` /** * Simulates an image content moderation API call */private async checkImageContentAPI(url: string): Promise { if (imageCache[url]) { return imageCache[url]; } await new Promise((resolve) => setTimeout(resolve, 100)); const results: ContentCategory[] = [ { name: 'Weapons', description: 'Handguns, rifles, machine guns, threatening knives', state: this.percentageToState(Math.random() * 0.3) }, { name: 'Alcohol', description: 'Wine, beer, cocktails, champagne', state: this.percentageToState(Math.random() * 0.4) }, { name: 'Drugs', description: 'Cannabis, syringes, glass pipes, bongs, pills', state: this.percentageToState(Math.random() * 0.2) }, { name: 'Nudity', description: 'Raw or partial nudity', state: this.percentageToState(Math.random() * 0.3) } ]; imageCache[url] = results; return results;} ``` In production, replace the simulated logic with a real API call to your backend endpoint that proxies requests to services like Sightengine or AWS Rekognition. **Text Moderation** — Similar to image moderation, this simulates an API call that checks text content. Replace this with your actual text moderation service: ``` /** * Simulates a text content moderation API call */private async checkTextContentAPI(text: string): Promise { if (textCache[text]) { return textCache[text]; } await new Promise((resolve) => setTimeout(resolve, 100)); const results: ContentCategory[] = [ { name: 'Profanity', description: 'Offensive or vulgar language', state: this.percentageToState(Math.random() * 0.3) }, { name: 'Hate Speech', description: 'Content promoting hatred or discrimination', state: this.percentageToState(Math.random() * 0.2) }, { name: 'Threats', description: 'Threatening or violent language', state: this.percentageToState(Math.random() * 0.1) } ]; textCache[text] = results; return results;} ``` In production, replace the simulation with calls to services like OpenAI Moderation API or Perspective API through your backend. **Processing Results**: Map confidence scores to severity levels (failed > 0.8, warning > 0.4, success ≤ 0.4): ``` /** * Maps confidence scores to validation states */private percentageToState( percentage: number): 'success' | 'warning' | 'failed' { if (percentage > 0.8) { return 'failed'; } else if (percentage > 0.4) { return 'warning'; } else { return 'success'; }} ``` Implement caching to avoid redundant API calls for the same content. ## Displaying Validation Results[#](#displaying-validation-results) Group results by severity (failed, warning, success) and display them in the UI: ``` const failed = allResults.filter((r) => r.state === 'failed');const warnings = allResults.filter((r) => r.state === 'warning');const passed = allResults.filter((r) => r.state === 'success'); // eslint-disable-next-line no-consoleconsole.log('Validation Summary:');// eslint-disable-next-line no-consoleconsole.log(` Violations: ${failed.length}`);// eslint-disable-next-line no-consoleconsole.log(` Warnings: ${warnings.length}`);// eslint-disable-next-line no-consoleconsole.log(` Passed: ${passed.length}`); ``` Make results interactive by selecting the corresponding block when users click on a validation result: ``` if (failed.length > 0) { const blockToSelect = failed[0].blockId; engine.block .findAllSelected() .forEach((id) => engine.block.setSelected(id, false)); engine.block.setSelected(blockToSelect, true);} ``` ## Integration Points[#](#integration-points) Choose when to run validation based on your workflow: **Export Validation** — Validate when users export designs using `registerAction`: ``` cesdk.ui.registerAction('ly.img.export', async (engine) => { const imageResults = await checkImageContent(engine); const textResults = await checkTextContent(engine); const violations = [...imageResults, ...textResults].filter((r) => r.state === 'failed'); if (violations.length > 0) { alert(`Cannot export: ${violations.length} policy violation(s) detected.`); return; } const blob = await engine.block.export(engine.scene.get(), 'image/png'); downloadBlob(blob, 'design.png');}); ``` **Other Integration Points**: * Pre-upload validation: Check before allowing uploads to your platform * Review queue: Flag designs with warnings for manual review * Batch validation: Check all content on-demand when users click a button ## Best Practices[#](#best-practices) **Security**: Always proxy API requests through your backend to protect credentials. Implement rate limiting and authentication. **Performance**: Cache results by URL/text to avoid redundant calls. Process items in parallel with `Promise.all()`. **User Experience**: Run checks asynchronously without blocking the UI. Provide clear error messages and interactive results. **Timing**: Validate at export time for the best balance between policy enforcement and creative freedom. ## Troubleshooting[#](#troubleshooting) **Checks not running**: Verify engine is initialized, content exists, API endpoint is reachable, and credentials are valid. **Content not found**: Ensure blocks have correct kind/type, images have fills, text blocks aren’t empty, and scene has loaded. **API errors**: Check API key validity, endpoint URL, image URL accessibility, rate limits, and service-specific error codes. **Inconsistent results**: Verify caching works correctly, threshold values are appropriate, and API responses parse correctly. ## API Reference[#](#api-reference) **Finding Content**: * `engine.block.findByKind('image')` — Find all image blocks * `engine.block.findByType('//ly.img.ubq/text')` — Find all text blocks **Getting Data**: * `engine.block.getFill(blockId)` — Get fill object for image * `engine.block.getString(id, 'text/text')` — Get text content * `engine.block.getString(fill, 'fill/image/imageFileURI')` — Get image URL * `engine.block.getSourceSet(fill, 'fill/image/sourceSet')` — Get image source set **Selection**: * `engine.block.setSelected(id, bool)` — Select or deselect a block * `engine.block.findAllSelected()` — Get currently selected blocks ## Next Steps[#](#next-steps) Now that you understand content moderation, explore related validation features: * [Rules Overview](angular/rules/overview-e27832/) — Learn about CE.SDK’s comprehensive validation system --- [Source](https:/img.ly/docs/cesdk/angular/plugins/print-ready-pdf-iroalu) # How to Export Print-Ready PDFs with CE.SDK In this guide, you’ll learn how to use the Print Ready PDF plugin to transform CE.SDK’s standard RGB PDF exports into PDF/X-3 compliant, CMYK-based files suitable for professional commercial printing. We’ll add a custom export button that handles color space conversion, ICC profile embedding, and PDF/X compliance—all client-side without any backend infrastructure. 15 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/plugins-print-ready-pdf-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/plugins-print-ready-pdf-browser) ## What You’ll Build[#](#what-youll-build) A complete print-ready PDF export workflow that: * Adds a custom “Export Print-Ready PDF” button to CE.SDK * Exports designs as standard PDFs using CE.SDK’s engine * Converts RGB PDFs to CMYK with professional ICC profiles * Adds PDF/X-3:2003 compliance for commercial printing * Handles transparency flattening automatically * Downloads print-ready files directly in the browser ## Prerequisites[#](#prerequisites) * Modern browser with WebAssembly support (Chrome 90+, Firefox 88+, Safari 14+) * Basic knowledge of JavaScript/TypeScript and CE.SDK * Optional: CE.SDK license to remove watermark - [Get a free trial](https://img.ly/forms/free-trial) ## Step 1: Install the Plugin[#](#step-1-install-the-plugin) First, add the Print Ready PDF plugin to your project alongside CE.SDK: Terminal window ``` npm install @cesdk/cesdk-js @imgly/plugin-print-ready-pdfs-web@1.0.0 ``` The plugin is a standalone npm package that works with any CE.SDK integration. **Package details:** * `@cesdk/cesdk-js`: CE.SDK core library * `@imgly/plugin-print-ready-pdfs-web`: Print-ready PDF conversion plugin **Try it yourself:** 1. Run `npm install` in your project 2. Verify packages appear in `package.json` 3. Check node\_modules contains both packages ## Step 2: Set Up CE.SDK with Custom Export Button[#](#step-2-set-up-cesdk-with-custom-export-button) Initialize CE.SDK and add a custom export button to the navigation bar: ``` // Initialize CE.SDKconst cesdk = await CreativeEditorSDK.create('#cesdk-container', config); // Add custom export button to navigation barcesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ { key: 'export-print-ready-pdf', id: 'ly.img.action.navigationBar', label: 'Export Print-Ready PDF', iconName: '@imgly/Download', onClick: async () => { await exportPrintReadyPDF(); }, }, ],}); ``` **CE.SDK concepts explained:** * **`insertNavigationBarOrderComponent()`**: Dynamically adds UI components to the navigation bar * **`'last'`**: Position for the button (can be ‘first’, ‘last’, or after specific components) * **`iconName`**: Uses CE.SDK’s built-in icon library (`@imgly/icons/`) * **`onClick`**: Function executed when button is clicked The custom action button integrates seamlessly with CE.SDK’s UI, appearing alongside built-in export options. **Verify the integration:** 1. Start your development server 2. Open CE.SDK in the browser 3. Look for “Export Print-Ready PDF” button in the navigation bar 4. Button should be clickable (even if export isn’t implemented yet) ## Step 3: Export PDF from CE.SDK[#](#step-3-export-pdf-from-cesdk) Now implement the export logic to get the PDF from CE.SDK’s engine: ``` // Get current scene IDconst scene = cesdk.engine.scene.get(); // Get all pages in the sceneconst pages = cesdk.engine.block.findByType('page'); // Export first page as PDFconst pdfBlob = await cesdk.engine.block.export(pages[0], { mimeType: 'application/pdf',}); ``` **CE.SDK export methods in detail:** * **`engine.scene.get()`**: Returns the ID of the current scene (the design being edited) * **`engine.block.export()`**: Exports a specific block (in this case, the entire scene) as a Blob * **`'application/pdf'`**: MIME type specifying PDF format output The `engine.block.export()` method is the recommended approach for PDF export. CE.SDK handles all PDF generation internally. **Test your implementation:** * Open CE.SDK and create a simple design * Click the custom export button * Check browser console shows no errors * Verify PDF blob has `size > 0` ## Step 4: Convert to Print-Ready Format[#](#step-4-convert-to-print-ready-format) Use the plugin to convert CE.SDK’s RGB PDF to CMYK PDF/X-3 format: ``` // Convert to print-ready PDF/X-3 formatconst printReadyPDF = await convertToPDFX3(pdfBlob, { outputProfile: 'fogra39', // European printing standard title: 'Print-Ready Export',}); ``` **How this integrates with CE.SDK:** * CE.SDK exports standard RGB PDF (optimized for screens) * Plugin intercepts the PDF blob * Converts RGB colors to CMYK using professional ICC profiles * Adds PDF/X-3:2003 compliance markers * Embeds color profile for consistent printing **Color profile selection:** The `outputProfile` parameter determines the color space and printing standard: * **`'fogra39'`**: European offset printing (ISO Coated v2 ECI) * **`'gracol'`**: USA commercial printing (GRACoL 2013) * **`'srgb'`**: Digital distribution (keeps RGB) * **`'custom'`**: Use your own ICC profile file Choose the profile that matches your print region or vendor requirements. **Verify the conversion:** 1. Conversion should complete in 2-5 seconds 2. Output PDF is larger than input (~400-500KB for ICC profile) 3. No error messages in console 4. Blob size increased indicates successful conversion ## Step 5: Download Print-Ready PDF[#](#step-5-download-print-ready-pdf) Trigger the browser download for the converted PDF: ``` // Download the print-ready PDFconst url = URL.createObjectURL(printReadyPDF);const link = document.createElement('a');link.href = url;link.download = 'design-print-ready.pdf';link.click();URL.revokeObjectURL(url); ``` **Browser download pattern explained:** * **`URL.createObjectURL()`**: Creates temporary URL for the Blob * **`document.createElement('a')`**: Creates download link element * **`link.click()`**: Triggers browser’s download dialog * **`URL.revokeObjectURL()`**: Cleans up temporary URL (prevents memory leaks) This pattern works in all modern browsers without requiring server endpoints. **Test the complete workflow:** 1. Create a design in CE.SDK 2. Click “Export Print-Ready PDF” button 3. Browser should prompt to save file 4. Downloaded PDF should open in PDF viewers 5. Check file properties for PDF/X-3:2003 compliance ## Complete Implementation[#](#complete-implementation) Here’s the full integration combining all steps: ``` import CreativeEditorSDK from '@cesdk/cesdk-js';// @ts-expect-error - Plugin types will be available in future releaseimport { convertToPDFX3 } from '@imgly/plugin-print-ready-pdfs-web'; let cesdk: CreativeEditorSDK; const config = { // By default, CE.SDK runs with a watermark. // Get a free trial license at https://img.ly/forms/free-trial to remove it. // Uncomment the line below and add your license key: // license: 'your-license-key-here', // baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`,}; async function init() { // Initialize CE.SDK cesdk = await CreativeEditorSDK.create('#cesdk-container', config); cesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ { key: 'export-print-ready-pdf', id: 'ly.img.action.navigationBar', label: 'Export Print-Ready PDF', iconName: '@imgly/Download', onClick: async () => { await exportPrintReadyPDF(); } } ] }); // Load default scene await cesdk.createDesignScene(); await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources();} async function exportPrintReadyPDF() { try { // Check if CE.SDK is initialized if (!cesdk) { throw new Error('CE.SDK not initialized'); } // Get current scene ID const scene = cesdk.engine.scene.get(); if (scene == null) { throw new Error('No scene loaded'); } // Get all pages in the scene const pages = cesdk.engine.block.findByType('page'); if (pages.length === 0) { throw new Error('No pages found in scene'); } // Export first page as PDF const pdfBlob = await cesdk.engine.block.export(pages[0], { mimeType: 'application/pdf' }); // Convert to print-ready PDF/X-3 format const printReadyPDF = await convertToPDFX3(pdfBlob, { outputProfile: 'fogra39', // European printing standard title: 'Print-Ready Export' }); // Download the print-ready PDF const url = URL.createObjectURL(printReadyPDF); const link = document.createElement('a'); link.href = url; link.download = 'design-print-ready.pdf'; link.click(); URL.revokeObjectURL(url); console.log('Print-ready PDF exported successfully!'); } catch (error) { console.error('Export failed:', error); alert('Failed to export print-ready PDF. Please try again.'); }} // Initialize when page loadsinit().catch((error) => { console.error('Failed to initialize CE.SDK:', error);}); ``` This implementation adds a complete print-ready PDF export workflow to CE.SDK with just a few lines of code. Find the complete working example in the [GitHub repository](https://github.com/imgly/cesdk-web-examples/tree/main/plugins-print-ready-pdf-browser). ## Advanced: Custom ICC Profiles[#](#advanced-custom-icc-profiles) Use printer-specific ICC profiles: ``` // Load custom ICC profile from your serverconst customProfile = await fetch('/path/to/custom.icc').then(r => r.blob()); const printReadyPDF = await convertToPDFX3(pdfBlob, { outputProfile: 'custom', customProfile: customProfile, title: 'Custom Profile Export', outputConditionIdentifier: 'Custom_CMYK_Profile', outputCondition: 'Custom profile for specialized printing',}); ``` This allows you to meet specific print vendor requirements that may not be covered by standard profiles. ## Troubleshooting[#](#troubleshooting) ### ”Input must be a Blob” Error[#](#input-must-be-a-blob-error) **Problem:** Plugin reports invalid input type **Solution:** Ensure CE.SDK export returns a Blob: ``` const blob = await cesdk.engine.block.export(sceneId, 'application/pdf');console.log(blob instanceof Blob); // Should be trueconsole.log(blob.size); // Should be > 0 ``` If `blob.size === 0`, the CE.SDK export failed. Check for scene errors. ### Converted PDF is Much Larger[#](#converted-pdf-is-much-larger) **Problem:** Output file is significantly larger than input **Solution:** This is expected behavior: * ICC profiles add ~400-500KB (FOGRA39/GRACoL) * Transparency flattening may rasterize content * For smaller files, use `srgb` profile (digital-only) * Disable transparency flattening if no transparency exists: `flattenTransparency: false` ### Text Becomes Rasterized[#](#text-becomes-rasterized) **Problem:** Text appears pixelated or blurry in output **Solution:** Transparency flattening converts transparent pages to bitmaps: * Avoid transparency in CE.SDK designs (use 100% opacity) * Don’t use alpha channel PNG images * Use solid fills instead of gradients with opacity * Or disable flattening: `flattenTransparency: false` (only if certain no transparency exists) ### Colors Look Different[#](#colors-look-different) **Problem:** Colors appear different in exported PDF **Solution:** This is expected when converting RGB to CMYK: * CMYK has a smaller color gamut than RGB * Some bright RGB colors cannot be reproduced in CMYK * Preview in CMYK-capable viewer (Adobe Acrobat) for accurate representation * For color-critical work, use CMYK values directly in CE.SDK designs ### Custom Button Doesn’t Appear[#](#custom-button-doesnt-appear) **Problem:** Export button not visible in UI **Solution:** Verify your button insertion code: ``` cesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ { key: 'export-print-ready-pdf', id: 'ly.img.action.navigationBar', label: 'Export Print-Ready PDF', iconName: '@imgly/Download', onClick: async () => { /* ... */ }, }, ],}); ``` Check browser console for configuration errors. Ensure the button is added after CE.SDK initialization completes. ## Validating PDF/X-3 Compliance[#](#validating-pdfx-3-compliance) Verify your exported PDFs meet print standards: **Adobe Acrobat Pro:** 1. Open converted PDF 2. File → Properties → Description 3. Should show “PDF version: 1.3 (PDF/X-3:2003)” 4. File → Properties → Advanced 5. Should show OutputIntent with ICC profile name **Free online validators:** * [PDF/A-X Validator](https://www.pdf-online.com/osa/validate.aspx) - Upload and validate compliance * Check for PDF/X-3:2003 standard confirmation **Command-line verification:** Terminal window ``` # Check PDF versionpdfinfo output.pdf | grep "PDF version" # Validate structureqpdf --check output.pdf # Search for PDF/X markersgrep -a "PDF/X-3" output.pdf ``` --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/t-shirt-designer-02b48f) # T-Shirt Designer --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/postcard-editor-61e1f6) # Postcard Editor --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/photobook-editor-eb3fbe) # Angular Photobook Editor Easily embed a customizable photobook editor into your web app using CreativeEditor SDK (CE.SDK). Designed for developers building personalized print or digital experiences, this solution offers a clean, guided UI tailored for photobook creation — from theme selection to multi-page layout management. [ Launch Web Demo ](https://img.ly/showcases/cesdk/photobook-ui/)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-photobook-ui) ## What is the Photobook Editor Solution?[#](#what-is-the-photobook-editor-solution) The Photobook Editor is a pre-built solution built with CE.SDK’s headless API. It’s designed to help developers quickly deliver a fully functional photobook creation experience inside their app. This solution limits complexity for end users by exposing only the most relevant tools: theming, layout selection, and photo placement. From weddings to holidays to portfolios, the Photobook Editor makes it easy to start from themed templates, drop in photos, and customize each page with simple, intuitive controls. ## Key Features[#](#key-features) * **Theme selector** Allow users to personalize their photobook based on a specific event or aesthetic. Themes can be applied per page for full creative flexibility. * **Multi-page layout management** Users can add, remove, and reorder pages, with built-in layout templates guiding them to a clean, finished look. * **Placeholder-driven editing** Built-in placeholders make adding and replacing photos effortless — just click to upload and crop as needed. * **Sticker and asset library integration** Quickly add embellishments or brand elements using an extendable asset library. * **Guided UI** A simplified toolbar and sidebar help users focus on key actions, reducing friction and enabling fast photobook creation. * **Smart defaults** Users start with a few pre-populated pages that offer different layouts — helping them begin designing immediately without a blank canvas. ## Why Use This Solution?[#](#why-use-this-solution) * **Accelerated time-to-market** Avoid building a photobook editor from scratch. Use this ready-made UI as a fast foundation for personalization features. * **Customizable and extensible** Built on CE.SDK’s headless API, the editor can be tailored to fit your branding, data sources, or workflow needs. * **User-friendly by design** The editor surfaces only the most relevant features for your users, streamlining the experience and boosting completion rates. * **Ideal for e-commerce, printing, and creative platforms** Whether you’re building a photobook flow for print-on-demand, event keepsakes, or digital albums — this solution helps you deliver a polished experience fast. --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/video-editor-9e533a) # Angular Video Editor SDK CreativeEditor SDK provides a powerful Angular library designed for creating and editing videos directly in the browser. This CE.SDK configuration is highly customizable and extendible, offering a full suite of video editing features such as splitting, cropping, and composing clips on a timeline. [ Launch Web Demo ](https://img.ly/showcases/cesdk/video-ui/web)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-video-ui/src/components/case/CaseComponent.jsx) ## Key Capabilities of the Angular Video Editor SDK[#](#key-capabilities-of-the-angular-video-editor-sdk) ![Transform](/docs/cesdk/_astro/Transform.By5kJRew_2acCrV.webp) ### Transform Perform operations like video cropping, flipping, and rotating. ![Trim & Split](/docs/cesdk/_astro/TrimSplit.B8YkfyMB_FmGKM.webp) ### Trim & Split Easily set start and end times, and split videos as needed. ![Merge Videos](/docs/cesdk/_astro/MergeVideos.CdDxNUiO_ZRxgsd.webp) ### Merge Videos Edit and combine multiple video clips into a single sequence. ![Video Collage](/docs/cesdk/_astro/VideoCollage.23LDUE8e_1VDFAj.webp) ### Video Collage Arrange multiple clips on one canvas. ![Client-Side Processing](/docs/cesdk/_astro/ClientSide.CECpQO_1_c6mBh.webp) ### Client-Side Processing Execute all video editing operations directly in the browser, with no need for server dependencies. ![Headless & Automation](/docs/cesdk/_astro/Headless.qEVopH3n_20CWbD.webp) ### Headless & Automation Programmatically edit videos within your Angular application. ![Extendible](/docs/cesdk/_astro/Extendible.CRYmRihj_BmNTE.webp) ### Extendible Add new functionalities seamlessly using the plugins and engine API. ![Customizable UI](/docs/cesdk/_astro/CustomizableUI.DtHv9rY-_2fNrB2.webp) ### Customizable UI Design and integrate custom UIs tailored to your application. ![Asset Libraries](/docs/cesdk/_astro/AssetLibraries.Ce9MfYvX_HmsaC.webp) ### Asset Libraries Incorporate custom assets like filters, stickers, images, and videos. ![Green Screen Support](/docs/cesdk/_astro/GreenScreen.CI2APgl0_Z8GtPY.webp) ### Green Screen Support Apply chroma keying for background removal. ![Templating](/docs/cesdk/_astro/Templating.eMNm9_jD_ycnVt.webp) ### Templating Create design templates with placeholders and text variables for dynamic content. ## What is the Video Editor Solution?[#](#what-is-the-video-editor-solution) The Video Editor is a prebuilt solution powered by the CreativeEditor SDK (CE.SDK) that enables fast integration of high-performance video editing into web, mobile, and desktop applications. It’s designed to help your users create professional-grade videos—from short social clips to long-form stories—directly within your app. Skip building a video editor from scratch. This fully client-side solution provides a solid foundation with an extensible UI and a robust engine API to power video editing in any use case. ## Browser Support[#](#browser-support) Video editing mode relies on modern web codecs, supported only in the latest versions of Google Chrome, Microsoft Edge, or other Chromium-based browsers. ## Prerequisites[#](#prerequisites) [Ensure you have the latest stable version of **Node.js & NPM** installed](https://www.npmjs.com/get-npm) ## Supported File Types[#](#supported-file-types) Creative Editor SDK supports loading, editing, and saving **MP4 files** directly in the browser. ### Importing Media[#](#importing-media) | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. ### Exporting Media[#](#exporting-media) | Category | Supported Formats | | --- | --- | | **Images** | `.png` (with transparency), `.jpeg`, `.webp`, `.tga` | | **Video** | `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) | | **Print** | `.pdf` (supports underlayer printing and spot colors) | | **Scene** | `.scene` (description of the scene without any assets) | | **Archive** | `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) | Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. ### Importing Templates[#](#importing-templates) | Format | Description | | --- | --- | | `.idml` | InDesign | | `.psd` | Photoshop | | `.scene` | CE.SDK Native | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs to generate scenes programmatically. For detailed information, see the [full file format support list](angular/file-format-support-3c4b2a/). ## Getting Started[#](#getting-started) If you’re ready to start integrating CE.SDK into your Vue.js application, check out the CE.SDK [Getting Started guide](angular/get-started/overview-e18f40/). In order to configure the editor for a video editing use case consult our [video editor UI showcase](https://img.ly/showcases/cesdk/video-ui/web) and its [reference implementation](https://github.com/imgly/cesdk-web-examples/blob/main/showcase-video-ui/src/components/case/CaseComponent.jsx). ## Understanding CE.SDK Architecture & API[#](#understanding-cesdk-architecture--api) The sections below provide an overview of the key components of the CE.SDK video editor UI and its API architecture. If you’re ready to start integrating CE.SDK into your Angular application, check out our [Getting Started guide](angular/get-started/overview-e18f40/) or explore the Essential Guides. ### CreativeEditor Video UI[#](#creativeeditor-video-ui) The CE.SDK video UI is designed for intuitive video creation and editing. Below are the main components and customizable elements within the UI: ![](/docs/cesdk/_astro/Simple-Timeline-Mono.D4wteAxE_Z2ggWA9.webp) * **Canvas:** The main interaction area for video content. * **Dock:** Entry point for interactions not directly related to the selected video block, often used for accessing asset libraries. * **Canvas Menu:** Access block-specific settings such as duplication or deletion. * **Inspector Bar:** Manage block-specific functionalities, like adjusting properties of the selected block. * **Navigation Bar:** Handles global scene actions like undo/redo and zoom. * **Canvas Bar:** Provides tools for managing the overall canvas, such as adding pages or controlling zoom. * **Timeline:** The core video editing control, where clips and audio are arranged over time. ### CreativeEngine[#](#creativeengine) CreativeEngine is the core of CE.SDK, responsible for managing the rendering and manipulation of video scenes. It can be used in headless mode or integrated with the CreativeEditor UI. Below are key features and APIs provided by the CreativeEngine: * **Scene Management:** Programmatically create, load, save, and modify video scenes. * **Block Manipulation:** Create and manage video elements such as shapes, text, and images. * **Asset Management:** Load assets like videos and images from URLs or local sources. * **Variable Management:** Define and manipulate variables within scenes for dynamic content. * **Event Handling:** Subscribe to events such as block creation or updates for dynamic interaction. ## API Overview[#](#api-overview) The APIs of CE.SDK are grouped into several categories, reflecting different aspects of scene management and manipulation. [**Scene API:**](angular/concepts/scenes-e8596d/)\- **Creating and Loading Scenes**: ``` engine.scene.create();engine.scene.loadFromURL(url); ``` * **Zoom Control**: ``` engine.scene.setZoomLevel(1.0);engine.scene.zoomToBlock(blockId); ``` [**Block API:**](angular/concepts/blocks-90241e/) * **Creating Blocks**: ``` const block = engine.block.create('shapes/star'); ``` * **Setting Properties**: ``` engine.block.setColor(blockId, 'fill/color', { r: 1, g: 0, b: 0, a: 1 });engine.block.setString(blockId, 'text/content', 'Hello World'); ``` * **Querying Properties**: ``` const color = engine.block.getColor(blockId, 'fill/color');const text = engine.block.getString(blockId, 'text/content'); ``` [**Variable API:**](angular/create-templates/add-dynamic-content/text-variables-7ecb50/) Variables allow dynamic content within scenes to programmatically create variations of a design. * **Managing Variables**: ``` engine.variable.setString('myVariable', 'value');const value = engine.variable.getString('myVariable'); ``` [**Asset API:**](angular/import-media/concepts-5e6197/) * **Managing Assets**: ``` engine.asset.add('image', 'https://example.com/image.png'); ``` [**Event API**](angular/concepts/events-353f97/) * **Subscribing to Events**: ``` // Subscribe to scene changesengine.scene.onActiveChanged(() => { const newActiveScene = engine.scene.get();}); ``` ## Customizing the Angular Video Editor[#](#customizing-the-angular-video-editor) CE.SDK provides extensive customization options to adapt the UI to various use cases. These options range from simple configuration changes to more advanced customizations involving callbacks and custom elements. ### Basic Customizations[#](#basic-customizations) * **Configuration Object**: When initializing the CreativeEditor, you can pass a configuration object that defines basic settings such as the base URL for assets, the language, theme, and license key. ``` const config = { baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/assets', // license: 'YOUR_CESDK_LICENSE_KEY',}; ``` * **Localization**: Customize the language and labels used in the editor to support different locales. ``` const config = {}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Set theme using the UI API cesdk.ui.setTheme('light'); // 'dark' | 'system' cesdk.i18n.setLocale('en'); cesdk.i18n.setTranslations({ en: { variables: { my_custom_variable: { label: 'Custom Label', }, }, }, });}); ``` * [Custom Asset Sources](angular/import-media/concepts-5e6197/) : Serve custom video or image assets from a remote URL. ### UI Customization Options[#](#ui-customization-options) * **Theme**: Choose between predefined themes such as ‘dark’, ‘light’, or ‘system’. ``` CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Set theme using the UI API cesdk.ui.setTheme('dark'); // 'light' | 'system'}); ``` * **UI Components**: Enable or disable specific UI components based on your requirements. ``` const config = { ui: { elements: { toolbar: true, inspector: false, }, },}; ``` ## Advanced Customizations[#](#advanced-customizations) Learn more about extending editor functionality and customizing its UI to your use case by consulting our in-depth [customization guide](angular/user-interface/ui-extensions-d194d1/). Here is an overview of the APIs and components available to you. ### Order APIs[#](#order-apis) Customization of the web editor’s components and their order within these locations is managed through specific Order APIs, allowing the addition, removal, or reordering of elements. Each location has its own Order API, e.g., `setDockOrder`, `setCanvasMenuOrder`, `setInspectorBarOrder`, `setNavigationBarOrder`, and `setCanvasBarOrder`. ### Layout Components[#](#layout-components) CE.SDK provides special components for layout control, such as `ly.img.separator` for separating groups of components and `ly.img.spacer` for adding space between components. ### Registration of New Components[#](#registration-of-new-components) Custom components can be registered and integrated into the web editor using builder components like buttons, dropdowns, and inputs. These components can replace default ones or introduce new functionalities, deeply integrating custom logic into the editor. ### Feature API[#](#feature-api) The Feature API enables conditional display and functionality of components based on the current context, allowing for dynamic customization. For example, you can hide certain buttons for specific block types. ## Plugins[#](#plugins) Customize the CE.SDK web editor during initialization using the outlined APIs. For many use cases, this is sufficient, but for more advanced scenarios, plugins are useful. Follow our [guide on building plugins](angular/user-interface/ui-extensions/add-custom-feature-2a26b6/) or explore existing plugins like: [**Background Removal**](angular/edit-image/remove-bg-9dfcf7/): Adds a button to the canvas menu to remove image backgrounds. [**Vectorizer**](angular/edit-image/vectorize-2b4c7f/): Adds a button to the canvas menu to quickly vectorize a graphic. ## Framework Support[#](#framework-support) CreativeEditor SDK’s video editing library is compatible with any Javascript including, React, Angular, Vue.js, Svelte, Blazor, Next.js, Typescript. It is also compatible with desktop and server-side technologies such as electron, PHP, Laravel and Rails. ## Ready to get started? With a free trial and pricing that fits your needs, it's easy to find the best solution for your product. [Free Trial](https://img.ly/forms/free-trial) ### 500M+ video and photo creations are powered by IMG.LY every month ![HP logo](/docs/cesdk/_astro/HP.BZ1qDNii_ZpK5Lk.webp) ![Shopify logo](/docs/cesdk/_astro/Shopify.Dmyk4png_ZRKWXF.webp) ![Reuters logo](/docs/cesdk/_astro/Reuters.B8BV2Fek_ZLrHFJ.webp) ![Hootsuite logo](/docs/cesdk/_astro/Hootsuite.C94d5fhs_Zsc4gx.webp) ![Semrush logo](/docs/cesdk/_astro/Semrush.B2YsPaIn_23cDNx.webp) ![Shutterfly logo](/docs/cesdk/_astro/Shutterfly.Cc7Sw48y_Z3TjCs.webp) ![Sprout Social logo](/docs/cesdk/_astro/Sprout-Social.VxlY6_Tc_E0Dzh.webp) ![One.com logo](/docs/cesdk/_astro/Onecom.BQ_oPnlz_Z1btrtu.webp) ![Constant Contact logo](/docs/cesdk/_astro/Constant-Contact.1rh975Q__Z2ob7wU.webp) --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/photo-editor-42ccb2) # Angular Photo Editor SDK The CreativeEditor SDK provides a powerful and intuitive solution designed for seamless photo editing directly in the browser. This CE.SDK configuration is fully customizable and offers a range of features that cater to various use cases, from simple photo adjustments and image compositions with background removal to programmatic editing at scale. Whether you are building a photo editing application for social media, e-commerce, or any other platform, the CE.SDK Angular Image Editor provides the tools you need to deliver a best-in-class user experience. [ Launch Web Demo ](https://img.ly/showcases/cesdk/photo-editor-ui/web)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-photo-editor-ui/src/components/case/CaseComponent.jsx) ## Key Capabilities of the CE.SDK Photo Editor[#](#key-capabilities-of-the-cesdk-photo-editor) ![Transform](/docs/cesdk/_astro/Transform.By5kJRew_2acCrV.webp) ### Transform Easily perform operations like cropping, rotating, and resizing your design elements to achieve the perfect composition. ![Asset Management](/docs/cesdk/_astro/AssetLibraries.Ce9MfYvX_HmsaC.webp) ### Asset Management Import and manage stickers, images, shapes, and other assets to build intricate and visually appealing designs. ![Text Editing](/docs/cesdk/_astro/TextEditing.B8Ra1KOE_2lGC8C.webp) ### Text Editing Add and style text blocks with a variety of fonts, colors, and effects, giving users the creative freedom to express themselves. ![Client-Side Processing](/docs/cesdk/_astro/ClientSide.CECpQO_1_c6mBh.webp) ### Client-Side Processing All editing operations are performed directly in the browser, ensuring fast performance without the need for server dependencies. ![Headless & Automation](/docs/cesdk/_astro/Headless.qEVopH3n_20CWbD.webp) ### Headless & Automation Programmatically edit designs using the engine API, allowing for automated workflows and advanced integrations within your application. ![Extendible](/docs/cesdk/_astro/Extendible.CRYmRihj_BmNTE.webp) ### Extendible Enhance functionality with plugins and custom scripts, making it easy to tailor the editor to specific needs and use cases. ![Customizable UI](/docs/cesdk/_astro/CustomizableUI.DtHv9rY-_2fNrB2.webp) ### Customizable UI Design and integrate custom user interfaces that align with your application’s branding and user experience requirements. ![Background Removal](/docs/cesdk/_astro/GreenScreen.CI2APgl0_Z8GtPY.webp) ### Background Removal Utilize the powerful background removal plugin to allow users to effortlessly remove backgrounds from images, entirely on the Client-Side. ![Filters & Effects](/docs/cesdk/_astro/Filters.D0Iue_r-_Z1VcFlR.webp) ### Filters & Effects Choose from a wide range of filters and effects to add professional-grade finishing touches to photos, enhancing their visual appeal. ![Size Presets](/docs/cesdk/_astro/SizePresets.C8w0tA1Y_ZN1zMC.webp) ### Size Presets Access a variety of size presets tailored for different use cases, including social media formats and print-ready dimensions. ## What is the Photo Editor Solution?[#](#what-is-the-photo-editor-solution) The Photo Editor is a fully customizable CE.SDK configuration focused on photo-centric use cases. It strips down the editor interface to include only the most relevant features for image adjustments — giving users a focused and responsive experience. Whether your users need to fine-tune selfies, prepare product photos, or create profile images, this solution makes it easy. Get a powerful photo editor into your app with minimal setup. The Photo Editor runs entirely client-side — which helps reduce cloud computing costs and improve privacy. ## Browser Compatibility[#](#browser-compatibility) The CE.SDK Design Editor is optimized for use in modern web browsers, ensuring compatibility with the latest versions of Chrome, Firefox, Edge, and Safari. See the full list of [supported browsers here](angular/browser-support-28c1b0/). ## Prerequisites[#](#prerequisites) To get started with the CE.SDK Photo Editor, ensure you have the latest versions of **Node.js** and **NPM** installed. ## Supported File Types[#](#supported-file-types) The CE.SDK Photo Editor supports loading, editing, and saving various image formats directly in the browser. ### Importing Media[#](#importing-media) | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. ### Exporting Media[#](#exporting-media) | Category | Supported Formats | | --- | --- | | **Images** | `.png` (with transparency), `.jpeg`, `.webp`, `.tga` | | **Video** | `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) | | **Print** | `.pdf` (supports underlayer printing and spot colors) | | **Scene** | `.scene` (description of the scene without any assets) | | **Archive** | `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) | Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. ### Importing Templates[#](#importing-templates) | Format | Description | | --- | --- | | `.idml` | InDesign | | `.psd` | Photoshop | | `.scene` | CE.SDK Native | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs to generate scenes programmatically. For detailed information, see the [full file format support list](angular/file-format-support-3c4b2a/). ## Getting Started[#](#getting-started) If you’re ready to start integrating CE.SDK into your Angular application, check out the CE.SDK [Getting Started guide](angular/get-started/overview-e18f40/). In order to configure the editor for an image editing use case consult our [photo editor UI showcase](https://img.ly/showcases/cesdk/photo-editor-ui/web#c) and its [reference implementation](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-photo-editor-ui/src/components/case/CaseComponent.jsx). ## Understanding CE.SDK Architecture & API[#](#understanding-cesdk-architecture--api) The following sections provide an overview of the key components of the CE.SDK photo editor UI and its API architecture. ### CreativeEditor Photo UI[#](#creativeeditor-photo-ui) The CE.SDK photo editor UI is a specific configuration of the CE.SDK that focuses the Editor UI on essential photo editing features. It also includes our powerful background removal plugin that runs entirely on the user’s device, saving on computing costs. This configuration can be further modified to suit your needs. Key components include: ![](/docs/cesdk/_astro/CESDK-UI.BD2Iwmum_2gw9UM.webp) * **Canvas:** The primary workspace where users interact with their photo content. * **Dock:** Provides access to tools and assets that are not directly related to the selected image or block, often used for adding or managing assets. * **Inspector Bar:** Controls properties specific to the selected block, such as size, rotation, and other adjustments. * **Canvas Menu:** Provides block-specific settings and actions such as deletion or duplication. * **Navigation Bar:** Offers global actions such as undo/redo, zoom controls, and access to export options. * **Canvas Bar:** For actions affecting the canvas or scene as a whole, such as adding pages or controlling zoom. This is an alternative place for actions like zoom or undo/redo. Learn more about interacting with and customizing the photo editor UI in our design editor UI guide. ### CreativeEngine[#](#creativeengine) At the heart of CE.SDK is the CreativeEngine, which powers all rendering and design manipulation tasks. It can be used in headless mode or integrated with the CreativeEditor UI. Key features and APIs provided by CreativeEngine include: * **Scene Management:** Create, load, save, and manipulate design scenes programmatically. * **Block Manipulation:** Create and manage elements such as images, text, and shapes within the scene. * **Asset Management:** Load and manage assets like images and SVGs from URLs or local sources. * **Variable Management:** Define and manipulate variables for dynamic content within scenes. * **Event Handling:** Subscribe to events such as block creation or selection changes for dynamic interaction. ## API Overview[#](#api-overview) CE.SDK’s APIs are organized into several categories, each addressing different aspects of scene and content management. The engine API is relevant if you want to programmatically manipulate images to create or modify them at scale. [**Scene API:**](angular/concepts/scenes-e8596d/) * **Creating and Loading Scenes**: ``` engine.scene.create();engine.scene.loadFromURL(url); ``` * **Zoom Control**: ``` engine.scene.setZoomLevel(1.0);engine.scene.zoomToBlock(blockId); ``` [**Block API:**](angular/concepts/blocks-90241e/): * **Creating Blocks**: ``` const block = engine.block.create('shapes/rectangle'); ``` * **Setting Properties**: ``` engine.block.setColor(blockId, 'fill/color', { r: 1, g: 0, b: 0, a: 1 });engine.block.setString(blockId, 'text/content', 'Hello World'); ``` * **Querying Properties**: ``` const color = engine.block.getColor(blockId, 'fill/color');const text = engine.block.getString(blockId, 'text/content'); ``` [**Variable API:**](angular/create-templates/add-dynamic-content/text-variables-7ecb50/) * **Managing Variables**: ``` engine.variable.setString('myVariable', 'value');const value = engine.variable.getString('myVariable'); ``` [**Asset API:**](angular/import-media/concepts-5e6197/) * **Managing Assets**: ``` engine.asset.add('image', 'https://example.com/image.png'); ``` [**Event API:**](angular/concepts/events-353f97/) * **Subscribing to Events**: ``` // Subscribe to scene changesengine.scene.onActiveChanged(() => { const newActiveScene = engine.scene.get();}); ``` ## Basic Automation Example[#](#basic-automation-example) The following automation example shows how to turn an image block into a square format for a platform such as Instagram: ``` // Assuming you have an initialized engine and a selected block (which is an image block) const newWidth = 1080; // Width in pixelsconst newHeight = 1080; // Height in pixels const imageBlockId = engine.block.findByType('image')[0]; engine.block.setWidth(imageBlockId, newWidth);engine.block.setHeight(imageBlockId, newHeight); engine.block.setContentFillMode(imageBlockId, 'Cover'); ``` ## Customizing the CE.SDK Photo Editor[#](#customizing-the-cesdk-photo-editor) CE.SDK provides extensive customization options, allowing you to tailor the UI and functionality to meet your specific needs. This can range from basic configuration settings to more advanced customizations involving callbacks and custom elements. ### Basic Customizations[#](#basic-customizations) * **Configuration Object:** Customize the editor’s appearance and functionality by passing a configuration object during initialization. ``` const config = { baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/assets', // license: 'YOUR_CESDK_LICENSE_KEY',}; ``` * **Localization:** Adjust the editor’s language and labels to support different locales. ``` const config = {}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Set theme using the UI API cesdk.ui.setTheme('light'); // 'dark' | 'system' cesdk.i18n.setLocale('en'); cesdk.i18n.setTranslations({ en: { 'libraries.ly.img.insert.text.label': 'Add Caption', }, });}); ``` * **Custom Asset Sources:** Serve custom sticker or shape assets from a remote URL. ### UI Customization Options[#](#ui-customization-options) * **Theme:** Choose between ‘dark’, ‘light’, or ‘system’ themes. ``` CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Set theme using the UI API cesdk.ui.setTheme('dark'); // 'light' | 'system'}); ``` * **UI Components:** Enable or disable specific UI components as per your application’s needs. ``` const config = { ui: { elements: { toolbar: true, inspector: false, }, },}; ``` ## Advanced Customizations[#](#advanced-customizations) For deeper customization, [explore the range of APIs](angular/user-interface-5a089a/) available for extending the functionality of the photo editor. You can customize the order of components, add new UI elements, and even develop your own plugins to introduce new features. ## Plugins[#](#plugins) For cases where encapsulating functionality for reuse is necessary, plugins provide an effective solution. Use our [guide on building plugins](angular/user-interface/ui-extensions/add-custom-feature-2a26b6/) to get started, or explore existing plugins like **Background Removal** and **Vectorizer**. ## Ready to get started? With a free trial and pricing that fits your needs, it's easy to find the best solution for your product. [Free Trial](https://img.ly/forms/free-trial) ### 500M+ video and photo creations are powered by IMG.LY every month ![HP logo](/docs/cesdk/_astro/HP.BZ1qDNii_ZpK5Lk.webp) ![Shopify logo](/docs/cesdk/_astro/Shopify.Dmyk4png_ZRKWXF.webp) ![Reuters logo](/docs/cesdk/_astro/Reuters.B8BV2Fek_ZLrHFJ.webp) ![Hootsuite logo](/docs/cesdk/_astro/Hootsuite.C94d5fhs_Zsc4gx.webp) ![Semrush logo](/docs/cesdk/_astro/Semrush.B2YsPaIn_23cDNx.webp) ![Shutterfly logo](/docs/cesdk/_astro/Shutterfly.Cc7Sw48y_Z3TjCs.webp) ![Sprout Social logo](/docs/cesdk/_astro/Sprout-Social.VxlY6_Tc_E0Dzh.webp) ![One.com logo](/docs/cesdk/_astro/Onecom.BQ_oPnlz_Z1btrtu.webp) ![Constant Contact logo](/docs/cesdk/_astro/Constant-Contact.1rh975Q__Z2ob7wU.webp) --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/multi-image-generation-163d37) # Angular Multi-Image Generator Generate multiple on-brand image variations from a single data source — and embed the entire workflow into your web application using CreativeEditor SDK (CE.SDK). [ Launch Web Demo ](https://img.ly/showcases/cesdk/multi-image-generation/)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-multi-image-generation) ## What is the Multiple Image Generator Solution?[#](#what-is-the-multiple-image-generator-solution) The Multiple Image Generator is a prebuilt web solution built on top of CE.SDK that enables developers to programmatically generate multiple design variations from a single data input. This is especially useful for automating content creation at scale — such as product promotions, social media visuals, or user-generated reviews — while ensuring design consistency. This solution uses CE.SDK’s headless API to interpolate structured data into customizable templates. Developers can easily embed it into their applications to deliver dynamic image generation without requiring manual design work. ## Key Features[#](#key-features) * **Programmatic design generation** Automatically populate templates with structured data using CE.SDK’s variable and placeholder APIs. * **Multi-template support** Generate different branded variants of the same content for different platforms or audiences. * **Headless API** Run design logic entirely in code — no UI required — making it easy to integrate with backends or automation workflows. * **Template-driven design** Easily update or swap templates to reflect new branding, formats, or campaign needs. * **Live preview and export** Review auto-generated assets in real time and export them in a variety of formats for production use. ## Why Use This Solution?[#](#why-use-this-solution) The Multiple Image Generator helps developers: * **Accelerate content workflows** Eliminate repetitive design tasks by generating multiple assets from structured data, such as CSV rows or API responses. * **Maintain brand consistency at scale** Every output adheres to a pre-defined visual standard — ensuring a polished and on-brand result. * **Embed creative automation into apps** Offer your users the ability to personalize and publish visual content dynamically, all within your platform. * **Scale across platforms** Generate variants for different social media formats, marketing channels, or regional campaigns in one flow. This prebuilt solution is ideal for platforms focused on product marketing, social content automation, reviews, or e-commerce — and gives you full control over templates, logic, and output. --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/mockup-editor-be928b) # Product Mockup Generator & Editor in Angular Visualize the final product with confidence using the Mockup Editor, a prebuilt solution built on top of CreativeEditor SDK (CE.SDK). Easily embed it into your web application to enable real-time product previews across a range of formats, from apparel to postcards. [ Launch Web Demo ](https://img.ly/showcases/cesdk/mockup-editor/)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-mockup-editor) ## What is the Mockup Editor Solution?[#](#what-is-the-mockup-editor-solution) The Mockup Editor is a ready-to-use interface powered by CE.SDK that lets users preview designs mapped directly onto real-world product surfaces. This preview experience helps users catch layout issues early and make informed design decisions—especially useful in e-commerce, print-on-demand, and marketing workflows. This solution is optimized for a seamless in-browser experience and supports a variety of common formats: * **Apparel** * **Business cards** * **Postcards** * **Posters** * **Social media visuals** Each format comes with a tailored preview mode, ensuring realistic and product-specific mockups. ## Key Features[#](#key-features) * **Live Preview Rendering** All design changes are immediately reflected in the mockup preview, allowing users to validate their work without switching tools. * **Fullscreen & Export Support** Users can enter fullscreen mode for a closer inspection of the final product and export their mockup directly from the interface. * **Editable Design Surface** Reopen the design view from within the mockup preview to tweak layout, background, sizing, and other style elements—all without leaving the flow. * **Multiple Mockup Types** Preconfigured mockups for apparel, stationery, and digital assets let you tailor the experience to your use case. ## Why Use This Solution?[#](#why-use-this-solution) The Mockup Editor offers a powerful combination of usability and flexibility: * **Reduce Friction** Let users preview and refine designs in one place—no back-and-forth between editing tools and preview windows. * **Accelerate Go-to-Market** Help teams move faster by streamlining visual validation in workflows like product launches, custom merchandise, or campaign content. * **Enhance Personalization** Ideal for platforms offering user-generated content or product customization. Integrate the Mockup Editor to give users a visual proof of concept before ordering or publishing. * **Easy to Embed** Designed for developers, the Mockup Editor can be added to any web app with minimal setup. Customize the experience or use it as-is to quickly provide professional-grade mockup previews. --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/design-generation-0c8c73) # Generate Designs with Angular Automatically generate on-brand visuals with the Design Generator, a prebuilt solution built on top of CreativeEditor SDK (CE.SDK). Easily embed it into your web application to produce dynamic assets at scale—from social posts to promotional videos. [ Launch Web Demo ](https://img.ly/showcases/cesdk/headless-design/)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-headless-design) ## What is the Design Generator Solution?[#](#what-is-the-design-generator-solution) The Design Generator is a pre-built solution powered by CreativeEditor SDK (CE.SDK) that enables developers to programmatically create design variations from a set of input parameters. Whether you’re building a social media automation tool or a creative content engine, this solution lets you generate ready-to-use assets—such as static images and short video clips—based on user or system-defined data. Built with CE.SDK’s headless API, this solution runs fully in the browser and can be embedded into any web application. It combines the flexibility of templated design logic with the scalability of automation. ## Key Features[#](#key-features) * **Automated Design Generation** Generate assets dynamically using a combination of input fields, preconfigured templates, and the CE.SDK variable and placeholder APIs. * **Data Integration** Seamlessly connect to external sources (e.g., podcast libraries or CMS data) to drive content generation. * **Multi-format Output** Export assets in different aspect ratios and sizes, including formats like Instagram Stories, Facebook Posts, and custom resolutions. * **Real-time Editing** Let users refine auto-generated content in a UI-based editor powered by CE.SDK—perfect for last-mile customization. * **Custom Templates** Use your own templates or adapt existing ones to define layout, font styles, colors, and asset constraints. * **Headless API** Fully automate generation tasks with no UI dependencies—or combine with a UI when customization is needed. ## Why Use This Solution?[#](#why-use-this-solution) * **Save Time with Automation** Eliminate repetitive design tasks by generating content in bulk—no need for manual editing. * **Enable Personalization at Scale** Dynamically adapt your design assets for different users, campaigns, or content sources. * **Integrate with Your Stack** This web-based solution can be embedded directly into your app and works seamlessly with your existing data sources and workflows. * **Flexible and Extensible** Whether you’re producing social graphics, event flyers, podcast visuals, or promotional videos, the Design Generator adapts to your creative needs. --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/design-editor-9bf041) # Design Editor --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/data-merge-1b5c18) # Data Merge with Images & Videos in Angular Generate personalized designs at scale by merging structured data into CE.SDK templates. The Data Merge prebuilt solution can be embedded into your app, allowing you to automate high-volume content creation while keeping every design on-brand and editable. [ Launch Web Demo ](https://img.ly/showcases/cesdk/batch-image-generation/)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-batch-image-generation) ## What is the Data Merge Solution?[#](#what-is-the-data-merge-solution) The Data Merge solution uses CreativeEditor SDK’s headless API to dynamically generate visual assets from structured data inputs. Whether you’re creating team cards, event badges, certificates, or product listings, this solution lets you interpolate variable content—like names, images, and departments—into reusable design templates. It’s designed for scalability: update a master template once, and the changes automatically propagate to all generated instances. You can also enable manual edits per instance to fine-tune layout and content where needed. ## Key Features[#](#key-features) * **Headless Rendering** Generate scenes programmatically using CE.SDK’s headless API—ideal for server-side or automation workflows. * **Data Interpolation** Merge content from arrays, spreadsheets, or APIs directly into placeholders and text variables within your templates. * **Editable Outputs** Each generated design remains editable, allowing for manual adjustments like resizing images or correcting long names. * **Template Propagation** Edits made to the original template automatically apply to all downstream instances—ensuring brand consistency and saving time. * **Flexible Input Sources** Use structured data from JSON, databases, or third-party APIs to populate templates. ## Why Use This Solution?[#](#why-use-this-solution) * **Automate Creative Workflows** Scale content production without scaling your design team. Perfect for marketing campaigns, catalogs, team profiles, and more. * **Maintain Visual Consistency** Centralized templates and automatic propagation reduce errors and ensure all materials align with brand guidelines. * **Speed Up Production** Eliminate repetitive design tasks by generating dozens—or thousands—of personalized outputs with a single operation. * **Flexible Integration** Use the Data Merge solution programmatically in headless environments or combine it with the CE.SDK UI for hybrid workflows. --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/automated-video-generation-31187c) # Automated Video Generation with Angular Generate dynamic videos from reusable templates — right inside your web app. The Automated Video Generator is a pre-built solution powered by CreativeEditor SDK (CE.SDK), designed for developers who want to streamline video content creation at scale. This solution can be embedded as a fully interactive UI or used headlessly via CE.SDK’s programmatic API, giving you full flexibility to match your product’s workflow and user experience. [ Launch Web Demo ](https://img.ly/showcases/cesdk/placeholders-video/)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-placeholders-video) ## What is the Automated Video Generator Solution?[#](#what-is-the-automated-video-generator-solution) The Automated Video Generator is a customizable web-based solution that enables you to build templated video experiences using CE.SDK. It supports both user-facing UIs and headless automation — so whether you want users to edit videos manually or generate them via scripts and data inputs, the choice is yours. At its core, the editor supports **video placeholders**, allowing you to create flexible templates where users or automation scripts can drop in new assets, text, or colors — without altering layout integrity or brand guidelines. This pre-built solution is ideal for content automation platforms, marketing tools, social media management dashboards, or any workflow where video personalization and speed are critical. ## Key Features[#](#key-features) * **Video placeholders for automation** Define editable areas in a video template that users or scripts can replace with their own clips, images, or content — all while keeping layout consistency. * **Permission-based constraints** Configure placeholder behavior in “creator” mode to restrict movement, styling, or deletion — ensuring end-users stay on-brand. * **UI or headless execution** Use the interactive editor for in-app editing, or automate video generation entirely via CE.SDK’s headless API. * **Scalable output generation** Generate multiple variations of a video by swapping placeholder content — ideal for social campaigns, product showcases, or ad creatives. * **Web-optimized experience** Fully compatible with modern browsers and built for seamless integration in React or vanilla JavaScript apps. ## Why Use This Solution?[#](#why-use-this-solution) * **Fast time to value** Get up and running quickly with a plug-and-play editor that’s already configured for video automation. * **Boost user productivity** Reduce manual video editing by letting your users start from structured templates — or bypass editing altogether with programmatic generation. * **Flexible and brand-safe** Empower non-designers to create custom content without breaking brand guidelines. * **Developer-first architecture** Built on CE.SDK’s modular API and headless engine, so you can adapt it to fit UI-driven workflows or backend automation. --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/auto-resize-430d99) # Auto Resize Images and Videos with Angular Automatically generate size variations of your design and scale your marketing materials across platforms — directly inside your app. [ Launch Web Demo ](https://img.ly/showcases/cesdk/automated-resizing/)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-automated-resizing) ## What is the Auto-Resizer Solution?[#](#what-is-the-auto-resizer-solution) The Auto-Resizer is a prebuilt solution powered by CreativeEditor SDK (CE.SDK) that lets you embed automated design resizing into your web app. Whether you’re building a content creation tool, campaign manager, or internal marketing portal, this solution helps your users create consistent assets across platforms — without relying on manual design work. This solution can be used programmatically or with a visual UI, and integrates directly into your existing web application. ## Key Features[#](#key-features) * **Automatic multi-size generation** Resize a single design template into multiple platform-optimized dimensions in just one click. * **Supports common formats** Output ready-to-use designs for: * Instagram Story (1080 × 1920 px) * Instagram Post 4:5 (1050 × 1350 px) * X (Twitter) Post (1200 × 675 px) * Facebook Post (1200 × 630 px) * **Editable results** After auto-resizing, users can still fine-tune each version individually, offering flexibility where needed. * **Templated consistency** Enforce layout and brand consistency across sizes with predefined design constraints. * **No design team needed** Empower marketers and non-designers to create professional, on-brand variations at scale. ## Why Use This Solution?[#](#why-use-this-solution) Creating multiple size variations for each campaign can quickly become a bottleneck. The auto-resizer eliminates repetitive work by generating size-adapted versions of a single design — while still allowing edits to fine-tune each one. With this solution, you can: * Accelerate content production across teams and platforms * Reduce dependency on design resources * Ensure brand consistency in every output * Integrate resizing into your app with minimal development effort --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/ai-editor-5409b9) # Angular AI Photo & Video Editor Bring the power of generative AI directly into your app with the AI Editor – a prebuilt, embeddable solution built on top of the CreativeEditor SDK (CE.SDK). Designed for seamless in-editor use, it allows your users to generate and enhance content without switching tools or workflows. [ Launch Web Demo ](https://img.ly/showcases/cesdk/ai-editor/)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-ai-editor) ## What is the AI Editor Solution?[#](#what-is-the-ai-editor-solution) The AI Editor is a fully integrated CE.SDK configuration that enables image, video, audio, and voice generation directly inside your app’s editing interface. Users can start from a text prompt, an existing image, or video element—and generate high-quality, royalty-free content in seconds. Each AI tool is context-aware and accessible via the task bar or element-specific actions, creating a smooth and uninterrupted creative experience for your users. ## Key Features[#](#key-features) ### Generate images[#](#generate-images) Turn text prompts or base images into photorealistic or stylized visuals. Output raster or vector formats, with styles such as: * Studio portrait * Pixel art * Moodboard * Social post * Product mockup ### Generate videos[#](#generate-videos) Transform a single image or prompt into a short, 5-second animated video. Users can define visual tone and animation style. Great for: * Social content * Concept animation * Branding visuals ### Generate audio[#](#generate-audio) Create royalty-free soundtracks and effects from simple prompts like “ambient synth loop” or “forest sounds.” Outputs are ready to use in CE.SDK’s video timeline. ### Generate AI voiceovers[#](#generate-ai-voiceovers) Type a script and select from natural-sounding voice profiles. Adjust speed to match your content and add voiceovers to explainer videos or product demos. ### In-context AI tools[#](#in-context-ai-tools) Interact with any element on the canvas—text, image, or video—and apply intelligent enhancements: * Rewrite or improve text * Translate and fix grammar * Style and variant generation * Convert images to video ## Why Use This Solution?[#](#why-use-this-solution) * **Embed AI content generation directly in your app** * **Eliminate tool-switching** and keep users in a single creative workspace * **Increase user productivity** with fast, intuitive AI assistance * **Customize model backends** or use ours out-of-the-box * **Build on a proven platform** used by hundreds of production apps --- [Source](https:/img.ly/docs/cesdk/angular/prebuilt-solutions/3d-product-configurator-cd28d2) # Angular 3D Product Configurator & Customizer Easily embed a customizable 3D product preview experience into your web app with CE.SDK. This prebuilt solution integrates CE.SDK’s design capabilities with external 3D libraries to render real-time, photorealistic mockups of your products. It’s ideal for e-commerce, print-on-demand, and product personalization use cases. [ Launch Web Demo ](https://img.ly/showcases/cesdk/3d-mockup-editor/)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-3d-mockup-editor) ## What is the 3D Product Configurator Solution?[#](#what-is-the-3d-product-configurator-solution) The 3D Product Configurator is a demonstration of how CE.SDK can be extended to support interactive, real-time 3D visualizations. It allows your users to place their designs on lifelike product models and instantly preview the results. Although 3D rendering isn’t a built-in part of CE.SDK, this solution shows how easy it is to integrate with external 3D engines using CE.SDK’s flexible API. The result is a seamless design-to-visualization workflow—all within a browser. This solution currently supports business cards, apparel, and base caps. You can easily adapt it to support other product types such as stationery, accessories, or home goods. ## Key Features[#](#key-features) * **Live design-to-preview sync** Changes made in the editor are instantly reflected on the 3D product preview. * **Flexible mockup types** Supports various product categories like apparel, headwear, and cards, with extensibility for more. * **Interactive full-screen view** Users can click to explore the mockup in full-screen and inspect fine design details. * **Texture map editing** Modify surface materials or properties (like color or reflectivity) for a realistic final look. * **Download-ready mockups** Export mockups in the glTF (GL Transmission Format), a widely supported 3D file format. ## Why Use This Solution?[#](#why-use-this-solution) * **Boost conversions** Seeing a realistic preview of their personalized product builds trust and encourages buyers to complete the purchase. * **Reduce design errors** Real-time feedback helps users spot mistakes before ordering, reducing costly revisions and reprints. * **Improve customer experience** Users can engage directly with your product in a more immersive and visual way. * **Speed up implementation** The solution is fully built and ready to be cloned, giving you a fast path to launch with minimal effort. --- [Source](https:/img.ly/docs/cesdk/angular/outlines/strokes-c2e621) # Using Strokes In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to modify strokes through the `block` API. Strokes can be added to any shape or text and stroke styles are varying from plain solid lines to dashes and gaps of varying lengths and can have different end caps. ## Strokes[#](#strokes) ``` supportsStroke(id: DesignBlockId): boolean ``` Query if the given block has a stroke property. * `id`: The block to query. * Returns True if the block has a stroke property. ``` setStrokeEnabled(id: DesignBlockId, enabled: boolean): void ``` Enable or disable the stroke of the given design block. Required scope: ‘stroke/change’ * `id`: The block whose stroke should be enabled or disabled. * `enabled`: If true, the stroke will be enabled. ``` isStrokeEnabled(id: DesignBlockId): boolean ``` Query if the stroke of the given design block is enabled. * `id`: The block whose stroke state should be queried. * Returns True if the block’s stroke is enabled. ``` setStrokeColor(id: DesignBlockId, color: Color): void ``` Set the stroke color of the given design block. Required scope: ‘stroke/change’ * `id`: The block whose stroke color should be set. * `color`: The color to set. ``` getStrokeColor(id: DesignBlockId): Color ``` Get the stroke color of the given design block. * `id`: The block whose stroke color should be queried. * Returns The stroke color. ``` setStrokeWidth(id: DesignBlockId, width: number): void ``` Set the stroke width of the given design block. Required scope: ‘stroke/change’ * `id`: The block whose stroke width should be set. * `width`: The stroke width to be set. ``` getStrokeWidth(id: DesignBlockId): number ``` Get the stroke width of the given design block. * `id`: The block whose stroke width should be queried. * Returns The stroke’s width. ``` setStrokeStyle(id: DesignBlockId, style: StrokeStyle): void ``` Set the stroke style of the given design block. Required scope: ‘stroke/change’ * `id`: The block whose stroke style should be set. * `style`: The stroke style to be set. ``` type StrokeStyle = | 'Dashed' | 'DashedRound' | 'Dotted' | 'LongDashed' | 'LongDashedRound' | 'Solid'; ``` ``` getStrokeStyle(id: DesignBlockId): StrokeStyle ``` Get the stroke style of the given design block. * `id`: The block whose stroke style should be queried. * Returns The stroke’s style. ``` setStrokePosition(id: DesignBlockId, position: StrokePosition): void ``` Set the stroke position of the given design block. Required scope: ‘stroke/change’ * `id`: The block whose stroke position should be set. * `position`: The stroke position to be set. ``` type StrokePosition = 'Center' | 'Inner' | 'Outer'; ``` ``` getStrokePosition(id: DesignBlockId): StrokePosition ``` Get the stroke position of the given design block. * `id`: The block whose stroke position should be queried. * Returns The stroke position. ``` setStrokeCornerGeometry(id: DesignBlockId, cornerGeometry: StrokeCornerGeometry): void ``` Set the stroke corner geometry of the given design block. Required scope: ‘stroke/change’ * `id`: The block whose stroke join geometry should be set. * `cornerGeometry`: The stroke join geometry to be set. ``` type StrokeCornerGeometry = 'Bevel' | 'Miter' | 'Round'; ``` ``` getStrokeCornerGeometry(id: DesignBlockId): StrokeCornerGeometry ``` Get the stroke corner geometry of the given design block. * `id`: The block whose stroke join geometry should be queried. * Returns The stroke join geometry. ## Full Code[#](#full-code) Here’s the full code for using strokes: ``` // Check if block supports strokesif (engine.block.supportsStroke(block)) { // Enable the stroke engine.block.setStrokeEnabled(block, true); const strokeIsEnabled = engine.block.isStrokeEnabled(block); // Configure it engine.block.setStrokeWidth(block, 5); const strokeWidth = engine.block.getStrokeWidth(block); engine.block.setStrokeColor(block, { r: 0, g: 1, b: 0, a: 1 }); const strokeColor = engine.block.getStrokeColor(block); engine.block.setStrokeStyle(block, 'Dashed'); const strokeStyle = engine.block.getStrokeStyle(block); engine.block.setStrokePosition(block, 'Outer'); const strokePosition = engine.block.getStrokePosition(block); engine.block.setStrokeCornerGeometry(block, 'Round'); const strokeCornerGeometry = engine.block.getStrokeCornerGeometry(block);} ``` --- [Source](https:/img.ly/docs/cesdk/angular/outlines/shadows-and-glows-6610fa) # Shadows and Glows ``` // Configure a basic colored drop shadow if the block supports themif (engine.block.supportsDropShadow(block)) { engine.block.setDropShadowEnabled(block, true); engine.block.setDropShadowColor(block, { r: 1.0, g: 0.75, b: 0.8, a: 1.0 }); const dropShadowColor = engine.block.getDropShadowColor(block); engine.block.setDropShadowOffsetX(block, -10); engine.block.setDropShadowOffsetY(block, 5); const dropShadowOffsetX = engine.block.getDropShadowOffsetX(block); const dropShadowOffsetY = engine.block.getDropShadowOffsetY(block); engine.block.setDropShadowBlurRadiusX(block, -10); engine.block.setDropShadowBlurRadiusY(block, 5); engine.block.setDropShadowClip(block, false); const dropShadowClip = engine.block.getDropShadowClip(block); // Query a blocks drop shadow properties const dropShadowIsEnabled = engine.block.isDropShadowEnabled(block); const dropShadowBlurRadiusX = engine.block.getDropShadowBlurRadiusX(block); const dropShadowBlurRadiusY = engine.block.getDropShadowBlurRadiusY(block);} ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to modify an block’s drop shadow through the `block` API. Drop shadows can be added to any shape, text or image. One can adjust its offset relative to its block on the X and Y axes, its blur factor on the X and Y axes and whether it is visible behind a transparent block. ## Functions[#](#functions) ``` supportsDropShadow(id: DesignBlockId): boolean ``` Query if the given block has a drop shadow property. * `id`: The block to query. * Returns True if the block has a drop shadow property. ``` setDropShadowEnabled(id: DesignBlockId, enabled: boolean): void ``` Enable or disable the drop shadow of the given design block. Required scope: ‘appearance/shadow’ * `id`: The block whose drop shadow should be enabled or disabled. * `enabled`: If true, the drop shadow will be enabled. ``` isDropShadowEnabled(id: DesignBlockId): boolean ``` Query if the drop shadow of the given design block is enabled. * `id`: The block whose drop shadow state should be queried. * Returns True if the block’s drop shadow is enabled. ``` setDropShadowColor(id: DesignBlockId, color: Color): void ``` Set the drop shadow color of the given design block. Required scope: ‘appearance/shadow’ * `id`: The block whose drop shadow color should be set. * `color`: The color to set. ``` getDropShadowColor(id: DesignBlockId): Color ``` Get the drop shadow color of the given design block. * `id`: The block whose drop shadow color should be queried. * Returns The drop shadow color. ``` setDropShadowOffsetX(id: DesignBlockId, offsetX: number): void ``` Set the drop shadow’s X offset of the given design block. Required scope: ‘appearance/shadow’ * `id`: The block whose drop shadow’s X offset should be set. * `offsetX`: The X offset to be set. ``` setDropShadowOffsetY(id: DesignBlockId, offsetY: number): void ``` Set the drop shadow’s Y offset of the given design block. Required scope: ‘appearance/shadow’ * `id`: The block whose drop shadow’s Y offset should be set. * `offsetY`: The X offset to be set. ``` getDropShadowOffsetX(id: DesignBlockId): number ``` Get the drop shadow’s X offset of the given design block. * `id`: The block whose drop shadow’s X offset should be queried. * Returns The offset. ``` getDropShadowOffsetY(id: DesignBlockId): number ``` Get the drop shadow’s Y offset of the given design block. * `id`: The block whose drop shadow’s Y offset should be queried. * Returns The offset. ``` setDropShadowBlurRadiusX(id: DesignBlockId, blurRadiusX: number): void ``` Set the drop shadow’s blur radius on the X axis of the given design block. Required scope: ‘appearance/shadow’ * `id`: The block whose drop shadow’s blur radius should be set. * `blurRadiusX`: The blur radius to be set. ``` setDropShadowBlurRadiusY(id: DesignBlockId, blurRadiusY: number): void ``` Set the drop shadow’s blur radius on the Y axis of the given design block. Required scope: ‘appearance/shadow’ * `id`: The block whose drop shadow’s blur radius should be set. * `blurRadiusY`: The blur radius to be set. ``` getDropShadowBlurRadiusX(id: DesignBlockId): number ``` Get the drop shadow’s blur radius on the X axis of the given design block. * `id`: The block whose drop shadow’s blur radius should be queried. * Returns The blur radius. ``` getDropShadowBlurRadiusY(id: DesignBlockId): number ``` Get the drop shadow’s blur radius on the Y axis of the given design block. * `id`: The block whose drop shadow’s blur radius should be queried. * Returns The blur radius. ``` setDropShadowClip(id: DesignBlockId, clip: boolean): void ``` Set the drop shadow’s clipping of the given design block. (Only applies to shapes.) * `id`: The block whose drop shadow’s clip should be set. * `clip`: The drop shadow’s clip to be set. ``` getDropShadowClip(id: DesignBlockId): boolean ``` Get the drop shadow’s clipping of the given design block. * `id`: The block whose drop shadow’s clipping should be queried. * Returns The drop shadow’s clipping. ## Full Code[#](#full-code) Here’s the full code: ``` // Configure a basic colored drop shadow if the block supports themif (engine.block.supportsDropShadow(block)) { engine.block.setDropShadowEnabled(block, true); engine.block.setDropShadowColor(block, { r: 1.0, g: 0.75, b: 0.8, a: 1.0 }); const dropShadowColor = engine.block.getDropShadowColor(block); engine.block.setDropShadowOffsetX(block, -10); engine.block.setDropShadowOffsetY(block, 5); const dropShadowOffsetX = engine.block.getDropShadowOffsetX(block); const dropShadowOffsetY = engine.block.getDropShadowOffsetY(block); engine.block.setDropShadowBlurRadiusX(block, -10); engine.block.setDropShadowBlurRadiusY(block, 5); engine.block.setDropShadowClip(block, false); const dropShadowClip = engine.block.getDropShadowClip(block); // Query a blocks drop shadow properties const dropShadowIsEnabled = engine.block.isDropShadowEnabled(block); const dropShadowBlurRadiusX = engine.block.getDropShadowBlurRadiusX(block); const dropShadowBlurRadiusY = engine.block.getDropShadowBlurRadiusY(block);} ``` --- [Source](https:/img.ly/docs/cesdk/angular/outlines/overview-dfeb12) # Overview In CreativeEditor SDK (CE.SDK), _outlines_ refer to visual enhancements added around design elements. They include strokes, shadows, and glows, each serving to emphasize, separate, or stylize content. Outlines help improve visibility, create visual contrast, and enhance the overall aesthetic of a design. You can add, edit, and remove outlines both through the CE.SDK user interface and programmatically via the API. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Understanding Outlines[#](#understanding-outlines) * **Stroke (Outline):** A solid line that directly traces the border of an element. Strokes can vary in thickness, color, and style (such as dashed or dotted lines). * **Shadow:** A duplicate of the element rendered with an offset and blur effect, creating the illusion of depth. * **Glow:** A soft, diffused light that radiates outward from the element, typically used to create a luminous or halo effect. We don’t support `glow` directly in our API, however, it can be achieved by using a brightly-colored shadow. Each type of outline offers different visual styles and purposes, allowing you to tailor your design’s look and feel. ## Supported Elements[#](#supported-elements) You can apply outlines to a wide range of elements in CE.SDK, including: * Text elements * Shapes * Images * Stickers Some asset types or highly customized components may have limitations on which outline effects they support. Always check element capabilities if outline options appear unavailable. ## UI Editing[#](#ui-editing) In the CE.SDK user interface, you can: * **Add outlines** by selecting an element and enabling stroke, shadow, or glow options in the properties panel. * **Edit outline properties** such as color, thickness, opacity, blur radius, and offset directly through the UI controls. * **Remove outlines** by disabling the stroke, shadow, or glow for a selected element. These tools allow designers to quickly apply and adjust outlines without needing to write code. ## Programmatic Editing[#](#programmatic-editing) Developers can also manage outlines programmatically using the CE.SDK API. This includes: * **Accessing and modifying properties** such as stroke color, stroke width, shadow blur, and shadow offset. * **Enabling or disabling outlines** for individual design blocks. * **Removing outlines** programmatically by disabling stroke or shadow effects on a block. Programmatic control enables dynamic styling and automation for design generation workflows. ## Customizing Outline Properties[#](#customizing-outline-properties) Outlines in CE.SDK offer a variety of customizable properties to fit different design needs: * **Color:** Define the stroke or glow color to match branding or design themes. * **Thickness (Stroke Width):** Adjust how bold or subtle the stroke appears around the element. * **Opacity:** Control the transparency of strokes, shadows, or glows for subtle or strong effects. * **Blur (for Shadows and Glows):** Soften the appearance of shadows or glows by adjusting their blur radius. * **Offset (for Shadows):** Set how far a shadow is displaced from the element to control the sense of depth. --- [Source](https:/img.ly/docs/cesdk/angular/insert-media/position-and-align-cc6b6a) # Positioning and Alignment ``` const x = engine.block.getPositionX(block);const xMode = engine.block.getPositionXMode(block);const y = engine.block.getPositionY(block);const yMode = engine.block.getPositionYMode(block);engine.block.setPositionX(block, 0.25);engine.block.setPositionXMode(block, 'Percent');engine.block.setPositionY(block, 0.25);engine.block.setPositionYMode(block, 'Percent'); const rad = engine.block.getRotation(block);engine.block.setRotation(block, Math.PI / 2); const flipHorizontal = engine.block.getFlipHorizontal(block);const flipVertical = engine.block.getFlipVertical(block);engine.block.setFlipHorizontal(block, true);engine.block.setFlipVertical(block, false); const width = engine.block.getWidth(block);const widthMode = engine.block.getWidthMode(block);const height = engine.block.getHeight(block);const heightMode = engine.block.getHeightMode(block);engine.block.setWidth(block, 0.5);engine.block.setWidth(block, 2.5, true);engine.block.setWidthMode(block, 'Percent');engine.block.setHeight(block, 0.5);engine.block.setHeight(block, 2.5, true);engine.block.setHeightMode(block, 'Percent');const frameX = engine.block.getFrameX(block);const frameY = engine.block.getFrameY(block);const frameWidth = engine.block.getFrameWidth(block);const frameHeight = engine.block.getFrameHeight(block); engine.block.setAlwaysOnTop(block, false)val isAlwaysOnTop = engine.block.isAlwaysOnTop(block)engine.block.setAlwaysOnBottom(block, false)val isAlwaysOnBottom = engine.block.isAlwaysOnBottom(block)engine.block.bringToFront(block)engine.block.sendToBack(block)engine.block.bringForward(block)engine.block.sendBackward(block) const globalX = engine.block.getGlobalBoundingBoxX(block);const globalY = engine.block.getGlobalBoundingBoxY(block);const globalWidth = engine.block.getGlobalBoundingBoxWidth(block);const globalHeight = engine.block.getGlobalBoundingBoxHeight(block);const screenSpaceRect = engine.block.getScreenSpaceBoundingBoxXYWH([block]); engine.block.scale(block, 2.0, 0.5, 0.5); engine.block.fillParent(block); const pages = engine.scene.getPages();engine.block.resizeContentAware(pages, width: 100.0, 100.0); // Create blocks and append to pageconst member1 = engine.block.create('graphic');const member2 = engine.block.create('graphic');engine.block.appendChild(page, member1);engine.block.appendChild(page, member2);const distributable = engine.block.isDistributable([member1, member2]);if (distributable) { engine.block.distributeHorizontally([member1, member2], "Left"); engine.block.distributeVertically([member1, member2], "Top");}const alignable = engine.block.isAlignable([member1, member2]);if (alignable) { engine.block.alignHorizontally([member1, member2], "Left"); engine.block.alignVertically([member1, member2], "Top");} const isTransformLocked = engine.block.isTransformLocked(block);if (!isTransformLocked) { engine.block.setTransformLocked(block, true);} ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to modify scenes layout through the `block` API. ## Layout of Blocks[#](#layout-of-blocks) **Note on layout and frame size** The frame size is determined during the layout phase of the render process inside the engine. This means that calling `getFrameSize()` immediately after modifying the scene might return an inaccurate result. The CreativeEngine supports three different modes for positioning blocks. These can be set for each block and both coordinates independently: * `'Absolute'`: the position value is interpreted in the scene’s current design unit. * `'Percent'`: the position value is interpreted as percentage of the block’s parent’s size, where 1.0 means 100%. * `'Auto'` : the position is automatically determined. Likewise there are also three different modes for controlling a block’s size. Again both dimensions can be set independently: * `'Absolute'`: the size value is interpreted in the scene’s current design unit. * `'Percent'`: the size value is interpreted as percentage of the block’s parent’s size, where 1.0 means 100%. * `'Auto'` : the block’s size is automatically determined by the size of the block’s content. ### Positioning[#](#positioning) ``` getPositionX(id: DesignBlockId): number ``` Query a block’s x position. * `id`: The block to query. * Returns The value of the x position. ``` getPositionY(id: DesignBlockId): number ``` Query a block’s y position. * `id`: The block to query. * Returns The value of the y position. ``` getPositionXMode(id: DesignBlockId): PositionMode ``` Query a block’s mode for its x position. * `id`: The block to query. * Returns The current mode for the x position: absolute, percent or undefined. ``` getPositionYMode(id: DesignBlockId): PositionMode ``` Query a block’s mode for its y position. * `id`: The block to query. * Returns The current mode for the y position: absolute, percent or undefined. ``` setPositionX(id: DesignBlockId, value: number): void ``` Update a block’s x position. The position refers to the block’s local space, relative to its parent with the origin at the top left. Required scope: ‘layer/move’ * `id`: The block to update. * `value`: The value of the x position. ``` setPositionY(id: DesignBlockId, value: number): void ``` Update a block’s y position. The position refers to the block’s local space, relative to its parent with the origin at the top left. Required scope: ‘layer/move’ * `id`: The block to update. * `value`: The value of the y position. ``` setPositionXMode(id: DesignBlockId, mode: PositionMode): void ``` Set a block’s mode for its x position. Required scope: ‘layer/move’ * `id`: The block to update. * `mode`: The x position mode: absolute, percent or undefined. ``` setPositionYMode(id: DesignBlockId, mode: PositionMode): void ``` Set a block’s mode for its y position. Required scope: ‘layer/move’ * `id`: The block to update. * `mode`: The y position mode: absolute, percent or undefined. ``` type PositionMode = 'Absolute' | 'Percent' | 'Auto'; ``` * 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 ### Size[#](#size) ``` getWidth(id: DesignBlockId): number ``` Query a block’s width. * `id`: The block to query. * Returns The value of the block’s width. ``` getWidthMode(id: DesignBlockId): SizeMode ``` Query a block’s mode for its width. * `id`: The block to query. * Returns The current mode for the width: absolute, percent or auto. ``` getHeight(id: DesignBlockId): number ``` Query a block’s height. * `id`: The block to query. * Returns The value of the block’s height. ``` getHeightMode(id: DesignBlockId): SizeMode ``` Query a block’s mode for its height. * `id`: The block to query. * Returns The current mode for the height: absolute, percent or auto. ``` setWidth(id: DesignBlockId, value: number, maintainCrop?: boolean): void ``` Update a block’s width and optionally maintain the crop. If the crop is maintained, the crop values will be automatically adjusted. The content fill mode `Cover` is only kept if the `features/transformEditsRetainCoverMode` setting is enabled, otherwise it will change to `Crop`. Required scope: ‘layer/resize’ * `id`: The block to update. * `value`: The new width of the block. * `maintainCrop`: Whether or not the crop values, if available, should be automatically adjusted. ``` setWidthMode(id: DesignBlockId, mode: SizeMode): void ``` Set a block’s mode for its width. Required scope: ‘layer/resize’ * `id`: The block to update. * `mode`: The width mode: Absolute, Percent or Auto. ``` setHeight(id: DesignBlockId, value: number, maintainCrop?: boolean): void ``` Update a block’s height and optionally maintain the crop. If the crop is maintained, the crop values will be automatically adjusted. The content fill mode `Cover` is only kept if the `features/transformEditsRetainCoverMode` setting is enabled, otherwise it will change to `Crop`. Required scope: ‘layer/resize’ * `id`: The block to update. * `value`: The new height of the block. * `maintainCrop`: Whether or not the crop values, if available, should be automatically adjusted. ``` setHeightMode(id: DesignBlockId, mode: SizeMode): void ``` Set a block’s mode for its height. Required scope: ‘layer/resize’ * `id`: The block to update. * `mode`: The height mode: Absolute, Percent or Auto. ``` type SizeMode = 'Absolute' | 'Percent' | 'Auto'; ``` * 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 ### Layers[#](#layers) ``` setAlwaysOnTop(id: DesignBlockId, enabled: boolean): void ``` Update the block’s always-on-top property. If true, this blocks’s global sorting order is automatically adjusted to be higher than all other siblings without this property. If more than one block is set to be always-on-top, the child order decides which is on top. * `id`: the block to update. * `enabled`: whether the block shall be always-on-top. ``` isAlwaysOnTop(id: DesignBlockId): boolean ``` Query a block’s always-on-top property. * `id`: the block to query. * Returns true if the block is set to be always-on-top, false otherwise. ``` setAlwaysOnBottom(id: DesignBlockId, enabled: boolean): void ``` Update the block’s always-on-bottom property. If true, this blocks’s global sorting order is automatically adjusted to be lower than all other siblings without this property. If more than one block is set to be always-on-bottom, the child order decides which is on bottom. * `id`: the block to update. * `enabled`: whether the block shall always be below its siblings. ``` isAlwaysOnBottom(id: DesignBlockId): boolean ``` Query a block’s always-on-bottom property. * `id`: the block to query. * Returns true if the block is set to be always-on-bottom, false otherwise. ``` bringToFront(id: DesignBlockId): void ``` Updates the sorting order of this block and all of its manually created siblings so that the given block has the highest sorting order. If the block is parented to a track, it is first moved up in the hierarchy. * `id`: The id of the block to be given the highest sorting order among its siblings. ``` sendToBack(id: DesignBlockId): void ``` Updates the sorting order of this block and all of its manually created siblings so that the given block has the lowest sorting order. If the block is parented to a track, it is first moved up in the hierarchy. * `id`: The id of the block to be given the lowest sorting order among its siblings. ``` bringForward(id: DesignBlockId): void ``` Updates the sorting order of this block and all of its superjacent siblings so that the given block has a higher sorting order than the next superjacent sibling. If the block is parented to a track, it is first moved up in the hierarchy. Empty tracks and empty groups are passed by. * `id`: The id of the block to be given a higher sorting than the next superjacent sibling. ``` sendBackward(id: DesignBlockId): void ``` Updates the sorting order of this block and all of its manually created and subjacent siblings so that the given block will have a lower sorting order than the next subjacent sibling. If the block is parented to a track, it is first moved up in the hierarchy. Empty tracks and empty groups are passed by. * `id`: The id of the block to be given a lower sorting order than the next subjacent sibling. ### Rotation[#](#rotation) ``` getRotation(id: DesignBlockId): number ``` Query a block’s rotation in radians. * `id`: The block to query. * Returns The block’s rotation around its center in radians. ``` setRotation(id: DesignBlockId, radians: number): void ``` Update a block’s rotation. Required scope: ‘layer/rotate’ * `id`: The block to update. * `radians`: The new rotation in radians. Rotation is applied around the block’s center. ### Flipping[#](#flipping) ``` getFlipHorizontal(id: DesignBlockId): boolean ``` Query a block’s horizontal flip state. * `id`: The block to query. * Returns A boolean indicating for whether the block is flipped in the queried direction ``` getFlipVertical(id: DesignBlockId): boolean ``` Query a block’s vertical flip state. * `id`: The block to query. * Returns A boolean indicating for whether the block is flipped in the queried direction ``` setFlipHorizontal(id: DesignBlockId, flip: boolean): void ``` Update a block’s horizontal flip. Required scope: ‘layer/flip’ * `id`: The block to update. * `flip`: If the flip should be enabled. ``` setFlipVertical(id: DesignBlockId, flip: boolean): void ``` Update a block’s vertical flip. Required scope: ‘layer/flip’ * `id`: The block to update. * `flip`: If the flip should be enabled. ### Scaling[#](#scaling) ``` scale(id: DesignBlockId, scale: number, anchorX?: number, anchorY?: number): void ``` Scales the block and all of its children proportionally around the specified relative anchor point. This updates the position, size and style properties (e.g. stroke width) of the block and its children. Required scope: ‘layer/resize’ * `id`: The block that should be scaled. * `scale`: The scale factor to be applied to the current properties of the block. * `anchorX`: The relative position along the width of the block around which the scaling should occur. (0 = left edge, 0.5 = center, 1 = right edge) * `anchorY`: The relative position along the height of the block around which the scaling should occur. (0 = top edge, 0.5 = center, 1 = bottom edge) ### Fill a Block’s Parent[#](#fill-a-blocks-parent) ``` fillParent(id: DesignBlockId): void ``` Resize and position a block to entirely fill its parent block. The crop values of the block, except for the flip and crop rotation, are reset if it can be cropped. If the size of the block’s fill is unknown, the content fill mode is changed from `Crop` to `Cover` to prevent invalid crop values. Required scope: ‘layer/move’ - ‘layer/resize’ * `id`: The block that should fill its parent. ### Resize Blocks Content-aware[#](#resize-blocks-content-aware) ``` resizeContentAware(ids: DesignBlockId[], width: number, height: number): void ``` Resize all blocks to the given size. The content of the blocks is automatically adjusted to fit the new dimensions. Required scope: ‘layer/resize’ * `ids`: The blocks to resize. * `width`: The new width of the blocks. * `height`: The new height of the blocks. ### Even Distribution[#](#even-distribution) Multiple blocks can be distributed horizontally or vertically within their bounding box. The blocks are moved to have the remaining space divided evenly between the blocks. Blocks without a position and blocks that are not allowed to be moved will not be distributed. ``` isDistributable(ids: DesignBlockId[]): boolean ``` Confirms that a given set of blocks can be distributed. * `ids`: An array of block ids. * Returns Whether the blocks can be distributed. ``` distributeHorizontally(ids: DesignBlockId[]): void ``` Distribute multiple blocks horizontally within their bounding box so that the space between them is even. Required scope: ‘layer/move’ * `ids`: A non-empty array of block ids. ``` distributeVertically(ids: DesignBlockId[]): void ``` Distribute multiple blocks vertically within their bounding box so that the space between them is even. Required scope: ‘layer/move’ * `ids`: A non-empty array of block ids. ### Alignment[#](#alignment) Multiple blocks can be aligned horizontally or vertically within their bounding box. When a group is given, the elements within the group are aligned. If a single block is given, it gets aligned within its parent. Blocks without a position and blocks that are not allowed to be moved will not be aligned. ``` isAlignable(ids: DesignBlockId[]): boolean ``` Confirms that a given set of blocks can be aligned. * `ids`: An array of block ids. * Returns Whether the blocks can be aligned. ``` alignHorizontally(ids: DesignBlockId[], horizontalBlockAlignment: HorizontalBlockAlignment): void ``` Align multiple blocks horizontally within their bounding box or a single block to its parent. Required scope: ‘layer/move’ * `ids`: A non-empty array of block ids. * `alignment`: How they should be aligned: left, right, or center ``` alignVertically(ids: DesignBlockId[], verticalBlockAlignment: VerticalBlockAlignment): void ``` Align multiple blocks vertically within their bounding box or a single block to its parent. Required scope: ‘layer/move’ * `ids`: A non-empty array of block ids. * `alignment`: How they should be aligned: top, bottom, or center ### Computed Dimensions[#](#computed-dimensions) ``` getFrameX(id: DesignBlockId): number ``` Get a block’s layout position on the x-axis. The position is only available after an internal update loop which only occurs if the `features/implicitUpdatesEnabled` setting is set. * `id`: The block to query. * Returns The layout position on the x-axis. ``` getFrameY(id: DesignBlockId): number ``` Get a block’s layout position on the y-axis. The position is only available after an internal update loop which only occurs if the `features/implicitUpdatesEnabled` setting is set. * `id`: The block to query. * Returns The layout position on the y-axis. ``` getFrameWidth(id: DesignBlockId): number ``` Get a block’s layout width. The width is only available after an internal update loop which only occurs if the `features/implicitUpdatesEnabled` setting is set. * `id`: The block to query. * Returns The layout width. ``` getFrameHeight(id: DesignBlockId): number ``` Get a block’s layout height. The height is only available after an internal update loop which only occurs if the `features/implicitUpdatesEnabled` setting is set. * `id`: The block to query. * Returns The layout height. ``` getGlobalBoundingBoxX(id: DesignBlockId): number ``` Get the x position of the block’s axis-aligned bounding box in the scene’s global coordinate space. The scene’s global coordinate space has its origin at the top left. * `id`: The block whose bounding box should be calculated. * Returns float The x coordinate of the position of the axis-aligned bounding box. ``` getGlobalBoundingBoxY(id: DesignBlockId): number ``` Get the y position of the block’s axis-aligned bounding box in the scene’s global coordinate space. The scene’s global coordinate space has its origin at the top left. * `id`: The block whose bounding box should be calculated. * Returns float The y coordinate of the position of the axis-aligned bounding box. ``` getGlobalBoundingBoxWidth(id: DesignBlockId): number ``` Get the width of the block’s axis-aligned bounding box in the scene’s global coordinate space. The scene’s global coordinate space has its origin at the top left. * `id`: The block whose bounding box should be calculated. * Returns float The width of the axis-aligned bounding box. ``` getGlobalBoundingBoxHeight(id: DesignBlockId): number ``` Get the height of the block’s axis-aligned bounding box in the scene’s global coordinate space. The scene’s global coordinate space has its origin at the top left. * `id`: The block whose bounding box should be calculated. * Returns float The height of the axis-aligned bounding box. ``` getScreenSpaceBoundingBoxXYWH(ids: DesignBlockId[]): XYWH ``` Get the position and size of the axis-aligned bounding box for the given blocks in screen space. * `ids`: The block to query. * Returns The position and size of the bounding box. ### Transform Locking[#](#transform-locking) You can lock the transform of a block to prevent changes to any of its transformations. That is the block’s position, rotation, scale, and sizing. ``` isTransformLocked(id: DesignBlockId): boolean ``` Query a block’s transform locked state. If true, the block’s transform can’t be changed. * `id`: The block to query. * Returns True if transform locked, false otherwise. ``` setTransformLocked(id: DesignBlockId, locked: boolean): void ``` Update a block’s transform locked state. * `id`: The block to update. * `locked`: Whether the block’s transform should be locked. ## Full Code[#](#full-code) Here’s the full code: ``` const x = engine.block.getPositionX(block);const xMode = engine.block.getPositionXMode(block);const y = engine.block.getPositionY(block);const yMode = engine.block.getPositionYMode(block);engine.block.setPositionX(block, 0.25);engine.block.setPositionXMode(block, 'Percent');engine.block.setPositionY(block, 0.25);engine.block.setPositionYMode(block, 'Percent'); const rad = engine.block.getRotation(block);engine.block.setRotation(block, Math.PI / 2); const flipHorizontal = engine.block.getFlipHorizontal(block);const flipVertical = engine.block.getFlipVertical(block);engine.block.setFlipHorizontal(block, true);engine.block.setFlipVertical(block, false); const width = engine.block.getWidth(block);const widthMode = engine.block.getWidthMode(block);const height = engine.block.getHeight(block);const heightMode = engine.block.getHeightMode(block);engine.block.setWidth(block, 0.5);engine.block.setWidth(block, 2.5, true);engine.block.setWidthMode(block, 'Percent');engine.block.setHeight(block, 0.5);engine.block.setHeight(block, 2.5, true);engine.block.setHeightMode(block, 'Percent');const frameX = engine.block.getFrameX(block);const frameY = engine.block.getFrameY(block);const frameWidth = engine.block.getFrameWidth(block);const frameHeight = engine.block.getFrameHeight(block); engine.block.setAlwaysOnTop(block, false)val isAlwaysOnTop = engine.block.isAlwaysOnTop(block)engine.block.setAlwaysOnBottom(block, false)val isAlwaysOnBottom = engine.block.isAlwaysOnBottom(block)engine.block.bringToFront(block)engine.block.sendToBack(block)engine.block.bringForward(block)engine.block.sendBackward(block) const globalX = engine.block.getGlobalBoundingBoxX(block);const globalY = engine.block.getGlobalBoundingBoxY(block);const globalWidth = engine.block.getGlobalBoundingBoxWidth(block);const globalHeight = engine.block.getGlobalBoundingBoxHeight(block);const screenSpaceRect = engine.block.getScreenSpaceBoundingBoxXYWH([block]); engine.block.scale(block, 2.0, 0.5, 0.5); engine.block.fillParent(block); const pages = engine.scene.getPages();engine.block.resizeContentAware(pages, width: 100.0, 100.0); // Create blocks and append to pageconst member1 = engine.block.create('graphic');const member2 = engine.block.create('graphic');engine.block.appendChild(page, member1);engine.block.appendChild(page, member2);const distributable = engine.block.isDistributable([member1, member2]);if (distributable) { engine.block.distributeHorizontally([member1, member2], "Left"); engine.block.distributeVertically([member1, member2], "Top");}const alignable = engine.block.isAlignable([member1, member2]);if (alignable) { engine.block.alignHorizontally([member1, member2], "Left"); engine.block.alignVertically([member1, member2], "Top");} const isTransformLocked = engine.block.isTransformLocked(block);if (!isTransformLocked) { engine.block.setTransformLocked(block, true);} ``` --- [Source](https:/img.ly/docs/cesdk/angular/insert-media/images-63848a) # Insert Images Learn how to insert images into a scene using the [IMG.LY](http://img.ly/) **CreativeEditor SDK (CE.SDK)** for the web. Choose either: * The CreativeEditor prebuilt UI. * Programmatic insertion via JavaScript. This gives you flexibility to build **interactive design workflows**, enable user-generated content, or automate image placement based on logic or data. CE.SDK supports a wide range of image formats, including **`.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, and `.bmp`** (see a [full list](angular/file-format-support-3c4b2a/) of supported file types). ## Insert Images Using the UI[#](#insert-images-using-the-ui) CE.SDK’s UI provides an image tool for uploading images from device sources onto the canvas. There are three upload options: ### 1\. The Upload Menu[#](#1-the-upload-menu) Select **Upload** > **Add File** to insert images from your machine. ![Upload dialog showing Add File](/docs/cesdk/_astro/upload.BtsXlt0A_Z20U6iL.png) ![Add File button from Upload](/docs/cesdk/_astro/add-file-generic.-PeSUdIY_Z1okpiY.png) ### 2\. The Images Menu[#](#2-the-images-menu) Select **Images** > **Add Files** to insert images from your computer. ![Images button in the Editor menu](/docs/cesdk/_astro/images-button.BQkM8tl6_Z293gK4.png) ![Add File button](/docs/cesdk/_astro/add-file._rpLniaz_Z2gPAw0.png) ### 3\. Drag and Drop[#](#3-drag-and-drop) Drag and drop images from your device onto the canvas. ![Drag-and-drop target on canvas](/docs/cesdk/_astro/drag-and-drop.C0XSMXZx_2nN6Gz.png) ### Supported Image Sources[#](#supported-image-sources) You can upload images from: * Your device via file picker. * Remote sources (via [asset library integration](angular/import-media/asset-panel/customize-c9a4de/) ). Once inserted, you can visually edit the image using different methods: * Move * Resize * Crop * Rotate * Stack You can also [customize](angular/user-interface/customization-72b2f8/) the user interface. ## Automate Image Insertion[#](#automate-image-insertion) You can insert images into a scene directly using JavaScript. This is useful for apps with: * Automation * Batch workflows * Logic-driven design experiences To do so, you need to: * Add the CreativeEngine to your stack. * Configure CreativeEngine with your license key. Next, you start creating and configuring blocks using the engine methods. ### JavaScript Examples[#](#javascript-examples) These code examples show you how to use CreativeEngine methods to insert image blocks into scenes. #### 1\. Create a Graphic Block:[#](#1-create-a-graphic-block) ``` let imageBlock = try engine.block.create(.graphic) ``` By creating a graphic block, you’re allocating a container that can hold fills, shapes, text, and transformation properties. #### 2\. Set the Image’s Properties[#](#2-set-the-images-properties) Set the image’s shape by creating a rectangular shape block in the engine. For example, the following line creates a rectangular shape using the BlockAPI: ``` let shape = try engine.block.createShape(.rect)try engine.block.setShape(imageBlock, shape: shape) ``` Allocate a new image fill object and specify the image source. For example, the following code sets the source to an IMG.LY CDN URI, instructing the engine to download and render the image: ``` let imageFill = try engine.block.createFill(.image)try engine.block.setString( imageFill, property: "fill/image/imageFileURI", value: "https://cdn.img.ly/assets/example.jpg")try engine.block.setFill(imageBlock, fill: imageFill) ``` 💡 You may replace the provided remote URL with a **local asset URI**, or use asset sources to register bundled or uploaded images, depending on your requirements. #### 3\. Optional: Add a Filtering Tag[#](#3-optional-add-a-filtering-tag) Optionally, you can set the kind of block. This lets you query or filter blocks later. ``` try engine.block.setKind(imageBlock, kind: "image") ``` #### 4\. Add the Image to the Scene[#](#4-add-the-image-to-the-scene) Insert the graphic block into the page to render the image: ``` let page = try engine.block.find(byType: .page).first!try engine.block.appendChild(page, child: imageBlock) ``` ### Next Steps[#](#next-steps) After inserting an image, you can: * [Edit and transform](angular/edit-image-c64912/) the image. * [Apply filters and effects](angular/filters-and-effects-6f88ac/) . * [Export your design](angular/export-save-publish-47e28a/) . --- [Source](https:/img.ly/docs/cesdk/angular/open-the-editor/uri-resolver-36b624) # URI Resolver Learn how to intercept and transform asset URIs in CE.SDK, enabling authentication and custom resolution logic. ![CE.SDK URI Resolver demonstration showing custom resolution behavior](/docs/cesdk/_astro/browser.hero.DcGG2Jzb_9e91B.webp) 5 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-open-the-editor-uri-resolver-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-open-the-editor-uri-resolver-browser) When CE.SDK loads an asset, it resolves the URI to an absolute path before fetching. You can intercept this process to add authentication tokens or transform URIs based on your application’s needs. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; /** * CE.SDK Plugin: URI Resolver Guide * * This example demonstrates: * - Understanding default URI resolution behavior * - Setting custom URI resolvers * - Adding authentication tokens * - Removing custom resolvers */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Create a design scene await cesdk.createDesignScene(); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page dimensions engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); // Set page background to light gray const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.96, g: 0.96, b: 0.96, a: 1.0 }); // ======================================== // Section 1: Understanding Default URI Resolution // ======================================== // Test resolution without loading assets const relativeURI = '/images/photo.jpg'; const resolvedURI = engine.editor.getAbsoluteURI(relativeURI); // eslint-disable-next-line no-console console.log('Default resolution:'); // eslint-disable-next-line no-console console.log(` Input: ${relativeURI}`); // eslint-disable-next-line no-console console.log(` Output: ${resolvedURI}`); // ======================================== // Section 2: Setting a Custom URI Resolver // ======================================== // Set a custom resolver that transforms specific file types engine.editor.setURIResolver((uri, defaultURIResolver) => { // Transform JPG files to a watermarked version if (uri.endsWith('.jpg')) { // eslint-disable-next-line no-console console.log(`Custom resolver: Transforming ${uri}`); return 'https://img.ly/static/ubq_samples/sample_1.jpg'; } // Use default resolver for all other URIs return defaultURIResolver(uri); }); // Test the custom resolver // ======================================== // Section 2: Adding Authentication with JWT Tokens // ======================================== // Pre-generate token BEFORE setting the resolver (must be synchronous) const authToken = 'demo-jwt-token-123'; // Set resolver that adds authentication to specific endpoints engine.editor.setURIResolver((uri, defaultURIResolver) => { // Only add auth token to URIs pointing to your stable link endpoint if (uri.includes('your-server/image-stable-links/')) { const authenticatedURI = `${uri}?auth=${authToken}`; // eslint-disable-next-line no-console console.log(`\nAuth resolver: Adding token to ${uri}`); // eslint-disable-next-line no-console console.log(` Result: ${authenticatedURI}`); return authenticatedURI; } // Use default resolver for all other URIs return defaultURIResolver(uri); }); // Test authentication with a protected URI const protectedURI = 'https://your-server/image-stable-links/abc123'; engine.editor.getAbsoluteURI(protectedURI); // ======================================== // Section 3: Removing a Custom Resolver // ======================================== // Remove the custom resolver to restore default behavior engine.editor.setURIResolver((uri, defaultURIResolver) => defaultURIResolver(uri) ); // eslint-disable-next-line no-console console.log('\n✓ Removed custom resolver - back to default behavior'); // ======================================== // Visual Demonstration: Load Images // ======================================== // Create a visual demonstration with actual image loading // This shows that the resolver affects actual asset loading, not just getAbsoluteURI() // Set a simple resolver for the demo engine.editor.setURIResolver((uri, defaultURIResolver) => { // For this demo, ensure all images resolve to valid URLs if (uri.includes('sample')) { return uri; } return defaultURIResolver(uri); }); // Create three image blocks to demonstrate URI resolution in action const imageSize = { width: 200, height: 150 }; const spacing = 40; const startX = (800 - (imageSize.width * 3 + spacing * 2)) / 2; const startY = (600 - imageSize.height) / 2; // Image 1: Standard resolution const image1 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: imageSize } ); engine.block.setPositionX(image1, startX); engine.block.setPositionY(image1, startY); engine.block.appendChild(page, image1); // Image 2: Another sample const image2 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_2.jpg', { size: imageSize } ); engine.block.setPositionX(image2, startX + imageSize.width + spacing); engine.block.setPositionY(image2, startY); engine.block.appendChild(page, image2); // Image 3: Third sample const image3 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: imageSize } ); engine.block.setPositionX(image3, startX + (imageSize.width + spacing) * 2); engine.block.setPositionY(image3, startY); engine.block.appendChild(page, image3); // Zoom to fit all content await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); // eslint-disable-next-line no-console console.log('\n✓ URI Resolver guide loaded successfully!'); }} export default Example; ``` ## Default URI Resolution[#](#default-uri-resolution) By default, CE.SDK resolves URIs relative to the `basePath` setting. Absolute URIs (with http://, https://, data:) pass through unchanged, while relative paths get prepended with `basePath`. Use `getAbsoluteURI()` to test how URIs resolve without loading assets: ``` // Test resolution without loading assetsconst relativeURI = '/images/photo.jpg';const resolvedURI = engine.editor.getAbsoluteURI(relativeURI);// eslint-disable-next-line no-consoleconsole.log('Default resolution:');// eslint-disable-next-line no-consoleconsole.log(` Input: ${relativeURI}`);// eslint-disable-next-line no-consoleconsole.log(` Output: ${resolvedURI}`); ``` ## Custom URI Resolver[#](#custom-uri-resolver) Set a custom resolver to intercept and transform URIs. The resolver receives the URI and a `defaultURIResolver` function for fallback behavior: ``` // Set a custom resolver that transforms specific file typesengine.editor.setURIResolver((uri, defaultURIResolver) => { // Transform JPG files to a watermarked version if (uri.endsWith('.jpg')) { // eslint-disable-next-line no-console console.log(`Custom resolver: Transforming ${uri}`); return 'https://img.ly/static/ubq_samples/sample_1.jpg'; } // Use default resolver for all other URIs return defaultURIResolver(uri);}); ``` **Important:** The resolver must be synchronous—no `async`/`await` or Promises. Pre-compute any tokens or transformations before setting the resolver. ## Adding Authentication[#](#adding-authentication) A common use case is adding authentication tokens to asset URIs. Generate the token before setting the resolver, then append it as a query parameter: ``` // Pre-generate token BEFORE setting the resolver (must be synchronous)const authToken = 'demo-jwt-token-123'; // Set resolver that adds authentication to specific endpointsengine.editor.setURIResolver((uri, defaultURIResolver) => { // Only add auth token to URIs pointing to your stable link endpoint if (uri.includes('your-server/image-stable-links/')) { const authenticatedURI = `${uri}?auth=${authToken}`; // eslint-disable-next-line no-console console.log(`\nAuth resolver: Adding token to ${uri}`); // eslint-disable-next-line no-console console.log(` Result: ${authenticatedURI}`); return authenticatedURI; } // Use default resolver for all other URIs return defaultURIResolver(uri);}); // Test authentication with a protected URIconst protectedURI = 'https://your-server/image-stable-links/abc123';engine.editor.getAbsoluteURI(protectedURI); ``` Your server validates the token and redirects to the actual asset (e.g., pre-signed S3 URL). CE.SDK follows redirects automatically. ## Removing a Resolver[#](#removing-a-resolver) Restore default behavior by setting a resolver that delegates to `defaultURIResolver`: ``` // Remove the custom resolver to restore default behaviorengine.editor.setURIResolver((uri, defaultURIResolver) => defaultURIResolver(uri));// eslint-disable-next-line no-consoleconsole.log('\n✓ Removed custom resolver - back to default behavior'); ``` ## Key Constraints[#](#key-constraints) * **Synchronous only**: No `async`/`await` or Promises * **Must return absolute URIs**: Include scheme (http://, https://, data:) * **One resolver at a time**: New calls overwrite previous resolvers * **Delegate unmatched URIs**: Pass to `defaultURIResolver()` for unchanged paths ## Next Steps[#](#next-steps) * [Configuration](angular/configuration-2c1c3d/) — CE.SDK initialization and baseURL settings * [Load Assets from Remote](angular/import-media/from-remote-source-b65faf/) — Load assets from remote URLs and servers --- [Source](https:/img.ly/docs/cesdk/angular/open-the-editor/overview-99444b) # Overview CreativeEditor SDK (CE.SDK) offers multiple ways to open the editor. Whether you’re starting with a blank canvas or importing complex layered files, CE.SDK gives you the building blocks to launch an editing session tailored to your users’ needs. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Ways to Open the Editor[#](#ways-to-open-the-editor) You can initialize CE.SDK in several ways depending on your content pipeline: * **Start with a Blank Canvas** Useful for creating new content from scratch. Define canvas dimensions and scene mode manually or programmatically. * **Load a Scene** Load a saved scene from JSON, archive, or blob to restore a previous editing session or template. * **Create from Media** Initialize the editor with a preloaded image, video. * **Create from Template** Kick off the editor with a predefined template, including placeholders and editing constraints. * **Import a Design** Import external designs from InDesign or Photoshop by running them through an importer and edit the resulting scene or archive in the SDK. ## Using Low-Quality / High-Quality Assets[#](#using-low-quality--high-quality-assets) To ensure responsive editing and high-quality exports, CE.SDK allows you to dynamically switch between asset resolutions: * **Edit with Low-Res Assets** Load smaller versions of images or videos during the editing process to reduce memory usage and improve performance. * **Export with High-Res Assets** Swap out low-res placeholders for full-quality assets just before exporting. This can be handled using the Scene or Block APIs by switching asset paths or making use of source sets for fills. This pattern is commonly used in design systems that require high-resolution print or web output while maintaining editing performance. ## Working with Watermarked or Placeholder Media[#](#working-with-watermarked-or-placeholder-media) CE.SDK supports licensing-based workflows where full-resolution assets are only available after purchase or user action: * **Use Watermarked or Preview Media on Load** Start with branded, obfuscated, or watermarked assets to limit unauthorized use. * **Swap with Purchased Assets Post-Checkout** Replace asset URIs within the same scene structure using a one-time update, ensuring consistency without disrupting layout or styling. ## Implementing a Custom URI Resolver[#](#implementing-a-custom-uri-resolver) CE.SDK provides a `setURIResolver()` method to intercept and customize asset loading: * **Why Use a URI Resolver?** Handle dynamic URL rewriting, token-based authentication, asset migration, CDN fallbacks, or redirect requests to internal APIs. * **How It Works** The engine routes every asset URI through your custom resolver function. This function returns the final, resolved URI used for the current fetch operation. * **Recommended Use Cases**: * Add auth headers or query params * Redirect public assets to internal mirrors * Handle signed URLs or token expiration --- [Source](https:/img.ly/docs/cesdk/angular/open-the-editor/set-zoom-level-d31896) # Image Zoom Library ``` // Zoom to 100%engine.scene.setZoomLevel(1.0); // Zoom to 50%engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel()); // Bring entire scene in view with padding of 20px in all directionsengine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0); // Follow page with padding of 20px in both directionsengine.scene.enableZoomAutoFit(page, 'Both', 20.0, 20.0, 20.0, 20.0); // Stop following pageengine.scene.disableZoomAutoFit(scene);// Query if zoom auto-fit is enabled for pageengine.scene.isZoomAutoFitEnabled(scene); // Keep the scene with padding of 10px within the cameraengine.scene.unstable_enableCameraPositionClamping( [scene], 10.0, 10.0, 10.0, 10.0, 0.0, 0.0, 0.0, 0.0,); engine.scene.unstable_disableCameraPositionClamping();// Query if zoom zoom clamping is enabled for the sceneengine.scene.unstable_isCameraPositionClampingEnabled(); // Allow zooming from 12.5% to 800% relative to the size of a pageengine.scene.unstable_enableCameraZoomClamping( [page], 0.125, 8.0, 0.0, 0.0, 0.0, 0.0,); engine.scene.unstable_disableCameraZoomClamping();// Query if zoom zoom clamping is enabled for the sceneengine.scene.unstable_isCameraZoomClampingEnabled(); // Get notified when the zoom level changesconst unsubscribeZoomLevelChanged = engine.scene.onZoomLevelChanged(() => { const zoomLevel = engine.scene.getZoomLevel(); console.log('Zoom level is now: ', zoomLevel);});unsubscribeZoomLevelChanged(); ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to control and observe camera zoom via the `scene` API. ## Functions[#](#functions) ``` getZoomLevel(): number ``` Get the zoom level of the scene or for a camera in the scene in unit `dpx/dot`. A zoom level of 2.0 results in one pixel in the design to be two pixels on the screen. * Returns The zoom level of the block’s camera. ``` setZoomLevel(zoomLevel?: number): void ``` Set the zoom level of the scene, e.g., for headless versions. This only shows an effect if the zoom level is not handled/overwritten by the UI. Setting a zoom level of 2.0f results in one dot in the design to be two pixels on the screen. * `zoomLevel`: The new zoom level. ``` zoomToBlock(id: DesignBlockId, paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): Promise ``` Sets the zoom and focus to show a block. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. * `id`: The block that should be focused on. * `paddingLeft`: Optional padding in screen pixels to the left of the block. * `paddingTop`: Optional padding in screen pixels to the top of the block. * `paddingRight`: Optional padding in screen pixels to the right of the block. * `paddingBottom`: Optional padding in screen pixels to the bottom of the block. * Returns A promise that resolves once the zoom was set or rejects with an error otherwise. ``` enableZoomAutoFit(id: DesignBlockId, axis: 'Horizontal' | 'Vertical', paddingBefore?: number, paddingAfter?: number): void ``` Continually adjusts the zoom level to fit the width or height of a block’s axis-aligned bounding box. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. No more than one block per scene can have zoom auto-fit enabled. Calling `setZoomLevel` or `zoomToBlock` disables the continuous adjustment. * `id`: The block for which the zoom is adjusted. * `axis`: The block axis for which the zoom is adjusted. * `paddingBefore`: Optional padding in screen pixels before the block. * `paddingAfter`: Optional padding in screen pixels after the block. ``` enableZoomAutoFit(id: DesignBlockId, axis: 'Both', paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): void ``` Continually adjusts the zoom level to fit the width or height of a block’s axis-aligned bounding box. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. Calling `setZoomLevel` or `zoomToBlock` disables the continuous adjustment. * `id`: The block for which the zoom is adjusted. * `axis`: The block axis for which the zoom is adjusted. * `paddingLeft`: Optional padding in screen pixels to the left of the block. * `paddingTop`: Optional padding in screen pixels to the top of the block. * `paddingRight`: Optional padding in screen pixels to the right of the block. * `paddingBottom`: Optional padding in screen pixels to the bottom of the block. ``` type ZoomAutoFitAxis = 'Horizontal' | 'Vertical' | 'Both'; ``` The axis(es) for which to auto-fit. ``` disableZoomAutoFit(blockOrScene: DesignBlockId): void ``` Disables any previously set zoom auto-fit. * `blockOrScene`: The scene or a block in the scene for which to disable zoom auto-fit. ``` isZoomAutoFitEnabled(blockOrScene: DesignBlockId): boolean ``` Queries whether zoom auto-fit is enabled. * `blockOrScene`: The scene or a block in the scene for which to query the zoom auto-fit. * Returns True if the given block has auto-fit set or the scene contains a block for which auto-fit is set, false otherwise. ``` unstable_enableCameraPositionClamping(ids: DesignBlockId[], paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number, scaledPaddingLeft?: number, scaledPaddingTop?: number, scaledPaddingRight?: number, scaledPaddingBottom?: number): void ``` Continually ensures the camera position to be within the width and height of the blocks axis-aligned bounding box. Without padding, this results in a tight clamp on the block. With padding, the padded part of the blocks is ensured to be visible. Disables any previously set camera position clamping in the scene and also takes priority over clamp camera commands. * `ids`: The blocks to which the camera position is adjusted to, usually, the scene or a page. * `paddingLeft`: Optional padding in screen pixels to the left of the block. * `paddingTop`: Optional padding in screen pixels to the top of the block. * `paddingRight`: Optional padding in screen pixels to the right of the block. * `paddingBottom`: Optional padding in screen pixels to the bottom of the block. * `scaledPaddingLeft`: Optional padding in screen pixels to the left of the block that scales with the zoom level until five times the initial value. * `scaledPaddingTop`: Optional padding in screen pixels to the top of the block that scales with the zoom level until five times the initial value. * `scaledPaddingRight`: Optional padding in screen pixels to the right of the block that scales with the zoom level until five times the initial value. * `scaledPaddingBottom`: Optional padding in screen pixels to the bottom of the block that scales with the zoom level until five times the initial value. ``` unstable_disableCameraPositionClamping(blockOrScene?: number | null): void ``` Disables any previously set position clamping for the current scene. * `blockOrScene`: Optionally, the scene or a block in the scene for which to query the position clamping. ``` unstable_isCameraPositionClampingEnabled(blockOrScene?: number | null): boolean ``` Queries whether position clamping is enabled. * `blockOrScene`: Optionally, the scene or a block in the scene for which to query the position clamping. * Returns True if the given block has position clamping set or the scene contains a block for which position clamping is set, false otherwise. ``` unstable_enableCameraZoomClamping(ids: DesignBlockId[], minZoomLimit?: number, maxZoomLimit?: number, paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): void ``` Continually ensures the zoom level of the camera in the active scene to be in the given range. * `ids`: The blocks to which the camera zoom limits are adjusted to, usually, the scene or a page. * `minZoomLimit`: The minimum zoom level limit when zooming out, unlimited when negative. * `maxZoomLimit`: The maximum zoom level limit when zooming in, unlimited when negative. * `paddingLeft`: Optional padding in screen pixels to the left of the block. Only applied when the block is not a camera. * `paddingTop`: Optional padding in screen pixels to the top of the block. Only applied when the block is not a camera. * `paddingRight`: Optional padding in screen pixels to the right of the block. Only applied when the block is not a camera. * `paddingBottom`: Optional padding in screen pixels to the bottom of the block. Only applied when the block is not a camera. ``` unstable_disableCameraZoomClamping(blockOrScene?: number | null): void ``` Disables any previously set zoom clamping for the current scene. * `blockOrScene`: Optionally, the scene or a block for which to query the zoom clamping. ``` unstable_isCameraZoomClampingEnabled(blockOrScene?: number | null): boolean ``` Queries whether zoom clamping is enabled. * `blockOrScene`: Optionally, the scene or a block for which to query the zoom clamping. * Returns True if the given block has zoom clamping set or the scene contains a block for which zoom clamping is set, false otherwise. ``` onZoomLevelChanged: (callback: () => void) => (() => void) ``` Subscribe to changes to the zoom level. * `callback`: This function is called at the end of the engine update, if the zoom level has changed. * Returns A method to unsubscribe. ## Settings[#](#settings) ## Full Code[#](#full-code) Here’s the full code: ``` // Zoom to 100%engine.scene.setZoomLevel(1.0); // Zoom to 50%engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel()); // Bring entire scene in view with padding of 20px in all directionsengine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0); // Follow page with padding of 20px in both directionsengine.scene.enableZoomAutoFit(page, 'Both', 20.0, 20.0, 20.0, 20.0); // Stop following pageengine.scene.disableZoomAutoFit(scene);// Query if zoom auto-fit is enabled for pageengine.scene.isZoomAutoFitEnabled(scene); // Keep the scene with padding of 10px within the cameraengine.scene.unstable_enableCameraPositionClamping( [scene], 10.0, 10.0, 10.0, 10.0, 0.0, 0.0, 0.0, 0.0,); engine.scene.unstable_disableCameraPositionClamping();// Query if zoom zoom clamping is enabled for the sceneengine.scene.unstable_isCameraPositionClampingEnabled(); // Allow zooming from 12.5% to 800% relative to the size of a pageengine.scene.unstable_enableCameraZoomClamping( [page], 0.125, 8.0, 0.0, 0.0, 0.0, 0.0,); engine.scene.unstable_disableCameraZoomClamping();// Query if zoom zoom clamping is enabled for the sceneengine.scene.unstable_isCameraZoomClampingEnabled(); // Get notified when the zoom level changesconst unsubscribeZoomLevelChanged = engine.scene.onZoomLevelChanged(() => { const zoomLevel = engine.scene.getZoomLevel(); console.log('Zoom level is now: ', zoomLevel);});unsubscribeZoomLevelChanged(); ``` --- [Source](https:/img.ly/docs/cesdk/angular/open-the-editor/load-scene-478833) # Load a Scene ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { // Load default assets referenced in the scene engine.addDefaultAssetSources(); const sceneUrl = 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'; const sceneBlob = await fetch(sceneUrl).then((response) => { return response.blob(); }); const blobString = await sceneBlob.text(); const scene = await engine.scene .loadFromString(blobString) .then(() => { console.log('Load succeeded'); const text = engine.block.findByType('text')[0]; engine.block.setDropShadowEnabled(text, true); }) .catch((error) => { console.error('Load failed', error); }); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { // Load default assets referenced in the scene engine.addDefaultAssetSources(); const sceneUrl = 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'; const sceneString = await fetch(sceneUrl).then((response) => { return response.text(); }); const scene = await engine.scene .loadFromString(sceneString) .then(() => { console.log('Load succeeded'); const text = engine.block.findByType('text')[0]; engine.block.setDropShadowEnabled(text, true); }) .catch((error) => { console.error('Load failed', error); }); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { // Load default assets referenced in the scene engine.addDefaultAssetSources(); const sceneUrl = 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'; const scene = await engine.scene .loadFromURL(sceneUrl) .then(() => { console.log('Load succeeded'); const text = engine.block.findByType('text')[0]; engine.block.setDropShadowEnabled(text, true); }) .catch((error) => { console.error('Load failed', error); }); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` Loading an existing scene allows resuming work on a previous session or adapting an existing template to your needs. **Warning** Saving a scene can be done as a either _scene file_ or as an _archive file_ (c.f. [Saving scenes](angular/export-save-publish/save-c8b124/) ). A _scene file_ does not include any fonts or images. Only the source URIs of assets, the general layout, and element properties are stored. When loading scenes in a new environment, ensure previously used asset URIs are available. Conversely, an _archive file_ contains within it the scene’s assets and references them as relative URIs. ## Load Scenes from a Remote URL[#](#load-scenes-from-a-remote-url) Determine a URL that points to a scene binary string. ``` const sceneUrl = 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'; ``` We can then pass that string to the `engine.scene.loadFromURL(url: string): Promise` function. The editor will reset and present the given scene to the user. The function is asynchronous and the returned `Promise` resolves if the scene load succeeded. ``` const scene = await engine.scene .loadFromURL(sceneUrl) .then(() => { console.log('Load succeeded'); const text = engine.block.findByType('text')[0]; engine.block.setDropShadowEnabled(text, true); }) .catch((error) => { console.error('Load failed', error); }); ``` From this point on we can continue to modify our scene. In this example, assuming the scene contains a text element, we add a drop shadow to it. See [Modifying Scenes](angular/concepts/blocks-90241e/) for more details. ``` const text = engine.block.findByType('text')[0];engine.block.setDropShadowEnabled(text, true); ``` Scene loads may be reverted using `cesdk.engine.editor.undo()`. To later save your scene, see [Saving Scenes](angular/export-save-publish/save-c8b124/) . ### Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { // Load default assets referenced in the scene engine.addDefaultAssetSources(); const sceneUrl = 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'; let scene = await engine.scene .loadFromURL(sceneUrl) .then(() => { console.log('Load succeeded'); let text = engine.block.findByType('text')[0]; engine.block.setDropShadowEnabled(text, true); }) .catch(error => { console.error('Load failed', error); }); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ## Load Scenes from a String[#](#load-scenes-from-a-string) In this example, we fetch a scene from a remote URL and load it as a string. This string could also come from the result of `engine.scene.saveToString()`. ``` const sceneUrl = 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene';const sceneString = await fetch(sceneUrl).then((response) => { return response.text();}); ``` We can pass that string to the `engine.scene.loadFromString(sceneContent: string): Promise)` function. The editor will then reset and present the given scene to the user. The function is asynchronous and the returned `Promise` resolves, if the scene load succeeded. ``` const scene = await engine.scene .loadFromString(sceneString) .then(() => { console.log('Load succeeded'); const text = engine.block.findByType('text')[0]; engine.block.setDropShadowEnabled(text, true); }) .catch((error) => { console.error('Load failed', error); }); ``` From this point on we can continue to modify our scene. In this example, assuming the scene contains a text element, we add a drop shadow to it. See [Modifying Scenes](angular/concepts/blocks-90241e/) for more details. ``` const text = engine.block.findByType('text')[0];engine.block.setDropShadowEnabled(text, true); ``` Scene loads may be reverted using `cesdk.engine.editor.undo()`. To later save your scene, see [Saving Scenes](angular/export-save-publish/save-c8b124/) . ### Full Code[#](#full-code-1) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { // Load default assets referenced in the scene engine.addDefaultAssetSources(); const sceneUrl = 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'; const sceneString = await fetch(sceneUrl).then(response => { return response.text(); }); let scene = await engine.scene .loadFromString(sceneString) .then(() => { console.log('Load succeeded'); let text = engine.block.findByType('text')[0]; engine.block.setDropShadowEnabled(text, true); }) .catch(error => { console.error('Load failed', error); }); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ## Load Scenes From a Blob[#](#load-scenes-from-a-blob) In this example, we fetch a scene from a remote URL and load it as `sceneBlob`. ``` const sceneUrl = 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene';const sceneBlob = await fetch(sceneUrl).then((response) => { return response.blob();}); ``` To acquire a scene string from `sceneBlob`, we need to read its contents into a string. ``` const blobString = await sceneBlob.text(); ``` We can then pass that string to the `engine.scene.loadFromString(sceneContent: string): Promise` function. The editor will reset and present the given scene to the user. The function is asynchronous and the returned `Promise` resolves if the scene load succeeded. ``` const scene = await engine.scene .loadFromString(blobString) .then(() => { console.log('Load succeeded'); const text = engine.block.findByType('text')[0]; engine.block.setDropShadowEnabled(text, true); }) .catch((error) => { console.error('Load failed', error); }); ``` From this point on we can continue to modify our scene. In this example, assuming the scene contains a text element, we add a drop shadow to it. See [Modifying Scenes](angular/concepts/blocks-90241e/) for more details. ``` const text = engine.block.findByType('text')[0];engine.block.setDropShadowEnabled(text, true); ``` Scene loads may be reverted using `cesdk.engine.editor.undo()`. To later save your scene, see [Saving Scenes](angular/export-save-publish/save-c8b124/) . ### Full Code[#](#full-code-2) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { // Load default assets referenced in the scene engine.addDefaultAssetSources(); const sceneUrl = 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'; const sceneBlob = await fetch(sceneUrl).then(response => { return response.blob(); }); const blobString = await sceneBlob.text(); let scene = await engine.scene .loadFromString(blobString) .then(() => { console.log('Load succeeded'); let text = engine.block.findByType('text')[0]; engine.block.setDropShadowEnabled(text, true); }) .catch(error => { console.error('Load failed', error); }); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ## Loading Scene Archives[#](#loading-scene-archives) Loading a scene archives requires unzipping the archives contents to a location, that’s accessible to the CreativeEngine. One could for example unzip the archive via `unzip archive.zip` and then serve its contents using `$ npx serve`. This spins up a local test server, that serves everything contained in the current directory at `http://localhost:3000` The archive can then be loaded by calling `await engine.scene.loadFromURL('http://localhost:3000/scene.scene')`. See [loading scenes](angular/open-the-editor/load-scene-478833/) for more details. All asset paths in the archive are then resolved relative to the location of the `scene.scene` file. For an image, that would result in `'http://localhost:3000/images/1234.jpeg'`. After loading all URLs are fully resolved with the location of the `scene.scene` file and the scene behaves like any other scene. ### Resolving assets from a different source[#](#resolving-assets-from-a-different-source) The engine will use its [URI resolver](angular/open-the-editor/uri-resolver-36b624/) to resolve all asset paths it encounters. This allows you to redirect requests for the assets contained in archive to a different location. To do so, you can add a custom resolver, that redirects requests for assets to a different location. Assuming you store your archived scenes in a `scenes/` directory, this would be an example of how to do so: ``` engine.editor.setURIResolver(uri => { const url = new URL(uri); if ( url.hostname === 'localhost' && url.pathname.startsWith('/scenes') && !url.pathname.endsWith('.scene') ) { // Apply custom logic here, e.g. redirect to a different server } // Use default behaviour for everything else return engine.editor.defaultURIResolver(uri);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/open-the-editor/from-video-86beb0) # Create From Video ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { await engine.scene.createFromVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4' ); // Find the automatically added graphic block in the scene that contains the video fill. const block = engine.block.findByType('graphic')[0]; // Change its opacity. engine.block.setOpacity(block, 0.5); // Start playback engine.block.setPlaying(engine.scene.get(), true); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` In this example, we will show you how to initialize the [CreativeEditor SDK](https://img.ly/products/creative-sdk) with an initial video. Starting from an existing video allows you to use the editor for customizing individual assets. This is done by using `engine.scene.createFromVideo(url: string): Promise` and passing a URL as argument. Specify the source to use for the initial video. This can be a relative path or a remote URL. ``` await engine.scene.createFromVideo( ``` We can retrieve the graphic block id of this initial video using `cesdk.engine.block.findByType(type: ObjectType): number[]`. Note that that function returns an array. Since there’s only a single graphic block in the scene, the block is at index `0`. ``` // Find the automatically added graphic block in the scene that contains the video fill.const block = engine.block.findByType('graphic')[0]; ``` We can then manipulate and modify this block. Here we modify its opacity with `cesdk.engine.block.setOpacity(id: number, opacity: number): void`. See [Modifying Scenes](angular/concepts/blocks-90241e/) for more details. ``` // Change its opacity.engine.block.setOpacity(block, 0.5); ``` When starting with an initial video, the scene’s page dimensions match the given resource and the scene is configured to be in pixel design units. To later save your scene, see [Saving Scenes](angular/export-save-publish/save-c8b124/) . ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { await engine.scene.createFromVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', ); // Find the automatically added graphic block in the scene that contains the video fill. const block = engine.block.findByType('graphic')[0]; // Change its opacity. engine.block.setOpacity(block, 0.5); // Start playback engine.block.setPlaying(engine.scene.get(), true); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/open-the-editor/from-image-ad9b5e) # Create From Image ``` import CreativeEngine from '@cesdk/engine'; const element = document.getElementById('image-element');const imageURL = element.src; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { const scene = await engine.scene.createFromImage(imageURL); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` Starting from an existing image allows you to use the editor for customizing individual assets. This is done by using `suspend fun createFromImage(imageUri: URI, dpi: Float = 300F, pixelScaleFactor: Float = 1F): DesignBlock` and passing a URI as argument. The `dpi` argument sets the dots per inch of the scene. The `pixelScaleFactor` sets the display’s pixel scale factor. ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { await engine.scene.createFromImage( 'https://img.ly/static/ubq_samples/sample_4.jpg' ); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` ## Create a Scene From a Remote URL[#](#create-a-scene-from-a-remote-url) In this example, we will show you how to initialize the [CreativeEditor SDK](https://img.ly/products/creative-sdk) with an initial image. Specify the source to use for the initial image. This can be a relative path or a remote URL. ``` await engine.scene.createFromImage( ``` When starting with an initial image, the scene’s page dimensions match the given resource and the scene is configured to be in pixel design units. To later save your scene, see [Saving Scenes](angular/export-save-publish/save-c8b124/) . ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { await engine.scene.createFromImage( 'https://img.ly/static/ubq_samples/sample_4.jpg', ); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ## Create a Scene From an HTMLImageElement[#](#create-a-scene-from-an-htmlimageelement) In this example, we will show you how to initialize the [CreativeEditor SDK](https://img.ly/products/creative-sdk) with an initial image provided from an image element. To use the image shown by an image element as the initial image, use the image element’s `src` attribute as the `imageURL`. ``` const element = document.getElementById('image-element');const imageURL = element.src; ``` Use the created URL as a source for the initial image. ``` const scene = await engine.scene.createFromImage(imageURL); ``` When starting with an initial image, the scenes page dimensions match the given image and the scene is configured to be in pixel design units. To later save your scene, see [Saving Scenes](angular/export-save-publish/save-c8b124/) . ### Full Code[#](#full-code-1) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const element = document.getElementById('image-element');const imageURL = element.src; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { let scene = await engine.scene.createFromImage(imageURL); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ``` import CreativeEngine from '@cesdk/engine'; const blob = await fetch('https://img.ly/static/ubq_samples/sample_4.jpg').then( (response) => response.blob());const objectURL = URL.createObjectURL(blob); const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { const scene = await engine.scene.createFromImage(objectURL); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` ## Create a Scene From a Blob[#](#create-a-scene-from-a-blob) In this example, we will show you how to initialize the [CreativeEditor SDK](https://img.ly/products/creative-sdk) with an initial image provided from a blob. First, get hold of a `blob` by fetching an image from the web. This is just for demonstration purposes and your `blob` object may come from a different source. ``` const blob = await fetch('https://img.ly/static/ubq_samples/sample_4.jpg').then( (response) => response.blob()); ``` Afterward, create a URL pointing to the blob via `URL.createObjectURL`. ``` const objectURL = URL.createObjectURL(blob); ``` Use the created URL as a source for the initial image. ``` const scene = await engine.scene.createFromImage(objectURL); ``` When starting with an initial image, the scenes page dimensions match the given image, and the scene is configured to be in pixel design units. To later save your scene, see [Saving Scenes](angular/export-save-publish/save-c8b124/) . ## Full Code[#](#full-code-2) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const blob = await fetch('https://img.ly/static/ubq_samples/sample_4.jpg').then( response => response.blob(),);const objectURL = URL.createObjectURL(blob); const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { let scene = await engine.scene.createFromImage(objectURL); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/open-the-editor/blank-canvas-18ff05) # Start With Blank Canvas ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { const scene = await engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('star')); engine.block.setFill(block, engine.block.createFill('color')); engine.block.appendChild(page, block); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` In this example, we will show you how to initialize the [CreativeEditor SDK](https://img.ly/products/creative-sdk) from scratch and add a star shape. We create an empty scene via `engine.scene.create()` which sets up the default scene block with a camera attached. Afterwards, the scene can be populated by creating additional blocks and appending them to the scene. See [Modifying Scenes](angular/concepts/blocks-90241e/) for more details. ``` const scene = await engine.scene.create(); ``` We first add a page with `create(type: DesignBlockType): number` specifying a `"page"` and set a parent-child relationship between the scene and this page. ``` const page = engine.block.create('page');engine.block.appendChild(scene, page); ``` To this page, we add a graphic block, again with `create(type: DesignBlockType): number`. To make it more interesting, we set a star shape and a color fill to this block to give it a visual representation. Like for the page, we set the parent-child relationship between the page and the newly added block. From then on, modifications to this block are relative to the page. ``` const block = engine.block.create('graphic');engine.block.setShape(block, engine.block.createShape('star'));engine.block.setFill(block, engine.block.createFill('color'));engine.block.appendChild(page, block); ``` This example first appends a page child to the scene as would typically be done but it is not strictly necessary and any child block can be appended directly to a scene. To later save your scene, see [Saving Scenes](angular/export-save-publish/save-c8b124/) . ### Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { let scene = await engine.scene.create(); let page = engine.block.create('page'); engine.block.appendChild(scene, page); let block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('star')); engine.block.setFill(block, engine.block.createFill('color')); engine.block.appendChild(page, block); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/open-the-editor/from-htmlcanvas-2adf30) # Create From HTMLCanvas ``` import CreativeEngine from '@cesdk/engine'; // Draw the text 'img.ly' to the demo canvasconst canvas = document.getElementById('my-canvas');const ctx = canvas.getContext('2d');ctx.font = '100px Arial';ctx.fillText('img.ly', 120, 270); const dataURL = canvas.toDataURL(); const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { const scene = await engine.scene.createFromImage(dataURL); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` In this example, we will show you how to initialize the [CreativeEditor SDK](https://img.ly/products/creative-sdk) with an initial image provided from a canvas. Starting from an existing image allows you to use the editor for customizing individual assets. This is done by using `engine.scene.createFromImage(url: string, dpi = 300, pixelScaleFactor = 1): Promise` and passing a URL as argument. The `dpi` argument sets the dots per inch of the scene. The `pixelScaleFactor` sets the display’s pixel scale factor. To use the image drawn by a canvas as the initial image, acquire a `dataURL` containing the canvas contents via `canvas.toDataURL()`. ``` const dataURL = canvas.toDataURL(); ``` Use the created URL as a source for the initial image. ``` const scene = await engine.scene.createFromImage(dataURL); ``` When starting with an initial image, the scenes page dimensions match the given image, and the scene is configured to be in pixel design units. To later save your scene, see [Saving Scenes](angular/export-save-publish/save-c8b124/) . ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; // Draw the text 'img.ly' to the demo canvasconst canvas = document.getElementById('my-canvas');const ctx = canvas.getContext('2d');ctx.font = '100px Arial';ctx.fillText('img.ly', 120, 270); const dataURL = canvas.toDataURL(); const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { let scene = await engine.scene.createFromImage(dataURL); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/import-media/source-sets-5679c8) # Source Sets ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, baseURL: './release/assets'}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 50, 50, 50, 50); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [ { uri: 'https://img.ly/static/ubq_samples/sample_1_512x341.jpg', width: 512, height: 341 }, { uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg', width: 1024, height: 683 }, { uri: 'https://img.ly/static/ubq_samples/sample_1_2048x1366.jpg', width: 2048, height: 1366 } ]); engine.block.setFill(block, imageFill); console.log(engine.block.getSourceSet(imageFill, 'fill/image/sourceSet')); engine.block.appendChild(page, block); const assetWithSourceSet = { id: 'my-image', meta: { kind: 'image', fillType: '//ly.img.ubq/fill/image' }, payload: { sourceSet: [ { uri: 'https://img.ly/static/ubq_samples/sample_1_512x341.jpg', width: 512, height: 341 }, { uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg', width: 1024, height: 683 }, { uri: 'https://img.ly/static/ubq_samples/sample_1_2048x1366.jpg', width: 2048, height: 1366 } ] } }; await engine.asset.addLocalSource('my-dynamic-images'); engine.asset.addAssetToSource('my-dynamic-images', assetWithSourceSet); // Could also acquire the asset using `findAssets` on the source const result = await engine.asset.defaultApplyAsset(assetWithSourceSet); console.log( engine.block.getSourceSet( engine.block.getFill(result), 'fill/image/sourceSet' ) ); // Lists the entries from above again. const videoFill = engine.block.createFill('video'); engine.block.setSourceSet(videoFill, 'fill/video/sourceSet', [ { uri: 'https://img.ly/static/example-assets/sourceset/1x.mp4', width: 1920, height: 1080 } ]); await engine.block.addVideoFileURIToSourceSet( videoFill, 'fill/video/sourceSet', 'https://img.ly/static/example-assets/sourceset/2x.mp4' );}); ``` ```
``` Source sets allow specifying an entire set of sources, each with a different size, that should be used for drawing a block. The appropriate source is then dynamically chosen based on the current drawing size. This allows using the same scene to render a preview on a mobile screen using a small image file and a high-resolution file for print in the backend. This guide will show you how to specify source sets both for existing blocks and when defining assets. ### Drawing[#](#drawing) When an image needs to be drawn, the current drawing size in screen pixels is calculated and the engine looks up the most appropriate source file to draw at that resolution. 1. If a source set is set, the source with the closest size exceeding the drawing size is used 2. If no source set is set, the full resolution image is downscaled to a maximum edge length of 4096 (configurable via `maxImageSize` setting) and drawn to the target area This also gives more control about up- and downsampling to you, as all intermediate resolutions can be generated using tooling of your choice. **Source sets are also used during export of your designs and will resolve to the best matching asset for the export resolution.** ## Setup the scene[#](#setup-the-scene) We first create a new scene with a new page. ``` document.getElementById('cesdk_container').append(engine.element);const scene = engine.scene.create();const page = engine.block.create('page');engine.block.setWidth(page, 800);engine.block.setHeight(page, 600);engine.block.appendChild(scene, page);engine.scene.zoomToBlock(page, 50, 50, 50, 50); ``` ## Using a Source Set for an existing Block[#](#using-a-source-set-for-an-existing-block) To make use of a source set for an existing image fill, we use the `setSourceSet` API. This defines a set of sources and specifies height and width for each of these sources. The engine then chooses the appropriate source during drawing. You may query an existing source set using `getSourceSet`. You can add sources to an existing source set with `addImageFileURIToSourceSet`. ``` const block = engine.block.create('graphic');engine.block.setShape(block, engine.block.createShape('rect'));const imageFill = engine.block.createFill('image');engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [ { uri: 'https://img.ly/static/ubq_samples/sample_1_512x341.jpg', width: 512, height: 341 }, { uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg', width: 1024, height: 683 }, { uri: 'https://img.ly/static/ubq_samples/sample_1_2048x1366.jpg', width: 2048, height: 1366 }]);engine.block.setFill(block, imageFill);console.log(engine.block.getSourceSet(imageFill, 'fill/image/sourceSet'));engine.block.appendChild(page, block); ``` ## Using a Source Set in an Asset[#](#using-a-source-set-in-an-asset) For assets, source sets can be defined in the `payload.sourceSet` field. This is directly translated to the `sourceSet` property when applying the asset. The resulting block is configured in the same way as the one described above. The code demonstrates how to add an asset that defines a source set to a local source and how `applyAsset` handles a populated `payload.sourceSet`. ``` const assetWithSourceSet = { id: 'my-image', meta: { kind: 'image', fillType: '//ly.img.ubq/fill/image' }, payload: { sourceSet: [ { uri: 'https://img.ly/static/ubq_samples/sample_1_512x341.jpg', width: 512, height: 341 }, { uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg', width: 1024, height: 683 }, { uri: 'https://img.ly/static/ubq_samples/sample_1_2048x1366.jpg', width: 2048, height: 1366 } ] }}; ``` ## Video Source Sets[#](#video-source-sets) Source sets can also be used for video fills. This is done by setting the `sourceSet` property of the video fill. The engine will then use the source with the closest size exceeding the drawing size. Thumbnails will use the smallest source if `features/matchThumbnailSourceToFill` is disabled, which is the default. For low end devices or scenes with large videos, you can force the preview to always use the smallest source when editing by enabling `features/forceLowQualityVideoPreview`. On export, the highest quality source is used in any case. ``` const videoFill = engine.block.createFill('video');engine.block.setSourceSet(videoFill, 'fill/video/sourceSet', [ { uri: 'https://img.ly/static/example-assets/sourceset/1x.mp4', width: 1920, height: 1080 }]); await engine.block.addVideoFileURIToSourceSet( videoFill, 'fill/video/sourceSet', 'https://img.ly/static/example-assets/sourceset/2x.mp4'); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', baseURL: './release/assets',}; CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 50, 50, 50, 50); let block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [ { uri: 'https://img.ly/static/ubq_samples/sample_1_512x341.jpg', width: 512, height: 341, }, { uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg', width: 1024, height: 683, }, { uri: 'https://img.ly/static/ubq_samples/sample_1_2048x1366.jpg', width: 2048, height: 1366, }, ]); engine.block.setFill(block, imageFill); console.log(engine.block.getSourceSet(imageFill, 'fill/image/sourceSet')); engine.block.appendChild(page, block); const assetWithSourceSet = { id: 'my-image', meta: { kind: 'image', fillType: '//ly.img.ubq/fill/image', }, payload: { sourceSet: [ { uri: 'https://img.ly/static/ubq_samples/sample_1_512x341.jpg', width: 512, height: 341, }, { uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg', width: 1024, height: 683, }, { uri: 'https://img.ly/static/ubq_samples/sample_1_2048x1366.jpg', width: 2048, height: 1366, }, ], }, }; await engine.asset.addLocalSource('my-dynamic-images'); engine.asset.addAssetToSource('my-dynamic-images', assetWithSourceSet); // Could also acquire the asset using `findAssets` on the source const result = await engine.asset.defaultApplyAsset(assetWithSourceSet); console.log( engine.block.getSourceSet( engine.block.getFill(result), 'fill/image/sourceSet', ), ); // Lists the entries from above again. const videoFill = engine.block.createFill('video'); engine.block.setSourceSet(videoFill, 'fill/video/sourceSet', [ { uri: 'https://img.ly/static/example-assets/sourceset/1x.mp4', width: 1920, height: 1080, }, ]); await engine.block.addVideoFileURIToSourceSet( videoFill, 'fill/video/sourceSet', 'https://img.ly/static/example-assets/sourceset/2x.mp4', );}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/import-media/size-limits-c32275) # Size Limits CreativeEditor SDK (CE.SDK) supports importing high-resolution images, video, and audio, but there are practical limits to consider based on the user’s device capabilities. ## Image Resolution Limits[#](#image-resolution-limits) | Constraint | Recommendation / Limit | | --- | --- | | **Input Resolution** | Maximum input resolution is **4096×4096 pixels**. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the `maxImageSize` setting. | | **Output Resolution** | There is no enforced output resolution limit. Theoretically, the editor supports output sizes up to **16,384×16,384 pixels**. However, practical limits depend on the device’s GPU capabilities and available memory. | All image processing in CE.SDK is handled client-side, so these values depend on the **maximum texture size** supported by the user’s hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded. To ensure consistent results across devices, it’s best to test higher output sizes on your target hardware and set conservative defaults in production. ## Video Resolution & Duration Limits[#](#video-resolution--duration-limits) | Constraint | Recommendation / Limit | | --- | --- | | **Resolution** | Up to **4K UHD** is supported for **playback** and **export**, depending on the user’s hardware and available GPU resources. For **import**, CE.SDK does not impose artificial limits, but maximum video size is bounded by the **32-bit address space of WebAssembly (wasm32)** and the **browser tab’s memory cap (~2 GB)**. | | **Frame Rate** | 30 FPS at 1080p is broadly supported; 60 FPS and high-res exports benefit from hardware acceleration | | **Duration** | Stories and reels of up to **2 minutes** are fully supported. Longer videos are also supported, but we generally found a maximum duration of **10 minutes** to be a good balance for a smooth editing experience and a pleasant export duration of around one minute on modern hardware. | Performance scales with client hardware. For best results with high-resolution or high-frame-rate video, modern CPUs/GPUs with hardware acceleration are recommended. --- [Source](https:/img.ly/docs/cesdk/angular/import-media/retrieve-mimetype-ed13bf) # Retrieve Mimetype When working with media assets in CE.SDK, it is often necessary to determine the mimetype of a resource before processing it. This guide explains how to use the `getMimeType(uri: Uri)` function to retrieve the mimetype of a given resource. Returns the mimetype of the resources at the given Uri. If the resource is not already downloaded, this function will download it. * `uri:` the Uri of the resource. * Returns the mimetype of the resource. ``` // Get the mimetype of a resourceconst mimeType = await engine.editor.getMimeType( 'https://cdn.img.ly/assets/demo/v1/ly.img.image/images/sample_1.jpg',); ``` --- [Source](https:/img.ly/docs/cesdk/angular/import-media/overview-84bb23) # Overview In CE.SDK, assets are the building blocks of your creative workflow—whether they’re images, videos, audio, fonts, or templates. They power everything from basic image edits to dynamic, template-driven design generation. This guide gives you a high-level understanding of how to bring assets into CE.SDK, where they can come from, and how to decide on the right strategy for your application. Whether you’re working with local uploads, remote storage, or third-party sources, this guide will help you navigate your options and build an efficient import pipeline. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## What is an Asset?[#](#what-is-an-asset) In CE.SDK, an _asset_ refers to any external media that can be inserted into a design scene. Assets are referenced via URIs, and are not stored or hosted by CE.SDK itself. Supported asset types include: * **Images** – JPEG, PNG, WebP, SVG, etc. * **Video** – MP4, MOV * **Audio / Music** – MP3, AAC * **Fonts** – Custom or system fonts * **Stickers** – SVG or PNG elements * **Templates** – Design presets or prebuilt scenes * **Custom Media** – Any content with a valid URI and supported format See a [full list of supported file formats](angular/file-format-support-3c4b2a/) . Assets are used throughout the editor to fill shapes, provide visual or audio decoration, or serve as core scene content. ## Asset Sources in CE.SDK[#](#asset-sources-in-cesdk) CE.SDK supports a range of asset sources, allowing developers to import media from: * **Local Sources** Assets directly uploaded by the user (e.g., from their device). * **Remote Sources** Media served via external servers or your own backend (e.g., S3, CDN). * **Third-Party Sources** Create custom integrations with Unsplash, Getty, Airtable, etc. * **Dynamic Sources** Assets created or fetched on demand (e.g., generative AI images). **Note:** When a user opens the editor, CE.SDK downloads any referenced assets to the local environment for use within the editing session. ### When to Use Each Asset Source[#](#when-to-use-each-asset-source) | Use Case | Recommended Source Type | | --- | --- | | End-users upload personal media | Local Source | | Use your company’s asset library | Remote Source | | Enable searchable stock assets | Third-Party Source | | Fetch real-time AI-generated content | Dynamic Source | With **Local Asset Sources**, CE.SDK powers search functionality directly in the browser. For **Remote Asset Sources**, searching and indexing are typically offloaded to the server to ensure scalability and performance. **Performance Tip:** If you’re managing **thousands of assets**, it’s best to offload search and filtering to a **remote backend** to avoid performance bottlenecks in the browser. ## Asset Storage and Management in CE.SDK[#](#asset-storage-and-management-in-cesdk) ### No Built-In Storage Provided[#](#no-built-in-storage-provided) CE.SDK does **not** host or store assets. You must handle storage using your infrastructure: * Amazon S3 * Google Cloud Storage * Firebase * Your own custom backend ### How It Works[#](#how-it-works) * Assets are referenced via **URIs**—not embedded or stored internally. * You implement a **custom asset source**, which returns references to assets via CE.SDK’s API. * Assets are then made available in the **Asset Library** or loaded programmatically. ### Custom Asset Libraries[#](#custom-asset-libraries) CE.SDK is fully modular. You define how assets are fetched, filtered, categorized, and presented. This works for all asset types: images, videos, audio, and even uploads. ### Uploading Assets[#](#uploading-assets) CE.SDK supports upload workflows using your own infrastructure: * Use `onUpload` callbacks to trigger uploads. * Refresh asset lists after uploads with `refetchAssetSources`. ### Best Practices[#](#best-practices) Work with your backend team to: * Define where assets are stored and how they’re indexed. * Ensure secure, performant delivery of media files. * Implement custom asset source logic based on CE.SDK’s source API. ## Using and Customizing the Asset Library[#](#using-and-customizing-the-asset-library) The built-in Asset Library gives users a way to browse and insert assets visually. You can: * Add or remove asset categories (images, stickers, audio, etc.). * Customize the layout, filters, and tab order. * Show assets from your own remote sources. * Dynamically refresh asset lists when new files are uploaded. ## Default Assets[#](#default-assets) CE.SDK includes a set of default assets (images, templates, stickers, etc.) for testing or bootstrapping a demo. You can: * Use them in development for fast prototyping. * Customize or remove them entirely for production apps. Use `addDefaultAssetSources()` to populate the default library. ## Third-Party Asset Integrations[#](#third-party-asset-integrations) CE.SDK supports integrations with popular content platforms: * **Unsplash** – High-quality free stock images * **Pexels** – Free photos and videos * **Getty Images** – Licensed, premium content * **Airtable** – Structured media from database rows * **Soundstripe** – Music and audio tracks for video scenes You can also integrate any other source using a custom asset source and the standard asset source API. ## File Type Support[#](#file-type-support) CreativeEditor SDK (CE.SDK) supports importing high-resolution images, video, and audio content. | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. ## Media Constraints[#](#media-constraints) ### Image Resolution Limits[#](#image-resolution-limits) | Constraint | Recommendation / Limit | | --- | --- | | **Input Resolution** | Maximum input resolution is **4096×4096 pixels**. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the `maxImageSize` setting. | | **Output Resolution** | There is no enforced output resolution limit. Theoretically, the editor supports output sizes up to **16,384×16,384 pixels**. However, practical limits depend on the device’s GPU capabilities and available memory. | All image processing in CE.SDK is handled client-side, so these values depend on the **maximum texture size** supported by the user’s hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded. To ensure consistent results across devices, it’s best to test higher output sizes on your target hardware and set conservative defaults in production. ### Video Resolution & Duration Limits[#](#video-resolution--duration-limits) | Constraint | Recommendation / Limit | | --- | --- | | **Resolution** | Up to **4K UHD** is supported for **playback** and **export**, depending on the user’s hardware and available GPU resources. For **import**, CE.SDK does not impose artificial limits, but maximum video size is bounded by the **32-bit address space of WebAssembly (wasm32)** and the **browser tab’s memory cap (~2 GB)**. | | **Frame Rate** | 30 FPS at 1080p is broadly supported; 60 FPS and high-res exports benefit from hardware acceleration | | **Duration** | Stories and reels of up to **2 minutes** are fully supported. Longer videos are also supported, but we generally found a maximum duration of **10 minutes** to be a good balance for a smooth editing experience and a pleasant export duration of around one minute on modern hardware. | Performance scales with client hardware. For best results with high-resolution or high-frame-rate video, modern CPUs/GPUs with hardware acceleration are recommended. --- [Source](https:/img.ly/docs/cesdk/angular/import-media/from-remote-source-b65faf) # Import From Remote Source --- [Source](https:/img.ly/docs/cesdk/angular/import-media/from-local-source-39b2a9) # Import From Local Source --- [Source](https:/img.ly/docs/cesdk/angular/import-media/concepts-5e6197) # Concepts ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); const customSource = { id: 'foobar', async findAssets(queryData) { return Promise.resolve({ assets: [ { id: 'logo', meta: { uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', thumbUri: 'https://img.ly/static/ubq_samples/thumbnails/imgly_logo.jpg', blockType: '//ly.img.ubq/image', width: 320, height: 116, }, context: { sourceId: 'foobar', }, }, ], total: 1, currentPage: queryData.page, nextPage: undefined, }); }, async applyAsset(assetResult) { return engine.asset.defaultApplyAsset(assetResult); }, async applyAssetToBlock(assetResult, block) { engine.asset.defaultApplyAssetToBlock(assetResult, block); }, }; const sourceId = 'foobar'; engine.asset.onAssetSourceAdded(sourceID => { console.log(`Added source: ${sourceID}`); }); engine.asset.onAssetSourceRemoved(sourceID => { console.log(`Removed source: ${sourceID}`); }); engine.asset.onAssetSourceUpdated(sourceID => { console.log(`Updated source: ${sourceID}`); }); engine.asset.addSource(customSource); engine.asset.addLocalSource('local-source'); engine.asset.addAssetToSource('local-source', { id: 'ocean-waves-1', label: { en: 'relaxing ocean waves', }, tags: { en: ['ocean', 'waves', 'soothing', 'slow'], }, meta: { uri: `https://example.com/ocean-waves-1.mp4`, thumbUri: `https://example.com/thumbnails/ocean-waves-1.jpg`, mimeType: 'video/mp4', width: 1920, height: 1080, }, }); engine.asset.removeAssetFromSource('local-source', 'ocean-waves-1'); engine.asset.removeSource('local-source'); engine.asset.findAllSources(); const mimeTypes = engine.asset.getSupportedMimeTypes( 'ly.img.asset.source.unsplash', ); const credits = engine.asset.getCredits(customSource.id); const license = engine.asset.getLicense(customSource.id); const groups = engine.asset.getGroups(customSource.id); const result = await engine.asset.findAssets(customSource.id, { page: 0, perPage: 100, }); const asset = result.assets[0]; const sortByNewest = await engine.asset.findAssets('ly.img.image.upload', { page: 0, perPage: 10, sortingOrder: 'Descending', }); const sortById = await engine.asset.findAssets('ly.img.image.upload', { page: 0, perPage: 10, sortingOrder: 'Ascending', sortKey: 'id', }); const sortByMetaKeyValue = await engine.asset.findAssets( 'ly.img.image.upload', { page: 0, perPage: 10, sortingOrder: 'Ascending', sortKey: 'someMetaKey', }, ); const search = await engine.asset.findAssets('ly.img.asset.source.unsplash', { query: 'banana', page: 0, perPage: 100, }); const sceneColorsResult = await engine.asset.findAssets( 'ly.img.scene.colors', { page: 0, perPage: 99999, }, ); const colorAsset = sceneColorsResult.assets[0]; await engine.asset.apply(customSource.id, asset); await engine.asset.applyToBlock(customSource.id, asset); engine.asset.assetSourceContentsChanged(customSource.id); engine.asset.removeSource(customSource.id); document.getElementById('cesdk_container').append(engine.element);}); ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to manage assets through the `asset` API. To begin working with assets first you need at least one asset source. As the name might imply asset sources provide the engine with assets. These assets then show up in the editor’s asset library. But they can also be independently searched and used to create design blocks. Asset sources can be added dynamically using the `asset` API as we will show in this guide. ## Defining a Custom Asset Source[#](#defining-a-custom-asset-source) Asset sources need at least an `id` and a `findAssets` function. You may notice asset source functions are all `async`. This way you can use web requests or other long-running operations inside them and return results asynchronously. Let’s go over these properties one by one: ``` const customSource = { id: 'foobar', async findAssets(queryData) { return Promise.resolve({ assets: [ { id: 'logo', meta: { uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', thumbUri: 'https://img.ly/static/ubq_samples/thumbnails/imgly_logo.jpg', blockType: '//ly.img.ubq/image', width: 320, height: 116, }, context: { sourceId: 'foobar', }, }, ], total: 1, currentPage: queryData.page, nextPage: undefined, }); }, async applyAsset(assetResult) { return engine.asset.defaultApplyAsset(assetResult); }, async applyAssetToBlock(assetResult, block) { engine.asset.defaultApplyAssetToBlock(assetResult, block); },}; ``` All functions of the `asset` API refer to an asset source by its unique `id`. That’s why it has to be mandatory. Trying to add an asset source with an already registered `id` will fail. ``` const sourceId = 'foobar'; ``` ## Finding and Applying Assets[#](#finding-and-applying-assets) The `findAssets` function should return paginated asset results for the given `queryData`. The asset results have a set of mandatory and optional properties. For a listing with an explanation for each property please refer to the [Integrate a Custom Asset Source](angular/import-media/from-remote-source/unsplash-8f31f0/) guide. The properties of the `queryData` and the pagination mechanism are also explained in this guide. ``` findAssets(sourceId: string, query: AssetQueryData): Promise> ``` Finds assets of a given type in a specific asset source. * `sourceId`: The ID of the asset source. * `query`: All the options to filter the search results by. * Returns The search results. The optional function ‘applyAsset’ is to define the behavior of what to do when an asset gets applied to the scene. You can use the engine’s APIs to do whatever you want with the given asset result. In this case, we always create an image block and add it to the first page we find. If you don’t provide this function the engine’s default behavior is to create a block based on the asset result’s `meta.blockType` property, add the block to the active page, and sensibly position and size it. ``` apply(sourceId: string, assetResult: AssetResult): Promise ``` Apply an asset result to the active scene. The default behavior will instantiate a block and configure it according to the asset’s properties. Note that this can be overridden by providing an `applyAsset` function when adding the asset source. * `sourceId`: The ID of the asset source. * `assetResult`: A single assetResult of a `findAssets` query. ``` defaultApplyAsset(assetResult: AssetResult): Promise ``` The default implementation for applying an asset to the scene. This implementation is used when no `applyAsset` function is provided to `addSource`. * `assetResult`: A single assetResult of a `findAssets` query. ``` applyToBlock(sourceId: string, assetResult: AssetResult, block: DesignBlockId): Promise ``` Apply an asset result to the given block. * `sourceId`: The ID of the asset source. * `assetResult`: A single assetResult of a `findAssets` query. * `block`: The block the asset should be applied to. ``` defaultApplyAssetToBlock(assetResult: AssetResult, block: DesignBlockId): Promise ``` The default implementation for applying an asset to an existing block. * `assetResult`: A single assetResult of a `findAssets` query. * `block`: The block to apply the asset result to. ``` getSupportedMimeTypes(sourceId: string): string[] ``` Queries the list of supported mime types of the specified asset source. An empty result means that all mime types are supported. * `sourceId`: The ID of the asset source. ## Registering a New Asset Source[#](#registering-a-new-asset-source) ``` addSource(source: AssetSource): void ``` Adds a custom asset source. Its ID has to be unique. * `source`: The asset source. ``` addLocalSource(id: string, supportedMimeTypes?: string[], applyAsset?: (asset: CompleteAssetResult) => Promise, applyAssetToBlock?: (asset: CompleteAssetResult, block: DesignBlockId) => Promise): void ``` Adds a local asset source. Its ID has to be unique. * `source`: The asset source. * `supportedMimeTypes`: The mime types of assets that are allowed to be added to this local source. * `applyAsset`: An optional callback that can be used to override the default behavior of applying a given asset result to the active scene. * `applyAssetToBlock`: An optional callback that can be used to override the default behavior of applying an asset result to a given block. ``` findAllSources(): string[] ``` Finds all registered asset sources. * Returns A list with the IDs of all registered asset sources. ``` removeSource(id: string): void ``` Removes an asset source with the given ID. * `id`: The ID to refer to the asset source. ``` onAssetSourceAdded: (callback: (sourceID: string) => void) => (() => void) ``` Register a callback to be called every time an asset source is added. * `callback`: The function that is called whenever an asset source is added. * Returns A method to unsubscribe. ``` onAssetSourceRemoved: (callback: (sourceID: string) => void) => (() => void) ``` Register a callback to be called every time an asset source is removed. * `callback`: The function that is called whenever an asset source is added. * Returns A method to unsubscribe. ``` onAssetSourceUpdated: (callback: (sourceID: string) => void) => (() => void) ``` Register a callback to be called every time an asset source’s contents are changed. * `callback`: The function that is called whenever an asset source is updated. * Returns A method to unsubscribe. ## Scene Asset Sources[#](#scene-asset-sources) A scene colors asset source is automatically available that allows listing all colors in the scene. This asset source is read-only and is updated when `findAssets` is called. ## Add an Asset[#](#add-an-asset) ``` addAssetToSource(sourceId: string, asset: AssetDefinition): void ``` Adds the given asset to a local asset source. * `sourceId`: The local asset source ID that the asset should be added to. * `asset`: The asset to be added to the asset source. ## Remove an Asset[#](#remove-an-asset) ``` removeAssetFromSource(sourceId: string, assetId: string): void ``` Removes the specified asset from its local asset source. * `sourceId`: The id of the local asset source that currently contains the asset. * `assetId`: The id of the asset to be removed. ## Asset Source Content Updates[#](#asset-source-content-updates) If the contents of your custom asset source change, you can call the `assetSourceContentsChanged` API to later notify all subscribers of the `onAssetSourceUpdated` API. ``` assetSourceContentsChanged(sourceID: string): void ``` Notifies the engine that the contents of an asset source changed. * `sourceID`: The asset source whose contents changed. ## Groups in Assets[#](#groups-in-assets) ``` getGroups(id: string): Promise ``` Queries the asset source’s groups for a certain asset type. * `id`: The ID of the asset source. * Returns The asset groups. ## Credits and License[#](#credits-and-license) ``` getCredits(sourceId: string): { name: string; url: string | undefined; } | undefined ``` Queries the asset source’s credits info. * `sourceId`: The ID of the asset source. * Returns The asset source’s credits info consisting of a name and an optional URL. ``` getLicense(sourceId: string): { name: string; url: string | undefined; } | undefined ``` Queries the asset source’s license info. * `sourceId`: The ID of the asset source. * Returns The asset source’s license info consisting of a name and an optional URL. ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); const customSource = { id: 'foobar', async findAssets(queryData) { return Promise.resolve({ assets: [ { id: 'logo', meta: { uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', thumbUri: 'https://img.ly/static/ubq_samples/thumbnails/imgly_logo.jpg', blockType: '//ly.img.ubq/image', width: 320, height: 116, }, context: { sourceId: 'foobar', }, }, ], total: 1, currentPage: queryData.page, nextPage: undefined, }); }, async applyAsset(assetResult) { return engine.asset.defaultApplyAsset(assetResult); }, async applyAssetToBlock(assetResult, block) { engine.asset.defaultApplyAssetToBlock(assetResult, block); }, }; engine.asset.onAssetSourceAdded(sourceID => { console.log(`Added source: ${sourceID}`); }); engine.asset.onAssetSourceRemoved(sourceID => { console.log(`Removed source: ${sourceID}`); }); engine.asset.onAssetSourceUpdated(sourceID => { console.log(`Updated source: ${sourceID}`); }); engine.asset.addSource(customSource); engine.asset.addLocalSource('local-source'); engine.asset.addAssetToSource('local-source', { id: 'ocean-waves-1', label: { en: 'relaxing ocean waves', }, tags: { en: ['ocean', 'waves', 'soothing', 'slow'], }, meta: { uri: `https://example.com/ocean-waves-1.mp4`, thumbUri: `https://example.com/thumbnails/ocean-waves-1.jpg`, mimeType: 'video/mp4', width: 1920, height: 1080, }, }); engine.asset.removeAssetFromSource('local-source', 'ocean-waves-1'); engine.asset.removeSource('local-source'); engine.asset.findAllSources(); const mimeTypes = engine.asset.getSupportedMimeTypes( 'ly.img.asset.source.unsplash', ); const credits = engine.asset.getCredits(customSource.id); const license = engine.asset.getLicense(customSource.id); const groups = engine.asset.getGroups(customSource.id); const result = await engine.asset.findAssets(customSource.id, { page: 0, perPage: 100, }); const asset = result.assets[0]; const sortByNewest = await engine.asset.findAssets('ly.img.image.upload', { page: 0, perPage: 10, sortingOrder: 'Descending', }); const sortById = await engine.asset.findAssets('ly.img.image.upload', { page: 0, perPage: 10, sortingOrder: 'Ascending', sortKey: 'id', }); const sortByMetaKeyValue = await engine.asset.findAssets( 'ly.img.image.upload', { page: 0, perPage: 10, sortingOrder: 'Ascending', sortKey: 'someMetaKey', }, ); const search = await engine.asset.findAssets('ly.img.asset.source.unsplash', { query: 'banana', page: 0, perPage: 100, }); const sceneColorsResult = await engine.asset.findAssets( 'ly.img.scene.colors', { page: 0, perPage: 99999, }, ); const colorAsset = sceneColorsResult.assets[0]; await engine.asset.apply(customSource.id, asset); await engine.asset.applyToBlock(customSource.id, asset); engine.asset.assetSourceContentsChanged(customSource.id); engine.asset.removeSource(customSource.id); document.getElementById('cesdk_container').append(engine.element);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/import-media/file-format-support-8cdc84) # Supported File Formats for Import When building creative applications with CE.SDK, understanding which file formats your users can import is crucial for delivering a smooth editing experience. CE.SDK supports a comprehensive range of modern media formats. This guide provides a complete reference of supported file formats for importing media, templates, and fonts into CE.SDK on web platforms. ## Supported Import Formats[#](#supported-import-formats) CE.SDK supports importing the following media types directly in the browser: | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | | **Templates** | `.idml` (InDesign), `.psd` (Photoshop), `.scene` (CE.SDK Native) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. Contact our support team to learn more about implementing custom importers. ## Video and Audio Codecs[#](#video-and-audio-codecs) While container formats (`.mp4`, `.mov`, `.webm`) define how media is packaged, codecs determine how the content is compressed. CE.SDK supports the following codecs for web playback and editing: ### Video Codecs[#](#video-codecs) * **H.264 / AVC** (in `.mp4` or `.mov`) – Universally supported across all modern browsers * **H.265 / HEVC** (in `.mp4` or `.mov`) – Requires platform-specific support; availability varies by browser and operating system * **VP8, VP9, AV1** (in `.webm`) – Modern web-native codecs with broad browser support ### Audio Codecs[#](#audio-codecs) * **MP3** (in `.mp3` files or within `.mp4`/`.mov` containers) * **AAC** (in `.m4a`, `.mp4`, or `.mov` containers) H.265/HEVC support varies by browser and requires hardware acceleration or licensed software decoders. Always test video playback on your target browsers before deploying H.265 content to end users. ## Size Limits and Constraints[#](#size-limits-and-constraints) CE.SDK processes all media client-side in the browser, which means performance is bounded by the user’s hardware capabilities. Here are the practical limits to keep in mind: ### Image Resolution Limits[#](#image-resolution-limits) | Constraint | Recommendation / Limit | | --- | --- | | **Input Resolution** | Maximum input resolution is **4096×4096 pixels**. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the `maxImageSize` setting. | | **Output Resolution** | There is no enforced output resolution limit. Theoretically, the editor supports output sizes up to **16,384×16,384 pixels**. However, practical limits depend on the device’s GPU capabilities and available memory. | All image processing in CE.SDK is handled client-side, so these values depend on the **maximum texture size** supported by the user’s hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded. To ensure consistent results across devices, test higher output sizes on your target hardware and set conservative defaults in production. ### Video Resolution and Duration Limits[#](#video-resolution-and-duration-limits) | Constraint | Recommendation / Limit | | --- | --- | | **Resolution** | Up to **4K UHD** is supported for **playback** and **export**, depending on the user’s hardware and available GPU resources. For **import**, CE.SDK does not impose artificial limits, but maximum video size is bounded by the **32-bit address space of WebAssembly (wasm32)** and the **browser tab’s memory cap (~2 GB)**. | | **Frame Rate** | 30 FPS at 1080p is broadly supported; 60 FPS and high-res exports benefit from hardware acceleration | | **Duration** | Stories and reels of up to **2 minutes** are fully supported. Longer videos are also supported, but we generally found a maximum duration of **10 minutes** to be a good balance for a smooth editing experience and a pleasant export duration of around one minute on modern hardware. | Performance scales with client hardware. For best results with high-resolution or high-frame-rate video, modern CPUs/GPUs with hardware acceleration are recommended. ## Format-Specific Considerations[#](#format-specific-considerations) ### SVG Limitations[#](#svg-limitations) CE.SDK uses Skia for SVG parsing and rendering. While most SVG files render correctly, there are some important limitations to be aware of: #### Text Elements[#](#text-elements) * SVG text elements are not supported – any text in SVG files will not be rendered. * Convert text to paths in your vector editor before exporting if text is needed. #### Styling Limitations[#](#styling-limitations) * CSS styles included in SVGs are not supported – use presentation attributes instead. * RGBA color syntax is not supported – use `fill-opacity` and `stroke-opacity` attributes. * When exporting SVGs from design tools, choose the “presentation attributes” option. #### Unsupported SVG Elements[#](#unsupported-svg-elements) The following SVG elements are not supported: * Animation elements (``) * Foreign object (``) * Text-related elements (``, ``, ``) * Script elements (` ``` We use a technology called Lookup Tables (LUTs) in order to add new filters to our SDK. The main idea is that colors respond to operations that are carried out during the filtering process. We ‘record’ that very response by applying the filter to the identity image shown below. ![Identity LUT](content-assets/6e3f49/identity.png) The resulting image can be used within our SDK and the recorded changes can then be applied to any image by looking up the transformed colors in the modified LUT. If you want to create a new filter, you’ll need to [download](content-assets/6e3f49/imgly_lut_ad1920_5_5_128.png) the identity LUT shown above, load it into an image editing software of your choice, apply your operations, save it and add it to your app. > **WARNING:** As any compression artifacts in the edited LUT could lead to distorted results when applying the filter, you need to save your LUT as a PNG file. ## Using Custom Filters[#](#using-custom-filters) In this example, we will use a hosted CDN LUT filter file. First we will load one of our demo scenes and change the first image to use LUT filter we will provide. We will also configure the necessary setting based on the file. LUT file we will use: ![Color grading LUT showcasing a grid of color variations used for applying a specific visual style to images.](content-assets/6e3f49/imgly_lut_ad1920_5_5_128.png) ## Load Scene[#](#load-scene) After the setup, we create a new scene. Within this scene, we create a page, set its dimensions, and append it to the scene. Lastly, we adjust the zoom level to properly fit the page into the view. ``` const page = engine.block.create('page');engine.block.setWidth(page, 100);engine.block.setHeight(page, 100);engine.block.appendChild(scene, page);engine.scene.zoomToBlock(page, 40, 40, 40, 40); ``` ## Create Rectangle[#](#create-rectangle) Next, we create a rectangle with defined dimensions and append it to the page. We will apply our LUT filter to this rectangle. ``` const rect = engine.block.create('graphic');engine.block.setShape(rect, engine.block.createShape('rect'));engine.block.setWidth(rect, 100);engine.block.setHeight(rect, 100);engine.block.appendChild(page, rect); ``` ## Load Image[#](#load-image) After creating the rectangle, we create an image fill with a specified URL. This will load the image as a fill for the rectangle to which we will apply the LUT filter. ``` const imageFill = engine.block.createFill('image');engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg'); ``` ## Create LUT Filter[#](#create-lut-filter) Now, we create a Look-Up Table (LUT) filter effect. We enable the filter, set its intensity, and provide a URL for the LUT file. We also define the tile count for the filter. The LUT filter effect is then applied to the rectangle and image should appear black and white. ``` const lutFilter = engine.block.createEffect('lut_filter');engine.block.setBool(lutFilter, 'effect/enabled', true);engine.block.setFloat(lutFilter, 'effect/lut_filter/intensity', 0.9);engine.block.setString( lutFilter, 'effect/lut_filter/lutFileURI', 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/assets/extensions/ly.img.cesdk.filters.lut/LUTs/imgly_lut_ad1920_5_5_128.png'); engine.block.setInt(lutFilter, 'effect/lut_filter/verticalTileCount', 5);engine.block.setInt(lutFilter, 'effect/lut_filter/horizontalTileCount', 5); ``` ## Apply LUT Filter[#](#apply-lut-filter) Finally, we apply the LUT filter effect to the rectangle, and set the image fill to the rectangle. Before setting an image fill, we destroy the default rectangle fill. ``` engine.block.appendEffect(rect, lutFilter);engine.block.setFill(rect, imageFill); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 100); engine.block.setHeight(page, 100); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const rect = engine.block.create('graphic'); engine.block.setShape(rect, engine.block.createShape('rect')); engine.block.setWidth(rect, 100); engine.block.setHeight(rect, 100); engine.block.appendChild(page, rect); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); const lutFilter = engine.block.createEffect('lut_filter'); engine.block.setBool(lutFilter, 'effect/enabled', true); engine.block.setFloat(lutFilter, 'effect/lut_filter/intensity', 0.9); engine.block.setString( lutFilter, 'effect/lut_filter/lutFileURI', 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/assets/extensions/ly.img.cesdk.filters.lut/LUTs/imgly_lut_ad1920_5_5_128.png' ); engine.block.setInt(lutFilter, 'effect/lut_filter/verticalTileCount', 5); engine.block.setInt(lutFilter, 'effect/lut_filter/horizontalTileCount', 5); engine.block.appendEffect(rect, lutFilter); engine.block.setFill(rect, imageFill);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/filters-and-effects/blur-71d642) # Blur ``` // Create and configure a radial blurconst radialBlur = engine.block.createBlur('radial'); engine.block.setFloat(radialBlur, 'radial/radius', 100);engine.block.setBlur(block, radialBlur);engine.block.setBlurEnabled(block, true);const isBlurEnabled = engine.block.isBlurEnabled(block); // Access an existing blurif (engine.block.supportsBlur(block)) { const existingBlur = engine.block.getBlur(block);} ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to modify a block’s blur through the `block` API. Blurs can be added to any shape or page. You can create and configure individual blurs and apply them to blocks. Blocks support at most one blur at a time. The same blur may be used for different blocks at the same time. ## Creating a Blur[#](#creating-a-blur) To create a blur, simply use `createBlur`. ``` createBlur(type: BlurType): DesignBlockId ``` Create a new blur, fails if type is unknown or not a valid blur type. * `type`: The type id of the block. * Returns The handle of the newly created blur. We currently support the following blur types: * `'//ly.img.ubq/blur/uniform'` * `'//ly.img.ubq/blur/linear'` * `'//ly.img.ubq/blur/mirrored'` * `'//ly.img.ubq/blur/radial'` Note: Omitting the prefix is also accepted, e.g. `'uniform'` instead of `'//ly.img.ubq/blur/uniform'`. ``` // Create and configure a radial blurconst radialBlur = engine.block.createBlur('radial'); ``` ## Configuring a Blur[#](#configuring-a-blur) You can configure blurs just like you configure design blocks. See [Modify Properties](angular/concepts/blocks-90241e/) for more detail. ``` engine.block.setFloat(radialBlur, 'radial/radius', 100);engine.block.setBlur(block, radialBlur);engine.block.setBlurEnabled(block, true);const isBlurEnabled = engine.block.isBlurEnabled(block); ``` ## Functions[#](#functions) ``` setBlur(id: DesignBlockId, blurId: DesignBlockId): void ``` Connects `block`’s blur to the given `blur` block. Required scope: ‘appearance/blur’ * `id`: The block to update. * `blurId`: A ‘blur’ block. ``` setBlurEnabled(id: DesignBlockId, enabled: boolean): void ``` Enable or disable the blur of the given design block. * `id`: The block to update. * `enabled`: The new enabled value. ``` isBlurEnabled(id: DesignBlockId): boolean ``` Query if blur is enabled for the given block. * `id`: The block to query. * Returns True, if the blur is enabled. False otherwise. ``` supportsBlur(id: DesignBlockId): boolean ``` Checks whether the block supports blur. * `id`: The block to query. * Returns True, if the block supports blur. ``` getBlur(id: DesignBlockId): DesignBlockId ``` Get the ‘blur’ block of the given design block. * `id`: The block to query. * Returns The ‘blur’ block. ## Linear Type[#](#linear-type) A blur effect applied along a linear gradient. This section describes the properties available for the **Linear Type** (`//ly.img.ubq/blur/linear`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `blur/linear/blurRadius` | `Float` | `30` | Blur intensity. | | `blur/linear/x1` | `Float` | `0` | Control point 1 x-value. | | `blur/linear/x2` | `Float` | `1` | Control point 2 x-value. | | `blur/linear/y1` | `Float` | `0.5` | Control point 1 y-value. | | `blur/linear/y2` | `Float` | `0.5` | Control point 2 y-value. | ## Mirrored Type[#](#mirrored-type) A blur effect applied in a mirrored linear fashion. This section describes the properties available for the **Mirrored Type** (`//ly.img.ubq/blur/mirrored`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `blur/mirrored/blurRadius` | `Float` | `30` | Blur intensity. | | `blur/mirrored/gradientSize` | `Float` | `50` | Hardness of gradients. | | `blur/mirrored/size` | `Float` | `75` | Size of blurred area. | | `blur/mirrored/x1` | `Float` | `0` | Control point 1 x-value. | | `blur/mirrored/x2` | `Float` | `1` | Control point 2 x-value. | | `blur/mirrored/y1` | `Float` | `0.5` | Control point 1 y-value. | | `blur/mirrored/y2` | `Float` | `0.5` | Control point 2 y-value. | ## Radial Type[#](#radial-type) A blur effect applied radially from a center point. This section describes the properties available for the **Radial Type** (`//ly.img.ubq/blur/radial`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `blur/radial/blurRadius` | `Float` | `30` | Blur intensity. | | `blur/radial/gradientRadius` | `Float` | `50` | Size of blurred area. | | `blur/radial/radius` | `Float` | `75` | Size of non-blurred area. | | `blur/radial/x` | `Float` | `0.5` | Center point x-value. | | `blur/radial/y` | `Float` | `0.5` | Center point y-value. | ## Uniform Type[#](#uniform-type) A blur effect with uniform intensity. This section describes the properties available for the **Uniform Type** (`//ly.img.ubq/blur/uniform`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `blur/uniform/intensity` | `Float` | `0.5` | The blur intensity. | ## Full Code[#](#full-code) Here’s the full code: ``` // Create and configure a radial blurconst radialBlur = engine.block.createBlur('radial');engine.block.setFloat(radialBlur, 'radial/radius', 100);engine.block.setBlur(block, radialBlur);engine.block.setBlurEnabled(block, true);const isBlurEnabled = engine.block.isBlurEnabled(block); // Access an existing blurif (engine.block.supportsBlur(block)) { const existingBlur = engine.block.getBlur(block);} ``` --- [Source](https:/img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4) # Apply Filters and Effects Apply professional color grading, blur effects, and artistic treatments to design elements using CE.SDK’s visual effects system. ![Apply Filters and Effects example showing images with various effects applied](/docs/cesdk/_astro/browser.hero.DS7M9OMT_Z2tR1OE.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-filters-and-effects-apply-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-filters-and-effects-apply-browser) While CE.SDK uses a unified effect API for both filters and effects, they serve different purposes. **Filters** typically apply color transformations like LUT filters and duotone, while **effects** apply visual modifications such as blur, pixelize, vignette, and image adjustments. You can combine multiple effects on a single element, creating complex visual treatments by stacking them in a customizable order. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json';import { calculateGridLayout, hexToRgba } from './utils'; /** * CE.SDK Plugin: Filters and Effects Guide * * Demonstrates applying various filters and effects to image blocks: * - Checking effect support * - Applying basic effects (blur) * - Configuring effect parameters (adjustments) * - Applying LUT filters * - Combining multiple effects * - Managing effect stacks */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Initialize CE.SDK with Design mode and load asset sources await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page dimensions engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Enable effects and filters in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); // Enable all effects cesdk.feature.enable('ly.img.filter'); // Enable all filters cesdk.feature.enable('ly.img.blur'); // Enable blur effect cesdk.feature.enable('ly.img.adjustment'); // Enable adjustments // Calculate responsive grid layout based on page dimensions const layout = calculateGridLayout(pageWidth, pageHeight, 9); const { blockWidth, blockHeight, getPosition } = layout; // Use a sample image URL (this will load from demo assets) const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Query available LUT and Duotone filters from asset sources // These filters are provided by the demo asset sources loaded above const lutResults = await engine.asset.findAssets('ly.img.filter.lut', { page: 0, perPage: 10 }); const duotoneResults = await engine.asset.findAssets( 'ly.img.filter.duotone', { page: 0, perPage: 10 } ); const lutAssets = lutResults.assets; const duotoneAssets = duotoneResults.assets; // Pattern #2: Use Convenience APIs - addImage() simplifies block creation // Create a sample block to demonstrate effect support checking const blockSize = { width: blockWidth, height: blockHeight }; const sampleBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, sampleBlock); // Check if a block supports effects const supportsEffects = engine.block.supportsEffects(sampleBlock); // eslint-disable-next-line no-console console.log('Block supports effects:', supportsEffects); // true for graphics // Page blocks don't support effects const pageSupportsEffects = engine.block.supportsEffects(page); // eslint-disable-next-line no-console console.log('Page supports effects:', pageSupportsEffects); // false // Select this block so effects panel is visible engine.block.setSelected(sampleBlock, true); // Pattern #1: Demonstrate Individual Before Combined // Create a separate image block for blur demonstration const blurImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, blurImageBlock); // Create and apply a blur effect const blurEffect = engine.block.createEffect('extrude_blur'); engine.block.appendEffect(blurImageBlock, blurEffect); // Adjust blur intensity engine.block.setFloat(blurEffect, 'effect/extrude_blur/amount', 0.5); // Create a separate image block for adjustments demonstration const adjustmentsImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, adjustmentsImageBlock); // Create adjustments effect for brightness and contrast const adjustmentsEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(adjustmentsImageBlock, adjustmentsEffect); // Find all available properties for this effect const adjustmentProperties = engine.block.findAllProperties(adjustmentsEffect); // eslint-disable-next-line no-console console.log('Available adjustment properties:', adjustmentProperties); // Set brightness, contrast, and saturation engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/brightness', 0.2 ); engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/contrast', 0.15 ); engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/saturation', 0.1 ); // Demonstrate LUT filters by applying the first 2 from asset library // These filters are fetched from the demo asset sources (Grid positions 3-4) const lutImageBlocks = []; for (let i = 0; i < Math.min(2, lutAssets.length); i++) { const lutAsset = lutAssets[i]; const lutImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, lutImageBlock); lutImageBlocks.push(lutImageBlock); // Create LUT filter effect using the full effect type URI const lutEffect = engine.block.createEffect( '//ly.img.ubq/effect/lut_filter' ); // Use asset metadata for LUT configuration // The asset provides the LUT file URI and grid dimensions engine.block.setString( lutEffect, 'effect/lut_filter/lutFileURI', lutAsset.meta?.uri as string ); engine.block.setInt( lutEffect, 'effect/lut_filter/horizontalTileCount', parseInt(lutAsset.meta?.horizontalTileCount as string, 10) ); engine.block.setInt( lutEffect, 'effect/lut_filter/verticalTileCount', parseInt(lutAsset.meta?.verticalTileCount as string, 10) ); engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.85); engine.block.appendEffect(lutImageBlock, lutEffect); } // Demonstrate Duotone filters by applying the first 2 from asset library // Duotone filters create artistic two-color treatments (Grid positions 5-6) const duotoneImageBlocks = []; for (let i = 0; i < Math.min(2, duotoneAssets.length); i++) { const duotoneAsset = duotoneAssets[i]; const duotoneImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, duotoneImageBlock); duotoneImageBlocks.push(duotoneImageBlock); // Create Duotone filter effect using the full effect type URI const duotoneEffect = engine.block.createEffect( '//ly.img.ubq/effect/duotone_filter' ); // Convert hex colors from asset metadata to RGBA (0-1 range) const darkColor = hexToRgba(duotoneAsset.meta?.darkColor as string); engine.block.setColor( duotoneEffect, 'effect/duotone_filter/darkColor', darkColor ); const lightColor = hexToRgba(duotoneAsset.meta?.lightColor as string); engine.block.setColor( duotoneEffect, 'effect/duotone_filter/lightColor', lightColor ); engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.8 ); engine.block.appendEffect(duotoneImageBlock, duotoneEffect); } // Pattern #5: Progressive Complexity - now combining multiple effects // Create a separate image block to demonstrate combining multiple effects (Grid position 7) const combinedImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, combinedImageBlock); // Apply effects in order - the stack will contain: // 1. adjustments (brightness/contrast) - applied first // 2. blur - applied second // 3. duotone (color tinting) - applied third // 4. pixelize - applied last const combinedAdjustments = engine.block.createEffect('adjustments'); engine.block.appendEffect(combinedImageBlock, combinedAdjustments); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/brightness', 0.2 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/contrast', 0.15 ); const combinedBlur = engine.block.createEffect('extrude_blur'); engine.block.appendEffect(combinedImageBlock, combinedBlur); engine.block.setFloat(combinedBlur, 'effect/extrude_blur/amount', 0.3); const combinedDuotone = engine.block.createEffect('duotone_filter'); engine.block.appendEffect(combinedImageBlock, combinedDuotone); engine.block.setColor(combinedDuotone, 'duotone_filter/darkColor', { r: 0.1, g: 0.2, b: 0.4, a: 1.0 }); engine.block.setColor(combinedDuotone, 'duotone_filter/lightColor', { r: 0.9, g: 0.8, b: 0.6, a: 1.0 }); engine.block.setFloat(combinedDuotone, 'duotone_filter/intensity', 0.6); const pixelizeEffect = engine.block.createEffect('pixelize'); engine.block.appendEffect(combinedImageBlock, pixelizeEffect); engine.block.setInt(pixelizeEffect, 'pixelize/horizontalPixelSize', 8); engine.block.setInt(pixelizeEffect, 'pixelize/verticalPixelSize', 8); // Get all effects applied to the combined block const effects = engine.block.getEffects(combinedImageBlock); // eslint-disable-next-line no-console console.log('Applied effects:', effects); // Access properties of specific effects effects.forEach((effect, index) => { const effectType = engine.block.getType(effect); const isEnabled = engine.block.isEffectEnabled(effect); // eslint-disable-next-line no-console console.log(`Effect ${index}: ${effectType}, enabled: ${isEnabled}`); }); // Check if effect is enabled const isBlurEnabled = engine.block.isEffectEnabled(combinedBlur); // eslint-disable-next-line no-console console.log('Blur effect is enabled:', isBlurEnabled); // Create a temporary block to demonstrate effect removal const tempBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, tempBlock); const tempEffect = engine.block.createEffect('pixelize'); engine.block.appendEffect(tempBlock, tempEffect); engine.block.setInt(tempEffect, 'pixelize/horizontalPixelSize', 12); // Remove the effect const tempEffects = engine.block.getEffects(tempBlock); const effectIndex = tempEffects.indexOf(tempEffect); if (effectIndex !== -1) { engine.block.removeEffect(tempBlock, effectIndex); } // Destroy the removed effect to free memory engine.block.destroy(tempEffect); // ===== Position all blocks in grid layout ===== const blocks = [ sampleBlock, // Position 0 blurImageBlock, // Position 1 adjustmentsImageBlock, // Position 2 ...lutImageBlocks, // Positions 3-4 ...duotoneImageBlocks, // Positions 5-6 combinedImageBlock, // Position 7 tempBlock // Position 8 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Apply same effects to multiple blocks const allGraphics = engine.block.findByType('graphic'); allGraphics.forEach((graphic) => { if (engine.block.supportsEffects(graphic)) { // Only apply to blocks that don't already have effects const existingEffects = engine.block.getEffects(graphic); if (existingEffects.length === 0) { const effect = engine.block.createEffect('adjustments'); engine.block.appendEffect(graphic, effect); engine.block.setFloat(effect, 'effect/adjustments/brightness', 0.1); } } }); // eslint-disable-next-line no-console console.log( 'Effects guide initialized. Select any image to see effects panel.' ); }} export default Example; ``` This guide covers how to enable the built-in effects panel for interactive editing and how to apply and manage effects programmatically using the block API. ## Using the Built-in Effects UI[#](#using-the-built-in-effects-ui) ### Enable Effects Features[#](#enable-effects-features) To give users access to effects in the inspector panel, we enable the effects features using CE.SDK’s Feature API. Effects and filters appear in the **inspector bar** and **advanced inspector** when a user selects a supported element. ``` // Enable effects and filters in the inspector panel using the Feature APIcesdk.feature.enable('ly.img.effect'); // Enable all effectscesdk.feature.enable('ly.img.filter'); // Enable all filterscesdk.feature.enable('ly.img.blur'); // Enable blur effectcesdk.feature.enable('ly.img.adjustment'); // Enable adjustments ``` The Feature API controls which capabilities are available to users. By enabling `ly.img.effect` and `ly.img.filter`, the inspector panel displays effect and filter options when users select compatible blocks. You can also enable specific effects individually like `ly.img.blur` or `ly.img.adjustment` for more granular control. Effects are enabled by default for graphic blocks with image or video fills. The Feature API shown above allows you to control which specific effects appear in the inspector panel UI. ### User Workflow[#](#user-workflow) With effects features enabled, users can enhance their designs through a visual workflow in the inspector panel: 1. **Select an element** - Click on any image or supported graphic block in the canvas 2. **Access inspector** - The inspector panel shows available options for the selected element 3. **Find effects section** - Scroll to the effects and filters sections within the inspector 4. **Browse and apply** - Click through available effects to apply them 5. **Adjust parameters** - Use sliders and controls to fine-tune intensity and other effect properties 6. **Manage effects** - Toggle effects on/off, switch between effects, or reset effect parameters Effects are applied immediately when selected. CE.SDK does not currently support live preview mode when browsing effects before application. Effect reordering is not supported—use toggle on/off, switch, or reset operations to manage applied effects. This interactive approach is perfect for creative exploration and allows users to see results immediately without any coding knowledge. ## Programmatic Effect Application[#](#programmatic-effect-application) ### Initialize CE.SDK[#](#initialize-cesdk) For applications that need to apply effects programmatically—whether for automation, batch processing, or dynamic user experiences—we start by setting up CE.SDK with the proper configuration. ``` // Initialize CE.SDK with Design mode and load asset sourcesawait cesdk.addDefaultAssetSources();await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true});await cesdk.createDesignScene(); const engine = cesdk.engine;const page = engine.block.findByType('page')[0]; // Set page dimensionsengine.block.setWidth(page, 800);engine.block.setHeight(page, 600); const pageWidth = engine.block.getWidth(page);const pageHeight = engine.block.getHeight(page); ``` This initializes the full CE.SDK interface with the effects panel enabled, giving you both UI and API access to the effects system. ### Check Effect Support[#](#check-effect-support) Before applying effects to a block, we check whether it supports them. Not all block types can have effects applied—for example, page blocks and scene blocks do not support effects. ``` // Pattern #2: Use Convenience APIs - addImage() simplifies block creation// Create a sample block to demonstrate effect support checkingconst blockSize = { width: blockWidth, height: blockHeight };const sampleBlock = await engine.block.addImage(imageUri, { size: blockSize});engine.block.appendChild(page, sampleBlock); // Check if a block supports effectsconst supportsEffects = engine.block.supportsEffects(sampleBlock);// eslint-disable-next-line no-consoleconsole.log('Block supports effects:', supportsEffects); // true for graphics // Page blocks don't support effectsconst pageSupportsEffects = engine.block.supportsEffects(page);// eslint-disable-next-line no-consoleconsole.log('Page supports effects:', pageSupportsEffects); // false // Select this block so effects panel is visibleengine.block.setSelected(sampleBlock, true); ``` Effect support is available for: * **Graphic blocks** with image fills * **Graphic blocks** with video fills (with performance considerations) * **Shape blocks** with fills * **Text blocks** (with limited effect types) * **Page blocks** (particularly when they have fills applied, such as background fills) Always verify support before creating and applying effects to avoid errors and ensure a smooth user experience. ### Apply Basic Effects[#](#apply-basic-effects) Once we’ve confirmed a block supports effects, we can create and apply effects using the effect API. Here we create a separate image block using the convenience `addImage()` API and apply a blur effect to it. The example code uses the `engine.block.addImage()` convenience API throughout this guide. This built-in helper simplifies image block creation compared to manually constructing graphic blocks with image fills, and provides additional configuration options like positioning, sizing, corner radius, shadows, and timeline properties. ``` // Pattern #1: Demonstrate Individual Before Combined// Create a separate image block for blur demonstrationconst blurImageBlock = await engine.block.addImage(imageUri, { size: blockSize});engine.block.appendChild(page, blurImageBlock); // Create and apply a blur effectconst blurEffect = engine.block.createEffect('extrude_blur');engine.block.appendEffect(blurImageBlock, blurEffect); // Adjust blur intensityengine.block.setFloat(blurEffect, 'effect/extrude_blur/amount', 0.5); ``` CE.SDK provides several built-in effect types: * `extrude_blur` - Gaussian blur with configurable intensity * `adjustments` - Brightness, contrast, saturation, exposure * `pixelize` - Pixelation effect * `vignette` - Darkened corners * `half_tone` - Halftone pattern * `lut_filter` - Color grading with LUT files * `duotone` - Two-color tinting `extrude_blur` is the only blur available as an effect. CE.SDK also provides additional blur types in a separate blur category. Each effect type has its own set of configurable properties that control its visual appearance. ### Configure Effect Parameters[#](#configure-effect-parameters) After creating an effect, we can customize its appearance by setting properties. Each effect exposes different parameters depending on its type and capabilities. ``` // Create a separate image block for adjustments demonstrationconst adjustmentsImageBlock = await engine.block.addImage(imageUri, { size: blockSize});engine.block.appendChild(page, adjustmentsImageBlock); // Create adjustments effect for brightness and contrastconst adjustmentsEffect = engine.block.createEffect('adjustments');engine.block.appendEffect(adjustmentsImageBlock, adjustmentsEffect); // Find all available properties for this effectconst adjustmentProperties = engine.block.findAllProperties(adjustmentsEffect);// eslint-disable-next-line no-consoleconsole.log('Available adjustment properties:', adjustmentProperties); // Set brightness, contrast, and saturationengine.block.setFloat( adjustmentsEffect, 'effect/adjustments/brightness', 0.2);engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/contrast', 0.15);engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/saturation', 0.1); ``` CE.SDK provides typed setter methods for different parameter types: * **`setFloat()`** - For intensity, amount, and radius values (typically 0.0 to 1.0) * **`setInt()`** - For discrete values like pixel sizes * **`setString()`** - For file URIs (LUT files, image references) * **`setBool()`** - For enabling or disabling specific features Using the correct setter method ensures type safety and proper value validation. ### Apply LUT Filters[#](#apply-lut-filters) LUT (Look-Up Table) filters apply professional color grading by transforming colors through a predefined mapping. These are particularly useful for creating consistent brand aesthetics or applying cinematic color treatments. The example demonstrates querying LUT filters from the asset library using `engine.asset.findAssets('ly.img.filter.lut')`, then applying them using metadata from the asset results. This approach matches how CE.SDK’s built-in filter panel works. ``` // Demonstrate LUT filters by applying the first 2 from asset library// These filters are fetched from the demo asset sources (Grid positions 3-4)const lutImageBlocks = [];for (let i = 0; i < Math.min(2, lutAssets.length); i++) { const lutAsset = lutAssets[i]; const lutImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, lutImageBlock); lutImageBlocks.push(lutImageBlock); // Create LUT filter effect using the full effect type URI const lutEffect = engine.block.createEffect( '//ly.img.ubq/effect/lut_filter' ); // Use asset metadata for LUT configuration // The asset provides the LUT file URI and grid dimensions engine.block.setString( lutEffect, 'effect/lut_filter/lutFileURI', lutAsset.meta?.uri as string ); engine.block.setInt( lutEffect, 'effect/lut_filter/horizontalTileCount', parseInt(lutAsset.meta?.horizontalTileCount as string, 10) ); engine.block.setInt( lutEffect, 'effect/lut_filter/verticalTileCount', parseInt(lutAsset.meta?.verticalTileCount as string, 10) ); engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.85); engine.block.appendEffect(lutImageBlock, lutEffect);} ``` LUT filters are ideal for: * Creating consistent brand aesthetics across all designs * Applying cinematic or film-style color grading * Matching reference images or maintaining color continuity * Building curated filter collections for users **Asset metadata structure**: Each LUT asset provides `uri` (the LUT file URL), `horizontalTileCount`, and `verticalTileCount` describing the grid layout of color transformation cubes. ### Apply Duotone Filters[#](#apply-duotone-filters) Duotone filters create artistic two-color effects by mapping image tones to two colors (dark and light). This effect is popular for creating stylized visuals, vintage aesthetics, or brand-specific color treatments. The example queries duotone filters from the asset library, then applies them using color metadata. The `hexToRgba` utility converts hex color values from asset metadata to RGBA format required by the `setColorRGBA` API. ``` // Demonstrate Duotone filters by applying the first 2 from asset library// Duotone filters create artistic two-color treatments (Grid positions 5-6)const duotoneImageBlocks = [];for (let i = 0; i < Math.min(2, duotoneAssets.length); i++) { const duotoneAsset = duotoneAssets[i]; const duotoneImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, duotoneImageBlock); duotoneImageBlocks.push(duotoneImageBlock); // Create Duotone filter effect using the full effect type URI const duotoneEffect = engine.block.createEffect( '//ly.img.ubq/effect/duotone_filter' ); // Convert hex colors from asset metadata to RGBA (0-1 range) const darkColor = hexToRgba(duotoneAsset.meta?.darkColor as string); engine.block.setColor( duotoneEffect, 'effect/duotone_filter/darkColor', darkColor ); const lightColor = hexToRgba(duotoneAsset.meta?.lightColor as string); engine.block.setColor( duotoneEffect, 'effect/duotone_filter/lightColor', lightColor ); engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.8 ); engine.block.appendEffect(duotoneImageBlock, duotoneEffect);} ``` Duotone filters work by: * Mapping darker image tones to the **dark color** * Mapping lighter image tones to the **light color** * Blending between the two colors based on pixel brightness * Adjusting intensity to control the effect strength (0.0 to 1.0) **Asset metadata structure**: Each duotone asset provides `darkColor` and `lightColor` as hex strings (e.g., `"#1a2b3c"`) which must be converted to RGBA values for the effect API. ### Combine Multiple Effects[#](#combine-multiple-effects) One of the most powerful features of CE.SDK’s effect system is the ability to stack multiple effects on a single block. Each effect is applied sequentially, allowing you to build complex visual treatments. The example code demonstrates each effect type individually on separate image blocks before showing them combined. This educational approach helps you understand what each effect does before seeing them work together. In your production code, you can apply multiple effects directly to the same block without this separation. ``` // Pattern #5: Progressive Complexity - now combining multiple effects// Create a separate image block to demonstrate combining multiple effects (Grid position 7)const combinedImageBlock = await engine.block.addImage(imageUri, { size: blockSize});engine.block.appendChild(page, combinedImageBlock); // Apply effects in order - the stack will contain:// 1. adjustments (brightness/contrast) - applied first// 2. blur - applied second// 3. duotone (color tinting) - applied third// 4. pixelize - applied last const combinedAdjustments = engine.block.createEffect('adjustments');engine.block.appendEffect(combinedImageBlock, combinedAdjustments);engine.block.setFloat( combinedAdjustments, 'effect/adjustments/brightness', 0.2);engine.block.setFloat( combinedAdjustments, 'effect/adjustments/contrast', 0.15); const combinedBlur = engine.block.createEffect('extrude_blur');engine.block.appendEffect(combinedImageBlock, combinedBlur);engine.block.setFloat(combinedBlur, 'effect/extrude_blur/amount', 0.3); const combinedDuotone = engine.block.createEffect('duotone_filter');engine.block.appendEffect(combinedImageBlock, combinedDuotone);engine.block.setColor(combinedDuotone, 'duotone_filter/darkColor', { r: 0.1, g: 0.2, b: 0.4, a: 1.0});engine.block.setColor(combinedDuotone, 'duotone_filter/lightColor', { r: 0.9, g: 0.8, b: 0.6, a: 1.0});engine.block.setFloat(combinedDuotone, 'duotone_filter/intensity', 0.6); const pixelizeEffect = engine.block.createEffect('pixelize');engine.block.appendEffect(combinedImageBlock, pixelizeEffect);engine.block.setInt(pixelizeEffect, 'pixelize/horizontalPixelSize', 8);engine.block.setInt(pixelizeEffect, 'pixelize/verticalPixelSize', 8); ``` **Effect ordering matters**: Effects are applied from the bottom of the stack to the top. In this example: 1. First, we adjust brightness and contrast 2. Then, we apply blur 3. Then, we apply color grading with a LUT filter 4. Finally, we add stylization with pixelization Experiment with different orderings to achieve the desired visual result—changing the order can significantly impact the final appearance. ## Managing Applied Effects[#](#managing-applied-effects) ### List and Access Effects[#](#list-and-access-effects) We can retrieve all effects applied to a block and inspect their properties. This is useful for building effect management interfaces or debugging effect configurations. ``` // Get all effects applied to the combined blockconst effects = engine.block.getEffects(combinedImageBlock);// eslint-disable-next-line no-consoleconsole.log('Applied effects:', effects); // Access properties of specific effectseffects.forEach((effect, index) => { const effectType = engine.block.getType(effect); const isEnabled = engine.block.isEffectEnabled(effect); // eslint-disable-next-line no-console console.log(`Effect ${index}: ${effectType}, enabled: ${isEnabled}`);}); ``` This allows you to iterate through all applied effects, read their properties, and make modifications as needed. ### Enable/Disable Effects[#](#enabledisable-effects) CE.SDK allows you to temporarily toggle effects on and off without removing them from the block. This is particularly useful for before/after comparisons or when you need to optimize rendering performance during interactive editing sessions. ``` // Check if effect is enabledconst isBlurEnabled = engine.block.isEffectEnabled(combinedBlur);// eslint-disable-next-line no-consoleconsole.log('Blur effect is enabled:', isBlurEnabled); ``` When you disable an effect, it remains attached to the block but won’t be rendered until you enable it again. This preserves all effect parameters while giving you full control over when the effect is applied. You can use this feature to create interactive preview modes, implement undo-like functionality, or conditionally apply effects based on user preferences or device capabilities. ### Remove Effects[#](#remove-effects) When you no longer need an effect, you can remove it from the effect stack and free its resources. Always destroy effects that are no longer in use to prevent memory leaks. ``` // Create a temporary block to demonstrate effect removalconst tempBlock = await engine.block.addImage(imageUri, { size: blockSize});engine.block.appendChild(page, tempBlock); const tempEffect = engine.block.createEffect('pixelize');engine.block.appendEffect(tempBlock, tempEffect);engine.block.setInt(tempEffect, 'pixelize/horizontalPixelSize', 12); // Remove the effectconst tempEffects = engine.block.getEffects(tempBlock);const effectIndex = tempEffects.indexOf(tempEffect);if (effectIndex !== -1) { engine.block.removeEffect(tempBlock, effectIndex);} // Destroy the removed effect to free memoryengine.block.destroy(tempEffect); ``` The `removeEffect()` method takes an index position, so you can remove effects selectively from any position in the stack. After removal, destroy the effect instance to ensure proper cleanup. ## Additional Techniques[#](#additional-techniques) ### Batch Processing[#](#batch-processing) For applications that need to apply the same effects to multiple elements, we can iterate through a collection of blocks and apply effects efficiently. ``` // Apply same effects to multiple blocksconst allGraphics = engine.block.findByType('graphic'); allGraphics.forEach((graphic) => { if (engine.block.supportsEffects(graphic)) { // Only apply to blocks that don't already have effects const existingEffects = engine.block.getEffects(graphic); if (existingEffects.length === 0) { const effect = engine.block.createEffect('adjustments'); engine.block.appendEffect(graphic, effect); engine.block.setFloat(effect, 'effect/adjustments/brightness', 0.1); } }}); ``` When batch processing, check effect support before creating effects to avoid unnecessary work. You can also reuse effect instances when applying the same configuration to multiple blocks, though be careful to destroy them properly when done. ### Dynamic Effects in Video Mode[#](#dynamic-effects-in-video-mode) When working in Video mode (not Design mode), you can combine effects with CE.SDK’s built-in animation system to create dynamic visual treatments that change over time. Effect parameters are static properties and cannot be animated using JavaScript timers like `setInterval` or `requestAnimationFrame`. For animated content, use CE.SDK’s built-in animation blocks (`createAnimation()`, `setInAnimation()`, etc.) in Video mode or refer to the animation guides. For dynamic visual effects in video projects, explore CE.SDK’s animation system which provides professionally designed transitions and effects that integrate seamlessly with the rendering pipeline. ### Custom Effect Combinations[#](#custom-effect-combinations) Creating reusable effect presets allows you to maintain consistent styling across your application and speed up common effect applications. Here’s a pattern for building reusable effect configurations: ``` // Create a reusable preset functionasync function applyVintagePreset(engine: CreativeEngine, imageBlock: number) { // Apply LUT filter const lutEffect = engine.block.createEffect('lut_filter'); engine.block.setString( lutEffect, 'lut_filter/lutFileURI', 'https://img.ly/static/ubq_luts/vintage.png', ); engine.block.appendEffect(imageBlock, lutEffect); // Add vignette const vignetteEffect = engine.block.createEffect('vignette'); engine.block.setFloat(vignetteEffect, 'vignette/intensity', 0.5); engine.block.appendEffect(imageBlock, vignetteEffect); return { lutEffect, vignetteEffect };} // Use the presetconst effects = await applyVintagePreset(engine, myImageBlock); ``` Preset strategies include: * **Brand filters** - Maintain a consistent look across campaigns * **Style templates** - Provide quick application of complex multi-effect treatments * **User favorites** - Allow users to save and recall their preferred settings ## Performance Considerations[#](#performance-considerations) CE.SDK’s effect system is optimized for real-time performance, but understanding these considerations helps you build responsive applications: * **GPU acceleration**: Effects leverage GPU rendering for smooth performance on modern devices * **Mobile optimization**: Limit effects to 2-3 per element on mobile devices to maintain responsiveness * **Effect complexity**: Blur and LUT filters are computationally expensive compared to simple adjustments * **Video effects**: Apply effects sparingly to video blocks to maintain smooth playback * **Real-time editing**: Temporarily disable effects during intensive editing operations for better interactivity Test your effect combinations on target devices early in development to ensure acceptable performance. ## Troubleshooting[#](#troubleshooting) ### Effect Not Visible[#](#effect-not-visible) If an effect doesn’t appear after applying it, check these common issues: * Verify the block type supports effects using `supportsEffects()` * Check that the effect is enabled with `isEffectEnabled()` * Ensure effect parameters are in valid ranges (e.g., intensity values between 0.0 and 1.0) * Confirm the effect is in the effect stack with `getEffects()` ### Performance Degradation[#](#performance-degradation) If you experience slow rendering or laggy interactions: * Reduce the number of effects per element (aim for 2-3 maximum on mobile) * Lower blur radius values or use smaller LUT files * Temporarily disable effects during editing with `setEffectEnabled()` * Test on target devices early to identify performance bottlenecks ### Effects Not Persisting[#](#effects-not-persisting) Effects should save automatically with the scene, but verify: * You’re not destroying effects prematurely before saving * Save/load operations complete successfully * Effect URIs (LUT files, images) remain accessible after loading ### Incompatible Block Types[#](#incompatible-block-types) If you can’t apply an effect: * Remember that graphic blocks (with image or video fills), shape blocks, and text blocks support effects * Page blocks themselves don’t support effects directly, but page fills (such as background fills) do support effects * Scene blocks cannot have effects applied * Check the block type with `block.getType()` and use `block.supportsEffects()` before attempting to apply effects ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | `block.supportsEffects(block)` | Check if a block supports effects | | `block.createEffect(type)` | Create a new effect instance | | `block.appendEffect(block, effect)` | Add effect to the end of the effect stack | | `block.insertEffect(block, effect, index)` | Insert effect at a specific position | | `block.removeEffect(block, index)` | Remove effect at the specified index | | `block.getEffects(block)` | Get all effects applied to a block | | `block.setEffectEnabled(effect, enabled)` | Enable or disable an effect | | `block.isEffectEnabled(effect)` | Check if an effect is currently enabled | | `block.findAllProperties(effect)` | Get all available properties for an effect | | `block.setFloat(effect, property, value)` | Set a floating-point property value | | `block.setInt(effect, property, value)` | Set an integer property value | | `block.setString(effect, property, value)` | Set a string property value | | `block.setBool(effect, property, value)` | Set a boolean property value | | `block.destroy(effect)` | Destroy an unused effect instance | ## About the Example Code[#](#about-the-example-code) The example code accompanying this guide follows educational design patterns to help you learn effectively: * **Individual demonstrations**: Each effect type is demonstrated on its own image block before showing combinations, making it easier to understand what each effect does * **Convenience API usage**: The code uses `engine.block.addImage()` instead of manual block construction—this is the recommended approach for simplicity and maintainability * **Spatial layout**: Image blocks are positioned in a grid layout (x/y coordinates) so you can visually see the results of each effect when running the example * **Progressive complexity**: The example starts with simple single effects and gradually builds to complex multi-effect combinations In your production code, you can apply multiple effects directly to the same block without creating separate demonstration blocks. The example structure is optimized for learning, not production usage. ## Next Steps[#](#next-steps) Now that you understand how to apply and manage filters and effects, explore specific effect types and advanced techniques: * **LUT Filters** - Create custom color grading filters for cinematic looks * **Blur Effects** - Apply depth of field and motion blur techniques * **Duotone Effects** - Create striking two-color artistic treatments * **Adjustments** - Fine-tune brightness, contrast, and saturation * **Effect Combinations** - Build sophisticated multi-effect visual treatments --- [Source](https:/img.ly/docs/cesdk/angular/filters-and-effects/add-c796ba) # Add a Filter or Effect ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(block, imageFill); engine.block.setPositionX(block, 100); engine.block.setPositionY(block, 50); engine.block.setWidth(block, 300); engine.block.setHeight(block, 300); engine.block.appendChild(page, block); engine.block.supportsEffects(scene); // Returns false engine.block.supportsEffects(block); // Returns true const pixelize = engine.block.createEffect('pixelize'); const adjustments = engine.block.createEffect('adjustments'); engine.block.appendEffect(block, pixelize); engine.block.insertEffect(block, adjustments, 0); // engine.block.removeEffect(rect, 0); // This will return [adjustments, pixelize] const effectsList = engine.block.getEffects(block); const unusedEffect = engine.block.createEffect('half_tone'); engine.block.destroy(unusedEffect); const allPixelizeProperties = engine.block.findAllProperties(pixelize); const allAdjustmentProperties = engine.block.findAllProperties(adjustments); engine.block.setInt(pixelize, 'pixelize/horizontalPixelSize', 20); engine.block.setFloat(adjustments, 'effect/adjustments/brightness', 0.2); engine.block.setEffectEnabled(pixelize, false); engine.block.setEffectEnabled( pixelize, !engine.block.isEffectEnabled(pixelize) );}); ``` ```
``` Some [design blocks](angular/concepts/blocks-90241e/) in CE.SDK such as pages and graphic blocks allow you to add effects to them. An effect can modify the visual output of a block’s [fill](angular/fills-402ddc/) . CreativeEditor SDK supports many different types of effects, such as adjustments, LUT filters, pixelization, glow, vignette and more. Similarly to blocks, each effect instance has a numeric id which can be used to query and [modify its properties](angular/concepts/blocks-90241e/) . We create a scene containing a graphic block with an image fill and want to apply effects to this image. ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(block, imageFill); engine.block.setPositionX(block, 100); engine.block.setPositionY(block, 50); engine.block.setWidth(block, 300); engine.block.setHeight(block, 300); engine.block.appendChild(page, block); ``` ## Accessing Effects[#](#accessing-effects) Not all types of design blocks support effects, so you should always first call the `supportsEffects(id: number): boolean` API before accessing any of the following APIs. ``` engine.block.supportsEffects(scene); // Returns falseengine.block.supportsEffects(block); // Returns true ``` ## Creating an Effect[#](#creating-an-effect) In order to add effects to our block, we first have to create a new effect instance, which we can do by calling `createEffect(type: EffectType): number` and passing it the type of effect that we want. In this example, we create a pixelization and an adjustment effect. Please refer to [API Docs](angular/concepts/blocks-90241e/) for a complete list of supported effect types. ``` const pixelize = engine.block.createEffect('pixelize');const adjustments = engine.block.createEffect('adjustments'); ``` ## Adding Effects[#](#adding-effects) Now we have two effects but the output of our scene looks exactly the same as before. That is because we still need to append these effects to the graphic design block’s list of effects, which we can do by calling `appendEffect(id: number, effect: number): void`. We can also insert or remove effects from specific indices of a block’s effect list using the `insertEffect(id: number, effect: number, index: number): void` and `removeEffect(id: number, index: number): void` APIs. Effects will be applied to the block in the order they are placed in the block’s effects list. If the same effect appears multiple times in the list, it will also be applied multiple times. In our case, the adjustments effect will be applied to the image first, before the result of that is then pixelated. ``` engine.block.appendEffect(block, pixelize);engine.block.insertEffect(block, adjustments, 0);// engine.block.removeEffect(rect, 0); ``` ## Querying Effects[#](#querying-effects) Use the `getEffects(id: number): number[]` API to query the ordered list of effect ids of a block. ``` // This will return [adjustments, pixelize]const effectsList = engine.block.getEffects(block); ``` ## Destroying Effects[#](#destroying-effects) If we created an effect that we don’t want anymore, we have to make sure to destroy it using the same `destroy(id: number): void` API that we also call for design blocks. Effects that are attached to a design block will be automatically destroyed when the design block is destroyed. ``` const unusedEffect = engine.block.createEffect('half_tone');engine.block.destroy(unusedEffect); ``` ## Effect Properties[#](#effect-properties) Just like design blocks, effects with different types have different properties that you can query and modify via the API. Use `findAllProperties(id: number): string[]` in order to get a list of all properties of a given effect. Please refer to the [API Docs](angular/concepts/blocks-90241e/) for a complete list of all available properties for each type of effect. ``` const allPixelizeProperties = engine.block.findAllProperties(pixelize);const allAdjustmentProperties = engine.block.findAllProperties(adjustments); ``` Once we know the property keys of an effect, we can use the same APIs as for design blocks in order to [modify those properties](angular/concepts/blocks-90241e/) . Our adjustment effect here for example will not modify the output unless we at least change one of its adjustment properties - such as the brightness - to not be zero. ``` engine.block.setInt(pixelize, 'pixelize/horizontalPixelSize', 20);engine.block.setFloat(adjustments, 'effect/adjustments/brightness', 0.2); ``` ## Disabling Effects[#](#disabling-effects) You can temporarily disable and enable the individual effects using the `setEffectEnabled(id: number, enabled: boolean): void` API. When the effects are applied to a block, all disabled effects are simply skipped. Whether an effect is currently enabled or disabled can be queried with `isEffectEnabled(id: number): boolean`. ``` engine.block.setEffectEnabled(pixelize, false);engine.block.setEffectEnabled( pixelize, !engine.block.isEffectEnabled(pixelize)); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg', ); engine.block.setFill(block, imageFill); engine.block.setPositionX(block, 100); engine.block.setPositionY(block, 50); engine.block.setWidth(block, 300); engine.block.setHeight(block, 300); engine.block.appendChild(page, block); engine.block.supportsEffects(scene); // Returns false engine.block.supportsEffects(block); // Returns true const pixelize = engine.block.createEffect('pixelize'); const adjustments = engine.block.createEffect('adjustments'); engine.block.appendEffect(block, pixelize); engine.block.insertEffect(block, adjustments, 0); // engine.block.removeEffect(rect, 0); // This will return [adjustments, pixelize] const effectsList = engine.block.getEffects(block); const unusedEffect = engine.block.createEffect('half_tone'); engine.block.destroy(unusedEffect); const allPixelizeProperties = engine.block.findAllProperties(pixelize); const allAdjustmentProperties = engine.block.findAllProperties(adjustments); engine.block.setInt(pixelize, 'pixelize/horizontalPixelSize', 20); engine.block.setFloat(adjustments, 'effect/adjustments/brightness', 0.2); engine.block.setEffectEnabled(pixelize, false); engine.block.setEffectEnabled( pixelize, !engine.block.isEffectEnabled(pixelize), );}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/fills/overview-3895ee) # Fills ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); engine.block.setFill(block, engine.block.createFill('color')); engine.block.setWidth(block, 100); engine.block.setHeight(block, 100); engine.block.appendChild(page, block); engine.block.supportsFill(scene); // Returns false engine.block.supportsFill(block); // Returns true const colorFill = engine.block.getFill(block); const defaultRectFillType = engine.block.getType(colorFill); const allFillProperties = engine.block.findAllProperties(colorFill); engine.block.setColor(colorFill, 'fill/color/value', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setFillEnabled(block, false); engine.block.setFillEnabled(block, !engine.block.isFillEnabled(block)); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.destroy(engine.block.getFill(block)); engine.block.setFill(block, imageFill); /* The following line would also destroy imageFill */ // engine.block.destroy(circle); const duplicateBlock = engine.block.duplicate(block); engine.block.setPositionX(duplicateBlock, 450); const autoDuplicateFill = engine.block.getFill(duplicateBlock); engine.block.setString( autoDuplicateFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); // const manualDuplicateFill = engine.block.duplicate(autoDuplicateFill); // /* We could now assign this fill to another block. */ // engine.block.destroy(manualDuplicateFill); const sharedFillBlock = engine.block.create('graphic'); engine.block.setShape(sharedFillBlock, engine.block.createShape('rect')); engine.block.setPositionX(sharedFillBlock, 350); engine.block.setPositionY(sharedFillBlock, 400); engine.block.setWidth(sharedFillBlock, 100); engine.block.setHeight(sharedFillBlock, 100); engine.block.appendChild(page, sharedFillBlock); engine.block.setFill(sharedFillBlock, engine.block.getFill(block));}); ``` ```
``` Some [design blocks](angular/concepts/blocks-90241e/) in CE.SDK allow you to modify or replace their fill. The fill is an object that defines the contents within the shape of a block. CreativeEditor SDK supports many different types of fills, such as images, solid colors, gradients and videos. Similarly to blocks, each fill has a numeric id which can be used to query and [modify its properties](angular/concepts/blocks-90241e/) . We currently support the following fill types: * `'//ly.img.ubq/fill/color'` * `'//ly.img.ubq/fill/gradient/linear'` * `'//ly.img.ubq/fill/gradient/radial'` * `'//ly.img.ubq/fill/gradient/conical'` * `'//ly.img.ubq/fill/image'` * `'//ly.img.ubq/fill/video'` * `'//ly.img.ubq/fill/pixelStream'` Note: short types are also accepted, e.g. ‘color’ instead of ‘//ly.img.ubq/fill/color’. ## Accessing Fills[#](#accessing-fills) Not all types of design blocks support fills, so you should always first call the `supportsFill(id: number): boolean` API before accessing any of the following APIs. ``` engine.block.supportsFill(scene); // Returns falseengine.block.supportsFill(block); // Returns true ``` In order to receive the fill id of a design block, call the `getFill(id: number): number` API. You can now pass this id into other APIs in order to query more information about the fill, e.g. its type via the `getType(id: number): ObjectType` API. ``` const colorFill = engine.block.getFill(block);const defaultRectFillType = engine.block.getType(colorFill); ``` ## Fill Properties[#](#fill-properties) Just like design blocks, fills with different types have different properties that you can query and modify via the API. Use `findAllProperties(id: number): string[]` in order to get a list of all properties of a given fill. For the solid color fill in this example, the call would return `["fill/color/value", "type"]`. Please refer to the [design blocks](angular/concepts/blocks-90241e/) for a complete list of all available properties for each type of fill. ``` const allFillProperties = engine.block.findAllProperties(colorFill); ``` Once we know the property keys of a fill, we can use the same APIs as for design blocks in order to modify those properties. For example, we can use `setColor(id: number, property: string, value: Color): void` in order to change the color of the fill to red. Once we do this, our graphic block with rect shape will be filled with solid red. ``` engine.block.setColor(colorFill, 'fill/color/value', { r: 1.0, g: 0.0, b: 0.0, a: 1.0}); ``` ## Disabling Fills[#](#disabling-fills) You can disable and enable a fill using the `setFillEnabled(id: number, enabled: boolean): void` API, for example in cases where the design block should only have a stroke but no fill. Notice that you have to pass the id of the design block and not of the fill to the API. ``` engine.block.setFillEnabled(block, false);engine.block.setFillEnabled(block, !engine.block.isFillEnabled(block)); ``` ## Changing Fill Types[#](#changing-fill-types) All design blocks that support fills allow you to also exchange their current fill for any other type of fill. In order to do this, you need to first create a new fill object using `createFill(type: FillType): number`. ``` const imageFill = engine.block.createFill('image');engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg'); ``` In order to assign a fill to a design block, simply call `setFill(id: number, fill: number): void`. Make sure to delete the previous fill of the design block first if you don’t need it any more, otherwise we will have leaked it into the scene and won’t be able to access it any more, because we don’t know its id. Notice that we don’t use the `appendChild` API here, which only works with design blocks and not fills. When a fill is attached to one design block, it will be automatically destroyed when the block itself gets destroyed. ``` engine.block.destroy(engine.block.getFill(block));engine.block.setFill(block, imageFill); /* The following line would also destroy imageFill */// engine.block.destroy(circle); ``` ## Duplicating Fills[#](#duplicating-fills) If we duplicate a design block with a fill that is only attached to this block, the fill will automatically be duplicated as well. In order to modify the properties of the duplicate fill, we have to query its id from the duplicate block. ``` const duplicateBlock = engine.block.duplicate(block);engine.block.setPositionX(duplicateBlock, 450);const autoDuplicateFill = engine.block.getFill(duplicateBlock);engine.block.setString( autoDuplicateFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg'); // const manualDuplicateFill = engine.block.duplicate(autoDuplicateFill);// /* We could now assign this fill to another block. */// engine.block.destroy(manualDuplicateFill); ``` ## Sharing Fills[#](#sharing-fills) It is also possible to share a single fill instance between multiple design blocks. In that case, changing the properties of the fill will apply to all of the blocks that it’s attached to at once. Destroying a block with a shared fill will not destroy the fill until there are no other design blocks left that still use that fill. ``` const sharedFillBlock = engine.block.create('graphic');engine.block.setShape(sharedFillBlock, engine.block.createShape('rect'));engine.block.setPositionX(sharedFillBlock, 350);engine.block.setPositionY(sharedFillBlock, 400);engine.block.setWidth(sharedFillBlock, 100);engine.block.setHeight(sharedFillBlock, 100);engine.block.appendChild(page, sharedFillBlock); engine.block.setFill(sharedFillBlock, engine.block.getFill(block)); ``` ## Full Code[#](#full-code) Here is the full code for working with fills: ``` // Check if block supports strokesif (engine.block.supportsStroke(block)) { // Enable the stroke engine.block.setStrokeEnabled(block, true); const strokeIsEnabled = engine.block.isStrokeEnabled(block); // Configure it engine.block.setStrokeWidth(block, 5); const strokeWidth = engine.block.getStrokeWidth(block); engine.block.setStrokeColor(block, { r: 0, g: 1, b: 0, a: 1 }); const strokeColor = engine.block.getStrokeColor(block); engine.block.setStrokeStyle(block, 'Dashed'); const strokeStyle = engine.block.getStrokeStyle(block); engine.block.setStrokePosition(block, 'Outer'); const strokePosition = engine.block.getStrokePosition(block); engine.block.setStrokeCornerGeometry(block, 'Round'); const strokeCornerGeometry = engine.block.getStrokeCornerGeometry(block);} ``` --- [Source](https:/img.ly/docs/cesdk/angular/fills/image-e9cb5c) # Image Fills Fill shapes, text, and design blocks with photos and images from URLs, uploads, or asset libraries using CE.SDK’s versatile image fill system. ![Image Fills example showing multiple images applied to design blocks with different fill modes](/docs/cesdk/_astro/browser.hero.DjAVsBFL_19kaeF.webp) 15 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-fills-image-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-fills-image-browser) Image fills paint design blocks with raster or vector image content, supporting various formats including PNG, JPEG, WebP, and SVG. You can load images from remote URLs, local files, data URIs, and asset libraries, with built-in support for responsive images through source sets and multiple content fill modes for flexible positioning. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json';import { calculateGridLayout } from './utils'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Fill features are enabled by default in CE.SDK // You can check and control fill feature availability: const isFillEnabled = cesdk.feature.isEnabled('ly.img.fill', { engine: cesdk.engine }); console.log('Fill feature enabled:', isFillEnabled); await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page dimensions engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); // Calculate responsive grid layout for demonstrations const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 9); const { blockWidth, blockHeight, getPosition } = layout; const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const blockSize = { width: blockWidth, height: blockHeight }; // ===== Section 1: Check Fill Support ===== // Check if a block supports fills before accessing fill APIs const testBlock = engine.block.create('graphic'); const canHaveFill = engine.block.supportsFill(testBlock); console.log('Block supports fills:', canHaveFill); engine.block.destroy(testBlock); // ===== Section 2: Create and Apply Image Fill ===== // Create a new image fill using the convenience API const coverImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, coverImageBlock); // Or create manually for more control const manualBlock = engine.block.create('graphic'); engine.block.setShape(manualBlock, engine.block.createShape('rect')); engine.block.setWidth(manualBlock, blockWidth); engine.block.setHeight(manualBlock, blockHeight); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); engine.block.setFill(manualBlock, imageFill); engine.block.appendChild(page, manualBlock); // Get the current fill from a block const currentFill = engine.block.getFill(coverImageBlock); const fillType = engine.block.getType(currentFill); console.log('Fill type:', fillType); // '//ly.img.ubq/fill/image' // ===== Section 3: Content Fill Modes ===== // Cover mode: Fill entire block, may crop image const coverBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: blockSize } ); engine.block.appendChild(page, coverBlock); engine.block.setEnum(coverBlock, 'contentFill/mode', 'Cover'); // Contain mode: Fit entire image, may leave empty space const containBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_4.jpg', { size: blockSize } ); engine.block.appendChild(page, containBlock); engine.block.setEnum(containBlock, 'contentFill/mode', 'Contain'); // Get current fill mode const currentMode = engine.block.getEnum(containBlock, 'contentFill/mode'); console.log('Current fill mode:', currentMode); // ===== Section 4: Source Sets (Responsive Images) ===== // Use source sets for responsive images const responsiveBlock = engine.block.create('graphic'); engine.block.setShape(responsiveBlock, engine.block.createShape('rect')); engine.block.setWidth(responsiveBlock, blockWidth); engine.block.setHeight(responsiveBlock, blockHeight); const responsiveFill = engine.block.createFill('image'); engine.block.setSourceSet(responsiveFill, 'fill/image/sourceSet', [ { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 512, height: 341 }, { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 1024, height: 683 }, { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 2048, height: 1366 } ]); engine.block.setFill(responsiveBlock, responsiveFill); engine.block.appendChild(page, responsiveBlock); // Get current source set const sourceSet = engine.block.getSourceSet( responsiveFill, 'fill/image/sourceSet' ); console.log('Source set entries:', sourceSet.length); // ===== Section 5: Data URI / Base64 Images ===== // Use data URI for embedded images (small SVG example) const svgContent = ` SVG `; const svgDataUri = `data:image/svg+xml;base64,${btoa(svgContent)}`; const dataUriBlock = engine.block.create('graphic'); engine.block.setShape(dataUriBlock, engine.block.createShape('rect')); engine.block.setWidth(dataUriBlock, blockWidth); engine.block.setHeight(dataUriBlock, blockHeight); const dataUriFill = engine.block.createFill('image'); engine.block.setString(dataUriFill, 'fill/image/imageFileURI', svgDataUri); engine.block.setFill(dataUriBlock, dataUriFill); engine.block.appendChild(page, dataUriBlock); // ===== Section 6: Sharing Fills ===== // Create one fill and share it between multiple blocks const sharedFill = engine.block.createFill('image'); engine.block.setString( sharedFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_5.jpg' ); // Apply to first block const sharedBlock1 = engine.block.create('graphic'); engine.block.setShape(sharedBlock1, engine.block.createShape('rect')); engine.block.setWidth(sharedBlock1, blockWidth); engine.block.setHeight(sharedBlock1, blockHeight); engine.block.setFill(sharedBlock1, sharedFill); engine.block.appendChild(page, sharedBlock1); // Apply to second block (shares the same fill) const sharedBlock2 = engine.block.create('graphic'); engine.block.setShape(sharedBlock2, engine.block.createShape('rect')); engine.block.setWidth(sharedBlock2, blockWidth); engine.block.setHeight(sharedBlock2, blockHeight); engine.block.setFill(sharedBlock2, sharedFill); engine.block.appendChild(page, sharedBlock2); // ===== Section 7: Opacity ===== // Control opacity for transparency effects const opacityBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_6.jpg', { size: blockSize } ); engine.block.appendChild(page, opacityBlock); engine.block.setFloat(opacityBlock, 'opacity', 0.6); // ===== Position all blocks in grid layout ===== const blocks = [ coverImageBlock, // Position 0 manualBlock, // Position 1 coverBlock, // Position 2 containBlock, // Position 3 responsiveBlock, // Position 4 dataUriBlock, // Position 5 sharedBlock1, // Position 6 sharedBlock2, // Position 7 opacityBlock // Position 8 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Zoom to show all content await engine.scene.zoomToBlock(page); }} export default Example; ``` This guide covers how to create and apply image fills programmatically, configure content fill modes, work with responsive images, and load images from different sources. ## Understanding Image Fills[#](#understanding-image-fills) Image fills are one of the fundamental fill types in CE.SDK, identified by the type `'//ly.img.ubq/fill/image'` or simply `'image'`. Unlike color fills that provide solid colors or gradient fills that create color transitions, image fills paint blocks with photographic or graphic content from image files. CE.SDK supports common image formats including PNG, JPEG, JPG, GIF, WebP, SVG, and BMP, with transparency support in formats like PNG, WebP, and SVG. The image fill system handles content scaling, positioning, and optimization automatically while giving you full programmatic control when needed. ## Checking Image Fill Support[#](#checking-image-fill-support) Before working with fills, we should verify that a block supports fill operations. Not all blocks in CE.SDK can have fills—for example, scenes and pages typically don’t support fills, while graphic blocks, shapes, and text blocks do. ``` // Check if a block supports fills before accessing fill APIsconst testBlock = engine.block.create('graphic');const canHaveFill = engine.block.supportsFill(testBlock);console.log('Block supports fills:', canHaveFill);engine.block.destroy(testBlock); ``` The `supportsFill()` method returns `true` if the block can have a fill assigned to it. Always check this before attempting to access fill APIs to avoid errors. ## Creating Image Fills[#](#creating-image-fills) CE.SDK provides two approaches for creating image fills: a convenience API for quick block creation, and manual creation for more control over the fill configuration. ### Using the Convenience API[#](#using-the-convenience-api) The fastest way to create a block with an image fill is using the `addImage()` method, which creates a graphic block, configures the image fill, and adds it to the scene in one operation: ``` // Create a new image fill using the convenience APIconst coverImageBlock = await engine.block.addImage(imageUri, { size: blockSize});engine.block.appendChild(page, coverImageBlock); ``` This convenience method handles all the underlying setup automatically, including creating the graphic block, shape, fill, and positioning. ### Manual Image Fill Creation[#](#manual-image-fill-creation) For more control over the fill configuration or to apply fills to existing blocks, you can create fills manually: ``` // Or create manually for more controlconst manualBlock = engine.block.create('graphic');engine.block.setShape(manualBlock, engine.block.createShape('rect'));engine.block.setWidth(manualBlock, blockWidth);engine.block.setHeight(manualBlock, blockHeight); const imageFill = engine.block.createFill('image');engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg');engine.block.setFill(manualBlock, imageFill);engine.block.appendChild(page, manualBlock); ``` When creating fills manually, the fill exists independently until you attach it to a block using `setFill()`. If you create a fill but don’t attach it to a block, you must destroy it manually to avoid memory leaks. ### Getting the Current Fill[#](#getting-the-current-fill) You can retrieve the fill from any block and inspect its type to verify it’s an image fill: ``` // Get the current fill from a blockconst currentFill = engine.block.getFill(coverImageBlock);const fillType = engine.block.getType(currentFill);console.log('Fill type:', fillType); // '//ly.img.ubq/fill/image' ``` The `getFill()` method returns the fill’s block ID, which you can then use to query the fill’s type and properties. ## Configuring Content Fill Modes[#](#configuring-content-fill-modes) Content fill modes control how images scale and position within their containing blocks. CE.SDK provides two primary modes: Cover and Contain, each optimized for different use cases. ### Cover Mode[#](#cover-mode) Cover mode ensures the image fills the entire block while maintaining its aspect ratio. Parts of the image may be cropped if the aspect ratios don’t match, but there will never be empty space in the block: ``` // Cover mode: Fill entire block, may crop imageconst coverBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: blockSize });engine.block.appendChild(page, coverBlock);engine.block.setEnum(coverBlock, 'contentFill/mode', 'Cover'); ``` Cover mode is ideal for backgrounds, hero images, and photo frames where you want the block completely filled with image content. The image is scaled to cover the entire area, and any overflow is cropped. ### Contain Mode[#](#contain-mode) Contain mode fits the entire image within the block while maintaining its aspect ratio. This may leave empty space if the aspect ratios don’t match, but the entire image will always be visible: ``` // Contain mode: Fit entire image, may leave empty spaceconst containBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_4.jpg', { size: blockSize });engine.block.appendChild(page, containBlock);engine.block.setEnum(containBlock, 'contentFill/mode', 'Contain'); ``` Contain mode is best for logos, product images, and situations where preserving the complete image visibility is more important than filling the entire block. ### Getting the Current Fill Mode[#](#getting-the-current-fill-mode) You can query the current fill mode to understand how the image is being displayed: ``` // Get current fill modeconst currentMode = engine.block.getEnum(containBlock, 'contentFill/mode');console.log('Current fill mode:', currentMode); ``` This returns either `'Cover'` or `'Contain'` depending on the current configuration. ## Working with Source Sets[#](#working-with-source-sets) Source sets enable responsive images by providing multiple resolutions of the same image. The engine automatically selects the most appropriate size based on the current display context, optimizing both performance and visual quality. ### Setting Up a Source Set[#](#setting-up-a-source-set) A source set is an array of image sources, each with a URI and dimensions: ``` // Use source sets for responsive imagesconst responsiveBlock = engine.block.create('graphic');engine.block.setShape(responsiveBlock, engine.block.createShape('rect'));engine.block.setWidth(responsiveBlock, blockWidth);engine.block.setHeight(responsiveBlock, blockHeight); const responsiveFill = engine.block.createFill('image');engine.block.setSourceSet(responsiveFill, 'fill/image/sourceSet', [ { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 512, height: 341 }, { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 1024, height: 683 }, { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 2048, height: 1366 }]);engine.block.setFill(responsiveBlock, responsiveFill);engine.block.appendChild(page, responsiveBlock); ``` Each entry in the source set specifies a URI and the image’s width and height in pixels. The engine calculates the current drawing size and selects the source with the closest size that exceeds the required dimensions. Source sets are particularly valuable for optimizing bandwidth usage during preview while ensuring high-resolution output during export. The engine automatically uses the highest resolution available when exporting. ### Retrieving Source Sets[#](#retrieving-source-sets) You can get the current source set from a fill to inspect or modify it: ``` // Get current source setconst sourceSet = engine.block.getSourceSet( responsiveFill, 'fill/image/sourceSet');console.log('Source set entries:', sourceSet.length); ``` ## Loading Images from Different Sources[#](#loading-images-from-different-sources) CE.SDK’s image fills support multiple image source types, giving you flexibility in how you provide image content to your designs. ### Data URIs and Base64[#](#data-uris-and-base64) You can embed image data directly using data URIs, which is particularly useful for small images, icons, or dynamically generated graphics: ``` // Use data URI for embedded images (small SVG example)const svgContent = ` SVG `;const svgDataUri = `data:image/svg+xml;base64,${btoa(svgContent)}`; const dataUriBlock = engine.block.create('graphic');engine.block.setShape(dataUriBlock, engine.block.createShape('rect'));engine.block.setWidth(dataUriBlock, blockWidth);engine.block.setHeight(dataUriBlock, blockHeight); const dataUriFill = engine.block.createFill('image');engine.block.setString(dataUriFill, 'fill/image/imageFileURI', svgDataUri);engine.block.setFill(dataUriBlock, dataUriFill);engine.block.appendChild(page, dataUriBlock); ``` Data URIs embed the entire image within the URI string itself, eliminating the need for network requests. However, this increases the scene file size, so it’s best reserved for smaller images or cases where you need guaranteed availability without network dependencies. ## Additional Techniques[#](#additional-techniques) ### Sharing Image Fills Between Blocks[#](#sharing-image-fills-between-blocks) A single fill instance can be shared between multiple blocks, providing memory efficiency and synchronized updates: ``` // Create one fill and share it between multiple blocksconst sharedFill = engine.block.createFill('image');engine.block.setString( sharedFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_5.jpg'); // Apply to first blockconst sharedBlock1 = engine.block.create('graphic');engine.block.setShape(sharedBlock1, engine.block.createShape('rect'));engine.block.setWidth(sharedBlock1, blockWidth);engine.block.setHeight(sharedBlock1, blockHeight);engine.block.setFill(sharedBlock1, sharedFill);engine.block.appendChild(page, sharedBlock1); // Apply to second block (shares the same fill)const sharedBlock2 = engine.block.create('graphic');engine.block.setShape(sharedBlock2, engine.block.createShape('rect'));engine.block.setWidth(sharedBlock2, blockWidth);engine.block.setHeight(sharedBlock2, blockHeight);engine.block.setFill(sharedBlock2, sharedFill);engine.block.appendChild(page, sharedBlock2); ``` When you modify a shared fill—for example, changing the image URI or adjusting properties—the changes automatically apply to all blocks using that fill. This is memory-efficient for repeated images and ensures consistency across multiple instances. ### Controlling Opacity[#](#controlling-opacity) You can control the overall opacity of blocks with image fills, affecting the entire block including its fill: ``` // Control opacity for transparency effectsconst opacityBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_6.jpg', { size: blockSize });engine.block.appendChild(page, opacityBlock);engine.block.setFloat(opacityBlock, 'opacity', 0.6); ``` The opacity value ranges from 0 (fully transparent) to 1 (fully opaque). This affects the entire block, including the image fill. For transparency within the image itself, use image formats that support alpha channels like PNG, WebP, or SVG. Opacity is a block property, not a fill property. It affects the entire block including any strokes, effects, or other visual properties applied to the block. ## API Reference[#](#api-reference) ### Core Methods[#](#core-methods) | Method | Description | | --- | --- | | `createFill('image')` | Create a new image fill object | | `setFill(block, fill)` | Assign an image fill to a block | | `getFill(block)` | Get the fill ID from a block | | `setString(fill, property, value)` | Set the image URI | | `getString(fill, property)` | Get the current image URI | | `setSourceSet(fill, property, sources)` | Set responsive image sources | | `getSourceSet(fill, property)` | Get current source set | | `setEnum(block, property, value)` | Set content fill mode | | `getEnum(block, property)` | Get current fill mode | | `supportsFill(block)` | Check if block supports fills | | `addImage(url, options)` | Convenience method to create image block with fill | ### Image Fill Properties[#](#image-fill-properties) | Property | Type | Description | | --- | --- | --- | | `fill/image/imageFileURI` | String | Single image URI (URL, data URI, or file path) | | `fill/image/sourceSet` | SourceSet\[\] | Array of responsive image sources with dimensions | ### Content Fill Properties[#](#content-fill-properties) | Property | Type | Values | Description | | --- | --- | --- | --- | | `contentFill/mode` | Enum | ’Cover’, ‘Contain’ | How the image scales within its block | ### SourceSet Interface[#](#sourceset-interface) ``` interface SourceSetEntry { uri: string; // Image URI width: number; // Image width in pixels height: number; // Image height in pixels} ``` ## Next Steps[#](#next-steps) * Learn about Color Fills for solid colors * Explore Gradient Fills for color transitions * Understand the Fill Overview for comprehensive fill system documentation * Study Blocks Concept for understanding the block system * Review Source Sets for detailed responsive image guidance --- [Source](https:/img.ly/docs/cesdk/angular/fills/video-ec7f9f) # Video Fills Apply motion content to design elements by filling shapes, backgrounds, and text with videos using CE.SDK’s video fill system. ![CE.SDK video fills example showing a 3x3 grid with video content applied to different blocks including rectangles, ellipse, and opacity variations](/docs/cesdk/_astro/browser.hero.BHBfe15V_Z29IGxM.webp) 15 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-fills-video-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-fills-video-browser) Understanding the distinction between **video fills** and **video blocks** is essential. Video fills are fill objects that can be applied to any block supporting fills—shapes, text, backgrounds—to paint them with video content. Video blocks, created with `addVideo()`, are dedicated timeline elements with full editing capabilities like trimming and duration control. Video fills focus on applying video as a visual treatment, while video blocks provide complete video editing functionality. ``` import type { CreativeEngine, EditorPlugin, EditorPluginContext} from '@cesdk/cesdk-js';import packageJson from './package.json';import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Video Fills Guide * * Demonstrates video fills in CE.SDK: * - Creating video fills * - Setting video sources (single URI and source sets) * - Applying video fills to blocks * - Content fill modes (Cover, Contain) * - Loading video resources * - Getting video thumbnails * - Different use cases (backgrounds, shapes, text) */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Video fills require Video mode and video features enabled cesdk.feature.enable('ly.img.video'); cesdk.feature.enable('ly.img.fill'); // Load assets and create video scene (required for video fills) await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Video', withUploadAssetSources: true }); await cesdk.createVideoScene(); const engine = cesdk.engine as CreativeEngine; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); // Calculate responsive grid layout based on page dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 8); const { blockWidth, blockHeight, getPosition } = layout; // Use a sample video URL from demo assets const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; // Create a sample block to demonstrate fill support checking const sampleBlock = engine.block.create('graphic'); engine.block.setShape(sampleBlock, engine.block.createShape('rect')); // Check if the block supports fills const supportsFills = engine.block.supportsFill(sampleBlock); // eslint-disable-next-line no-console console.log('Block supports fills:', supportsFills); // true for graphic blocks // Verify we're in Video mode (required for video fills) const sceneMode = engine.scene.getMode(); if (sceneMode !== 'Video') { throw new Error('Video fills require Video mode.'); } // eslint-disable-next-line no-console console.log('Scene mode:', sceneMode); // "Video" // Pattern #1: Demonstrate Individual Before Combined // Create a basic video fill demonstration const basicBlock = engine.block.create('graphic'); engine.block.setShape(basicBlock, engine.block.createShape('rect')); engine.block.setWidth(basicBlock, blockWidth); engine.block.setHeight(basicBlock, blockHeight); engine.block.appendChild(page, basicBlock); // Create a video fill const basicVideoFill = engine.block.createFill('video'); // or using full type name: engine.block.createFill('//ly.img.ubq/fill/video'); // Set the video source URI engine.block.setString(basicVideoFill, 'fill/video/fileURI', videoUri); // Apply the fill to the block engine.block.setFill(basicBlock, basicVideoFill); // Get and verify the current fill const fillId = engine.block.getFill(basicBlock); const fillType = engine.block.getType(fillId); // eslint-disable-next-line no-console console.log('Fill type:', fillType); // '//ly.img.ubq/fill/video' // Pattern #2: Content fill mode - Cover // Cover mode fills entire block, may crop video to fit const coverBlock = engine.block.create('graphic'); engine.block.setShape(coverBlock, engine.block.createShape('rect')); engine.block.setWidth(coverBlock, blockWidth); engine.block.setHeight(coverBlock, blockHeight); engine.block.appendChild(page, coverBlock); const coverVideoFill = engine.block.createFill('video'); engine.block.setString(coverVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(coverBlock, coverVideoFill); // Set content fill mode to Cover engine.block.setEnum(coverBlock, 'contentFill/mode', 'Cover'); // Get current fill mode const coverMode = engine.block.getEnum(coverBlock, 'contentFill/mode'); // eslint-disable-next-line no-console console.log('Cover block fill mode:', coverMode); // 'Cover' // Content fill mode - Contain // Contain mode fits entire video, may leave empty space const containBlock = engine.block.create('graphic'); engine.block.setShape(containBlock, engine.block.createShape('rect')); engine.block.setWidth(containBlock, blockWidth); engine.block.setHeight(containBlock, blockHeight); engine.block.appendChild(page, containBlock); const containVideoFill = engine.block.createFill('video'); engine.block.setString(containVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(containBlock, containVideoFill); // Set content fill mode to Contain engine.block.setEnum(containBlock, 'contentFill/mode', 'Contain'); // Force load video resource to access metadata const resourceBlock = engine.block.create('graphic'); engine.block.setShape(resourceBlock, engine.block.createShape('rect')); engine.block.setWidth(resourceBlock, blockWidth); engine.block.setHeight(resourceBlock, blockHeight); engine.block.appendChild(page, resourceBlock); const resourceVideoFill = engine.block.createFill('video'); engine.block.setString(resourceVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(resourceBlock, resourceVideoFill); // Force load the video resource before accessing metadata await engine.block.forceLoadAVResource(resourceVideoFill); // Now we can access video metadata const totalDuration = engine.block.getDouble( resourceVideoFill, 'fill/video/totalDuration' ); // eslint-disable-next-line no-console console.log('Video total duration:', totalDuration, 'seconds'); // Use case: Video as shape fill - Ellipse const ellipseBlock = engine.block.create('graphic'); const ellipseShape = engine.block.createShape('//ly.img.ubq/shape/ellipse'); engine.block.setShape(ellipseBlock, ellipseShape); engine.block.setWidth(ellipseBlock, blockWidth); engine.block.setHeight(ellipseBlock, blockHeight); engine.block.appendChild(page, ellipseBlock); const ellipseVideoFill = engine.block.createFill('video'); engine.block.setString(ellipseVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(ellipseBlock, ellipseVideoFill); // Advanced: Video fill with opacity const opacityBlock = engine.block.create('graphic'); engine.block.setShape(opacityBlock, engine.block.createShape('rect')); engine.block.setWidth(opacityBlock, blockWidth); engine.block.setHeight(opacityBlock, blockHeight); engine.block.appendChild(page, opacityBlock); const opacityVideoFill = engine.block.createFill('video'); engine.block.setString(opacityVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(opacityBlock, opacityVideoFill); // Set block opacity to 70% engine.block.setFloat(opacityBlock, 'opacity', 0.7); // Advanced: Share one video fill between multiple blocks const sharedFill = engine.block.createFill('video'); engine.block.setString(sharedFill, 'fill/video/fileURI', videoUri); // First block using shared fill const sharedBlock1 = engine.block.create('graphic'); engine.block.setShape(sharedBlock1, engine.block.createShape('rect')); engine.block.setWidth(sharedBlock1, blockWidth); engine.block.setHeight(sharedBlock1, blockHeight); engine.block.appendChild(page, sharedBlock1); engine.block.setFill(sharedBlock1, sharedFill); // Second block using the same shared fill const sharedBlock2 = engine.block.create('graphic'); engine.block.setShape(sharedBlock2, engine.block.createShape('rect')); engine.block.setWidth(sharedBlock2, blockWidth * 0.8); // Slightly smaller engine.block.setHeight(sharedBlock2, blockHeight * 0.8); engine.block.appendChild(page, sharedBlock2); engine.block.setFill(sharedBlock2, sharedFill); // eslint-disable-next-line no-console console.log( 'Shared fill - Two blocks using the same video fill instance for memory efficiency' ); // ===== Position all blocks in grid layout ===== const blocks = [ basicBlock, // Position 0 coverBlock, // Position 1 containBlock, // Position 2 resourceBlock, // Position 3 ellipseBlock, // Position 4 opacityBlock, // Position 5 sharedBlock1, // Position 6 sharedBlock2 // Position 7 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Select the first block so users can see the fill in action engine.block.setSelected(basicBlock, true); // Start playback automatically try { engine.block.setPlaying(page, true); // eslint-disable-next-line no-console console.log( 'Video fills guide initialized. Playback started. Demonstrating various video fill techniques across the grid.' ); } catch (error) { // eslint-disable-next-line no-console console.log( 'Video fills guide initialized. Click play to start video playback (browser autoplay restriction).' ); } }} export default Example; ``` This guide covers how to create video fills, apply them to blocks, configure fill modes, and work with video resources programmatically. ## Understanding Video Fills[#](#understanding-video-fills) ### What is a Video Fill?[#](#what-is-a-video-fill) A video fill is a fill object that paints a design block with video content. Like color and image fills, video fills are part of CE.SDK’s broader fill system. Video fills are identified by the type `'//ly.img.ubq/fill/video'` or the short form `'video'`. They contain properties for the video source, positioning, scaling, and playback behavior. ### Video Fill vs Video Blocks[#](#video-fill-vs-video-blocks) **Video fills** are fill objects created with `createFill('video')` and applied to blocks with `setFill()`. You can use them to fill shapes with video content, create video backgrounds, or add video textures to text. **Video blocks** are created with the convenience method `addVideo()` and come pre-configured with timeline integration, trim support, and playback controls. Use video blocks when building video editors or when you need features like trimming, duration adjustment, and precise playback control. For this guide, we focus on video fills—applying video content as a fill to design elements. For video editing workflows, see the [Trim Video guide](angular/edit-video/trim-4f688b/) . ### Video Mode Requirement[#](#video-mode-requirement) Video fills can only be created in Video mode scenes. Design mode doesn’t support video fills. You must initialize CE.SDK with `createVideoScene()` instead of `createDesignScene()`. ``` // Create Video mode scene (required for video fills)await cesdk.createVideoScene(); // Verify scene modeconst mode = engine.scene.getMode();console.log(mode); // "Video" ``` ## Checking Video Fill Support[#](#checking-video-fill-support) Before applying video fills, verify that blocks support fills and that you’re in the correct scene mode. ``` // Create a sample block to demonstrate fill support checkingconst sampleBlock = engine.block.create('graphic');engine.block.setShape(sampleBlock, engine.block.createShape('rect')); // Check if the block supports fillsconst supportsFills = engine.block.supportsFill(sampleBlock);// eslint-disable-next-line no-consoleconsole.log('Block supports fills:', supportsFills); // true for graphic blocks // Verify we're in Video mode (required for video fills)const sceneMode = engine.scene.getMode();if (sceneMode !== 'Video') { throw new Error('Video fills require Video mode.');}// eslint-disable-next-line no-consoleconsole.log('Scene mode:', sceneMode); // "Video" ``` Graphic blocks, shapes, and text blocks typically support fills. Pages and scenes don’t. Always check `supportsFill()` before attempting to apply video fills to prevent errors. ## Creating Video Fills[#](#creating-video-fills) ### Creating Video Fills[#](#creating-video-fills-1) Creating a video fill involves three steps: create the fill object, set the video source, and apply it to a block. ``` // Pattern #1: Demonstrate Individual Before Combined// Create a basic video fill demonstrationconst basicBlock = engine.block.create('graphic');engine.block.setShape(basicBlock, engine.block.createShape('rect'));engine.block.setWidth(basicBlock, blockWidth);engine.block.setHeight(basicBlock, blockHeight);engine.block.appendChild(page, basicBlock); // Create a video fillconst basicVideoFill = engine.block.createFill('video');// or using full type name: engine.block.createFill('//ly.img.ubq/fill/video'); // Set the video source URIengine.block.setString(basicVideoFill, 'fill/video/fileURI', videoUri); // Apply the fill to the blockengine.block.setFill(basicBlock, basicVideoFill); ``` The video fill exists independently until you attach it to a block. This allows you to configure the fill completely before applying it. Once applied, the fill paints the block with the video content. ### Getting Current Fill Information[#](#getting-current-fill-information) We can retrieve the current fill from a block and inspect its type to verify it’s a video fill. ``` // Get and verify the current fillconst fillId = engine.block.getFill(basicBlock);const fillType = engine.block.getType(fillId);// eslint-disable-next-line no-consoleconsole.log('Fill type:', fillType); // '//ly.img.ubq/fill/video' ``` This is useful when building UIs that need to adapt based on the current fill type or when implementing undo/redo functionality that tracks fill changes. ## Content Fill Modes[#](#content-fill-modes) Content fill modes control how video scales and positions within blocks. The two primary modes are Cover and Contain, each suited to different use cases. ### Cover Mode[#](#cover-mode) Cover mode fills the entire block with video while maintaining the video’s aspect ratio. If the aspect ratios don’t match, CE.SDK crops portions of the video to ensure no empty space appears in the block. ``` // Pattern #2: Content fill mode - Cover// Cover mode fills entire block, may crop video to fitconst coverBlock = engine.block.create('graphic');engine.block.setShape(coverBlock, engine.block.createShape('rect'));engine.block.setWidth(coverBlock, blockWidth);engine.block.setHeight(coverBlock, blockHeight);engine.block.appendChild(page, coverBlock); const coverVideoFill = engine.block.createFill('video');engine.block.setString(coverVideoFill, 'fill/video/fileURI', videoUri);engine.block.setFill(coverBlock, coverVideoFill); // Set content fill mode to Coverengine.block.setEnum(coverBlock, 'contentFill/mode', 'Cover'); // Get current fill modeconst coverMode = engine.block.getEnum(coverBlock, 'contentFill/mode');// eslint-disable-next-line no-consoleconsole.log('Cover block fill mode:', coverMode); // 'Cover' ``` Use Cover mode for background videos, full-frame video content, and situations where visual consistency matters more than showing the entire video. It guarantees no empty space but may crop content. ### Contain Mode[#](#contain-mode) Contain mode fits the entire video within the block while maintaining aspect ratio. If aspect ratios don’t match, CE.SDK adds empty space to preserve the full video visibility. ``` // Content fill mode - Contain// Contain mode fits entire video, may leave empty spaceconst containBlock = engine.block.create('graphic');engine.block.setShape(containBlock, engine.block.createShape('rect'));engine.block.setWidth(containBlock, blockWidth);engine.block.setHeight(containBlock, blockHeight);engine.block.appendChild(page, containBlock); const containVideoFill = engine.block.createFill('video');engine.block.setString(containVideoFill, 'fill/video/fileURI', videoUri);engine.block.setFill(containBlock, containVideoFill); // Set content fill mode to Containengine.block.setEnum(containBlock, 'contentFill/mode', 'Contain'); ``` Use Contain mode when the entire video must remain visible—presentations, product demos, or content where cropping would lose important information. Empty space is acceptable to preserve complete visibility. ## Loading Video Resources[#](#loading-video-resources) Before accessing video metadata like duration or dimensions, you must force load the video resource. This ensures CE.SDK has downloaded the necessary information. ``` // Force load video resource to access metadataconst resourceBlock = engine.block.create('graphic');engine.block.setShape(resourceBlock, engine.block.createShape('rect'));engine.block.setWidth(resourceBlock, blockWidth);engine.block.setHeight(resourceBlock, blockHeight);engine.block.appendChild(page, resourceBlock); const resourceVideoFill = engine.block.createFill('video');engine.block.setString(resourceVideoFill, 'fill/video/fileURI', videoUri);engine.block.setFill(resourceBlock, resourceVideoFill); // Force load the video resource before accessing metadataawait engine.block.forceLoadAVResource(resourceVideoFill); // Now we can access video metadataconst totalDuration = engine.block.getDouble( resourceVideoFill, 'fill/video/totalDuration');// eslint-disable-next-line no-consoleconsole.log('Video total duration:', totalDuration, 'seconds'); ``` Skipping this step causes errors when trying to access metadata. Videos load asynchronously, so `forceLoadAVResource` ensures the metadata is available before you query it. Once loaded, you can access properties like `fill/video/totalDuration` to get the video length in seconds. This information helps you build UI previews or validate user input. ## Common Use Cases[#](#common-use-cases) ### Video as Shape Fill[#](#video-as-shape-fill) Video fills aren’t limited to rectangles. You can fill any shape with video content. ``` // Use case: Video as shape fill - Ellipseconst ellipseBlock = engine.block.create('graphic');const ellipseShape = engine.block.createShape('//ly.img.ubq/shape/ellipse');engine.block.setShape(ellipseBlock, ellipseShape);engine.block.setWidth(ellipseBlock, blockWidth);engine.block.setHeight(ellipseBlock, blockHeight);engine.block.appendChild(page, ellipseBlock); const ellipseVideoFill = engine.block.createFill('video');engine.block.setString(ellipseVideoFill, 'fill/video/fileURI', videoUri);engine.block.setFill(ellipseBlock, ellipseVideoFill); ``` Ellipse shapes, polygons, stars, and custom paths all support video fills. The video content fills the shape boundary, masking the video. ### Video with Opacity[#](#video-with-opacity) Control the transparency of video-filled blocks to create overlay effects or blend video content with backgrounds. ``` // Advanced: Video fill with opacityconst opacityBlock = engine.block.create('graphic');engine.block.setShape(opacityBlock, engine.block.createShape('rect'));engine.block.setWidth(opacityBlock, blockWidth);engine.block.setHeight(opacityBlock, blockHeight);engine.block.appendChild(page, opacityBlock); const opacityVideoFill = engine.block.createFill('video');engine.block.setString(opacityVideoFill, 'fill/video/fileURI', videoUri);engine.block.setFill(opacityBlock, opacityVideoFill); // Set block opacity to 70%engine.block.setFloat(opacityBlock, 'opacity', 0.7); ``` Opacity affects the entire block, including its video fill. This technique creates semi-transparent video overlays, watermarks, or layered compositions where video content blends with other elements. ## Additional Techniques[#](#additional-techniques) ### Sharing Video Fills[#](#sharing-video-fills) Memory efficiency improves when multiple blocks share a single video fill instance. Changes to the shared fill affect all blocks using it. ``` // Advanced: Share one video fill between multiple blocksconst sharedFill = engine.block.createFill('video');engine.block.setString(sharedFill, 'fill/video/fileURI', videoUri); // First block using shared fillconst sharedBlock1 = engine.block.create('graphic');engine.block.setShape(sharedBlock1, engine.block.createShape('rect'));engine.block.setWidth(sharedBlock1, blockWidth);engine.block.setHeight(sharedBlock1, blockHeight);engine.block.appendChild(page, sharedBlock1);engine.block.setFill(sharedBlock1, sharedFill); // Second block using the same shared fillconst sharedBlock2 = engine.block.create('graphic');engine.block.setShape(sharedBlock2, engine.block.createShape('rect'));engine.block.setWidth(sharedBlock2, blockWidth * 0.8); // Slightly smallerengine.block.setHeight(sharedBlock2, blockHeight * 0.8);engine.block.appendChild(page, sharedBlock2);engine.block.setFill(sharedBlock2, sharedFill); // eslint-disable-next-line no-consoleconsole.log( 'Shared fill - Two blocks using the same video fill instance for memory efficiency'); ``` This pattern reduces memory usage when the same video appears multiple times in a composition. It’s particularly useful for repeated elements like watermarks or background patterns. Shared fills play back synchronized—all blocks display the same frame at the same time during playback. This ensures visual consistency across multiple elements. ## Troubleshooting[#](#troubleshooting) ### Video Not Visible[#](#video-not-visible) If your video fill doesn’t appear, check several common causes. Verify the fill is enabled with `isFillEnabled(block)`. Ensure the video URL is accessible—CORS restrictions on web platforms can block video loading. Confirm the block has valid dimensions (width and height greater than zero) and exists in the scene hierarchy. Check that the video format is supported on your platform. MP4 with H.264 encoding works reliably across platforms, while other codecs may have limited support. ### Cannot Create Video Fill[#](#cannot-create-video-fill) If creating a video fill throws an error, verify you’re in Video mode. Design mode doesn’t support video fills. Use `engine.scene.getMode()` to check the current mode. If it returns “Design”, you need to create a video scene instead. Call `await cesdk.createVideoScene()` during initialization rather than `createDesignScene()` to enable video capabilities. ### Video Not Loading[#](#video-not-loading) When videos fail to load, verify network connectivity for remote URLs. Check CORS headers—web browsers enforce cross-origin restrictions that can block video access. Validate the URI format uses `https://` for remote videos or appropriate schemes for local files. Test with a known working video URL to isolate whether the issue is with your specific video or a broader configuration problem. Check the browser console for detailed error messages. ### Memory Leaks[#](#memory-leaks) Always destroy replaced fills to prevent memory leaks. When changing a block’s fill, retrieve the old fill with `getFill()`, assign the new fill with `setFill()`, then destroy the old fill with `destroy()`. Don’t create fills without attaching them to blocks—unattached fills remain in memory indefinitely. Clean up shared fills when no blocks reference them anymore. ### Performance Issues[#](#performance-issues) Video playback is resource-intensive. Use appropriately sized videos—avoid massive files that strain decoding hardware. Consider lower resolutions for editing with high-resolution sources reserved for export. Limit the number of simultaneously playing videos, especially on mobile devices. Too many concurrent video decodes overwhelm device capabilities. Compress videos before use to reduce file sizes and improve loading times. ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | `createFill('video')` | Create a new video fill object | | `setFill(block, fill)` | Assign fill to a block | | `getFill(block)` | Get the fill ID from a block | | `setString(fill, property, value)` | Set video URI property | | `getString(fill, property)` | Get current video URI | | `setSourceSet(fill, property, sources)` | Set responsive video sources | | `getSourceSet(fill, property)` | Get current source set | | `setEnum(block, property, value)` | Set content fill mode | | `getEnum(block, property)` | Get current fill mode | | `setFillEnabled(block, enabled)` | Enable or disable fill rendering | | `isFillEnabled(block)` | Check if fill is enabled | | `supportsFill(block)` | Check if block supports fills | | `forceLoadAVResource(fill)` | Force load video metadata | | `getVideoFillThumbnail(fill, height)` | Get single thumbnail frame | | `adjustCropToFillFrame(block, fillIndex)` | Adjust crop to fill frame | ### Video Fill Properties[#](#video-fill-properties) | Property | Type | Description | | --- | --- | --- | | `fill/video/fileURI` | String | Single video URI (URL, data URI, file path) | | `fill/video/sourceSet` | SourceSet\[\] | Array of responsive video sources | | `fill/video/totalDuration` | Double | Total duration of video in seconds | ### Content Fill Properties[#](#content-fill-properties) | Property | Type | Values | Description | | --- | --- | --- | --- | | `contentFill/mode` | Enum | ’Cover’, ‘Contain’ | How video scales within block | ## Next Steps[#](#next-steps) * Learn about [Color Fills](angular/fills/color-7129cd/) for solid colors * Explore [Gradient Fills](angular/filters-and-effects/gradients-0ff079/) for color transitions * Explore [Image Fills](angular/fills/image-e9cb5c/) for static imagery * Understand [Fill Overview](angular/fills/overview-3895ee/) for comprehensive fill system * Learn about [Trim Video Clips](angular/edit-video/trim-4f688b/) for video editing features --- [Source](https:/img.ly/docs/cesdk/angular/fills/color-7129cd) # Color Fills Apply uniform solid colors to shapes, text, and design blocks using CE.SDK’s comprehensive color fill system with support for multiple color spaces. ![Color Fills example showing various colored shapes with RGB, CMYK, and Spot Colors](/docs/cesdk/_astro/browser.hero.BRZqHVJH_cpGsT.webp) 15 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-fills-color-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-fills-color-browser) Color fills are one of the fundamental fill types in CE.SDK, allowing you to paint design blocks with solid, uniform colors. Unlike gradient fills that transition between colors or image fills that display photo content, color fills apply a single color across the entire block. The color fill system supports multiple color spaces including RGB for screen display, CMYK for print workflows, and Spot Colors for brand consistency. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json';import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Color Fills Guide * * This example demonstrates: * - Creating and applying color fills * - Working with RGB, CMYK, and Spot Colors * - Managing fill properties * - Enabling/disabling fills * - Sharing fills between blocks */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Create a design scene using CE.SDK cesdk method await cesdk.createDesignScene(); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page dimensions engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); // Set page background to light gray const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.96, g: 0.96, b: 0.96, a: 1.0 }); // Calculate responsive grid layout based on page dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 12); const { blockWidth, blockHeight, getPosition } = layout; // Helper function to create a shape with a fill const createShapeWithFill = ( shapeType: 'rect' | 'ellipse' | 'polygon' | 'star' = 'rect' ): { block: number; fill: number } => { const block = engine.block.create('graphic'); const shape = engine.block.createShape(shapeType); engine.block.setShape(block, shape); // Set size engine.block.setWidth(block, blockWidth); engine.block.setHeight(block, blockHeight); // Append to page engine.block.appendChild(page, block); // Check if block supports fills const canHaveFill = engine.block.supportsFill(block); if (!canHaveFill) { throw new Error('Block does not support fills'); } // Create a color fill const colorFill = engine.block.createFill('color'); // Apply the fill to the block engine.block.setFill(block, colorFill); return { block, fill: colorFill }; }; // Example 1: RGB Color Fill (Red) const { block: rgbBlock, fill: rgbFill } = createShapeWithFill(); engine.block.setColor(rgbFill, 'fill/color/value', { r: 1.0, // Red (0.0 to 1.0) g: 0.0, // Green b: 0.0, // Blue a: 1.0 // Alpha (opacity) }); // Example 2: RGB Color Fill (Green with transparency) const { block: transparentBlock, fill: transparentFill } = createShapeWithFill(); engine.block.setColor(transparentFill, 'fill/color/value', { r: 0.0, g: 0.8, b: 0.2, a: 0.5 // 50% opacity }); // Example 3: RGB Color Fill (Blue) const { block: blueBlock, fill: blueFill } = createShapeWithFill(); engine.block.setColor(blueFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); // Get the current fill from a block const currentFill = engine.block.getFill(blueBlock); const fillType = engine.block.getType(currentFill); // eslint-disable-next-line no-console console.log('Fill type:', fillType); // '//ly.img.ubq/fill/color' // Get the current color value const currentColor = engine.block.getColor(blueFill, 'fill/color/value'); // eslint-disable-next-line no-console console.log('Current color:', currentColor); // Example 4: CMYK Color Fill (Magenta) const { block: cmykBlock, fill: cmykFill } = createShapeWithFill('ellipse'); engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, // Cyan (0.0 to 1.0) m: 1.0, // Magenta y: 0.0, // Yellow k: 0.0, // Key/Black tint: 1.0 // Tint value (0.0 to 1.0) }); // Example 5: Print-Ready CMYK Color const { block: printBlock, fill: printFill } = createShapeWithFill('ellipse'); engine.block.setColor(printFill, 'fill/color/value', { c: 0.0, m: 0.85, y: 1.0, k: 0.0, tint: 1.0 }); // Example 6: Spot Color (Brand Color) // First define the spot color globally engine.editor.setSpotColorRGB('BrandRed', 0.9, 0.1, 0.1); engine.editor.setSpotColorRGB('BrandBlue', 0.1, 0.3, 0.9); // Then apply to fill const { block: spotBlock, fill: spotFill } = createShapeWithFill('ellipse'); engine.block.setColor(spotFill, 'fill/color/value', { name: 'BrandRed', tint: 1.0, externalReference: '' // Optional reference system }); // Example 7: Brand Color Application // Apply brand color to multiple elements const { block: headerBlock, fill: headerFill } = createShapeWithFill('star'); const brandColor = { name: 'BrandBlue', tint: 1.0, externalReference: '' }; engine.block.setColor(headerFill, 'fill/color/value', brandColor); // Example 8: Second element with same brand color const { block: buttonBlock, fill: buttonFill } = createShapeWithFill('star'); engine.block.setColor(buttonFill, 'fill/color/value', brandColor); // Example 9: Toggle fill visibility const { block: toggleBlock, fill: toggleFill } = createShapeWithFill('star'); engine.block.setColor(toggleFill, 'fill/color/value', { r: 1.0, g: 0.5, b: 0.0, a: 1.0 }); // Check fill state const isEnabled = engine.block.isFillEnabled(toggleBlock); // eslint-disable-next-line no-console console.log('Fill enabled:', isEnabled); // true // Example 10: Shared Fill const block1 = engine.block.create('graphic'); const shape1 = engine.block.createShape('rect'); engine.block.setShape(block1, shape1); engine.block.setWidth(block1, blockWidth); engine.block.setHeight(block1, blockHeight / 2); engine.block.appendChild(page, block1); const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, blockWidth); engine.block.setHeight(block2, blockHeight / 2); engine.block.appendChild(page, block2); // Create one fill const sharedFill = engine.block.createFill('color'); engine.block.setColor(sharedFill, 'fill/color/value', { r: 0.5, g: 0.0, b: 0.5, a: 1.0 }); // Apply to both blocks engine.block.setFill(block1, sharedFill); engine.block.setFill(block2, sharedFill); // Example 11: Yellow Star const { block: replaceBlock, fill: replaceFill } = createShapeWithFill('star'); engine.block.setColor(replaceFill, 'fill/color/value', { r: 0.9, g: 0.9, b: 0.1, a: 1.0 }); // Example 12: Color Space Conversion (for demonstration) const rgbColor = { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }; // Convert to CMYK const cmykColor = engine.editor.convertColorToColorSpace(rgbColor, 'CMYK'); // eslint-disable-next-line no-console console.log('Converted CMYK color:', cmykColor); // ===== Position all blocks in grid layout ===== const blocks = [ rgbBlock, // Position 0 transparentBlock, // Position 1 blueBlock, // Position 2 cmykBlock, // Position 3 printBlock, // Position 4 spotBlock, // Position 5 headerBlock, // Position 6 buttonBlock, // Position 7 toggleBlock, // Position 8 block1, // Position 9 block2, // Position 10 replaceBlock // Position 11 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Zoom to fit all content await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); }} export default Example; ``` This guide demonstrates how to create, apply, and modify color fills programmatically, work with different color spaces, and manage fill properties for various design elements. ## Understanding Color Fills[#](#understanding-color-fills) ### What is a Color Fill?[#](#what-is-a-color-fill) A color fill is a fill object identified by the type `'//ly.img.ubq/fill/color'` (or its shorthand `'color'`) that paints a design block with a single, uniform color. Color fills are part of the broader fill system in CE.SDK and contain a `fill/color/value` property that defines the actual color using various color space formats. Color fills differ from other fill types available in CE.SDK: * **Color fills**: Solid, uniform color across the entire block * **Gradient fills**: Color transitions (linear, radial, conical) * **Image fills**: Photo or raster content * **Video fills**: Animated video content ### Supported Color Spaces[#](#supported-color-spaces) CE.SDK’s color fill system supports multiple color spaces to accommodate different design and production workflows: * **RGB/sRGB**: Red, Green, Blue with alpha channel (standard for screen display) * **CMYK**: Cyan, Magenta, Yellow, Key (black) with tint (for print production) * **Spot Colors**: Named colors with RGB/CMYK approximations (for brand consistency) Each color space serves specific use cases—use RGB for digital designs, CMYK for print-ready content, and Spot Colors to maintain brand standards across projects. ## Checking Color Fill Support[#](#checking-color-fill-support) ### Verifying Block Compatibility[#](#verifying-block-compatibility) Before applying color fills to a block, verify that the block type supports fills. Not all block types can have fills—for example, scene and page blocks typically don’t support fills. ``` // Check if block supports fillsconst canHaveFill = engine.block.supportsFill(block);if (!canHaveFill) { throw new Error('Block does not support fills');} ``` Graphic blocks, shapes, and text blocks typically support fills. Always check `supportsFill()` before accessing fill APIs to avoid runtime errors and ensure smooth operation. ## Creating Color Fills[#](#creating-color-fills) ### Creating a New Color Fill[#](#creating-a-new-color-fill) Create a new color fill instance using the `createFill()` method with the type `'color'` or the full type name `'//ly.img.ubq/fill/color'`. ``` // Create a color fillconst colorFill = engine.block.createFill('color'); ``` The `createFill()` method returns a numeric fill ID. The fill exists independently until you attach it to a block using `setFill()`. If you create a fill but don’t attach it to a block, you must destroy it manually to prevent memory leaks. ### Default Color Fill Properties[#](#default-color-fill-properties) New color fills have default properties—typically white or transparent. You can discover all available properties using `findAllProperties()`: ``` const properties = engine.block.findAllProperties(colorFillId);console.log(properties); // ["fill/color/value", "type"] ``` ## Applying Color Fills[#](#applying-color-fills) ### Setting a Fill on a Block[#](#setting-a-fill-on-a-block) Once you’ve created a color fill, attach it to a block using `setFill()`: ``` // Apply the fill to the blockengine.block.setFill(block, colorFill); ``` This example creates a graphic block with a rectangle shape and applies the color fill to it. The block will now render with the fill’s color. ### Getting the Current Fill[#](#getting-the-current-fill) Retrieve the current fill attached to a block using `getFill()` and inspect its type: ``` // Get the current fill from a blockconst currentFill = engine.block.getFill(blueBlock);const fillType = engine.block.getType(currentFill);// eslint-disable-next-line no-consoleconsole.log('Fill type:', fillType); // '//ly.img.ubq/fill/color' ``` ## Modifying Color Fill Properties[#](#modifying-color-fill-properties) ### Setting RGB Colors[#](#setting-rgb-colors) Set the fill color using RGB values with the `setColor()` method. RGB values are normalized floats from 0.0 to 1.0, and the alpha channel controls opacity. ``` const { block: rgbBlock, fill: rgbFill } = createShapeWithFill();engine.block.setColor(rgbFill, 'fill/color/value', { r: 1.0, // Red (0.0 to 1.0) g: 0.0, // Green b: 0.0, // Blue a: 1.0 // Alpha (opacity)}); ``` The alpha channel (a) controls opacity: 1.0 is fully opaque, 0.0 is fully transparent. This allows you to create semi-transparent overlays and layered color effects. ### Setting CMYK Colors[#](#setting-cmyk-colors) For print workflows, use CMYK color space with the `setColor()` method. CMYK values are also normalized from 0.0 to 1.0, and include a tint value for partial color application. ``` const { block: cmykBlock, fill: cmykFill } = createShapeWithFill('ellipse');engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, // Cyan (0.0 to 1.0) m: 1.0, // Magenta y: 0.0, // Yellow k: 0.0, // Key/Black tint: 1.0 // Tint value (0.0 to 1.0)}); ``` The tint value allows partial application of the color, useful for creating lighter variations without changing the base CMYK values. ### Setting Spot Colors[#](#setting-spot-colors) Spot colors are named colors that must be defined before use. They’re ideal for maintaining brand consistency and can have both RGB and CMYK approximations for different output scenarios. ``` // First define the spot color globallyengine.editor.setSpotColorRGB('BrandRed', 0.9, 0.1, 0.1);engine.editor.setSpotColorRGB('BrandBlue', 0.1, 0.3, 0.9); // Then apply to fillconst { block: spotBlock, fill: spotFill } = createShapeWithFill('ellipse');engine.block.setColor(spotFill, 'fill/color/value', { name: 'BrandRed', tint: 1.0, externalReference: '' // Optional reference system}); ``` First, define the spot color globally using `setSpotColorRGB()` or `setSpotColorCMYK()`, then apply it to your fill using the color name. The tint value controls intensity from 0.0 to 1.0. ### Getting Current Color Value[#](#getting-current-color-value) Retrieve the current color value from a fill using `getColor()`: ``` // Get the current color valueconst currentColor = engine.block.getColor(blueFill, 'fill/color/value');// eslint-disable-next-line no-consoleconsole.log('Current color:', currentColor); ``` ## Enabling and Disabling Color Fills[#](#enabling-and-disabling-color-fills) ### Toggle Fill Visibility[#](#toggle-fill-visibility) You can temporarily disable a fill without removing it from the block. This preserves all fill properties while making the block transparent: ``` const { block: toggleBlock, fill: toggleFill } = createShapeWithFill('star');engine.block.setColor(toggleFill, 'fill/color/value', { r: 1.0, g: 0.5, b: 0.0, a: 1.0}); // Check fill stateconst isEnabled = engine.block.isFillEnabled(toggleBlock);// eslint-disable-next-line no-consoleconsole.log('Fill enabled:', isEnabled); // true ``` Disabling fills is useful for creating stroke-only designs or for temporarily hiding fills during interactive editing sessions. The fill properties remain intact and can be re-enabled at any time. ## Additional Techniques[#](#additional-techniques) ### Sharing Color Fills[#](#sharing-color-fills) You can share a single fill instance between multiple blocks. Changes to the shared fill affect all blocks using it: ``` const block1 = engine.block.create('graphic');const shape1 = engine.block.createShape('rect');engine.block.setShape(block1, shape1);engine.block.setWidth(block1, blockWidth);engine.block.setHeight(block1, blockHeight / 2);engine.block.appendChild(page, block1); const block2 = engine.block.create('graphic');const shape2 = engine.block.createShape('rect');engine.block.setShape(block2, shape2);engine.block.setWidth(block2, blockWidth);engine.block.setHeight(block2, blockHeight / 2);engine.block.appendChild(page, block2); // Create one fillconst sharedFill = engine.block.createFill('color');engine.block.setColor(sharedFill, 'fill/color/value', { r: 0.5, g: 0.0, b: 0.5, a: 1.0}); // Apply to both blocksengine.block.setFill(block1, sharedFill);engine.block.setFill(block2, sharedFill); ``` With shared fills, modifying the fill’s color updates all blocks simultaneously. The fill is only destroyed when the last block referencing it is destroyed. ### Color Space Conversion[#](#color-space-conversion) Convert colors between different color spaces using `convertColorToColorSpace()`: ``` const rgbColor = { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }; // Convert to CMYKconst cmykColor = engine.editor.convertColorToColorSpace(rgbColor, 'CMYK');// eslint-disable-next-line no-consoleconsole.log('Converted CMYK color:', cmykColor); ``` This is useful when you need to ensure color consistency across different output mediums (screen vs. print). ## Common Use Cases[#](#common-use-cases) ### Brand Color Application[#](#brand-color-application) Define and apply brand colors as spot colors to maintain consistency across all design elements: ``` // Apply brand color to multiple elementsconst { block: headerBlock, fill: headerFill } = createShapeWithFill('star');const brandColor = { name: 'BrandBlue', tint: 1.0, externalReference: '' };engine.block.setColor(headerFill, 'fill/color/value', brandColor); ``` Using spot colors ensures brand consistency and makes it easy to update all instances of a brand color by modifying the spot color definition. ### Transparency Effects[#](#transparency-effects) Create semi-transparent overlays and visual effects by adjusting the alpha channel: ``` const { block: transparentBlock, fill: transparentFill } = createShapeWithFill();engine.block.setColor(transparentFill, 'fill/color/value', { r: 0.0, g: 0.8, b: 0.2, a: 0.5 // 50% opacity}); ``` ### Print-Ready Colors[#](#print-ready-colors) Use CMYK color space for designs destined for print production: ``` const { block: printBlock, fill: printFill } = createShapeWithFill('ellipse');engine.block.setColor(printFill, 'fill/color/value', { c: 0.0, m: 0.85, y: 1.0, k: 0.0, tint: 1.0}); ``` ## Troubleshooting[#](#troubleshooting) ### Fill Not Visible[#](#fill-not-visible) If your fill doesn’t appear: * Check if fill is enabled: `engine.block.isFillEnabled(block)` * Verify alpha channel is not 0: Check the `a` property in RGBA colors * Ensure block has valid dimensions (width and height > 0) * Confirm block is in the scene hierarchy ### Color Looks Different Than Expected[#](#color-looks-different-than-expected) If colors don’t match expectations: * Verify you’re using the correct color space (RGB vs CMYK) * Check if spot color is properly defined before use * Review tint values (should be 0.0-1.0) * Consider color space conversion for your output medium ### Memory Leaks[#](#memory-leaks) To prevent memory leaks: * Always destroy replaced fills: `engine.block.destroy(oldFill)` * Don’t create fills without attaching them to blocks * Clean up shared fills when they’re no longer needed ### Cannot Apply Color to Block[#](#cannot-apply-color-to-block) If you can’t apply a color fill: * Verify block supports fills: `engine.block.supportsFill(block)` * Check if block has a shape: Some blocks require shapes before fills work * Ensure fill object is valid and not already destroyed ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | `createFill('color')` | Create a new color fill object | | `setFill(block, fill)` | Assign fill to a block | | `getFill(block)` | Get the fill ID from a block | | `setColor(fill, property, color)` | Set color value (RGB, CMYK, or Spot) | | `getColor(fill, property)` | Get current color value | | `setFillEnabled(block, enabled)` | Enable or disable fill rendering | | `isFillEnabled(block)` | Check if fill is enabled | | `supportsFill(block)` | Check if block supports fills | | `findAllProperties(fill)` | List all properties of the fill | | `convertColorToColorSpace(color, space)` | Convert between color spaces | | `setSpotColorRGB(name, r, g, b)` | Define spot color with RGB approximation | | `setSpotColorCMYK(name, c, m, y, k)` | Define spot color with CMYK approximation | ## Next Steps[#](#next-steps) Now that you understand color fills, explore other fill types and color management features: * Learn about Gradient Fills for color transitions * Explore Image Fills for photo content * Understand Fill Overview for the comprehensive fill system * Review Apply Colors for color management across properties * Study Blocks Concept for understanding the block system --- [Source](https:/img.ly/docs/cesdk/angular/export-save-publish/store-custom-metadata-337248) # Store Custom Metadata ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { let scene = await engine.scene.createFromImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); // get the graphic block with the image fill // Note: In this example we know that the first block since there is only one block in the scene // at this point. You might need to filter by fill type if you have multiple blocks. const block = engine.block.findByType('graphic')[0]; engine.block.setMetadata(scene, 'author', 'img.ly'); engine.block.setMetadata(block, 'customer_id', '1234567890'); /* We can even store complex objects */ const payment = { id: 5, method: 'credit_card', received: true }; engine.block.setMetadata(block, 'payment', JSON.stringify(payment)); /* This will return 'img.ly' */ engine.block.getMetadata(scene, 'author'); /* This will return '1000000' */ engine.block.getMetadata(block, 'customer_id'); /* This will return ['customer_id'] */ engine.block.findAllMetadata(block); engine.block.removeMetadata(block, 'payment'); /* This will return false */ engine.block.hasMetadata(block, 'payment'); /* We save our scene and reload it from scratch */ const sceneString = await engine.scene.saveToString(); scene = await engine.scene.loadFromString(sceneString); /* This still returns 'img.ly' */ engine.block.getMetadata(scene, 'author'); /* And this still returns '1234567890' */ engine.block.getMetadata(block, 'customer_id'); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` CE.SDK allows you to store custom metadata in your scenes. You can attach metadata to your scene or directly to your individual design blocks within the scene. This metadata is persistent across saving and loading of scenes. It simply consists of key value pairs of strings. Using any string-based serialization format such as JSON will allow you to store even complex objects. Please note that when duplicating blocks their metadata will also be duplicated. ## Working with Metadata[#](#working-with-metadata) We can add metadata to any design block using `setMetadata(block: number, key: string, value: string)`. This also includes the scene block. ``` engine.block.setMetadata(scene, 'author', 'img.ly');engine.block.setMetadata(block, 'customer_id', '1234567890'); /* We can even store complex objects */const payment = { id: 5, method: 'credit_card', received: true};engine.block.setMetadata(block, 'payment', JSON.stringify(payment)); ``` We can retrieve metadata from any design block or scene using `getMetadata(block: number, key: string): string`. Before accessing the metadata you check for its existence using `hasMetadata(block: number, key: string): boolean`. ``` /* This will return 'img.ly' */engine.block.getMetadata(scene, 'author'); /* This will return '1000000' */engine.block.getMetadata(block, 'customer_id'); ``` We can query all metadata keys from any design block or scene using `findAllMetadata(block: number): string[]`. For blocks without any metadata, this will return an empty list. ``` /* This will return ['customer_id'] */engine.block.findAllMetadata(block); ``` If you want to get rid of any metadata, you can use `removeMetadata(block: number, key: string)`. ``` engine.block.removeMetadata(block, 'payment'); /* This will return false */engine.block.hasMetadata(block, 'payment'); ``` Metadata will automatically be saved and loaded as part the scene. So you don’t have to worry about it getting lost or having to save it separately. ``` /* We save our scene and reload it from scratch */const sceneString = await engine.scene.saveToString();scene = await engine.scene.loadFromString(sceneString); /* This still returns 'img.ly' */engine.block.getMetadata(scene, 'author'); /* And this still returns '1234567890' */engine.block.getMetadata(block, 'customer_id'); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { let scene = await engine.scene.createFromImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg', ); // get the graphic block with the image fill // Note: In this example we know that the first block since there is only one block in the scene // at this point. You might need to filter by fill type if you have multiple blocks. const block = engine.block.findByType('graphic')[0]; engine.block.setMetadata(scene, 'author', 'img.ly'); engine.block.setMetadata(block, 'customer_id', '1234567890'); /* We can even store complex objects */ const payment = { id: 5, method: 'credit_card', received: true, }; engine.block.setMetadata(block, 'payment', JSON.stringify(payment)); /* This will return 'img.ly' */ engine.block.getMetadata(scene, 'author'); /* This will return '1000000' */ engine.block.getMetadata(block, 'customer_id'); /* This will return ['customer_id'] */ engine.block.findAllMetadata(block); engine.block.removeMetadata(block, 'payment'); /* This will return false */ engine.block.hasMetadata(block, 'payment'); /* We save our scene and reload it from scratch */ const sceneString = await engine.scene.saveToString(); scene = await engine.scene.loadFromString(sceneString); /* This still returns 'img.ly' */ engine.block.getMetadata(scene, 'author'); /* And this still returns '1234567890' */ engine.block.getMetadata(block, 'customer_id'); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/export-save-publish/save-c8b124) # Save Images and Videos The CreativeEngine allows you to save scenes in a binary format to share them between editors or store them for later editing. Saving a scene can be done as a either scene file or as an archive file. A scene file does not include any fonts or images. Only the source URIs of assets, the general layout, and element properties are stored. When loading scenes in a new environment, ensure previously used asset URIs are available. Conversely, an archive file contains within it the scene’s assets and references them as relative URIs. **Warning** A scene file does not include any fonts or images. Only the source URIs of assets, the general layout, and element properties are stored. When loading scenes in a new environment, ensure previously used asset URIs are available. ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { engine.scene .saveToArchive() .then((blob) => { const formData = new FormData(); formData.append('file', blob); fetch('/upload', { method: 'POST', body: formData }); }) .catch((error) => { console.error('Save failed', error); });}); ``` ```
``` ## Save Scenes to an Archive[#](#save-scenes-to-an-archive) In this example, we will show you how to save scenes as an archive with the [CreativeEditor SDK](https://img.ly/products/creative-sdk). As an archive, the resulting `Blob` includes all pages and any hidden elements and all the asset data. To get hold of such a `Blob`, you need to use `engine.scene.saveToArchive()`. This is an asynchronous method returning a `Promise`. After waiting for the `Promise` to resolve, we receive a `Blob` holding the entire scene currently loaded in the editor including its assets’ data. ``` engine.scene .saveToArchive() .then((blob) => { const formData = new FormData(); formData.append('file', blob); fetch('/upload', { method: 'POST', body: formData }); }) .catch((error) => { console.error('Save failed', error); }); ``` That `Blob` can then be treated as a form file parameter and sent to a remote location. ``` const formData = new FormData();formData.append('file', blob);fetch('/upload', { method: 'POST', body: formData}); ``` ### Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { engine.scene .saveToArchive() .then(blob => { const formData = new FormData(); formData.append('file', blob); fetch('/upload', { method: 'POST', body: formData, }); }) .catch(error => { console.error('Save failed', error); });}); ``` ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { engine.scene .saveToString() .then((savedSceneString) => { const blob = new Blob([savedSceneString], { type: 'text/plain' }); const formData = new FormData(); formData.append('file', blob); fetch('/upload', { method: 'POST', body: formData }); }) .catch((error) => { console.error('Save failed', error); });}); ``` ```
``` ## Save Scenes to a Blob[#](#save-scenes-to-a-blob) In this example, we will show you how to save scenes as a `Blob` with the [CreativeEditor SDK](https://img.ly/products/creative-sdk). This is done by converting the contents of a scene to a string, which can then be stored or transferred. For sending these to a remote location, we wrap them in a `Blob` and treat it as a file object. To get hold of the scene contents as string, you need to use `engine.scene.saveToString()`. This is an asynchronous method returning a `Promise`. After waiting for the `Promise` to resolve, we receive a plain string holding the entire scene currently loaded in the editor. This includes all pages and any hidden elements but none of the actual asset data. ``` engine.scene .saveToString() .then((savedSceneString) => { const blob = new Blob([savedSceneString], { type: 'text/plain' }); const formData = new FormData(); formData.append('file', blob); fetch('/upload', { method: 'POST', body: formData }); }) .catch((error) => { console.error('Save failed', error); }); ``` The returned string consists solely of ASCII characters and can safely be used further or written to a database. In this case, we need a `Blob` object, so we proceed to wrap the received string into a `Blob`, a file-like object of immutable, raw data. ``` const blob = new Blob([savedSceneString], { type: 'text/plain'}); ``` That object can then be treated as a form file parameter and sent to a remote location. ``` const formData = new FormData();formData.append('file', blob);fetch('/upload', { method: 'POST', body: formData}); ``` ### Full Code[#](#full-code-1) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { engine.scene .saveToString() .then(savedSceneString => { const blob = new Blob([savedSceneString], { type: 'text/plain', }); const formData = new FormData(); formData.append('file', blob); fetch('/upload', { method: 'POST', body: formData, }); }) .catch(error => { console.error('Save failed', error); });}); ``` ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { engine.scene .saveToString() .then((sceneAsString) => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch((error) => { console.error('Save failed', error); });}); ``` ```
``` ## Save Scenes to a String[#](#save-scenes-to-a-string) In this example, we will show you how to save scenes as a string with the [CreativeEditor SDK](https://img.ly/products/creative-sdk). This is done by converting the contents of a scene to a single string, which can then be stored or transferred. To get hold of such a string, you need to use `engine.scene.saveToString()`. This is an asynchronous method returning a `Promise`. After waiting for the `Promise` to resolve, we receive a plain string holding the entire scene currently loaded in the editor. This includes all pages and any hidden elements, but none of the actual asset data. ``` engine.scene .saveToString() .then((sceneAsString) => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch((error) => { console.error('Save failed', error); }); ``` The returned string consists solely of ASCII characters and can safely be used further or written to a database. ``` console.log(sceneAsString); ``` ### Full Code[#](#full-code-2) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { engine.scene .saveToString() .then(sceneAsString => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch(error => { console.error('Save failed', error); });}); ``` ```
``` ## Save Previously Archived Scenes to a String and Persist Resources[#](#save-previously-archived-scenes-to-a-string-and-persist-resources) In this example, we will show you how to save scenes that were loaded from an archive to a string with the [CreativeEditor SDK](https://img.ly/products/creative-sdk). Some scenes contain resources that are only transient and may be lost after the scene is destroyed. An example is a scene that was previously saved as an archive. When loaded, the data of the archived scene’s resources is held in in-memory buffers. Saving again that scene to string would result in a scene with URLs whose schemes are `buffer` which is unusable in any other instance of the editor. It is best that all resources are put online so they are always available. To that end, you can use the `saveToString()`’s `allowedResourceSchemes` and `onDisallowedResourceScheme` parameters to be notified of resources whose URL should not end in the final string. Set the `allowedResourceSchemes` argument to an array of schemes whose values can be kept as-is and set the `onDisallowedResourceScheme` to a function that will save the resource’s data to a permanent location and call an embedded callback with the new URL to refer to that resource. Any resource whose URL scheme is not found in the `allowedResourceSchemes` array will trigger a call of the passed `onDisallowedResourceScheme` argument with the resource’s URL, a hash of its data and the embedded callback to call with the new URL. ``` engine.scene .saveToString(['http', 'https'], async (uri, hash) => { let persistedUri = alreadyPersistedUris[hash]; if (!persistedUri) { persistedUri = `http://example.com/${uri.split('://')[1]}`; alreadyPersistedUris[hash] = persistedUri; engine.getResourceData(uri, 10000000, async (blob) => { try { await fetch(persistedUri, { mode: 'no-cors', method: 'POST', body: blob }); } catch (error) { console.error(`Failed to persist ${uri}:`, error); persistedUri = uri; } }); } return persistedUri; }) .then((sceneAsString) => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch((error) => { console.error('Save failed', error); }); ``` The returned string consists solely of ASCII characters and can safely be used further or written to a database. ``` console.log(sceneAsString); ``` ### Full Code[#](#full-code-3) Here’s the full code: ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { const alreadyPersistedUris = {}; engine.scene .saveToString(['http', 'https'], async (uri, hash) => { let persistedUri = alreadyPersistedUris[hash]; if (!persistedUri) { persistedUri = `http://example.com/${uri.split('://')[1]}`; alreadyPersistedUris[hash] = persistedUri; engine.getResourceData(uri, 10000000, async (blob) => { try { await fetch(persistedUri, { mode: 'no-cors', method: 'POST', body: blob }); } catch (error) { console.error(`Failed to persist ${uri}:`, error); persistedUri = uri; } }); } return persistedUri; }) .then((sceneAsString) => { console.log('Save succeeded'); console.log(sceneAsString); }) .catch((error) => { console.error('Save failed', error); });}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/export-save-publish/export-82f968) # Export --- [Source](https:/img.ly/docs/cesdk/angular/edit-video/trim-4f688b) # Trim Video Clips Control video playback timing by trimming clips to specific start points and durations using CE.SDK’s timeline UI and programmatic trim API. ![Video Trim example showing timeline with video clips and trim controls](/docs/cesdk/_astro/browser.hero.CS2ktFlb_Z1I2Vcs.webp) 12 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-create-video-trim-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-create-video-trim-browser) Understanding the difference between **fill-level trimming** and **block-level timing** is essential. Fill-level trimming (`setTrimOffset`, `setTrimLength`) controls which portion of the source media plays, while block-level timing (`setTimeOffset`, `setDuration`) controls when and how long the block appears in your timeline. These two systems work together to give you complete control over video playback. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json';import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Trim Video Guide * * Demonstrates trimming video clips in CE.SDK: * - Loading video resources with forceLoadAVResource * - Basic video trimming with setTrimOffset/setTrimLength * - Getting current trim values * - Coordinating trim with block duration * - Trimming with looping enabled * - Checking trim support * - Frame-accurate trimming * - Batch trimming multiple videos */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Enable video editing features in CE.SDK cesdk.feature.enable('ly.img.video'); cesdk.feature.enable('ly.img.timeline'); cesdk.feature.enable('ly.img.playback'); // Load assets and create a video scene (required for trimming) await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Video', withUploadAssetSources: true }); await cesdk.createVideoScene(); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Calculate responsive grid layout based on page dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 8); const { blockWidth, blockHeight, getPosition } = layout; // Use a sample video URL from demo assets const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; // Create a sample video block to demonstrate trim support checking const sampleVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); // Get the video fill - trim operations are applied to the fill, not the block const videoFill = engine.block.getFill(sampleVideo); // Check if the fill supports trim operations const supportsTrim = engine.block.supportsTrim(videoFill); // eslint-disable-next-line no-console console.log('Video fill supports trim:', supportsTrim); // true for video fills // Select this block so timeline controls are visible engine.block.setSelected(sampleVideo, true); // Pattern: Always load video resource before accessing trim properties // This ensures metadata (duration, frame rate, etc.) is available await engine.block.forceLoadAVResource(videoFill); // Now we can safely access video metadata const totalDuration = engine.block.getDouble( videoFill, 'fill/video/totalDuration' ); // eslint-disable-next-line no-console console.log('Total video duration:', totalDuration, 'seconds'); // Pattern #1: Demonstrate Individual Before Combined // Create a separate video block for basic trim demonstration const basicTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); // Get the fill to apply trim operations const basicTrimFill = engine.block.getFill(basicTrimVideo); // Load resource before trimming await engine.block.forceLoadAVResource(basicTrimFill); // Trim video to start at 2 seconds and play for 5 seconds engine.block.setTrimOffset(basicTrimFill, 2.0); engine.block.setTrimLength(basicTrimFill, 5.0); // Get current trim values to verify or modify const currentOffset = engine.block.getTrimOffset(basicTrimFill); const currentLength = engine.block.getTrimLength(basicTrimFill); // eslint-disable-next-line no-console console.log( `Basic trim - Offset: ${currentOffset}s, Length: ${currentLength}s` ); // Pattern #5: Progressive Complexity - coordinating trim with block duration // Create a video block demonstrating trim + duration coordination const durationTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const durationTrimFill = engine.block.getFill(durationTrimVideo); await engine.block.forceLoadAVResource(durationTrimFill); // Set trim: play portion from 3s to 8s (5 seconds of content) engine.block.setTrimOffset(durationTrimFill, 3.0); engine.block.setTrimLength(durationTrimFill, 5.0); // Set block duration: how long this block appears in the timeline // When duration equals trim length, the entire trimmed portion plays once engine.block.setDuration(durationTrimVideo, 5.0); // eslint-disable-next-line no-console console.log( 'Trim+Duration - Block will play trimmed 5s exactly once in timeline' ); // Create a video block with trim + looping const loopingTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const loopingTrimFill = engine.block.getFill(loopingTrimVideo); await engine.block.forceLoadAVResource(loopingTrimFill); // Trim to a short 3-second segment engine.block.setTrimOffset(loopingTrimFill, 1.0); engine.block.setTrimLength(loopingTrimFill, 3.0); // Enable looping so the 3-second segment repeats engine.block.setLooping(loopingTrimFill, true); // Set duration longer than trim length - the trim will loop to fill it engine.block.setDuration(loopingTrimVideo, 9.0); // eslint-disable-next-line no-console console.log( 'Looping trim - 3s segment will loop 3 times to fill 9s duration' ); // Pattern #6: Descriptive naming - frame-accurate trim demonstration // Create a video block for frame-accurate trimming const frameAccurateTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const frameFill = engine.block.getFill(frameAccurateTrimVideo); await engine.block.forceLoadAVResource(frameFill); // Note: Frame rate is not directly accessible via the API // For this example, we'll assume a common frame rate of 30fps const frameRate = 30; // Calculate trim offset based on specific frame number // Example: Start at frame 60 for a 30fps video = 2.0 seconds const startFrame = 60; const trimOffsetSeconds = startFrame / frameRate; // Trim for exactly 150 frames = 5.0 seconds at 30fps const trimFrames = 150; const trimLengthSeconds = trimFrames / frameRate; engine.block.setTrimOffset(frameFill, trimOffsetSeconds); engine.block.setTrimLength(frameFill, trimLengthSeconds); // eslint-disable-next-line no-console console.log( `Frame-accurate trim - Frame rate: ${frameRate}fps (assumed), Start frame: ${startFrame}, Duration: ${trimFrames} frames` ); // Pattern: Batch processing multiple video clips // Create multiple video blocks to demonstrate batch trimming const batchVideoUris = [ 'https://img.ly/static/ubq_video_samples/bbb.mp4', 'https://img.ly/static/ubq_video_samples/bbb.mp4', 'https://img.ly/static/ubq_video_samples/bbb.mp4' ]; const batchVideos = []; for (let i = 0; i < batchVideoUris.length; i++) { const batchVideo = await engine.block.addVideo( batchVideoUris[i], blockWidth, blockHeight ); batchVideos.push(batchVideo); // Get the fill for trim operations const batchFill = engine.block.getFill(batchVideo); // Load resource before trimming await engine.block.forceLoadAVResource(batchFill); // Apply consistent trim: first 4 seconds of each video engine.block.setTrimOffset(batchFill, 0.0); engine.block.setTrimLength(batchFill, 4.0); // Set consistent duration engine.block.setDuration(batchVideo, 4.0); } // eslint-disable-next-line no-console console.log('Batch trim - Applied consistent 4s trim to 3 video blocks'); // ===== Position all blocks in grid layout ===== const blocks = [ sampleVideo, // Position 0 basicTrimVideo, // Position 1 durationTrimVideo, // Position 2 loopingTrimVideo, // Position 3 frameAccurateTrimVideo, // Position 4 ...batchVideos // Positions 5-7 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Start playback automatically when the example loads try { engine.block.setPlaying(page, true); // eslint-disable-next-line no-console console.log( 'Video trim guide initialized. Playback started automatically. Use timeline controls to adjust trim handles.' ); } catch (error) { // eslint-disable-next-line no-console console.log( 'Video trim guide initialized. Click play button to start playback.' ); } }} export default Example; ``` This guide covers how to use the built-in timeline UI for visual trimming and how to trim videos programmatically using the Engine API. ## Understanding Trim Concepts[#](#understanding-trim-concepts) ### Fill-Level Trimming[#](#fill-level-trimming) When we trim a video, we’re adjusting properties of the video’s fill, not the block itself. The fill represents the media source—the actual video file. Fill-level trimming determines which portion of that source media will play. `setTrimOffset` specifies where playback starts within the source media. A trim offset of `2.0` skips the first two seconds of the video file. `setTrimLength` defines how much of the source media plays from the trim offset point. A trim length of 5.0 will play 5 seconds of the source. Combined with a trim offset of 2.0, the video plays from 2 seconds to 7 seconds of the original file. This trimming is completely non-destructive—the source video file remains unchanged. You can adjust trim values at any time to show different portions of the same media. Audio blocks use the same trim API (`setTrimOffset`, `setTrimLength`) as video blocks. The concepts are identical, though this guide focuses on video. For audio-specific workflows and examples, see the dedicated [Trim Audio guide](../trim-audio/). ### Block-Level Timing[#](#block-level-timing) Block-level timing is separate from trimming and controls when and how long a block exists in the timeline. `setTimeOffset` determines when the block becomes active in the composition timeline (useful for track-based layouts). `setDuration` controls how long the block appears in the timeline. The _trim_ controls what plays from the source media, while the _duration_ controls how long that playback appears in your timeline. If the duration exceeds the trim length and if looping is disabled, the trimmed portion will play once and then hold the last frame for the remaining duration. ### Common Use Cases[#](#common-use-cases) Trimming enables many video editing workflows: * **Remove unwanted segments** - Cut intro or outro portions to keep videos concise * **Extract key moments** - Isolate specific segments from longer source media * **Sync audio to video** - Trim audio and video independently for perfect alignment * **Create loops** - Trim to a specific length and enable loop mode for seamless repeating content * **Uniform compositions** - Batch trim multiple clips to consistent lengths ## Trimming Video via UI[#](#trimming-video-via-ui) ### Accessing Trim Controls[#](#accessing-trim-controls) When you select a video block in the timeline, CE.SDK reveals trim handles at the edges of the clip. These visual controls appear as draggable handles on the left and right sides of the video block in the timeline panel. The trimmed portion of your video is visually distinguished from the untrimmed regions on either side that represent portions of the source media that won’t play due to trim settings. This visual feedback makes it immediately clear which part of your video will be included in the final composition. ### Using Trim Handles[#](#using-trim-handles) We adjust trimming by dragging the handles. The left handle controls the trim offset—dragging it right increases the offset, skipping more of the beginning. Dragging left decreases the offset, including more from the start of the video. The right handle adjusts the trim length by changing where the video stops playing. Dragging left shortens the trim length, ending playback earlier. Dragging right extends it, playing more of the source media. For frame-accurate control, many CE.SDK interfaces provide numeric input fields where you can type exact time values in seconds. This precision is essential when you need to trim to specific frames or match exact durations. The icon on the trim handle turns into an outward-pointing arrow. ### Preview During Trimming[#](#preview-during-trimming) Scrubbing the playhead through your trimmed content shows exactly what will play. This immediate feedback loop makes it easy to find the perfect trim points visually. If your video extends beyond the page duration, out-of-bounds content is indicated with a blue overlay in the timeline and won’t be visible in the final output. ### Constraints and Limitations[#](#constraints-and-limitations) CE.SDK enforces a minimum trim duration to prevent creating zero-length or extremely short clips that could cause playback issues. If you try to drag handles closer than this minimum, the handle will resist further movement. When clips extend beyond page duration boundaries, grey visual indicators show which portions fall outside. While the video block may be longer than the page, only content within the page duration will appear in exports or final compositions. ## Programmatic Video Trimming[#](#programmatic-video-trimming) ### Prerequisites and Setup[#](#prerequisites-and-setup) For applications that need to apply trimming programmatically—whether for automation, batch processing, or dynamic user experiences—we start by setting up CE.SDK in Video mode with the proper configuration. ``` // Enable video editing features in CE.SDKcesdk.feature.enable('ly.img.video');cesdk.feature.enable('ly.img.timeline');cesdk.feature.enable('ly.img.playback'); ``` Video mode is required for trimming operations. Design mode doesn’t provide timeline-based editing capabilities, so we must use `createVideoScene()` to access trim functionality. ### Loading Video Resources[#](#loading-video-resources) Before accessing trim properties or setting trim values, we must load the video resource metadata using `forceLoadAVResource`. This critical step ensures CE.SDK has downloaded information about the video’s duration, frame rate, and other properties needed for accurate trimming. ``` // Pattern: Always load video resource before accessing trim properties// This ensures metadata (duration, frame rate, etc.) is availableawait engine.block.forceLoadAVResource(videoFill); // Now we can safely access video metadataconst totalDuration = engine.block.getDouble( videoFill, 'fill/video/totalDuration');// eslint-disable-next-line no-consoleconsole.log('Total video duration:', totalDuration, 'seconds'); ``` Skipping this step is a common source of errors. Without loading the resource first, trim operations may fail silently or produce unexpected results. Always await `forceLoadAVResource` before calling any trim methods. Once loaded, we can access metadata like `totalDuration` and `frameRate` from the video fill. This information helps us calculate valid trim ranges and ensures we don’t try to trim beyond the available media. ### Checking Trim Support[#](#checking-trim-support) Before applying trim operations, we verify that a block supports trimming. While video blocks typically support trimming, other block types like pages and scenes do not. ``` // Create a sample video block to demonstrate trim support checkingconst sampleVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight); // Get the video fill - trim operations are applied to the fill, not the blockconst videoFill = engine.block.getFill(sampleVideo); // Check if the fill supports trim operationsconst supportsTrim = engine.block.supportsTrim(videoFill);// eslint-disable-next-line no-consoleconsole.log('Video fill supports trim:', supportsTrim); // true for video fills // Select this block so timeline controls are visibleengine.block.setSelected(sampleVideo, true); ``` Checking support prevents runtime errors and allows you to build robust interfaces that only show trim controls for compatible blocks. Graphic blocks with video fills also support trimming, not just top-level video blocks. ### Trimming Video[#](#trimming-video) Once we’ve confirmed trim support and loaded the resource, we can apply trimming. Here we create a video block and trim it to start 2 seconds into the source media and play for 5 seconds. ``` // Pattern #1: Demonstrate Individual Before Combined// Create a separate video block for basic trim demonstrationconst basicTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight); // Get the fill to apply trim operationsconst basicTrimFill = engine.block.getFill(basicTrimVideo); // Load resource before trimmingawait engine.block.forceLoadAVResource(basicTrimFill); // Trim video to start at 2 seconds and play for 5 secondsengine.block.setTrimOffset(basicTrimFill, 2.0);engine.block.setTrimLength(basicTrimFill, 5.0); ``` The trim offset of 2.0 skips the first 2 seconds of the video. The trim length of 5.0 means exactly 5 seconds of video will play, starting from that offset point. So this video plays from the 2-second mark to the 7-second mark of the original file. ### Getting Current Trim Values[#](#getting-current-trim-values) We can retrieve the current trim settings to verify values, build UI controls, or make relative adjustments based on existing settings. ``` // Get current trim values to verify or modifyconst currentOffset = engine.block.getTrimOffset(basicTrimFill);const currentLength = engine.block.getTrimLength(basicTrimFill);// eslint-disable-next-line no-consoleconsole.log( `Basic trim - Offset: ${currentOffset}s, Length: ${currentLength}s`); ``` These getter methods return the current trim offset and length in seconds. Use them to populate UI inputs, calculate remaining media duration, or create undo/redo functionality in your application. ## Additional Trimming Techniques[#](#additional-trimming-techniques) ### Trimming with Block Duration[#](#trimming-with-block-duration) Take a look at this example to understand how trim length and block duration interact: ``` // Pattern #5: Progressive Complexity - coordinating trim with block duration// Create a video block demonstrating trim + duration coordinationconst durationTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight); const durationTrimFill = engine.block.getFill(durationTrimVideo);await engine.block.forceLoadAVResource(durationTrimFill); // Set trim: play portion from 3s to 8s (5 seconds of content)engine.block.setTrimOffset(durationTrimFill, 3.0);engine.block.setTrimLength(durationTrimFill, 5.0); // Set block duration: how long this block appears in the timeline// When duration equals trim length, the entire trimmed portion plays onceengine.block.setDuration(durationTrimVideo, 5.0); // eslint-disable-next-line no-consoleconsole.log( 'Trim+Duration - Block will play trimmed 5s exactly once in timeline'); ``` In this example, we trim the video to a 5-second segment (from 3s to 8s of the source) and set the block duration to exactly 5 seconds. This means the entire trimmed portion plays once, then stops. The block duration matches the trim length, so there’s no looping or holding on the last frame. If the block duration is less than the trim length, only part of the trimmed segment will play. If duration exceeds trim length without looping enabled, the video plays the trimmed portion once and holds on the last frame for the remaining time. ### Trimming with Looping[#](#trimming-with-looping) Looping allows a trimmed video segment to repeat seamlessly. We enable looping and set a block duration longer than the trim length to create repeating playback. ``` // Create a video block with trim + loopingconst loopingTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight); const loopingTrimFill = engine.block.getFill(loopingTrimVideo);await engine.block.forceLoadAVResource(loopingTrimFill); // Trim to a short 3-second segmentengine.block.setTrimOffset(loopingTrimFill, 1.0);engine.block.setTrimLength(loopingTrimFill, 3.0); // Enable looping so the 3-second segment repeatsengine.block.setLooping(loopingTrimFill, true); // Set duration longer than trim length - the trim will loop to fill itengine.block.setDuration(loopingTrimVideo, 9.0); // eslint-disable-next-line no-consoleconsole.log( 'Looping trim - 3s segment will loop 3 times to fill 9s duration'); ``` Here we trim to a 3-second segment and enable looping. The block duration of 9 seconds means this 3-second segment will loop 3 times to fill the entire duration. This technique is perfect for creating background loops, repeated motion graphics, or extending short clips. When looping is enabled, CE.SDK automatically restarts playback from the trim offset when it reaches the end of the trim length. ### Frame-Accurate Trimming[#](#frame-accurate-trimming) For precise editing, we often need to trim to specific frame boundaries rather than arbitrary time values. Using the video’s frame rate metadata, we can calculate exact frame-based trim points. ``` // Pattern #6: Descriptive naming - frame-accurate trim demonstration// Create a video block for frame-accurate trimmingconst frameAccurateTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight); const frameFill = engine.block.getFill(frameAccurateTrimVideo);await engine.block.forceLoadAVResource(frameFill); // Note: Frame rate is not directly accessible via the API// For this example, we'll assume a common frame rate of 30fpsconst frameRate = 30; // Calculate trim offset based on specific frame number// Example: Start at frame 60 for a 30fps video = 2.0 secondsconst startFrame = 60;const trimOffsetSeconds = startFrame / frameRate; // Trim for exactly 150 frames = 5.0 seconds at 30fpsconst trimFrames = 150;const trimLengthSeconds = trimFrames / frameRate; engine.block.setTrimOffset(frameFill, trimOffsetSeconds);engine.block.setTrimLength(frameFill, trimLengthSeconds); // eslint-disable-next-line no-consoleconsole.log( `Frame-accurate trim - Frame rate: ${frameRate}fps (assumed), Start frame: ${startFrame}, Duration: ${trimFrames} frames`); ``` We first retrieve the frame rate from the video fill metadata. Then we convert frame numbers to time offsets by dividing by the frame rate. Starting at frame 60 with a 30fps video gives us exactly 2.0 seconds. Trimming for 150 frames provides exactly 5.0 seconds of playback. This technique ensures frame-accurate edits, which is essential for professional video editing workflows. Remember that codec compression may affect true frame accuracy—for critical applications, test with your target codecs to verify precision. ### Batch Processing Multiple Videos[#](#batch-processing-multiple-videos) When working with multiple video clips that need consistent trimming, we can iterate through collections and apply the same trim settings programmatically. ``` // Pattern: Batch processing multiple video clips// Create multiple video blocks to demonstrate batch trimmingconst batchVideoUris = [ 'https://img.ly/static/ubq_video_samples/bbb.mp4', 'https://img.ly/static/ubq_video_samples/bbb.mp4', 'https://img.ly/static/ubq_video_samples/bbb.mp4']; const batchVideos = [];for (let i = 0; i < batchVideoUris.length; i++) { const batchVideo = await engine.block.addVideo( batchVideoUris[i], blockWidth, blockHeight ); batchVideos.push(batchVideo); // Get the fill for trim operations const batchFill = engine.block.getFill(batchVideo); // Load resource before trimming await engine.block.forceLoadAVResource(batchFill); // Apply consistent trim: first 4 seconds of each video engine.block.setTrimOffset(batchFill, 0.0); engine.block.setTrimLength(batchFill, 4.0); // Set consistent duration engine.block.setDuration(batchVideo, 4.0);} // eslint-disable-next-line no-consoleconsole.log('Batch trim - Applied consistent 4s trim to 3 video blocks'); ``` We create multiple video blocks and apply identical trim settings to each one. This ensures consistency across clips—perfect for creating video montages, multi-angle compositions, or any scenario where uniform clip lengths are required. When batch processing, always load each video’s resources before trimming. Don’t assume all videos have the same duration—check total duration to ensure your trim values don’t exceed available media. ## Trim vs Duration Interaction[#](#trim-vs-duration-interaction) ### How setDuration Affects Playback[#](#how-setduration-affects-playback) The relationship between trim length and block duration determines playback behavior. When block duration equals trim length, the video plays the trimmed portion exactly once. When duration is less than trim length, playback stops before the trimmed portion finishes. When duration exceeds trim length with looping disabled, the video plays once and holds on the last frame. With looping enabled, exceeding trim length causes the trimmed segment to repeat until the block duration is filled. This creates seamless loops as long as the content loops visually. ### Best Practices[#](#best-practices) For predictable behavior, always consider both trim and duration together. Set trim values first to define the source media segment you want. Then set duration to control timeline length. If you want the entire trimmed segment to play once, match duration to trim length. For looping content, enable looping before setting a longer duration. When building UIs, update both values together when users adjust trim handles. This prevents confusion about why a video isn’t playing the full trimmed length (duration too short) or why it’s holding on the last frame (duration too long without looping). ## Performance Considerations[#](#performance-considerations) CE.SDK’s video system is optimized for real-time editing, but understanding these performance factors helps you build responsive applications: * **Resource loading**: Use `forceLoadAVResource` judiciously. Loading resources has overhead, so batch loads when possible rather than loading repeatedly. * **Trim adjustments**: Changing trim values is lightweight—CE.SDK updates the playback range without reprocessing the video. You can adjust trim interactively without performance concerns. * **Mobile devices**: Video decoding is more expensive on mobile. Limit the number of simultaneous video blocks and consider lower resolution sources for editing (high resolution for export). * **Long videos**: Very long source videos (30+ minutes) may have slower seeking to trim offsets. Consider pre-cutting extremely long videos into shorter segments. Test your trim operations on target devices early in development to ensure acceptable performance for your users. ## Troubleshooting[#](#troubleshooting) ### Trim Not Applied[#](#trim-not-applied) If setting trim values has no visible effect, the most common cause is forgetting to await `forceLoadAVResource`. The resource must be loaded before trim values take effect. Always load resources first. Another possibility is confusing time offset with trim offset. `setTimeOffset` controls when the block appears in the timeline, while `setTrimOffset` controls where in the source media playback starts. Make sure you’re using the correct method. ### Incorrect Trim Calculation[#](#incorrect-trim-calculation) If trim values seem offset or produce unexpected results, verify you’re calculating based on the source media duration, not the block duration. Use `getTotalDuration` from the fill metadata to understand the available media length. Also check that you’re not exceeding the total available duration. Trim offset plus trim length should never exceed total duration. CE.SDK may clamp values automatically, but it’s better to validate before setting. ### Playback Beyond Trim Length[#](#playback-beyond-trim-length) If video plays past the intended trim length, check that block duration doesn’t exceed trim length. When duration is longer and looping is disabled, the video will hold on the last frame for the excess duration. Ensure looping is set correctly for your use case. If you want playback to stop at the trim length, set duration equal to trim length or enable looping. ### Audio/Video Desync[#](#audiovideo-desync) When trimming both audio and video independently, desynchronization can occur if offset and duration values aren’t coordinated carefully. Calculate both trim offsets to maintain the original relationship between audio and video timing. Consider the original sync point between audio and video in the source media. If they were perfectly synced at 0 seconds originally, maintaining the same offset difference preserves that sync. ### Frame-Accurate Trim Issues[#](#frame-accurate-trim-issues) If frame-accurate trimming doesn’t land on exact frames, remember that floating-point precision can cause tiny discrepancies. Round your calculated values to a reasonable precision (e.g., 3 decimal places). Also understand codec limitations. Variable frame rate videos don’t have perfectly uniform frame timing, so true frame accuracy may not be possible. Use constant frame rate sources for critical frame-accurate applications. ## API Reference[#](#api-reference) | Method | Description | Parameters | Returns | | --- | --- | --- | --- | | `forceLoadAVResource(id)` | Force load media resource metadata | `id: DesignBlockId` | `Promise` | | `setTrimOffset(id, offset)` | Set start point of media playback | `id: DesignBlockId, offset: number` | `void` | | `getTrimOffset(id)` | Get current trim offset | `id: DesignBlockId` | `number` | | `setTrimLength(id, length)` | Set duration of trimmed media | `id: DesignBlockId, length: number` | `void` | | `getTrimLength(id)` | Get current trim length | `id: DesignBlockId` | `number` | | `supportsTrim(id)` | Check if block supports trimming | `id: DesignBlockId` | `boolean` | | `setDuration(id, duration)` | Set block playback duration | `id: DesignBlockId, duration: number` | `void` | | `getDuration(id)` | Get block duration | `id: DesignBlockId` | `number` | | `setTimeOffset(id, offset)` | Set when block becomes active | `id: DesignBlockId, offset: number` | `void` | | `getTimeOffset(id)` | Get block time offset | `id: DesignBlockId` | `number` | | `setLooping(id, enabled)` | Enable/disable media looping | `id: DesignBlockId, enabled: boolean` | `void` | ### TypeScript Type Definitions[#](#typescript-type-definitions) * `DesignBlockId`: Unique identifier for design blocks * Time values measured in seconds (floating-point) * All trim/duration values are in timeline seconds (affected by playback rate) ## Best Practices[#](#best-practices-1) ### Workflow Recommendations[#](#workflow-recommendations) 1. Always `await forceLoadAVResource()` before accessing trim properties 2. Check `supportsTrim()` before applying trim operations 3. Coordinate trim length with block duration for predictable behavior 4. Use TypeScript for type safety with CE.SDK API 5. Preview trimmed content before final export 6. Validate trim values don’t exceed total media duration ### Code Organization[#](#code-organization) * Separate media loading from trim logic * Create helper functions for common trim patterns (e.g., `trimToFrames`, `trimToPercentage`) * Handle errors gracefully with try-catch blocks around `forceLoadAVResource` * Document complex trim calculations with comments explaining frame math ### Performance Optimization[#](#performance-optimization) * Avoid redundant `forceLoadAVResource` calls—load once, trim multiple times * Use appropriate preview quality settings during editing to maintain responsiveness * Test on target devices early to identify performance bottlenecks ## Next Steps[#](#next-steps) Now that you understand video trimming, explore related video editing features: * [Control Audio and Video](angular/create-video/control-daba54/) \- Master time offset, duration, and playback controls * [Export Video](angular/export-save-publish/export-82f968/) \- Export your trimmed video compositions * [Video Timeline Overview](angular/create-video/timeline-editor-912252/) \- Understand the complete timeline editing system --- [Source](https:/img.ly/docs/cesdk/angular/edit-video/transform-369f28) # Transform --- [Source](https:/img.ly/docs/cesdk/angular/edit-video/add-captions-f67565) # Add Captions ``` const scene = await engine.scene.createVideo();const page = engine.block.create('page');await engine.block.appendChild(scene, page);engine.block.setWidth(page, 1280);engine.block.setHeight(page, 720);engine.editor.setSettingBoolean('features/videoCaptionsEnabled', true); engine.block.setDuration(page, 20); const caption1 = engine.block.create('caption');engine.block.setString(caption1, 'caption/text', 'Caption text 1');const caption2 = engine.block.create('caption');engine.block.setString(caption2, 'caption/text', 'Caption text 2'); const captionBlocks = await engine.block.createCaptionsFromURI( 'https://example.com/captions.srt',); const captionTrack = engine.block.create('captionTrack');await engine.block.appendChild(page, captionTrack);await engine.block.appendChild(captionTrack, caption1);await engine.block.appendChild(captionTrack, caption2); const preset = await engine.asset.fetchAsset( 'ly.img.captionPresets', '//ly.img.captionPresets/neon');if (preset != null) { await engine.asset.applyToBlock( 'ly.img.captionPresets', preset, caption1 );} engine.block.setDuration(caption1, 3);engine.block.setDuration(caption2, 5); engine.block.setTimeOffset(caption1, 0);engine.block.setTimeOffset(caption2, 3); const fill = engine.block.getFill(caption1);engine.block.setColor(fill, 'fill/color', { r: 1, g: 0, b: 0, a: 1 }); await engine.block.exportVideo( page, 'video/mp4', progress => { console.log('Export progress:', progress); }, { duration: 20 },); ``` For video scenes, open captions can be added in CE.SDK. These allow to follow the content without the audio. Two blocks are available for this. The `Caption` blocks hold the text of individual captions and the `CaptionTrack` is an optional structuring block to hold the `Caption` blocks, e.g., all captions for one video. The `"playback/timeOffset"` property of each caption block controls when the caption should be shown and the `"playback/duration"` property how long the caption should be shown. Usually, the captions do not overlap. As the playback time of the page progresses, the corresponding caption is shown. With the `"caption/text"` property, the text of the caption can be set. In addition, all text properties are also available for captions, e.g., to change the font, the font size, or the alignment. Position, size, and style changes on caption blocks are automatically synced across all caption blocks. Finally, the whole page can be exported as a video file using the `block.exportVideo` function. ## A Note on Browser Support[#](#a-note-on-browser-support) Video mode heavily relies on modern features like web codecs. A detailed list of supported browser versions can be found in our [Supported Browsers](angular/browser-support-28c1b0/) . Please also take note of [possible restrictions based on the host platform](angular/compatibility-139ef9/) browsers are running on. ## Creating a Video Scene[#](#creating-a-video-scene) First, we create a scene that is set up for captions editing by calling the `scene.createVideo()` API. Then we create a page, add it to the scene and define its dimensions. This page will hold our composition. ``` const scene = await engine.scene.createVideo();const page = engine.block.create('page');await engine.block.appendChild(scene, page);engine.block.setWidth(page, 1280);engine.block.setHeight(page, 720);engine.editor.setSettingBoolean('features/videoCaptionsEnabled', true); ``` ## Setting Page Duration[#](#setting-page-duration) Next, we define the duration of the page using the `setDuration(block: number, duration: number): void` API to be 20 seconds long. This will be the total duration of our exported captions in the end. ``` engine.block.setDuration(page, 20); ``` ## Adding Captions[#](#adding-captions) In this example, we want to show two captions, one after the other. For this, we create two caption blocks. ``` const caption1 = engine.block.create('caption');engine.block.setString(caption1, 'caption/text', 'Caption text 1');const caption2 = engine.block.create('caption');engine.block.setString(caption2, 'caption/text', 'Caption text 2'); ``` As an alternative to manually creating the captions, changing the text, and adjusting the timings, the captions can also be loaded from a caption file, i.e., an SRT or VTT file with the `createCaptionsFromURI` API. This return a list of caption blocks, with the parsed texts and timings. These can be added to a caption track as well. ``` const captionBlocks = await engine.block.createCaptionsFromURI( 'https://example.com/captions.srt',); ``` ## Creating a Captions Track[#](#creating-a-captions-track) While we could add the two blocks directly to the page, we can alternatively also use the `captionTrack` block to group them. Caption tracks themselves cannot be selected directly by clicking on the canvas, nor do they have any visual representation. We create a `captionTrack` block, add it to the page and add both captions in the order in which they should play as the track’s children. The dimensions of a `captionTrack` are always derived from the dimensions of its children, so you should not call the `setWidth` or `setHeight` APIs on a track, but on its children instead. ``` const captionTrack = engine.block.create('captionTrack');await engine.block.appendChild(page, captionTrack);await engine.block.appendChild(captionTrack, caption1);await engine.block.appendChild(captionTrack, caption2); ``` ## Applying Caption Presets[#](#applying-caption-presets) Caption presets provide pre-configured styles that can be quickly applied to caption blocks. The CE.SDK includes a built-in library of caption presets with various visual styles. We can fetch a preset by its ID from the `ly.img.captionPresets` asset source and apply it to any caption block. Since caption styling is automatically synced across all caption blocks in the scene, applying a preset to one caption will style all of them. ``` const preset = await engine.asset.fetchAsset( 'ly.img.captionPresets', '//ly.img.captionPresets/neon');if (preset != null) { await engine.asset.applyToBlock( 'ly.img.captionPresets', preset, caption1 );} ``` ## Modifying Captions[#](#modifying-captions) By default, each caption block has a duration of 3 seconds after it is created. If we want to show it on the page for a different amount of time, we can use the `setDuration` API. ``` engine.block.setDuration(caption1, 3);engine.block.setDuration(caption2, 5); ``` The position and size of the captions is automatically synced across all captions that are attached to the scene. Therefore, changes only need to be made on one of the caption blocks. ``` engine.block.setTimeOffset(caption1, 0);engine.block.setTimeOffset(caption2, 3); ``` The styling of the captions is also automatically synced across all captions that are attached to the scene. For example, changing the text color to red on the first block, changes it on all caption blocks. ``` const fill = engine.block.getFill(caption1);engine.block.setColor(fill, 'fill/color', { r: 1, g: 0, b: 0, a: 1 }); ``` ## Exporting Video[#](#exporting-video) You can start exporting the entire page as a captions file by calling `exportVideo()`. The encoding process will run in the background. You can get notified about the progress of the encoding process by the `progressCallback`. It will be called whenever another frame has been encoded. Since the encoding process runs in the background the engine will stay interactive. So, you can continue to use the engine to manipulate the scene. Please note that these changes won’t be visible in the exported captions file because the scene’s state has been frozen at the start of the export. ``` await engine.block.exportVideo( page, 'video/mp4', progress => { console.log('Export progress:', progress); }, { duration: 20 },); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.createVideo(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); engine.block.setWidth(page, 1280); engine.block.setHeight(page, 720); engine.block.setDuration(page, 20); const caption1 = engine.block.create('caption'); engine.block.setString(caption1, 'caption/text', 'Caption text 1'); const caption2 = engine.block.create('caption'); engine.block.setString(caption2, 'caption/text', 'Caption text 2'); const captionTrack = engine.block.create('captionTrack'); engine.block.appendChild(page, captionTrack); engine.block.appendChild(captionTrack, caption1); engine.block.appendChild(captionTrack, caption2); // Apply a caption preset for quick styling const preset = await engine.asset.fetchAsset( 'ly.img.captionPresets', '//ly.img.captionPresets/neon' ); if (preset != null) { await engine.asset.applyToBlock( 'ly.img.captionPresets', preset, caption1 ); } engine.block.setDuration(caption1, 3); engine.block.setDuration(caption2, 5); engine.block.setTimeOffset(caption1, 0); engine.block.setTimeOffset(caption2, 3); // Captions can also be loaded from a caption file, i.e., from SRT and VTT files. // The text and timing of the captions are read from the file. const captions = await api.block.createCaptionsFromURI( 'https://img.ly/static/examples/captions.srt', ); for (let i = 0; i < captions.length; i++) { api.block.appendChild(captionTrack, captions[i]); } // Once the captions are added to the scene, the position and size are synced with all caption blocks in the scene so only needs to be set once. engine.block.setPositionX(caption1, 0.05); engine.block.setPositionXMode(caption1, 'Percent'); engine.block.setPositionY(caption1, 0.8); engine.block.setPositionYMode(caption1, 'Percent'); engine.block.setHeight(caption1, 0.15); engine.block.setHeightMode(caption1, 'Percent'); engine.block.setWidth(caption1, 0.9); engine.block.setWidthMode(caption1, 'Percent'); // The style is synced with all caption blocks in the scene so only needs to be set once. engine.block.setColor(caption1, 'fill/solid/color', { r: 0.9, g: 0.9, b: 0.0, a: 1.0, }); engine.block.setBool(caption1, 'dropShadow/enabled', true); engine.block.setColor(caption1, 'dropShadow/color', { r: 0.0, g: 0.0, b: 0.0, a: 0.8, }); /* Export page as mp4 video. */ const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames, ); }, }); /* Download blob. */ const anchor = document.createElement('a'); anchor.href = URL.createObjectURL(blob); anchor.download = 'exported-video.mp4'; anchor.click();}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/edit-image/vectorize-2b4c7f) # Vectorize This plugin introduces vectorization for the CE.SDK editor, leveraging the power of the [vectorizer library](https://www.npmjs.com/package/@imgly/vectorizer). It integrates seamlessly with CE.SDK, providing users with an efficient tool to vectorize images directly in the browser with ease and no additional costs or privacy concerns. ## Installation[#](#installation) You can install the plugin via npm or yarn. Use the following commands to install the package: ``` yarn add @imgly/plugin-vectorizer-webnpm install @imgly/plugin-vectorizer-web ``` ## Usage[#](#usage) Adding the plugin to CE.SDK will automatically register a vectorizer canvas menu component that can be rendered for every block with an image fill. To automatically add this button to the canvas menu, please use the `locations` configuration option. ``` import CreativeEditorSDK from '@cesdk/cesdk-js';import VectorizerPlugin from '@imgly/plugin-vectorizer-web'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY',}; const cesdk = await CreativeEditorSDK.create(container, config);await cesdk.addDefaultAssetSources(), await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true });, await cesdk.unstable_addPlugin( VectorizerPlugin({ // This will automatically prepend a button to the canvas menu ui: { locations: 'canvasMenu' }, }), ); await cesdk.createDesignScene(); ``` ## Configuration[#](#configuration) ### Adding Canvas Menu Component[#](#adding-canvas-menu-component) After adding the plugin to CE.SDK, it will register a component that can be used inside the canvas menu. It is not added by default but can be included using the following configuration: ``` // Either pass a location via the configuration object, ...VectorizerPlugin({ ui: { locations: 'canvasMenu' },}); ``` ### Further Configuration Options[#](#further-configuration-options) #### Timeout[#](#timeout) The duration of the vectorization process depends on the complexity of the input image. For highly detailed images, it can take a considerable amount of time. A timeout is configured to abort the process after 30 seconds by default, but this can be customized using the `timeout` option. ``` VectorizerPlugin({ // Reduce the timeout to 5s timeout: 5000,}); ``` #### Threshold for Group Creation[#](#threshold-for-group-creation) For simple vectorized images, using groups makes a lot of sense. Single paths can be selected, allowing the user to change the color, for instance. However, once the number of paths exceeds a certain threshold, the user experience deteriorates significantly as it becomes difficult to select individual paths. Based on the use case you can adapt this threshold (default is 500). ``` VectorizerPlugin({ // Reducing the maximal number of groups to 200 groupingThreshold: 200,}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/edit-image/transform-9d189b) # Transform Image transformations in CreativeEditor SDK (CE.SDK) allow you to adjust the size, orientation, and framing of images to better fit your designs. Whether you need to crop out unnecessary areas, rotate an image for better composition, or resize assets for different outputs, transformations provide powerful tools for fine-tuning visuals. You can perform transformations both through the built-in user interface and programmatically using the SDK’s APIs, giving you flexibility depending on your workflow. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Available Transformations[#](#available-transformations) CE.SDK supports several types of image transformations: * **Crop**: Trim an image to focus on a specific area or fit a desired aspect ratio. * **Move**: Position an image on the canvas using either absolute units or percentages. * **Rotate**: Rotate the image by a custom degree to adjust orientation. * **Resize**: Change the width and height independently to fit layout requirements. * **Scale**: Uniformly enlarge or reduce the size of the image while maintaining its aspect ratio. * **Flip**: Mirror the image horizontally or vertically to create a reversed version. Each transformation can be used individually or combined for more complex edits. ## Applying Transformations[#](#applying-transformations) ### UI-Based Transformation[#](#ui-based-transformation) You can apply transformations directly in the CE.SDK user interface. The editor provides intuitive controls for cropping, rotating, resizing, scaling, and flipping images. This makes it easy for users to visually adjust images without writing any code. ### Programmatic Transformation[#](#programmatic-transformation) Developers can also apply transformations programmatically, using the SDK’s API. This allows for dynamic image adjustments based on application logic, user input, or automated processes. ## Combining Transformations[#](#combining-transformations) CE.SDK lets you chain multiple transformations together in a single operation. For example, you might scale an image before cropping it to ensure the best possible resolution. When combining transformations, consider applying scaling first to avoid quality loss during cropping or rotation. Structuring transformations thoughtfully helps maintain visual clarity and optimize output quality. ## Guides[#](#guides) --- [Source](https:/img.ly/docs/cesdk/angular/edit-image/replace-colors-6ede17) # Replace Colors Transform images by swapping specific colors using the Recolor effect or remove backgrounds with the Green Screen effect in CE.SDK. ![Replace Colors example showing color replacement and background removal](/docs/cesdk/_astro/browser.hero.CiWZDZK-_ZLQEXi.webp) 8 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-edit-image-replace-colors-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-edit-image-replace-colors-browser) CE.SDK offers two color replacement effects. The **Recolor** effect swaps one color for another while preserving image details. The **Green Screen** effect removes background colors with transparency. Both effects provide precise control over color matching, edge smoothness, and intensity. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json';import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Replace Colors Guide * * Demonstrates color replacement using Recolor and Green Screen effects: * - Using the built-in effects UI * - Creating and applying Recolor effects * - Creating and applying Green Screen effects * - Configuring effect properties * - Managing multiple effects */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Initialize CE.SDK with Design mode and load asset sources await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page dimensions engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Enable effects in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); // Enable all effects including recolor and green screen // Calculate responsive grid layout for 6 examples const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Use sample images for demonstrations const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const blockSize = { width: blockWidth, height: blockHeight }; // Create a Recolor effect to swap red colors to blue const block1 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block1); const recolorEffect = engine.block.createEffect('recolor'); engine.block.setColor(recolorEffect, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); // Red source color engine.block.setColor(recolorEffect, 'effect/recolor/toColor', { r: 0.0, g: 0.5, b: 1.0, a: 1.0 }); // Blue target color engine.block.appendEffect(block1, recolorEffect); // Select this block to show the effects panel engine.block.setSelected(block1, true); // Configure color matching precision for Recolor effect const block2 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block2); const recolorEffect2 = engine.block.createEffect('recolor'); engine.block.setColor(recolorEffect2, 'effect/recolor/fromColor', { r: 0.8, g: 0.6, b: 0.4, a: 1.0 }); // Skin tone source engine.block.setColor(recolorEffect2, 'effect/recolor/toColor', { r: 0.3, g: 0.7, b: 0.3, a: 1.0 }); // Green tint // Adjust color match tolerance (0-1, higher = more inclusive) engine.block.setFloat(recolorEffect2, 'effect/recolor/colorMatch', 0.3); // Adjust brightness match tolerance engine.block.setFloat( recolorEffect2, 'effect/recolor/brightnessMatch', 0.2 ); // Adjust edge smoothness engine.block.setFloat(recolorEffect2, 'effect/recolor/smoothness', 0.1); engine.block.appendEffect(block2, recolorEffect2); // Create a Green Screen effect to remove green backgrounds const block3 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block3); const greenScreenEffect = engine.block.createEffect('green_screen'); // Specify the color to remove (green) engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.appendEffect(block3, greenScreenEffect); // Fine-tune Green Screen removal parameters const block4 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block4); const greenScreenEffect2 = engine.block.createEffect('green_screen'); engine.block.setColor(greenScreenEffect2, 'effect/green_screen/fromColor', { r: 0.2, g: 0.8, b: 0.3, a: 1.0 }); // Specific green shade // Adjust color match tolerance engine.block.setFloat( greenScreenEffect2, 'effect/green_screen/colorMatch', 0.4 ); // Adjust edge smoothness for cleaner removal engine.block.setFloat( greenScreenEffect2, 'effect/green_screen/smoothness', 0.2 ); // Reduce color spill from green background engine.block.setFloat(greenScreenEffect2, 'effect/green_screen/spill', 0.5); engine.block.appendEffect(block4, greenScreenEffect2); // Demonstrate managing multiple effects on a block const block5 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block5); // Add multiple effects to the same block const recolor1 = engine.block.createEffect('recolor'); engine.block.setColor(recolor1, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setColor(recolor1, 'effect/recolor/toColor', { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }); engine.block.appendEffect(block5, recolor1); const recolor2 = engine.block.createEffect('recolor'); engine.block.setColor(recolor2, 'effect/recolor/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.setColor(recolor2, 'effect/recolor/toColor', { r: 1.0, g: 0.5, b: 0.0, a: 1.0 }); engine.block.appendEffect(block5, recolor2); // Get all effects on the block const effects = engine.block.getEffects(block5); // eslint-disable-next-line no-console console.log('Number of effects:', effects.length); // 2 // Disable the first effect without removing it engine.block.setEffectEnabled(effects[0], false); // Check if effect is enabled const isEnabled = engine.block.isEffectEnabled(effects[0]); // eslint-disable-next-line no-console console.log('First effect enabled:', isEnabled); // false // Apply consistent color replacement across multiple blocks const block6 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block6); // Find all image blocks in the scene const allBlocks = engine.block.findByType('//ly.img.ubq/graphic'); // Apply a consistent recolor effect to each block allBlocks.forEach((blockId) => { // Skip if block already has effects if (engine.block.getEffects(blockId).length > 0) { return; } const batchRecolor = engine.block.createEffect('recolor'); engine.block.setColor(batchRecolor, 'effect/recolor/fromColor', { r: 0.8, g: 0.7, b: 0.6, a: 1.0 }); engine.block.setColor(batchRecolor, 'effect/recolor/toColor', { r: 0.6, g: 0.7, b: 0.9, a: 1.0 }); engine.block.setFloat(batchRecolor, 'effect/recolor/colorMatch', 0.25); engine.block.appendEffect(blockId, batchRecolor); }); // Position all blocks in a grid layout const blocks = [block1, block2, block3, block4, block5, block6]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Zoom to show all blocks engine.block.setSelected(block1, true); cesdk.engine.scene.zoomToBlock(page); }} export default Example; ``` This guide shows how to enable the built-in effects UI for interactive color replacement and apply effects programmatically using the block API. ## Using the Built-in Effects UI[#](#using-the-built-in-effects-ui) ### Enable Effects Panel[#](#enable-effects-panel) We enable the effects feature using CE.SDK’s Feature API. The effects panel appears in the inspector when users select a compatible graphic block. ``` // Enable effects in the inspector panel using the Feature APIcesdk.feature.enable('ly.img.effect'); // Enable all effects including recolor and green screen ``` Enabling `ly.img.effect` makes all effect options available in the inspector panel, including Recolor and Green Screen. ### User Workflow[#](#user-workflow) With effects enabled, users can replace colors through the inspector panel: 1. **Select an image block** - Click an image or graphic block on the canvas 2. **Open inspector** - The inspector shows available options for the selected element 3. **Find effects section** - Scroll to the effects section 4. **Choose Recolor or Green Screen** - Click the desired effect 5. **Select colors** - Use the color picker to specify source and target colors 6. **Adjust parameters** - Fine-tune color matching, smoothness, and intensity 7. **Toggle effects** - Enable or disable effects to compare results Users can experiment with color replacements and see results immediately. ## Programmatic Color Replacement[#](#programmatic-color-replacement) ### Initialize CE.SDK[#](#initialize-cesdk) To apply color replacement programmatically, we set up CE.SDK with the proper configuration. ``` // Initialize CE.SDK with Design mode and load asset sourcesawait cesdk.addDefaultAssetSources();await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true});await cesdk.createDesignScene(); const engine = cesdk.engine;const page = engine.block.findByType('page')[0]; // Set page dimensionsengine.block.setWidth(page, 800);engine.block.setHeight(page, 600); const pageWidth = engine.block.getWidth(page);const pageHeight = engine.block.getHeight(page); ``` This initializes CE.SDK with the effects panel enabled, providing both UI and API access. ### Creating and Applying Recolor Effects[#](#creating-and-applying-recolor-effects) The Recolor effect swaps one color for another throughout an image. We create a Recolor effect using `engine.block.createEffect('recolor')` and specify the source and target colors. ``` // Create a Recolor effect to swap red colors to blueconst block1 = await engine.block.addImage(imageUri, { size: blockSize });engine.block.appendChild(page, block1); const recolorEffect = engine.block.createEffect('recolor');engine.block.setColor(recolorEffect, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0}); // Red source colorengine.block.setColor(recolorEffect, 'effect/recolor/toColor', { r: 0.0, g: 0.5, b: 1.0, a: 1.0}); // Blue target colorengine.block.appendEffect(block1, recolorEffect); // Select this block to show the effects panelengine.block.setSelected(block1, true); ``` The Recolor effect identifies pixels matching the source color (fromColor) and replaces them with the target color (toColor). Color values use RGBA format with values from 0.0 to 1.0. The example code uses the `engine.block.addImage()` convenience API. This simplifies image block creation compared to manually constructing graphic blocks with image fills. ### Configuring Color Matching[#](#configuring-color-matching) We adjust the matching tolerance and smoothness parameters to control how precisely colors must match before replacement. ``` // Configure color matching precision for Recolor effectconst block2 = await engine.block.addImage(imageUri, { size: blockSize });engine.block.appendChild(page, block2); const recolorEffect2 = engine.block.createEffect('recolor');engine.block.setColor(recolorEffect2, 'effect/recolor/fromColor', { r: 0.8, g: 0.6, b: 0.4, a: 1.0}); // Skin tone sourceengine.block.setColor(recolorEffect2, 'effect/recolor/toColor', { r: 0.3, g: 0.7, b: 0.3, a: 1.0}); // Green tint// Adjust color match tolerance (0-1, higher = more inclusive)engine.block.setFloat(recolorEffect2, 'effect/recolor/colorMatch', 0.3);// Adjust brightness match toleranceengine.block.setFloat( recolorEffect2, 'effect/recolor/brightnessMatch', 0.2);// Adjust edge smoothnessengine.block.setFloat(recolorEffect2, 'effect/recolor/smoothness', 0.1);engine.block.appendEffect(block2, recolorEffect2); ``` The Recolor effect provides these parameters: * **colorMatch** (0-1) - How closely colors must match the source. Lower values match exact colors, higher values match broader ranges * **brightnessMatch** (0-1) - Tolerance for brightness variations * **smoothness** (0-1) - Edge blending to reduce artifacts These parameters help handle images where colors vary due to lighting, shadows, or compression. ### Creating and Applying Green Screen Effects[#](#creating-and-applying-green-screen-effects) The Green Screen effect removes backgrounds by making specific colors transparent. ``` // Create a Green Screen effect to remove green backgroundsconst block3 = await engine.block.addImage(imageUri, { size: blockSize });engine.block.appendChild(page, block3); const greenScreenEffect = engine.block.createEffect('green_screen');// Specify the color to remove (green)engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0});engine.block.appendEffect(block3, greenScreenEffect); ``` The Green Screen effect identifies pixels matching the specified color (fromColor) and makes them transparent. This works best with solid-color backgrounds like green screens or blue screens. ### Fine-Tuning Green Screen Removal[#](#fine-tuning-green-screen-removal) We adjust the color matching tolerance, edge smoothness, and spill suppression parameters. ``` // Fine-tune Green Screen removal parametersconst block4 = await engine.block.addImage(imageUri, { size: blockSize });engine.block.appendChild(page, block4); const greenScreenEffect2 = engine.block.createEffect('green_screen');engine.block.setColor(greenScreenEffect2, 'effect/green_screen/fromColor', { r: 0.2, g: 0.8, b: 0.3, a: 1.0}); // Specific green shade// Adjust color match toleranceengine.block.setFloat( greenScreenEffect2, 'effect/green_screen/colorMatch', 0.4);// Adjust edge smoothness for cleaner removalengine.block.setFloat( greenScreenEffect2, 'effect/green_screen/smoothness', 0.2);// Reduce color spill from green backgroundengine.block.setFloat(greenScreenEffect2, 'effect/green_screen/spill', 0.5);engine.block.appendEffect(block4, greenScreenEffect2); ``` The Green Screen effect provides these parameters: * **colorMatch** (0-1) - Tolerance for color variations in the background * **smoothness** (0-1) - Edge feathering for natural transitions * **spill** (0-1) - Reduces color spill from the background onto foreground objects These parameters help create clean composites without harsh edges or color artifacts. ## Managing Multiple Effects[#](#managing-multiple-effects) We can apply multiple color replacement effects to the same block. CE.SDK maintains an effect stack for each block, applying effects in the order they were added. ``` // Demonstrate managing multiple effects on a blockconst block5 = await engine.block.addImage(imageUri, { size: blockSize });engine.block.appendChild(page, block5); // Add multiple effects to the same blockconst recolor1 = engine.block.createEffect('recolor');engine.block.setColor(recolor1, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0});engine.block.setColor(recolor1, 'effect/recolor/toColor', { r: 0.0, g: 0.0, b: 1.0, a: 1.0});engine.block.appendEffect(block5, recolor1); const recolor2 = engine.block.createEffect('recolor');engine.block.setColor(recolor2, 'effect/recolor/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0});engine.block.setColor(recolor2, 'effect/recolor/toColor', { r: 1.0, g: 0.5, b: 0.0, a: 1.0});engine.block.appendEffect(block5, recolor2); // Get all effects on the blockconst effects = engine.block.getEffects(block5);// eslint-disable-next-line no-consoleconsole.log('Number of effects:', effects.length); // 2 // Disable the first effect without removing itengine.block.setEffectEnabled(effects[0], false); // Check if effect is enabledconst isEnabled = engine.block.isEffectEnabled(effects[0]);// eslint-disable-next-line no-consoleconsole.log('First effect enabled:', isEnabled); // false ``` Effect management capabilities: * **Get effects** - Retrieve all effects with `engine.block.getEffects()` * **Enable/disable** - Toggle effects with `engine.block.setEffectEnabled()` without removing them * **Check status** - Query effect state with `engine.block.isEffectEnabled()` * **Remove effects** - Delete effects by index with `engine.block.removeEffect()` Disabling effects is useful for before/after comparisons or performance optimization. ## Batch Processing Multiple Images[#](#batch-processing-multiple-images) We can loop through all image blocks in a scene and apply the same effect configuration to each. ``` // Apply consistent color replacement across multiple blocksconst block6 = await engine.block.addImage(imageUri, { size: blockSize });engine.block.appendChild(page, block6); // Find all image blocks in the sceneconst allBlocks = engine.block.findByType('//ly.img.ubq/graphic'); // Apply a consistent recolor effect to each blockallBlocks.forEach((blockId) => { // Skip if block already has effects if (engine.block.getEffects(blockId).length > 0) { return; } const batchRecolor = engine.block.createEffect('recolor'); engine.block.setColor(batchRecolor, 'effect/recolor/fromColor', { r: 0.8, g: 0.7, b: 0.6, a: 1.0 }); engine.block.setColor(batchRecolor, 'effect/recolor/toColor', { r: 0.6, g: 0.7, b: 0.9, a: 1.0 }); engine.block.setFloat(batchRecolor, 'effect/recolor/colorMatch', 0.25); engine.block.appendEffect(blockId, batchRecolor);}); ``` Batch processing use cases: * **Product variations** - Generate multiple color variants * **Brand consistency** - Apply consistent color corrections * **Automated workflows** - Process multiple images with the same adjustments The `engine.block.findByType()` method locates all graphic blocks in the scene. ## Troubleshooting[#](#troubleshooting) Common issues and solutions when working with color replacement effects: **Effect not visible** * Verify the effect is enabled with `engine.block.isEffectEnabled()` * Check that the effect is attached to the correct block using `engine.block.getEffects()` * Ensure the block type supports effects with `engine.block.supportsEffects()` **Wrong colors being replaced** * Decrease `colorMatch` for more precise matching * Increase `colorMatch` to capture broader color ranges * Adjust `brightnessMatch` for Recolor effects with lighting variations **Harsh edges or artifacts** * Increase `smoothness` to blend edges more gradually * For Green Screen, adjust `spill` to reduce color contamination * Use higher resolution images for smoother results **Performance issues** * Limit active effects on a single block * Use `engine.block.setEffectEnabled(false)` to disable effects during editing * Process effects sequentially rather than simultaneously ## API Reference[#](#api-reference) | Method | Category | Purpose | | --- | --- | --- | | `engine.block.createEffect()` | Block | Create a new Recolor or Green Screen effect block | | `engine.block.appendEffect()` | Block | Attach an effect to an image block | | `engine.block.insertEffect()` | Block | Insert an effect at a specific position in the effect stack | | `engine.block.removeEffect()` | Block | Remove an effect from a block by index | | `engine.block.getEffects()` | Block | Get all effects attached to a block | | `engine.block.supportsEffects()` | Block | Check if a block can render effects | | `engine.block.setColor()` | Block | Set color properties on effect blocks | | `engine.block.getColor()` | Block | Get color properties from effect blocks | | `engine.block.setFloat()` | Block | Set numeric effect properties | | `engine.block.getFloat()` | Block | Get numeric effect properties | | `engine.block.setEffectEnabled()` | Block | Enable or disable an effect | | `engine.block.isEffectEnabled()` | Block | Check if an effect is enabled | | `engine.block.findByType()` | Block | Find all blocks of a specific type | ## Next Steps[#](#next-steps) * [Apply Filters and Effects](angular/filters-and-effects/apply-2764e4/) — Explore other visual effects available in CE.SDK * [Export Designs](angular/export-save-publish/export-82f968/) — Save your color-replaced images in various formats --- [Source](https:/img.ly/docs/cesdk/angular/edit-image/remove-bg-9dfcf7) # Remove Background from Images The **Remove Background** feature in CE.SDK allows developers to automatically remove the background from an image, making it easy to create cutouts and overlays. Background removal can be applied in two ways: * **Using the UI**: A user can remove the background with a simple button click. * **Programmatically**: Developers can remove backgrounds using the SDK’s API. Currently, background removal is **only supported for images**. If you’re looking for background removal for videos, please contact us. This feature runs **entirely in the browser**, leveraging WebAssembly (WASM) and WebGL/WebGPU, so no server component is required. This ensures **fast processing** and **enhanced privacy**, as images remain on the client side. Alternatively, you can also remove an image’s background using **chroma keying**. [ Launch Web Demo ](https://img.ly/showcases/cesdk/background-removal/web) ## How Background Removal Works[#](#how-background-removal-works) The background removal feature uses the same technology found in [`@imgly/background-removal`](https://www.npmjs.com/package/@imgly/background-removal), developed by [IMG.LY](http://img.ly/). * It is powered by a **neural network-based model**, originally implemented in **PyTorch** and later converted to **ONNX** for compatibility with web applications. * The model executes **entirely in the browser** using **WebAssembly (WASM)** and **WebGL/WebGPU**, eliminating the need for external servers. * The optimization process reduces model size to improve performance and minimize load times, with support for **fp16 (16-bit floating point)** and **QUINT8 (Quantized 8-bit)** versions for efficient execution. ## Removing a Background Programmatically[#](#removing-a-background-programmatically) Developers can remove an image’s background programmatically using the [`@imgly/background-removal`](https://www.npmjs.com/package/@imgly/background-removal) package. Install the package via npm or yarn, along with [`onnxruntime-web`](https://www.npmjs.com/package/onnxruntime-web) package as a peer dependency, as follows: Terminal window ``` yarn add @imgly/background-removal onnxruntime-web@1.21.0npm install @imgly/background-removal onnxruntime-web@1.21.0 ``` The following example shows how to remove the background from an image block on the canvas and export it as a PNG file: ``` import { removeBackground } from '@imgly/background-removal'; // Extract the blob from the image blockconst blob = await engine.block.export(imageBlockId, { mimeType: 'image/png' }); // Remove the background// Alternatively, you can also pass the image URL or ArrayBuffer as an image sourceconst newBlob = await removeBackground(blob); // Convert the blob to a URL to display the new imageconst url = URL.createObjectURL(blob); // Or download the new imageconst anchor = document.createElement('a');anchor.href = URL.createObjectURL(newBlob);anchor.download = 'export.png';anchor.click(); ``` You can pass a `Config` object to the `removeBackground` function for advanced configuration. See the [documentation](https://www.npmjs.com/package/@imgly/background-removal) for more details. ## Removing a Background Using the UI[#](#removing-a-background-using-the-ui) IMG.LY offers an [official plugin for CE.SDK](https://www.npmjs.com/package/@imgly/plugin-background-removal-web) that allows the seamless integration of the [background-removal-js library](https://github.com/imgly/background-removal-js) into the editor’s user interface. Use one of the following commands to install the plugin: Terminal window ``` yarn add @imgly/plugin-background-removal-web onnxruntime-web@1.21.0npm install @imgly/plugin-background-removal-web onnxruntime-web@1.21.0 ``` To easily enable background removal, you can add a button in the Canvas Menu that is shown whenever any image block is selected. The following example shows how to integrate this functionality: ``` import CreativeEditorSDK from '@cesdk/cesdk-js';// Import the background removal pluginimport BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY',}; const cesdk = await CreativeEditorSDK.create(container, config);await cesdk.addDefaultAssetSources();await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true,});await cesdk.addPlugin( BackgroundRemovalPlugin({ ui: { locations: ['canvasMenu'], }, }),);await cesdk.createDesignScene(); ``` Please note that the background removal plugin depends on a correctly configured upload setting. ‘local’ will work for local testing, but in production you will need something stable. For further information, please take a look at the [Upload Images](angular/import-media/from-local-source/user-upload-c6c7d9/) guide. Once the editor is initialized, users can select an image and click the **BG Removal** button to process it automatically. ![A BG Removal button added to the Canvas Menu](/docs/cesdk/_astro/screenshot-bg-removal-button-v1.43.0.CwNZXOB3_Zlu7Pl.webp) For additional UI configuration options, refer to the [plugin documentation](https://www.npmjs.com/package/@imgly/plugin-background-removal-web), , which provides details on customization. ## Limits and Considerations[#](#limits-and-considerations) While the background removal feature is optimized for speed and efficiency, keep the following considerations in mind: * **Processing large images** may take longer, especially on lower-powered devices. * The performance depends on the **user’s hardware**, for example, whether the browser supports WebGL/WebGPU optimizations. * Background removal works best with **high-contrast foregrounds**, so images with low contrast between subject and background may yield less accurate results. * Currently, background removal is only available for **static images**. * Since the asset files are fetched on demand at the first run of the background removal process, it takes longer than its successive runs. This can be mitigated by **preloading the assets**. For best results, use **optimized input images** and consider adjusting **contrast and lighting** before processing. --- [Source](https:/img.ly/docs/cesdk/angular/edit-image/overview-5249ea) # Image Editor SDK The CreativeEditor SDK (CE.SDK) offers powerful image editing capabilities designed for seamless integration into your application. You can give your users full control through an intuitive user interface or implement fully automated workflows via the SDK’s programmatic API. Image editing with CE.SDK is fully client-side, ensuring fast performance, data privacy, and offline compatibility. Whether you’re building a photo editor, design tool, or automation workflow, CE.SDK provides everything you need—plus the flexibility to integrate AI tools for tasks like adding or removing objects, swapping backgrounds, or creating variants. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Core Capabilities[#](#core-capabilities) CE.SDK includes a wide range of image editing features accessible both through the UI and programmatically. Key capabilities include: * **Transformations**: Crop, rotate, resize, scale, and flip images. * **Adjustments and effects**: Apply filters, control brightness and contrast, add vignettes, pixelization, and more. * **Background removal**: Automatically remove backgrounds from images using plugin integrations. * **Color tools**: Replace colors, apply gradients, adjust palettes, and convert to black and white. * **Vectorization**: Convert raster images into vector format (SVG). * **Programmatic editing**: Make all edits via API—ideal for automation and bulk processing. All operations are optimized for in-app performance and align with real-time editing needs. ## AI-powered Editing[#](#ai-powered-editing) CE.SDK allows you to easily integrate AI tools directly into your editing workflow. Users can generate or edit images from simple prompts — all from within the editor’s task bar, without switching tools or uploading external assets. [ Launch AI Editor Demo ](https://img.ly/showcases/cesdk/ai-editor/web) Typical AI use cases include: * **Text-to-image**: Generate visuals from user prompts. * **Background removal**: Automatically extract subjects from photos. * **Style transfer**: Apply the look of one image to another. * **Variant generation**: Create multiple versions of a design or product image. * **Text-to-graphics**: Render typographic compositions from plain text. * **Object add/remove**: Modify compositions by adding or erasing visual elements. You can bring your own models or third-party APIs with minimal setup. AI tools can be added as standalone plugins, contextual buttons, or task bar actions. ## Supported Input Formats[#](#supported-input-formats) The SDK supports a broad range of image input types: | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. ## Output and export options[#](#output-and-export-options) Export edited images in the following formats: | Category | Supported Formats | | --- | --- | | **Images** | `.png` (with transparency), `.jpeg`, `.webp`, `.tga` | | **Video** | `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) | | **Print** | `.pdf` (supports underlayer printing and spot colors) | | **Scene** | `.scene` (description of the scene without any assets) | | **Archive** | `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) | Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. You can define export resolution, compression level, and file metadata. CE.SDK also supports exporting with transparent backgrounds, underlayers, or color masks. ## UI-Based vs. Programmatic Editing[#](#ui-based-vs-programmatic-editing) CE.SDK provides two equally powerful ways to perform image edits: * **UI-based editing**: The built-in editor includes a customizable toolbar, side panels, and inspector views. End users can directly manipulate elements through the visual interface. * **Programmatic editing**: Every image transformation, effect, or layout operation can be executed via the SDK’s API. This is ideal for bulk operations, automated design workflows, or serverless rendering. You can freely combine both approaches in a single application. ## Customization[#](#customization) The CE.SDK image editor is fully customizable: * **Tool configuration**: Enable, disable, or reorder individual editing tools. * **Panel visibility**: Show or hide interface elements like inspectors, docks, and canvas menus. * **Themes and styling**: Customize the UI appearance with brand colors, fonts, and icons. * **Localization**: Translate all interface text via the internationalization API. You can also add custom buttons, inject quick actions, or build your own interface on top of the engine using the headless mode. --- [Source](https:/img.ly/docs/cesdk/angular/create-video/update-caption-presets-e9c385) # Adding Custom Caption Presets to CE.SDK Video captions have become an essential part of digital content, improving accessibility and engagement. With CE.SDK’s caption presets feature, you can offer your users a selection of predefined caption styles that they can apply with a single click. This guide will show you how to add your own custom caption presets by updating the content.json file that CE.SDK uses to discover available presets. This approach allows you to extend the existing caption presets functionality without implementing a custom asset source from scratch. ## Understanding the Caption Presets Structure[#](#understanding-the-caption-presets-structure) CE.SDK’s caption presets are organized in a specific folder structure: ``` assets/v4/ly.img.captionPresets/├── content.json # Master index of all presets├── presets/ # Folder containing preset files│ ├── my-custom-preset.blocks # Serialized caption block with styling│ └── …└── thumbnails/ # Folder containing preview images ├── my-custom-preset.png # Preview image for preset └── … ``` The main `content.json` file acts as an index that lists all available presets with their metadata. Instead of individual folders for each preset, all preset files are organized in two main folders: 1. `presets/`: Contains all the serialized caption block files (`.blocks` files) 2. `thumbnails/`: Contains all the preview images for the presets (`.png` files) When CE.SDK loads the caption presets, it reads the `content.json` file to discover all available presets and their locations. This follows the same pattern as other [asset sources in CE.SDK](angular/import-media/from-remote-source-b65faf/) , but with this specific folder organization. ## Creating Custom Caption Presets[#](#creating-custom-caption-presets) Before updating the content.json file, you’ll need to create your custom preset styles. The easiest way to create a custom preset is to design it within CE.SDK itself: 1. Create a text element in your project. Style and animate it as desired (using a text element as the basis is best since it supports all the styling properties needed for captions) 2. Use the engine’s serialization API to export the text block: ``` // Assuming 'textBlock' is the ID of your styled text elementconst serializedBlock = await engine.block.saveToString([textBlock]); ``` 3. Save this serialized data as a `.blocks` file (e.g., `my-custom-preset.blocks`) 4. Create a thumbnail image that visually represents your preset style > **Important**: Using a text element as the basis for your caption preset is highly recommended. Text elements support all the necessary styling properties (colors, fonts, backgrounds, shadows, etc.) and ensure compatibility with the caption system. For more details on text properties, see the [text styling documentation](angular/text-8a993a/) . ### Adding Customizable Properties[#](#adding-customizable-properties) One of the key advantages of the caption presets system is that it allows users to customize specific properties of a preset. To enable this, you need to define which properties should be customizable in the `payload.properties` array in the content.json file. For each customizable color property, you should define: 1. The property type (must be “Color”) 2. The property path (e.g., “fill/solid/color”, “backgroundColor/color”, “dropShadow/color”) 3. The default value (RGBA color object) 4. The current value (initially the same as the default) Example of customizable color properties: ``` "payload": { "properties": [ { "type": "Color", "property": "fill/solid/color", "value": { "r": 1, "g": 1, "b": 1, "a": 1 }, "defaultValue": { "r": 1, "g": 1, "b": 1, "a": 1 } }, { "type": "Color", "property": "backgroundColor/color", "value": { "r": 0, "g": 0, "b": 0, "a": 0.5 }, "defaultValue": { "r": 0, "g": 0, "b": 0, "a": 0.5 } } ]} ``` This allows users to modify specific color aspects of a preset without changing the entire style. ## Updating the Content.json File[#](#updating-the-contentjson-file) Once you have your custom preset files, follow these steps to update the `content.json` file: 1. Download or create a base `content.json` file if you don’t already have one 2. Open the file in a text editor or JSON editor 3. Add new entries to the `assets` array for each of your custom presets 4. Save the updated file Here’s an example of what the `content.json` file should look like: ``` { "version": "3.0.0", "id": "ly.img.captionPresets", "assets": [ { "id": "//ly.img.captionPresets/background", "label": { "en": "Background" }, "meta": { "uri": "{{base_url}}/ly.img.captionPresets/presets/background.preset", "thumbUri": "{{base_url}}/ly.img.captionPresets/thumbnails/background.png", "mimeType": "application/ubq-blocks-string" }, "payload": { "properties": [ { "type": "Color", "property": "fill/solid/color", "value": { "r": 1, "g": 1, "b": 1, "a": 1 }, "defaultValue": { "r": 1, "g": 1, "b": 1, "a": 1 } }, { "type": "Color", "property": "backgroundColor/color", "value": { "r": 0, "g": 0, "b": 0, "a": 0.5 }, "defaultValue": { "r": 0, "g": 0, "b": 0, "a": 0.5 } } ] } }, { "id": "//ly.img.captionPresets/outline", "label": { "en": "Outline" }, "meta": { "uri": "{{base_url}}/ly.img.captionPresets/presets/outline.preset", "thumbUri": "{{base_url}}/ly.img.captionPresets/thumbnails/outline.png", "mimeType": "application/ubq-blocks-string" }, "payload": { "properties": [ { "type": "Color", "property": "fill/solid/color", "value": { "r": 1, "g": 1, "b": 1, "a": 1 }, "defaultValue": { "r": 1, "g": 1, "b": 1, "a": 1 } }, { "type": "Color", "property": "dropShadow/color", "value": { "r": 0, "g": 0, "b": 0, "a": 1 }, "defaultValue": { "r": 0, "g": 0, "b": 0, "a": 1 } } ] } } ]} ``` To add your custom preset, add a new entry to the `assets` array with these required fields: ``` { "id": "//ly.img.captionPresets/my-custom-preset", // A unique identifier with proper namespace "label": { "en": "My Custom Preset" // The name that will appear in the UI }, "meta": { "uri": "{{base_url}}/ly.img.captionPresets/presets/my-custom-preset.preset", "thumbUri": "{{base_url}}/ly.img.captionPresets/thumbnails/my-custom-preset.png", "mimeType": "application/ubq-blocks-string" // Important: Include this mime type }, "payload": { "properties": [ { "type": "Color", "property": "fill/solid/color", "value": { "r": 1, "g": 1, "b": 1, "a": 1 }, "defaultValue": { "r": 1, "g": 1, "b": 1, "a": 1 } }, // Add other properties that can be customized { "type": "Color", "property": "dropShadow/color", "value": { "r": 0, "g": 0, "b": 0, "a": 0.8 }, "defaultValue": { "r": 0, "g": 0, "b": 0, "a": 0.8 } } ] }} ``` ## Hosting and Serving Custom Presets[#](#hosting-and-serving-custom-presets) After updating the content.json file, you need to host the files on your server. Follow these steps: 1. Create the proper folder structure on your server that matches the standard caption presets organization: ``` /assets/v4/ly.img.captionPresets/├── content.json├── presets/│ ├── background.preset│ ├── outline.preset│ ├── my-custom-preset.preset│ └── ...└── thumbnails/ ├── background.png ├── outline.png ├── my-custom-preset.png └── ... ``` 2. Upload all files to your server, maintaining this exact folder structure: * Your updated content.json file should go in the root folder * All .preset files should go in the presets/ folder * All thumbnail images should go in the thumbnails/ folder 3. Make sure the files are accessible via HTTP/HTTPS and properly configured with CORS headers if needed 4. Test that you can access each file directly via its URL in a browser For more information on hosting assets, see the [asset hosting documentation](angular/import-media/from-remote-source-b65faf/) . ## Loading Custom Presets into CE.SDK[#](#loading-custom-presets-into-cesdk) To load your custom caption presets into CE.SDK, you need to tell the engine where to find your updated content.json file. Since CE.SDK already includes a caption presets asset source with the ID “ly.img.captionPresets”, we’ll update this existing source rather than creating a new one. For that you only have to configure the base URL to the one pointing at the location your assets are being available from: ``` const config = { baseURL: 'https://yourdomain.com/assets', // Your base assets path}; CreativeEngine.init(config).then(async engine => { // ...}); ``` Your custom presets will seamlessly integrate with any built-in presets and automatically appear in the caption presets panel in the UI. ## Related Documentation[#](#related-documentation) * [Asset Source Concepts](angular/import-media/concepts-5e6197/) \- For understanding how asset sources work in CE.SDK * [Remote Asset Sources](angular/import-media/from-remote-source-b65faf/) \- For more details on hosting and serving assets remotely * [Asset Library Customization](angular/import-media/asset-panel/customize-c9a4de/) \- For customizing how assets appear in the UI * [Text Styling](angular/text-8a993a/) \- For understanding the styling properties available for text elements --- [Source](https:/img.ly/docs/cesdk/angular/create-video/overview-b06512) # Create Videos Overview ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.createVideo(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); engine.block.setWidth(page, 1280); engine.block.setHeight(page, 720); engine.block.setDuration(page, 20); const video1 = engine.block.create('graphic'); engine.block.setShape(video1, engine.block.createShape('rect')); const videoFill = engine.block.createFill('video'); engine.block.setString( videoFill, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4' ); engine.block.setFill(video1, videoFill); const video2 = engine.block.create('graphic'); engine.block.setShape(video2, engine.block.createShape('rect')); const videoFill2 = engine.block.createFill('video'); engine.block.setString( videoFill2, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-kampus-production-8154913.mp4' ); engine.block.setFill(video2, videoFill2); const track = engine.block.create('track'); engine.block.appendChild(page, track); engine.block.appendChild(track, video1); engine.block.appendChild(track, video2); engine.block.fillParent(track); engine.block.setDuration(video1, 15); /* Make sure that the video is loaded before calling the trim APIs. */ await engine.block.forceLoadAVResource(videoFill); engine.block.setTrimOffset(videoFill, 1); engine.block.setTrimLength(videoFill, 10); engine.block.setLooping(videoFill, true); engine.block.setMuted(videoFill, true); const audio = engine.block.create('audio'); engine.block.appendChild(page, audio); engine.block.setString( audio, 'audio/fileURI', 'https://cdn.img.ly/assets/demo/v1/ly.img.audio/audios/far_from_home.m4a' ); /* Set the volume level to 70%. */ engine.block.setVolume(audio, 0.7); /* Start the audio after two seconds of playback. */ engine.block.setTimeOffset(audio, 2); /* Give the Audio block a duration of 7 seconds. */ engine.block.setDuration(audio, 7); /* Export page as mp4 video. */ const videoBlob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames ); } }); /* Download video blob. */ let anchor = document.createElement('a'); anchor.href = URL.createObjectURL(videoBlob); anchor.download = 'exported-video.mp4'; anchor.click(); /* Export page audio as an WAV audio. */ const audioBlob = await engine.block.exportAudio(page, { mimeType: 'audio/wav', onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames ); } }); /* Download audio blob. */ anchor = document.createElement('a'); anchor.href = URL.createObjectURL(audioBlob); anchor.download = 'exported-audio.wav'; anchor.click();}); ``` ```
``` In addition to static designs, CE.SDK also allows you to create and edit videos. Working with videos introduces the concept of time into the scene, which requires you to switch the scene into the `"Video"` mode. In this mode, each page in the scene has its own separate timeline within which its children can be placed. The `"playback/time"` property of each page controls the progress of time through the page. In order to add videos to your pages, you can add a block with a `"//ly.img.ubq/fill/video"` fill. As the playback time of the page progresses, the corresponding point in time of the video fill is rendered by the block. You can also customize the video fill’s trim in order to control the portion of the video that should be looped while the block is visible. `//ly.img.ubq/audio` blocks can be added to the page in order to play an audio file during playback. The `playback/timeOffset` property controls after how many seconds the audio should begin to play, while the duration property defines how long the audio should play. The same APIs can be used for other design blocks as well, such as text or graphic blocks. Finally, the whole page can be exported as a video file using the `block.exportVideo` function. ## A Note on Browser Support[#](#a-note-on-browser-support) Video mode heavily relies on modern features like web codecs. A detailed list of supported browser versions can be found in our [Supported Browsers](angular/browser-support-28c1b0/) . Please also take note of [possible restrictions based on the host platform](angular/file-format-support-3c4b2a/) browsers are running on. ## Creating a Video Scene[#](#creating-a-video-scene) First, we create a scene that is set up for video editing by calling the `scene.createVideo()` API. Then we create a page, add it to the scene and define its dimensions. This page will hold our composition. ``` const scene = engine.scene.createVideo(); const page = engine.block.create('page');engine.block.appendChild(scene, page); engine.block.setWidth(page, 1280);engine.block.setHeight(page, 720); ``` ## Setting Page Durations[#](#setting-page-durations) Next, we define the duration of the page using the `setDuration(block: number, duration: number): void` API to be 20 seconds long. This will be the total duration of our exported video in the end. ``` engine.block.setDuration(page, 20); ``` ## Adding Videos[#](#adding-videos) In this example, we want to show two videos, one after the other. For this, we first create two graphic blocks and assign two `'video'` fills to them. ``` const video1 = engine.block.create('graphic');engine.block.setShape(video1, engine.block.createShape('rect'));const videoFill = engine.block.createFill('video');engine.block.setString( videoFill, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4');engine.block.setFill(video1, videoFill); const video2 = engine.block.create('graphic');engine.block.setShape(video2, engine.block.createShape('rect'));const videoFill2 = engine.block.createFill('video');engine.block.setString( videoFill2, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-kampus-production-8154913.mp4');engine.block.setFill(video2, videoFill2); ``` ## Creating a Track[#](#creating-a-track) While we could add the two blocks directly to the page and and manually set their sizes and time offsets, we can alternatively also use the `track` block to simplify this work. A `track` automatically adjusts the time offsets of its children to make sure that they play one after another without any gaps, based on each child’s duration. Tracks themselves cannot be selected directly by clicking on the canvas, nor do they have any visual representation. We create a `track` block, add it to the page and add both videos in the order in which they should play as the track’s children. Next, we use the `fillParent` API, which will resize all children of the track to the same dimensions as the page. The dimensions of a `track` are always derived from the dimensions of its children, so you should not call the `setWidth` or `setHeight` APIs on a track, but on its children instead if you can’t use the `fillParent` API. ``` const track = engine.block.create('track');engine.block.appendChild(page, track);engine.block.appendChild(track, video1);engine.block.appendChild(track, video2);engine.block.fillParent(track); ``` By default, each block has a duration of 5 seconds after it is created. If we want to show it on the page for a different amount of time, we can use the `setDuration` API. Note that we can just increase the duration of the first video block to 15 seconds without having to adjust anything about the second video. The `track` takes care of that for us automatically so that the second video starts playing after 15 seconds. ``` engine.block.setDuration(video1, 15); ``` If the video is longer than the duration of the graphic block that it’s attached to, it will cut off once the duration of the graphic is reached. If it is too short, the video will automatically loop for as long as its graphic block is visible. We can also manually define the portion of our video that should loop within the graphic using the `setTrimOffset(block: number, offset: number): void` and `setTrimLength(block: number, length: number): void` APIs. We use the trim offset to cut away the first second of the video and the trim length to only play 10 seconds of the video. Since our graphic is 15 seconds long, the trimmed video will be played fully once and then start looping for the remaining 5 seconds. ``` /* Make sure that the video is loaded before calling the trim APIs. */await engine.block.forceLoadAVResource(videoFill);engine.block.setTrimOffset(videoFill, 1);engine.block.setTrimLength(videoFill, 10); ``` We can control if a video will loop back to its beginning by calling `setLooping(block: number, looping: boolean): void`. Otherwise, the video will simply hold its last frame instead and audio will stop playing. Looping behavior is activated for all blocks by default. ``` engine.block.setLooping(videoFill, true); ``` ## Audio[#](#audio) If the video of a video fill contains an audio track, that audio will play automatically by default when the video is playing. We can mute it by calling `setMuted(block: number, muted: boolean): void`. ``` engine.block.setMuted(videoFill, true); ``` We can also add audio-only files to play together with the contents of the page by adding an `'audio'` block to the page and assigning it the URL of the audio file. ``` const audio = engine.block.create('audio');engine.block.appendChild(page, audio);engine.block.setString( audio, 'audio/fileURI', 'https://cdn.img.ly/assets/demo/v1/ly.img.audio/audios/far_from_home.m4a'); ``` We can adjust the volume level of any audio block or video fill by calling `setVolume(block: number, volume: number): void`. The volume is given as a fraction in the range of 0 to 1. ``` /* Set the volume level to 70%. */engine.block.setVolume(audio, 0.7); ``` By default, our audio block will start playing at the very beginning of the page. We can change this by specifying how many seconds into the scene it should begin to play using the `setTimeOffset(block: number, offset: number): void` API. ``` /* Start the audio after two seconds of playback. */engine.block.setTimeOffset(audio, 2); ``` By default, our audio block will have a duration of 5 seconds. We can change this by specifying its duration in seconds by using the `setDuration(block: number, duration: number): void` API. ``` /* Give the Audio block a duration of 7 seconds. */engine.block.setDuration(audio, 7); ``` ## Exporting Video[#](#exporting-video) You can start exporting the entire page as a video file by calling `exportVideo()`. The encoding process will run in the background. You can get notified about the progress of the encoding process by the `progressCallback`. It will be called whenever another frame has been encoded. Since the encoding process runs in the background the engine will stay interactive. So, you can continue to use the engine to manipulate the scene. Please note that these changes won’t be visible in the exported video file because the scene’s state has been frozen at the start of the export. ``` /* Export page as mp4 video. */const videoBlob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames ); }}); /* Download video blob. */let anchor = document.createElement('a');anchor.href = URL.createObjectURL(videoBlob);anchor.download = 'exported-video.mp4';anchor.click(); ``` ## Exporting Audio[#](#exporting-audio) You can export just the audio from your video scene by calling `exportAudio()`. This allows you to extract the audio track separately, whether from an entire page, a single audio block, a video block with audio, or a track containing multiple audio sources. The audio export process runs in a background worker, similar to video export, keeping the main engine responsive. You can monitor the progress through the `onProgress` callback. ``` /* Export page audio as an WAV audio. */const audioBlob = await engine.block.exportAudio(page, { mimeType: 'audio/wav', onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames ); }}); /* Download audio blob. */anchor = document.createElement('a');anchor.href = URL.createObjectURL(audioBlob);anchor.download = 'exported-audio.wav';anchor.click(); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.createVideo(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); engine.block.setWidth(page, 1280); engine.block.setHeight(page, 720); engine.block.setDuration(page, 20); const video1 = engine.block.create('graphic'); engine.block.setShape(video1, engine.block.createShape('rect')); const videoFill = engine.block.createFill('video'); engine.block.setString( videoFill, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4', ); engine.block.setFill(video1, videoFill); const video2 = engine.block.create('graphic'); engine.block.setShape(video2, engine.block.createShape('rect')); const videoFill2 = engine.block.createFill('video'); engine.block.setString( videoFill2, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-kampus-production-8154913.mp4', ); engine.block.setFill(video2, videoFill2); const track = engine.block.create('track'); engine.block.appendChild(page, track); engine.block.appendChild(track, video1); engine.block.appendChild(track, video2); engine.block.fillParent(track); engine.block.setDuration(video1, 15); /* Make sure that the video is loaded before calling the trim APIs. */ await engine.block.forceLoadAVResource(videoFill); engine.block.setTrimOffset(videoFill, 1); engine.block.setTrimLength(videoFill, 10); engine.block.setLooping(videoFill, true); engine.block.setMuted(videoFill, true); const audio = engine.block.create('audio'); engine.block.appendChild(page, audio); engine.block.setString( audio, 'audio/fileURI', 'https://cdn.img.ly/assets/demo/v1/ly.img.audio/audios/far_from_home.m4a', ); /* Set the volume level to 70%. */ engine.block.setVolume(audio, 0.7); /* Start the audio after two seconds of playback. */ engine.block.setTimeOffset(audio, 2); /* Give the Audio block a duration of 7 seconds. */ engine.block.setDuration(audio, 7); /* Export page as mp4 video. */ const videoBlob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames ); } }); /* Download video blob. */ anchor = document.createElement('a'); anchor.href = URL.createObjectURL(videoBlob); anchor.download = 'exported-video.mp4'; anchor.click(); /* Export page audio as an WAV audio. */ const audioBlob = await engine.block.exportAudio(page, { mimeType: 'audio/wav', onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames ); } }); /* Download audio blob. */ anchor = document.createElement('a'); anchor.href = URL.createObjectURL(audioBlob); anchor.download = 'exported-audio.wav'; anchor.click();}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/create-video/control-daba54) # Control Audio and Video ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').appendChild(engine.element); // Add default assets used in scene. engine.addDefaultAssetSources(); const scene = engine.scene.create(); const text = engine.block.create('text'); engine.block.appendChild(scene, text); engine.block.setWidthMode(text, 'Auto'); engine.block.setHeightMode(text, 'Auto'); engine.block.replaceText(text, 'Hello World'); // Add a "!" at the end of the text engine.block.replaceText(text, '!', 11); // Replace "World" with "Alex" engine.block.replaceText(text, 'Alex', 6, 11); engine.scene.zoomToBlock(text, 100, 100, 100, 100); // Remove the "Hello " engine.block.removeText(text, 0, 6); engine.block.setTextColor(text, { r: 1.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.setTextColor(text, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 1, 4); const allColors = engine.block.getTextColors(text); const colorsInRange = engine.block.getTextColors(text, 2, 5); engine.block.setBool(text, 'backgroundColor/enabled', true); const color = engine.block.getColor(text, 'backgroundColor/color'); engine.block.setColor(text, 'backgroundColor/color', { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }); engine.block.setFloat(text, 'backgroundColor/paddingLeft', 1); engine.block.setFloat(text, 'backgroundColor/paddingTop', 2); engine.block.setFloat(text, 'backgroundColor/paddingRight', 3); engine.block.setFloat(text, 'backgroundColor/paddingBottom', 4); engine.block.setFloat(text, 'backgroundColor/cornerRadius', 5); const animation = engine.block.createAnimation('slide'); engine.block.setEnum(animation, 'textAnimationWritingStyle', 'Block'); engine.block.setInAnimation(text, animation); engine.block.setOutAnimation(text, animation); engine.block.setTextCase(text, 'Titlecase'); const textCases = engine.block.getTextCases(text); const typeface = { name: 'Roboto', fonts: [ { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf', subFamily: 'Bold', weight: 'bold' }, { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-BoldItalic.ttf', subFamily: 'Bold Italic', weight: 'bold', style: 'italic' }, { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Italic.ttf', subFamily: 'Italic', style: 'italic' }, { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Regular.ttf', subFamily: 'Regular' } ] }; engine.block.setFont(text, typeface.fonts[3].uri, typeface); engine.block.setTypeface(text, typeface); const currentDefaultTypeface = engine.block.getTypeface(text); const currentTypefaces = engine.block.getTypefaces(text); const currentTypefacesOfRange = engine.block.getTypefaces(text, 1, 4); if (engine.block.canToggleBoldFont(text)) { engine.block.toggleBoldFont(text); } if (engine.block.canToggleBoldFont(text, 1, 4)) { engine.block.toggleBoldFont(text, 1, 4); } if (engine.block.canToggleItalicFont(text)) { engine.block.toggleItalicFont(text); } if (engine.block.canToggleItalicFont(text, 1, 4)) { engine.block.toggleItalicFont(text, 1, 4); } const fontWeights = engine.block.getTextFontWeights(text); const fontStyles = engine.block.getTextFontStyles(text);}); ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to configure and control audio and video through the `block` API. ## Time Offset and Duration[#](#time-offset-and-duration) The time offset determines when a block becomes active during playback on the page’s timeline, and the duration decides how long this block is active. Blocks within tracks are a special case in that they have an implicitly calculated time offset that is determined by their order and the total duration of their preceding blocks in the same track. As with any audio/video-related property, not every block supports these properties. Use `supportsTimeOffset` and `supportsDuration` to check. ``` supportsTimeOffset(id: DesignBlockId): boolean ``` Returns whether the block has a time offset property. * `id`: The block to query. * Returns true, if the block has a time offset property. ``` setTimeOffset(id: DesignBlockId, offset: number): void ``` Set the time offset of the given block relative to its parent. The time offset controls when the block is first active in the timeline. The time offset is not supported by the page block. * `id`: The block whose time offset should be changed. * `offset`: The new time offset in seconds. ``` getTimeOffset(id: DesignBlockId): number ``` Get the time offset of the given block relative to its parent. * `id`: The block whose time offset should be queried. * Returns the time offset of the block. ``` supportsDuration(id: DesignBlockId): boolean ``` Returns whether the block has a duration property. * `id`: The block to query. * Returns true if the block has a duration property. ``` setDuration(id: DesignBlockId, duration: number): void ``` Set the playback duration of the given block in seconds. The duration defines for how long the block is active in the scene during playback. If a duration is set on the page block, it becomes the duration source block. The duration is ignored when the scene is not in “Video” mode. Note: This also adjusts the trim for non looping blocks. * `id`: The block whose duration should be changed. * `duration`: The new duration in seconds. ``` getDuration(id: DesignBlockId): number ``` Get the playback duration of the given block in seconds. The duration defines for how long the block is active in the scene during playback. Note: The duration is ignored when the scene is not in `Video` mode. * `id`: The block whose duration should be returned. * Returns The block’s duration. ``` supportsPageDurationSource(page: DesignBlockId, id: DesignBlockId): boolean ``` Returns whether the block can be marked as the element that defines the duration of the given page. * `id`: The block to query. * Returns true, if the block can be marked as the element that defines the duration of the given page. ``` setPageDurationSource(page: DesignBlockId, id: DesignBlockId): void ``` Set an block as duration source so that the overall page duration is automatically determined by this. If no defining block is set, the page duration is calculated over all children. Only one block per page can be marked as duration source. Will automatically unmark the previously marked. Note: This is only supported for blocks that have a duration. * `page`: The page block for which it should be enabled. * `id`: The block that should be updated. ``` isPageDurationSource(id: DesignBlockId): boolean ``` Query whether the block is a duration source block for the page. * `id`: The block whose duration source property should be queried. * Returns If the block is a duration source for a page. ``` removePageDurationSource(id: DesignBlockId): void ``` Remove the block as duration source block for the page. If a scene or page is given as block, it is deactivated for all blocks in the scene or page. * `id`: The block whose duration source property should be removed. ``` setNativePixelBuffer(id: number, buffer: HTMLCanvasElement | HTMLVideoElement): void ``` Update the pixels of the given pixel stream fill block. * `id`: The pixel stream fill block. * `buffer`: Use pixel data from a canvas or a video element. ## Trim[#](#trim) You can select a specific range of footage from your audio/video resource by providing a trim offset and a trim length. The footage will loop if the trim’s length is shorter than the block’s duration. This behavior can also be disabled using the `setLooping` function. ``` supportsTrim(id: DesignBlockId): boolean ``` Returns whether the block has trim properties. * `id`: The block to query. * Returns true, if the block has trim properties. ``` setTrimOffset(id: DesignBlockId, offset: number): void ``` Set the trim offset of the given block or fill. Sets the time in seconds within the fill at which playback of the audio or video clip should begin. This requires the video or audio clip to be loaded. * `id`: The block whose trim should be updated. * `offset`: The new trim offset, measured in timeline seconds (scaled by playback rate). ``` getTrimOffset(id: DesignBlockId): number ``` Get the trim offset of this block. \* This requires the video or audio clip to be loaded. * `id`: The block whose trim offset should be queried. * Returns the trim offset in timeline seconds. ``` setTrimLength(id: DesignBlockId, length: number): void ``` Set the trim length of the given block or fill. The trim length is the duration of the audio or video clip that should be used for playback. After reaching this value during playback, the trim region will loop. This requires the video or audio clip to be loaded. * `id`: The object whose trim length should be updated. * `length`: The new trim length, measured in timeline seconds (scaled by playback rate). ``` getTrimLength(id: DesignBlockId): number ``` Get the trim length of the given block or fill. * `id`: The object whose trim length should be queried. * Returns The trim length of the object measured in timeline seconds (scaled by playback rate). ## Playback Control[#](#playback-control) You can start and pause playback and seek to a certain point on the scene’s timeline. There’s also a solo playback mode to preview audio and video blocks individually while the rest of the scene stays frozen. Finally, you can enable or disable the looping behavior of blocks and control their audio volume. ``` setPlaying(id: DesignBlockId, enabled: boolean): void ``` Set whether the block should be playing during active playback. * `id`: The block that should be updated. * `enabled`: Whether the block should be playing its contents. ``` isPlaying(id: DesignBlockId): boolean ``` Returns whether the block is playing during active playback. * `id`: The block to query. * Returns whether the block is playing during playback. ``` setSoloPlaybackEnabled(id: DesignBlockId, enabled: boolean): void ``` Set whether the given block or fill should play its contents while the rest of the scene remains paused. Setting this to true for one block will automatically set it to false on all other blocks. * `id`: The block or fill to update. * `enabled`: Whether the block’s playback should progress as time moves on. ``` isSoloPlaybackEnabled(id: DesignBlockId): boolean ``` Return whether the given block or fill is currently set to play its contents while the rest of the scene remains paused. * `id`: The block or fill to query. * Returns Whether solo playback is enabled for this block. ``` supportsPlaybackTime(id: DesignBlockId): boolean ``` Returns whether the block has a playback time property. * `id`: The block to query. * Returns whether the block has a playback time property. ``` setPlaybackTime(id: DesignBlockId, time: number): void ``` Set the playback time of the given block. * `id`: The block whose playback time should be updated. * `time`: The new playback time of the block in seconds. ``` getPlaybackTime(id: DesignBlockId): number ``` Get the playback time of the given block. * `id`: The block to query. * Returns the playback time of the block in seconds. ``` isVisibleAtCurrentPlaybackTime(id: DesignBlockId): boolean ``` Returns whether the block should be visible on the canvas at the current playback time. * `id`: The block to query. * Returns Whether the block should be visible on the canvas at the current playback time. ``` supportsPlaybackControl(id: DesignBlockId): boolean ``` Returns whether the block supports a playback control. * `block`: The block to query. * Returns Whether the block has playback control. ``` setLooping(id: DesignBlockId, looping: boolean): void ``` Set whether the block should restart from the beginning again or stop. * `block`: The block or video fill to update. * `looping`: Whether the block should loop to the beginning or stop. ``` isLooping(id: DesignBlockId): boolean ``` Query whether the block is looping. * `block`: The block to query. * Returns Whether the block is looping. ``` setMuted(id: DesignBlockId, muted: boolean): void ``` Set whether the audio of the block is muted. * `block`: The block or video fill to update. * `muted`: Whether the audio should be muted. ``` isMuted(id: DesignBlockId): boolean ``` Query whether the block is muted. * `block`: The block to query. * Returns Whether the block is muted. ``` setVolume(id: DesignBlockId, volume: number): void ``` Set the audio volume of the given block. * `block`: The block or video fill to update. * `volume`: The desired volume with a range of `0, 1`. ``` getVolume(id: DesignBlockId): number ``` Get the audio volume of the given block. * `block`: The block to query. * Returns The volume with a range of `0, 1`. ``` getVideoWidth(id: DesignBlockId): number ``` Get the video width in pixels of the video resource that is attached to the given block. * `block`: The video fill. * Returns The video width in pixels or an error. ``` getVideoHeight(id: DesignBlockId): number ``` Get the video height in pixels of the video resource that is attached to the given block. * `block`: The video fill. * Returns The video height in pixels or an error. ## Playback Speed[#](#playback-speed) You can control the playback speed of audio and video blocks to create slow-motion or fast-forward effects. The playback speed is a multiplier that affects how quickly the content plays back. Audio blocks accept values from 0.25x (quarter speed) to 3.0x (triple speed). Video fills can go beyond 3.0x when you need extreme fast-forward playback. Note that changing the playback speed automatically adjusts both the trim and duration of the block to maintain the same visual timeline length. ``` setPlaybackSpeed(id: DesignBlockId, speed: number): void ``` Set the playback speed of the given block. Note: This also adjusts the trim and duration of the block. Video fills running faster than 3.0x are force muted until their speed is reduced to 3.0x or below. * `id`: The block or video fill to update. * `speed`: The desired playback speed multiplier. Valid range is \[0.25, 3.0\] for audio blocks and \[0.25, ∞) for video fills. ``` getPlaybackSpeed(id: DesignBlockId): number ``` Get the playback speed of the given block. * `id`: The block to query. * Returns: The playback speed multiplier. ## Resource Control[#](#resource-control) Until an audio/video resource referenced by a block is loaded, properties like the duration of the resource aren’t available, and accessing those will lead to an error. You can avoid this by forcing the resource you want to access to load using `forceLoadAVResource`. ``` forceLoadAVResource(id: DesignBlockId): Promise ``` Begins loading the required audio and video resource for the given video fill or audio block. If the resource had been loaded earlier and resulted in an error, it will be reloaded. * `id`: The video fill or audio block whose resource should be loaded. * Returns A Promise that resolves once the resource has finished loading. ``` unstable_isAVResourceLoaded(id: DesignBlockId): boolean ``` Returns whether the audio and video resource for the given video fill or audio block is loaded. * `id`: The video fill or audio block. * Returns The loading state of the resource. ``` getAVResourceTotalDuration(id: DesignBlockId): number ``` Get the duration in seconds of the video or audio resource that is attached to the given block. * `id`: The video fill or audio block. * Returns The video or audio file duration. ## Thumbnail Previews[#](#thumbnail-previews) For a user interface, it can be helpful to have image previews in the form of thumbnails for any given video resource. For videos, the engine can provide one or more frames using `generateVideoThumbnailSequence`. Pass the video fill that references the video resource. In addition to video thumbnails, the engine can also render compositions of design blocks over time. To do this pass in the respective design block. The video editor uses these to visually represent blocks in the timeline. In order to visualize audio signals `generateAudioThumbnailSequence` can be used. This generates a sequence of values in the range of 0 to 1 that represent the loudness of the signal. These values can be used to render a waveform pattern in any custom style. Note: There can be at most one thumbnail generation request per block at any given time. If you don’t want to wait for the request to finish before issuing a new request, you can cancel it by calling the returned function. ``` generateVideoThumbnailSequence(id: DesignBlockId, thumbnailHeight: number, timeBegin: number, timeEnd: number, numberOfFrames: number, onFrame: (frameIndex: number, result: ImageData | Error) => void): () => void ``` Generate a sequence of thumbnails for the given video fill or design block. Note: There can only be one thumbnail generation request in progress for a given block. Note: During playback, the thumbnail generation will be paused. * `id`: The video fill or design block. * `thumbnailHeight`: The height of a thumbnail. The width will be calculated from the video aspect ratio. * `timeBegin`: The time in seconds relative to the time offset of the design block at which the thumbnail sequence should start. * `timeEnd`: The time in seconds relative to the time offset of the design block at which the thumbnail sequence should end. * `numberOfFrames`: The number of frames to generate. * `onFrame`: Gets passed the frame index and RGBA image data. * Returns A method that will cancel any thumbnail generation request in progress for this block. ``` generateAudioThumbnailSequence(id: DesignBlockId, samplesPerChunk: number, timeBegin: number, timeEnd: number, numberOfSamples: number, numberOfChannels: number, onChunk: (chunkIndex: number, result: Float32Array | Error) => void): () => void ``` Generate a thumbnail sequence for the given audio block or video fill. A thumbnail in this case is a chunk of samples in the range of 0 to 1. In case stereo data is requested, the samples are interleaved, starting with the left channel. Note During playback, the thumbnail generation will be paused. * `id`: The audio block or video fill. * `samplesPerChunk`: The number of samples per chunk. `onChunk` is called when this many samples are ready. * `timeBegin`: The time in seconds at which the thumbnail sequence should start. * `timeEnd`: The time in seconds at which the thumbnail sequence should end. * `numberOfSamples`: The total number of samples to generate. * `numberOfChannels`: The number of channels in the output. 1 for mono, 2 for stereo. * `onChunk`: This gets passed an index and a chunk of samples whenever it’s ready, or an error. ## Audio Type[#](#audio-type) A block for playing audio content. This section describes the properties available for the **Audio Type** (`//ly.img.ubq/audio`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `audio/fileURI` | `String` | `""` | A URI referencing an audio file. | | `audio/totalDuration` | `Double` | `"-"` | The total duration of the audio file., _(read-only)_ | | `contentFill/mode` | `Enum` | `"Cover"` | Defines how content should be resized to fit its container (e.g., Cover, Contain, Stretch)., Possible values: `"Crop"`, `"Cover"`, `"Contain"` | | `playback/duration` | `Double` | `null` | The duration in seconds for which this block should be visible. | | `playback/looping` | `Bool` | `false` | Whether the medium should start from the beginning again or should stop. | | `playback/muted` | `Bool` | `false` | Whether the audio is muted. | | `playback/playing` | `Bool` | `false` | A tag that can be set on elements for their playback time to be progressed. | | `playback/soloPlaybackEnabled` | `Bool` | `false` | A tag for blocks where playback should progress while the scene is paused. | | `playback/speed` | `Float` | `1` | The playback speed multiplier. | | `playback/time` | `Double` | `0` | The current playback time of the block contents in seconds. | | `playback/timeOffset` | `Double` | `0` | The time in seconds relative to its parent at which this block should first appear. | | `playback/trimLength` | `Double` | `"-"` | The relative duration of the clip for playback. | | `playback/trimOffset` | `Double` | `"-"` | The time within the clip at which playback should begin, as a percentage of its total duration. | | `playback/volume` | `Float` | `1` | Audio volume with a range of \[0, 1\]. | | `selected` | `Bool` | `false` | Indicates if the block is currently selected. | ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from '@cesdk/engine'; const config = { license: 'insert-your-license', userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' }),}; async function controlAudioVideo() { const engine = await CreativeEngine.init(config); document.getElementById('cesdk_container')?.append(engine.element); // Setup a minimal video scene const scene = await engine.scene.createVideo(); const page = engine.block.create('page'); await engine.block.appendChild(scene, page); engine.block.setWidth(page, 1280); engine.block.setHeight(page, 720); // Create a video block in a track const videoBlock = engine.block.create('graphic'); engine.block.setShape(videoBlock, engine.block.createShape('rect')); const videoFill = engine.block.createFill('video'); engine.block.setString( videoFill, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v1/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4' ); engine.block.setFill(videoBlock, videoFill); const track = engine.block.create('track'); await engine.block.appendChild(page, track); await engine.block.appendChild(track, videoBlock); engine.block.fillParent(track); // Create an audio block const audio = engine.block.create('audio'); await engine.block.appendChild(page, audio); engine.block.setString( audio, 'audio/fileURI', 'https://cdn.img.ly/assets/demo/v1/ly.img.audio/audios/far_from_home.m4a' ); // Time offset and duration engine.block.supportsTimeOffset(audio); engine.block.setTimeOffset(audio, 2); engine.block.getTimeOffset(audio); /* Returns 2 */ engine.block.supportsDuration(page); engine.block.setDuration(page, 10); engine.block.getDuration(page); /* Returns 10 */ // Duration of the page can be that of a block engine.block.supportsPageDurationSource(page, block); engine.block.setPageDurationSource(page, block); engine.block.isPageDurationSource(block); engine.block.getDuration(page); /* Returns duration plus offset of the block */ // Duration of the page can be the maximum end time of all page child blocks engine.block.removePageDurationSource(page); engine.block.getDuration(page); /* Returns the maximum end time of all page child blocks */ // Trim engine.block.supportsTrim(videoFill); engine.block.setTrimOffset(videoFill, 1); engine.block.getTrimOffset(videoFill); /* Returns 1 */ engine.block.setTrimLength(videoFill, 5); engine.block.getTrimLength(videoFill); /* Returns 5 */ // Playback Control engine.block.setPlaying(page, true); engine.block.isPlaying(page); engine.block.setSoloPlaybackEnabled(videoFill, true); engine.block.isSoloPlaybackEnabled(videoFill); engine.block.supportsPlaybackTime(page); engine.block.setPlaybackTime(page, 1); engine.block.getPlaybackTime(page); engine.block.isVisibleAtCurrentPlaybackTime(block); engine.block.supportsPlaybackControl(videoFill); engine.block.setLooping(videoFill, true); engine.block.isLooping(videoFill); engine.block.setMuted(videoFill, true); engine.block.isMuted(videoFill); engine.block.setVolume(videoFill, 0.5); /* 50% volume */ engine.block.getVolume(videoFill); // Playback Speed engine.block.setPlaybackSpeed(videoFill, 0.5); /* Half speed */ const currentSpeed = engine.block.getPlaybackSpeed(videoFill); /* 0.5 */ engine.block.setPlaybackSpeed(videoFill, 2.0); /* Double speed */ engine.block.setPlaybackSpeed(videoFill, 1.0); /* Normal speed */ // Resource Control await engine.block.forceLoadAVResource(videoFill); const isLoaded = engine.block.unstable_isAVResourceLoaded(videoFill); engine.block.getAVResourceTotalDuration(videoFill); const videoWidth = engine.block.getVideoWidth(videoFill); const videoHeight = engine.block.getVideoHeight(videoFill); // Thumbnail Previews const cancelVideoThumbnailGeneration = engine.block.generateVideoThumbnailSequence( videoFill /* video fill or any design block */, 128 /* thumbnail height, width will be calculated from aspect ratio */, 0.5 /* begin time */, 9.5 /* end time */, 10 /* number of thumbnails to generate */, async (frame, width, height, imageData) => { const image = await createImageBitmap(imageData); // Draw the image... } ); const cancelAudioThumbnailGeneration = engine.block.generateAudioThumbnailSequence( audio /* audio or video fill */, 20 /* number of samples per chunk */, 0.5 /* begin time */, 9.5 /* end time */, 10 * 20 /* total number of samples, will produce 10 calls with 20 samples per chunk */, 2, /* stereo, interleaved samples for the left and right channels */, (chunkIndex, chunkSamples) => { drawWavePattern(chunkSamples); } ); // Piping a native camera stream into the engine const pixelStreamFill = engine.block.createFill('pixelStream'); const video = document.createElement('video'); engine.block.setNativePixelBuffer(pixelStreamFill, video); void cancelVideoThumbnailGeneration; void cancelAudioThumbnailGeneration;} controlAudioVideo(); ``` --- [Source](https:/img.ly/docs/cesdk/angular/create-video/timeline-editor-912252) # Video and Audio Timeline Editor ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; window.onload = async () => { const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, theme: 'light', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' }), ui: { elements: { navigation: { position: 'top' } } } }; const cesdk = await CreativeEditorSDK.create('#cesdk_container', config); // Enable settings panel cesdk.feature.enable('ly.img.settings'); // Set the editor view mode cesdk.ui.setView('default'); // Configure navigation bar actions using the new API cesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', 'ly.img.importScene.navigationBar', 'ly.img.exportScene.navigationBar', 'ly.img.exportVideo.navigationBar' ] }); cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ sceneMode: 'Video', withUploadAssetSources: true }); cesdk.ui.setBackgroundTrackAssetLibraryEntries([ 'ly.img.image', 'ly.img.video' ]); const scene = await cesdk.createVideoScene();}; ``` ```
``` CE.SDK Video Mode allows your users to edit videos in a manner familiar from popular platforms such as TikTok or Instagram. The CE.SDK editor contains a full-featured video editor, complete with Video and Audio trimming, and composition capabilities. Get to know the core concepts in this guide. To learn about the **available API calls** related to video editing, see the [engine guide on video editing](angular/create-video/overview-b06512/) . To learn about the **Video Editor UI**, skip to the UI overview. ## A Note on Browser Support[#](#a-note-on-browser-support) Video mode heavily relies on modern features like web codecs. A detailed list of supported browser versions can be found in our [Supported Browsers](angular/browser-support-28c1b0/) . Please also take note of [possible restrictions based on the host platform](angular/file-format-support-3c4b2a/) browsers are running on. Video mode is currently not supported on any mobile web platform due to technical limitations by all mobile browsers. [Our native mobile SDKs are a great solution for implementing video features on mobile devices today.](angular/prebuilt-solutions-d0ed07/) ## UI Overview[#](#ui-overview) ### Timeline[#](#timeline) ![The editor timeline control.](/docs/cesdk/_astro/video_mode_timeline.BkrXFlTn_2e2pv5.webp) The timeline is the main control for video editing. It is here that clips and audio strips can be positioned in time. The timeline is divided into two main areas: #### Foreground[#](#foreground) Clips run along the top of the foreground timeline, while audio strips run along the bottom. Click anywhere inside the timeline to set the playback time, or drag the seeker directly. Use the **Split Clip** button to split the clips into two at the position of the seeker. The **zoom controls** allow you to zoom the timeline in and out for better control. Finally, Use the **Play** and **Loop** buttons to view the final result. * Drag either of the strip handles to **adjust start and end time** of a clip. * Drag the center of the strip to **position** the clip. * Drag the center of the strip to **rearrange** the clips. * Use the context menu on the strip to **perform specific actions** on the clip. #### Background[#](#background) Background clips go at the bottom of the timeline and define the length of the video. Background clips are typically videos and images, but can be configured to support other types of elements as well. They are packed against each other and can’t have time gaps in between, and they define the length of the exported video. * Drag either of the strip handles to **adjust start and end time** of a clip. * Drag the center of the strip to **rearrange** the clips. * Use the context menu on the strip to **perform specific actions** on the clip. ### Video[#](#video) Videos are handled in a similar fashion to regular elements: You can add them via the Asset Library and position them anywhere on the page. You can select a specific section of video to play by trimming the clip on the timeline and/or using the trim controls (pictured below), accessible by pressing the trim button. #### Trimming videos[#](#trimming-videos) ![The trim controls for video.](/docs/cesdk/_astro/video_mode_trim_controls.246FbEz7_ZVcvQa.webp) Trim controls will appear near the top of the editor window. * While these controls are open, **only the selected video is played** during seeking or playback. * You can **adjust the start and end time** by dragging the handles on either side of the strip. * The **grayed-out area** indicates the parts of the video that won’t be shown. * The **blue overlay** indicates the end of the page duration - to show these parts of the video, extend the duration of the containing page. ### Audio[#](#audio) ![A timeline containing audio strips.](/docs/cesdk/_astro/video_mode_audio_strips.B0BW6aBU_1GI7c6.webp) Unlike regular design elements, audio is not visible on the canvas. It is only shown in the timeline, as audio strips. Use the timeline to edit audio: * Drag either of the strip handles to **adjust start and end time** of the audio strip. * Drag the center of the strip to **position** the strip. * Drag the center of the strip to **rearrange** the audio stipes. * Use the context menu on the strip to **perform specific actions** on the audio strip. ### Trimming audio[#](#trimming-audio) ![The trim controls for audio.](/docs/cesdk/_astro/video_mode_audio_trim.CASqJYcG_2irYHz.webp) Trimming audio works just like trimming video. --- [Source](https:/img.ly/docs/cesdk/angular/create-templates/overview-4ebe30) # Overview In CE.SDK, a _template_ is a reusable, structured design that defines editable areas and constraints for end users. Templates can be based on static visuals or video compositions and are used to guide content creation, enable mass personalization, and enforce design consistency. Unlike a regular editable design, a template introduces structure through placeholders and constraints, allowing you to define which elements users can change and how. Templates support both static output formats (like PNG, PDF) and videos (like MP4), and can be created or applied using either the CE.SDK UI or API. Templates are a core part of enabling design automation, personalization, and streamlined workflows in any app that includes creative functionality. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Why Use Templates?[#](#why-use-templates) Templates are a powerful tool for: * Maintaining **brand consistency** across all user-generated designs. * **Scaling** asset creation for campaigns, catalogs, or print products. * Providing a **guided experience** where users adapt content without starting from scratch. They are ideal for use cases like: * Personalized marketing campaigns * Dynamic social media ads * Product catalogs and e-commerce visuals * Custom print materials and photo books ## Ways to Create Templates[#](#ways-to-create-templates) You can create templates from scratch or by importing an existing template. **From Scratch:** Start a new project and design a scene with the intent of turning it into a template. You can define variables, placeholders, and constraints directly in the editor. **Import Existing Designs:** If you already have assets created in other tools, you can import them as templates. | Format | Description | | --- | --- | | `.idml` | InDesign | | `.psd` | Photoshop | | `.scene` | CE.SDK Native | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs to generate scenes programmatically. These imported designs can then be adapted into editable, structured templates inside CE.SDK. ## Dynamic Content in Templates[#](#dynamic-content-in-templates) Templates support dynamic content to enable data-driven generation of assets. CE.SDK provides several mechanisms: * **Text Variables**: Bind text elements to dynamic values (e.g., user names, product SKUs). * **Image Placeholders**: Reserve space for images to be inserted later. * **Video Placeholders**: Reserve space for videos, enabling dynamic insertion of video clips in a templated layout. This makes it easy to generate hundreds or thousands of personalized variations from a single design. ## Controlling Template Editing[#](#controlling-template-editing) Templates in CE.SDK offer powerful tools for controlling the editing experience: * **Editing Constraints**: Lock specific properties such as position, style, or content of elements. * **Locked Templates**: Prevent any edits outside allowed fields to protect design integrity. * **Fully Editable Templates**: Allow unrestricted editing for power users or advanced workflows. * **Form-Based Editing**: Build a custom editing interface for users to fill in variables and placeholders via input forms (a ready-made UI is not currently provided, but can be built using our APIs). These options let you strike a balance between creative freedom and design control. ## Working with Templates Programmatically and Through the UI[#](#working-with-templates-programmatically-and-through-the-ui) You can manage templates using both the UI and API: * **UI Integration**: Users can select, apply, and edit templates directly inside the CE.SDK interface. * **Programmatic Access**: Use the SDK’s APIs to create, apply, or modify templates as part of an automated workflow. * **Asset Library Integration**: Templates can appear in the asset library, allowing users to browse and pick templates visually. * The Asset Library’s appearance and behavior can be fully customized to fit your app’s needs. ## Managing Templates[#](#managing-templates) Templates are saved and reused just like any other CE.SDK asset: * **Save Templates** to a _Template Library_. * **Edit or Remove** existing templates from your asset library. * Templates are saved as Scene (`.scene`) or Archive (`.zip`) files and can be loaded across all platforms supported by CE.SDK (Web, Mobile, Server, Desktop) ## Default and Premium Templates[#](#default-and-premium-templates) * **Default Templates**: CE.SDK may include a small number of starter templates depending on your configuration. * **Premium Templates**: IMG.LY offers a growing collection of professionally designed templates available for licensing. * Templates can be imported, customized, and used directly within your app. Check your license or speak with our team for details on accessing premium templates. ## Templates as Assets[#](#templates-as-assets) Templates are treated as **assets** in CE.SDK. That means: * They can be included in local or remote asset libraries. * They can be shared, versioned, and indexed using the same systems as images or videos. * You can apply your own metadata, tags, and search capabilities to them. --- [Source](https:/img.ly/docs/cesdk/angular/create-templates/lock-131489) # Lock the Template ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { const scene = await engine.scene.createFromImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); const block = engine.block.findByType('graphic')[0]; const scopes = engine.editor.findAllScopes(); /* Let the global scope defer to the block-level. */ engine.editor.setGlobalScope('layer/move', 'Defer'); /* Manipulation of layout properties of any block will fail at this point. */ try { engine.block.setPositionX(block, 100); // Not allowed } catch (err) { console.log(err.message); } /* This will return 'Defer'. */ engine.editor.getGlobalScope('layer/move'); /* Allow the user to control the layout properties of the image block. */ engine.block.setScopeEnabled(block, 'layer/move', true); /* Manipulation of layout properties of any block is now allowed. */ try { engine.block.setPositionX(block, 100); // Allowed } catch (err) { console.log(err.message); } /* Verify that the 'layer/move' scope is now enabled for the image block. */ engine.block.isScopeEnabled(block, 'layer/move'); /* This will return true as well since the global scope is set to 'Defer'. */ engine.block.isAllowedByScope(block, 'layer/move'); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` ```
``` CE.SDK allows you to control which parts of a block can be manipulated. Scopes describe different aspects of a block, e.g. layout or style and can be enabled or disabled for every single block. There’s also the option to control a scope globally. When configuring a scope globally you can set an override to always allow or deny a certain type of manipulation for every block. Or you can configure the global scope to defer to the individual block scopes. Initially, the block-level scopes are all disabled while at the global level all scopes are set to `"Allow"`. This overrides the block-level and allows for any kind of manipulation. If you want to implement a limited editing mode in your software you can set the desired scopes on the blocks you want the user to manipulate and then restrict the available actions by globally setting the scopes to `"Defer"`. In the same way you can prevent any manipulation of properties covered by a scope by setting the respective global scope to `"Deny"`. ## Available Scopes[#](#available-scopes) You can retrieve all available scopes by calling `editor.findAllScopes()`. ``` const scopes = engine.editor.findAllScopes(); ``` We currently support the following scopes: | Scope | Explanation | | --- | --- | | `"layer/move"` | Whether the block’s position can be changed | | `"layer/resize"` | Whether the block can be resized | | `"layer/rotate"` | Whether the block’s rotation can be changed | | `"layer/flip"` | Whether the block can be flipped | | `"layer/crop"` | Whether the block’s content can be cropped | | `"layer/clipping"` | Whether the block’s clipping can be changed | | `"layer/opacity"` | Whether the block’s opacity can be changed | | `"layer/blendMode"` | Whether the block’s blend mode can be changed | | `"layer/visibility"` | Whether the block’s visibility can be changed | | `"appearance/adjustments"` | Whether the block’s adjustments can be changed | | `"appearance/filter"` | Whether the block’s filter can be changed | | `"appearance/effect"` | Whether the block’s effect can be changed | | `"appearance/blur"` | Whether the block’s blur can be changed | | `"appearance/shadow"` | Whether the block’s shadow can be changed | | `"lifecycle/destroy"` | Whether the block can be deleted | | `"lifecycle/duplicate"` | Whether the block can be duplicated | | `"editor/add"` | Whether new blocks can be added | | `"editor/select"` | Whether a block can be selected or not | | `"fill/change"` | Whether the block’s fill can be changed | | `"fill/changeType"` | Whether the block’s fill type can be changed | | `"stroke/change"` | Whether the block’s stroke can be changed | | `"shape/change"` | Whether the block’s shape can be changed | | `"text/edit"` | Whether the block’s text can be changed | | `"text/character"` | Whether the block’s text properties can be changed | ## Managing Scopes[#](#managing-scopes) First, we globally defer the `'layer/move'` scope to the block-level using `editor.setGlobalScope('layer/move', 'Defer')`. Since all blocks default to having their scopes set to `false` initially, modifying the layout properties of any block will fail at this point. | Value | Explanation | | --- | --- | | `"Allow"` | Manipulation of properties covered by the scope is always allowed | | `"Deny"` | Manipulation of properties covered by the scope is always denied | | `"Defer"` | Permission is deferred to the scope of the individual blocks | ``` /* Let the global scope defer to the block-level. */engine.editor.setGlobalScope('layer/move', 'Defer'); /* Manipulation of layout properties of any block will fail at this point. */try { engine.block.setPositionX(block, 100); // Not allowed} catch (err) { console.log(err.message);} ``` We can verify the current state of the global `'layer/move'` scope using `editor.getGlobalScope('layer/move')`. ``` /* This will return 'Defer'. */engine.editor.getGlobalScope('layer/move'); ``` Now we can allow the `'layer/move'` scope for a single block by setting it to `true` using `block.setScopeEnabled(block: number, key: string, enabled: boolean)`. ``` /* Allow the user to control the layout properties of the image block. */engine.block.setScopeEnabled(block, 'layer/move', true); /* Manipulation of layout properties of any block is now allowed. */try { engine.block.setPositionX(block, 100); // Allowed} catch (err) { console.log(err.message);} ``` Again we can verify this change by calling `block.isScopeEnabled(block: number, key: string): boolean`. ``` /* Verify that the 'layer/move' scope is now enabled for the image block. */engine.block.isScopeEnabled(block, 'layer/move'); ``` Finally, `block.isAllowedByScope(block: number, key: string): boolean` will allow us to verify a block’s final scope state by taking both the global state as well as block-level state into account. ``` /* This will return true as well since the global scope is set to 'Defer'. */engine.block.isAllowedByScope(block, 'layer/move'); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { let scene = await engine.scene.createFromImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg', ); const block = engine.block.findByType('graphic')[0]; const scopes = engine.editor.findAllScopes(); /* Let the global scope defer to the block-level. */ engine.editor.setGlobalScope('layer/move', 'Defer'); /* Manipulation of layout properties of any block will fail at this point. */ try { engine.block.setPositionX(block, 100); // Not allowed } catch (err) { console.log(err.message); } /* This will return 'Defer'. */ engine.editor.getGlobalScope('layer/move'); /* Allow the user to control the layout properties of the image block. */ engine.block.setScopeEnabled(block, 'layer/move', true); /* Manipulation of layout properties of any block is now allowed. */ try { engine.block.setPositionX(block, 100); // Allowed } catch (err) { console.log(err.message); } /* Verify that the 'layer/move' scope is now enabled for the image block. */ engine.block.isScopeEnabled(block, 'layer/move'); /* This will return true as well since the global scope is set to 'Defer'. */ engine.block.isAllowedByScope(block, 'layer/move'); // Attach engine canvas to DOM document.getElementById('cesdk_container').append(engine.element);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/create-templates/import-e50084) # Import Templates --- [Source](https:/img.ly/docs/cesdk/angular/create-templates/from-scratch-663cda) # Create From Scratch To make the templates you created available to users, you need to create an asset source. This example shows the minimal amount of code you need to write to have your templates appear in the Asset Library. For a more complete description of the different ways you can configure the asset library, take a look at the [customize asset library guide](angular/import-media/asset-panel/customize-c9a4de/) . ### Add local asset source[#](#add-local-asset-source) Add a local asset source, using an arbitrary id that identifies the asset source. In this case the asset source id is `my-templates`. ``` cesdk.engine.asset.addLocalSource( 'my-templates', undefined, function applyAsset(asset) { cesdk.engine.scene.applyTemplateFromURL(asset.meta.uri); },); ``` ### applyAsset()[#](#applyasset) Assets that the user has chosen from the asset library are passed to the `applyAsset` function. This function determines what to do with the selected asset. In our case we want to apply it to the scene using the [scene API](angular/concepts/scenes-e8596d/) . Note that you can access the entire asset object here. This means you can use it to store and process arbitrary information in the `meta` property. In this example, we are passing a URI to a template file, but you could also pass an internal identifier, a serialized scene string, or additional data to further modify or process the template using the available API methods. ``` function applyAsset(asset) { cesdk.engine.scene.applyTemplateFromURL(asset.meta.uri);} ``` ### Source Id[#](#source-id) Every asset source needs a source id. Which one you chose does not really matter, as long as it is unique. ``` 'my-templates', undefined, ``` ### Add template assets to the source[#](#add-template-assets-to-the-source) Every template asset should have four different properties: * `id: string` needs to be a uniqe identifier. It is mainly used internally and can be chosen arbitrarily. * `label: string` describes the template and is being rendered inside the template library via tooltip and as ARIA label. * `meta.thumbUri: string` pointing to a thumbnail source. Thumbnails are used in the template library shown in the inspector and should ideally have a width of 400px for landscape images. Keep in mind, that a large number of large thumbnails may slow down the library. * `meta.uri: string` provides the scene to load, when selecting the template. This can either be a raw scene string starting with `UBQ1`, an absolute or relative URL pointing at a scene file, or an async function that returns a scene string upon resolve. ``` cesdk.engine.asset.addAssetToSource('my-templates', { id: 'template1', label: 'Template 1', meta: { uri: `${window.location.protocol}//${window.location.host}/template.scene`, thumbUri: `${window.location.protocol}//${window.location.host}/template_thumb.png`, },}); ``` ### UI Config[#](#ui-config) It is not enough to add the asset source to the Creative Engine. You also need to configure how the asset source will appear in the asset library. For more information, see the [asset library guide](angular/import-media/asset-panel/customize-c9a4de/) . In this example we provide the minimal configuration to have the template library we just created appear. ``` cesdk.ui.addAssetLibraryEntry({ id: 'my-templates-entry', sourceIds: ['my-templates'], sceneMode: 'Design', previewLength: 5, previewBackgroundType: 'cover', gridBackgroundType: 'cover', gridColumns: 3,});cesdk.ui.setDockOrder([ { id: 'ly.img.assetLibrary.dock', key: 'my-templates-dock-entry', label: 'My Templates', icon: '@imgly/Template', entries: ['my-templates-entry'], },]); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`,}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true, }); cesdk.engine.asset.addLocalSource( 'my-templates', undefined, function applyAsset(asset) { cesdk.engine.scene.applyTemplateFromURL(asset.meta.uri); }, ); cesdk.engine.asset.addAssetToSource('my-templates', { id: 'template1', label: 'Template 1', meta: { uri: `${window.location.protocol}//${window.location.host}/template.scene`, thumbUri: `${window.location.protocol}//${window.location.host}/template_thumb.png`, }, }); cesdk.ui.addAssetLibraryEntry({ id: 'my-templates-entry', sourceIds: ['my-templates'], sceneMode: 'Design', previewLength: 5, previewBackgroundType: 'cover', gridBackgroundType: 'cover', gridColumns: 3, }); cesdk.ui.setDockOrder([ { id: 'ly.img.assetLibrary.dock', key: 'my-templates-dock-entry', label: 'My Templates', icon: '@imgly/Template', entries: ['my-templates-entry'], }, ]); cesdk.createDesignScene();}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/create-templates/add-dynamic-content-53fad7) # Dynamic Content --- [Source](https:/img.ly/docs/cesdk/angular/create-composition/overview-5b19c5) # Overview In CreativeEditor SDK (CE.SDK), a _composition_ is an arrangement of multiple design elements—such as images, text, shapes, graphics, and effects—combined into a single, cohesive visual layout. Unlike working with isolated elements, compositions allow you to design complex, multi-element visuals that tell a richer story or support more advanced use cases. All composition processing is handled entirely on the client side, ensuring fast, secure, and efficient editing without requiring server infrastructure. You can use compositions to create a wide variety of projects, including social media posts, marketing materials, collages, and multi-page exports like PDFs. Whether you are building layouts manually through the UI or generating them dynamically with code, compositions give you the flexibility and control to design at scale. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Working with Multiple Pages and Artboards[#](#working-with-multiple-pages-and-artboards) CE.SDK supports working with multiple artboards or canvases within a single document, enabling you to design multi-page layouts or create several design variations within the same project. Typical multi-page use cases include: * Designing multi-page marketing brochures. * Exporting designs as multi-page PDFs. * Building multiple versions of a design for different audiences or platforms. ## Working with Elements[#](#working-with-elements) You can easily arrange and manage elements within a composition: * **Positioning and Aligning:** Move elements precisely and align them to each other or to the canvas. * **Guides and Snapping:** Use visual guides and automatic snapping to align objects accurately. * **Grouping:** Group elements for easier collective movement and editing. * **Layer Management:** Control the stacking order and organize elements in layers. * **Locking:** Lock elements to prevent accidental changes during editing. ## UI vs. Programmatic Creation[#](#ui-vs-programmatic-creation) ### Using the UI[#](#using-the-ui) The CE.SDK UI provides drag-and-drop editing, alignment tools, a layer panel, and snapping guides, making it easy to visually build complex compositions. You can group, align, lock, and arrange elements directly through intuitive controls. ### Programmatic Creation[#](#programmatic-creation) You can also build compositions programmatically by using CE.SDK’s APIs. This is especially useful for: * Automatically generating large volumes of designs. * Creating data-driven layouts. * Integrating CE.SDK into a larger automated workflow. ## Exporting Compositions[#](#exporting-compositions) CE.SDK compositions can be exported in several formats: | Category | Supported Formats | | --- | --- | | **Images** | `.png` (with transparency), `.jpeg`, `.webp`, `.tga` | | **Video** | `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) | | **Print** | `.pdf` (supports underlayer printing and spot colors) | | **Scene** | `.scene` (description of the scene without any assets) | | **Archive** | `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) | Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. --- [Source](https:/img.ly/docs/cesdk/angular/create-composition/layer-management-18f07a) # Layer Management ``` engine.block.insertChild(page, block, 0);const parent = engine.block.getParent(block);const childIds = engine.block.getChildren(block);engine.block.appendChild(parent, block); ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to modify the hierarchy of blocks through the `block` API. ## Manipulate the hierarchy of blocks[#](#manipulate-the-hierarchy-of-blocks) Only blocks that are direct or indirect children of a `page` block are rendered. Scenes without any `page` child may not be properly displayed by the CE.SDK editor. ``` getParent(id: DesignBlockId): DesignBlockId | null ``` Query a block’s parent. * `id`: The block to query. * Returns The parent’s handle or null if the block has no parent. ``` getChildren(id: DesignBlockId): DesignBlockId[] ``` Get all children of the given block. Children are sorted in their rendering order: Last child is rendered in front of other children. * `id`: The block to query. * Returns A list of block ids. ``` insertChild(parent: DesignBlockId, child: DesignBlockId, index: number): void ``` Insert a new or existing child at a certain position in the parent’s children. Required scope: ‘editor/add’ * `parent`: The block whose children should be updated. * `child`: The child to insert. Can be an existing child of `parent`. * `index`: The index to insert or move to. ``` appendChild(parent: DesignBlockId, child: DesignBlockId): void ``` Appends a new or existing child to a block’s children. Required scope: ‘editor/add’ * `parent`: The block whose children should be updated. * `child`: The child to insert. Can be an existing child of `parent`. When adding a block to a new parent, it is automatically removed from its previous parent. ## Full Code[#](#full-code) Here’s the full code: ``` engine.block.insertChild(page, block, 0);const parent = engine.block.getParent(block);const childIds = engine.block.getChildren(block);engine.block.appendChild(parent, block); ``` --- [Source](https:/img.ly/docs/cesdk/angular/create-composition/group-and-ungroup-62565a) # Group and Ungroup Objects In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to group blocks through the `block` API. Groups form a cohesive unit. Groups are not currently available when editing videos. ## Grouping[#](#grouping) Multiple blocks can be grouped together to form a cohesive unit. A group being a block, it can itself be part of a group. **What cannot be grouped** * A scene * A block that already is part of a group ``` isGroupable(ids: DesignBlockId[]): boolean ``` Confirms that a given set of blocks can be grouped together. * `ids`: An array of block ids. * Returns Whether the blocks can be grouped together. ``` group(ids: DesignBlockId[]): DesignBlockId ``` Group blocks together. * `ids`: A non-empty array of block ids. * Returns The block id of the created group. ``` ungroup(id: DesignBlockId): void ``` Ungroups a group. * `id`: The group id from a previous call to `group`. ``` enterGroup(id: DesignBlockId): void ``` Changes selection from selected group to a block within that group. Nothing happens if `group` is not a group. Required scope: ‘editor/select’ * `id`: The group id from a previous call to `group`. ``` enterGroup(id: DesignBlockId): void ``` Changes selection from selected group to a block within that group. Nothing happens if `group` is not a group. Required scope: ‘editor/select’ * `id`: The group id from a previous call to `group`. ``` exitGroup(id: DesignBlockId): void ``` Changes selection from a group’s selected block to that group. Nothing happens if the `id` is not part of a group. Required scope: ‘editor/select’ * `id`: A block id. ## Full Code[#](#full-code) Here’s the full code: ``` // Create blocks and append to pageconst member1 = engine.block.create('graphic');const member2 = engine.block.create('graphic');engine.block.appendChild(page, member1);engine.block.appendChild(page, member2); // Check whether the blocks may be groupedconst groupable = engine.block.isGroupable([member1, member2]);if (groupable) { const group = engine.block.group([member1, member2]); engine.block.setSelected(group, true); engine.block.enterGroup(group); engine.block.setSelected(member1, true); engine.block.exitGroup(member1); engine.block.ungroup(group);} ``` --- [Source](https:/img.ly/docs/cesdk/angular/create-composition/blend-modes-ad3519) # Blend Modes ``` engine.block.supportsOpacity(image);engine.block.setOpacity(image, 0.5);engine.block.getOpacity(image); engine.block.supportsBlendMode(image);engine.block.setBlendMode(image, 'Multiply');engine.block.getBlendMode(image); ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to modify a blocks appearance through the `block` API. ## Common Properties[#](#common-properties) Common properties are properties that occur on multiple block types. For instance, fill color properties are available for all the shape blocks and the text block. That’s why we built convenient setter and getter functions for these properties. So you don’t have to use the generic setters and getters and don’t have to provide a specific property path. There are also `has*` functions to query if a block supports a set of common properties. ### Opacity[#](#opacity) Set the translucency of the entire block. ``` supportsOpacity(id: DesignBlockId): boolean ``` Query if the given block has an opacity. * `id`: The block to query. * Returns true, if the block has an opacity. ``` setOpacity(id: DesignBlockId, opacity: number): void ``` Set the opacity of the given design block. Required scope: ‘layer/opacity’ * `id`: The block whose opacity should be set. * `opacity`: The opacity to be set. The valid range is 0 to 1. ``` getOpacity(id: DesignBlockId): number ``` Get the opacity of the given design block. * `id`: The block whose opacity should be queried. * Returns The opacity. ### Blend Mode[#](#blend-mode) Define the blending behavior of a block. ``` supportsBlendMode(id: DesignBlockId): boolean ``` Query if the given block has a blend mode. * `id`: The block to query. * Returns true, if the block has a blend mode. ``` setBlendMode(id: DesignBlockId, blendMode: BlendMode): void ``` Set the blend mode of the given design block. Required scope: ‘layer/blendMode’ * `id`: The block whose blend mode should be set. * `blendMode`: The blend mode to be set. * Returns ``` getBlendMode(id: DesignBlockId): BlendMode ``` Get the blend mode of the given design block. * `id`: The block whose blend mode should be queried. * Returns The blend mode. ``` type BlendMode = | 'PassThrough' | 'Normal' | 'Darken' | 'Multiply' | 'ColorBurn' | 'Lighten' | 'Screen' | 'ColorDodge' | 'Overlay' | 'SoftLight' | 'HardLight' | 'Difference' | 'Exclusion' | 'Hue' | 'Saturation' | 'Color' | 'Luminosity'; ``` ## Full Code[#](#full-code) Here’s the full code: ``` engine.block.supportsOpacity(image);engine.block.setOpacity(image, 0.5);engine.block.getOpacity(image); engine.block.supportsBlendMode(image);engine.block.setBlendMode(image, 'Multiply');engine.block.getBlendMode(image); ``` --- [Source](https:/img.ly/docs/cesdk/angular/conversion/to-pdf-eb937f) # To PDF The CE.SDK allows you to convert JPEG, PNG, WebP, BMP and SVG images into PDFs directly in the browser—no server-side processing required. You can perform this conversion programmatically or through the user interface. The CE.SDK supports converting single or multiple images to PDF while allowing transformations such as cropping, rotating, and adding text before exporting. You can also customize PDF output settings, including resolution, compatibility and underlayer. ## Convert to PDF Programmatically[#](#convert-to-pdf-programmatically) You can use the CE.SDK to load an image, apply basic edits, and export it as a PDF programmatically. The following examples demonstrate how to convert a single image and how to merge multiple images into a single PDF. ### Convert a Single Image to PDF[#](#convert-a-single-image-to-pdf) The example below loads an image, applies transformations, and exports it as a PDF: ``` // Prepare an image URLconst imageURL = 'https://example.com/image.jpg'; // Create a new scene by loading the image immediatelyawait instance.createFromImage(image); // Find the automatically added graphic block with an image fillconst block = engine.block.findByType('graphic')[0]; // Apply crop with a scale ratio of 2.0engine.block.setCropScaleRatio(block, 2.0); // Export as PDF Blobconst page = engine.scene.getCurrentPage();const blob = await engine.block.export(page, { mimeType: 'application/pdf' });// You can now save it or display it in your application ``` ### Combine Multiple Images into a Single PDF[#](#combine-multiple-images-into-a-single-pdf) The example below demonstrates how to merge multiple images into a single PDF document: ``` // Prepare image URLsconst images = [ 'https://example.com/image1.jpg', 'https://example.com/image2.png', 'https://example.com/image3.webp',]; // Create an empty scene with a 'VerticalStack' layoutconst scene = await engine.scene.create('VerticalStack');const [stack] = engine.block.findByType('stack'); // Load all images as pagesfor (const image of images) { // Append the new page to the stack const page = engine.block.create('page'); engine.block.appendChild(stack, page); // Set the image as the fill of the page const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', image); engine.block.setFill(page, imageFill);} // Export all images as a single PDF blobconst blob = await engine.block.export(scene, { mimeType: 'application/pdf' });// You can now save it or display it in your application ``` ## PDF Conversion via the User Interface[#](#pdf-conversion-via-the-user-interface) The CE.SDK allows you to enable PDF conversion directly from the user interface. You can customize the UI to include a “Convert to PDF” button, allowing users to trigger conversion to PDF after they [upload images](angular/insert-media/images-63848a/) and perform any edits or adjustments. ## Enable PDF Conversion in the UI[#](#enable-pdf-conversion-in-the-ui) To modify the UI and add a “Convert to PDF” button to the navigation bar: ``` // Register a custom button componentinstance.ui.registerComponent( 'convert.nav', ({ builder: { Button }, engine }) => { Button('conver-to-pdf', { label: 'Convert To PDF', icon: '@imgly/Download', color: 'accent', onClick: async () => { // Export the current scene as a PDF blob const scene = engine.scene.get(); const blob = await engine.block.export(scene, { mimeType: 'application/pdf', }); // Trigger download of the PDF blob const element = document.createElement('a'); element.setAttribute('href', window.URL.createObjectURL(blob)); element.setAttribute('download', 'converted.pdf'); element.style.display = 'none'; element.click(); element.remove(); }, }); },); // Add the custom button at the end of the navigation bareditor.ui.setNavigationBarOrder([ ...editor.ui.getNavigationBarOrder(), 'convert.nav',]); ``` For more details on customizing the UI, see the [User Interface Configuration Guide](angular/user-interface/customization-72b2f8/) . ## Configuring PDF Output[#](#configuring-pdf-output) The SDK provides various options for customizing PDF exports. You can control resolution, compatibility and underlayer. ### Available PDF Output Settings[#](#available-pdf-output-settings) * **Resolution:** Adjust the DPI (dots per inch) to create print-ready PDFs with the desired level of detail. * **Page Size:** Define custom dimensions in pixels for the output PDF. If specified, the block will scale to fully cover the target size while maintaining its aspect ratio. * **Compatibility:** Enable this setting to improve compatibility with various PDF viewers. When enabled, images and effects are rasterized based on the scene’s DPI instead of being embedded as vector elements. * **Underlayer:** Add an underlayer beneath the image content to optimize printing on non-white or specialty media (e.g., fabric, glass). The ink type is defined in `ExportOptions` using a spot color. You can also apply a positive or negative offset, in design units, to adjust the underlayer’s scale. ### PDF Performance Optimization[#](#pdf-performance-optimization) The `exportPdfWithHighCompatibility` flag significantly impacts PDF export performance, especially for high-DPI content: **When `true` (default - safer but slower):** * Rasterizes images and gradients at the scene’s DPI setting * Maximum compatibility with all PDF viewers including Safari and macOS Preview * Slower performance (4-10x slower for high-DPI content) * Larger file sizes **When `false` (faster but needs testing):** * Embeds images and gradients directly as native PDF objects * 6-15x faster export performance for high-DPI content * Smaller file sizes (typically 30-40% reduction) * May have rendering issues in Safari/macOS Preview with gradients that use transparency ``` const scene = engine.scene.get(); // For maximum performance (test with your print workflow first)engine.block.setFloat(scene, 'scene/dpi', 150); // Reduce from default 300const blob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: false, // Much faster}); ``` **Before using `exportPdfWithHighCompatibility: false` in production:** * Test generated PDFs with your actual print vendor/equipment * Verify rendering in Safari and macOS Preview if end-users will view PDFs in those applications * Check that gradients with transparency render correctly * Confirm your content renders properly in Adobe Acrobat and Chrome (these typically work fine) **Safe to use `false` when:** * PDFs go directly to professional printing (not viewed in Safari/Preview) * Content is primarily photos and solid colors (minimal gradients with transparency) * Performance is critical for batch processing workflows **Keep `true` when:** * Users view PDFs in Safari or macOS Preview * Maximum compatibility is required * Content has complex gradients with transparency * You cannot test with your print workflow before production ### Customizing PDF Output[#](#customizing-pdf-output) You can configure these settings when exporting: ``` const scene = engine.scene.get(); // Adjust the DPI to 72engine.block.setFloat(scene, 'scene/dpi', 72); // Set spot color to be used as underlayerengine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); const blob = await engine.block.export(scene, { mimeType: 'application/pdf', // Set target width and height in pixels targetWidth: 800, targetHeight: 600, // Increase compatibility with different PDF viewers exportPdfWithHighCompatibility: true, // Add an underlayer beneath the image content exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', underlayerOffset: -2.0,}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/conversion/overview-44dc58) # Overview CreativeEditor SDK (CE.SDK) allows you to export designs into a variety of formats, making it easy to prepare assets for web publishing, printing, storage, and other workflows. You can trigger conversions either programmatically through the SDK’s API or manually using the built-in export options available in the UI. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Supported Input and Output Formats[#](#supported-input-and-output-formats) CE.SDK accepts a range of input formats when working with designs, including: | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. When it comes to exporting or converting designs, the SDK supports the following output formats: | Category | Supported Formats | | --- | --- | | **Images** | `.png` (with transparency), `.jpeg`, `.webp`, `.tga` | | **Video** | `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) | | **Print** | `.pdf` (supports underlayer printing and spot colors) | | **Scene** | `.scene` (description of the scene without any assets) | | **Archive** | `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) | Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. Each format serves different use cases, giving you the flexibility to adapt designs for your application’s needs. ## Conversion Methods[#](#conversion-methods) There are two main ways to trigger a conversion: * **Programmatically:** Use CE.SDK’s API methods to perform conversions directly from your code. This gives you full control over the export process, allowing you to customize settings, automate workflows, and integrate with other systems. * **Through the UI:** End users can trigger exports manually through CE.SDK’s built-in export options. The UI provides an intuitive way to export designs without writing code, ideal for non-technical users. Both methods provide access to core conversion features, ensuring you can choose the workflow that fits your project. ## Customization Options[#](#customization-options) When exporting designs, CE.SDK offers several customization options to meet specific output requirements: * **Resolution and DPI Settings:** Adjust the resolution for raster exports like PNG to optimize for screen or print. * **Output Dimensions:** Define custom width and height settings for the exported file, independent of the original design size. * **File Quality:** For formats that support compression (such as PNG or PDF), you can control the quality level to balance file size and visual fidelity. * **Background Transparency:** Choose whether to preserve transparent backgrounds or export with a solid background color. * **Page Selection:** When exporting multi-page documents (e.g., PDFs), you can select specific pages or export all pages at once. * **Video Frame Selection:** When exporting from a video, you can select a specific frame to export as an image, allowing for thumbnail generation or frame captures. These options help ensure that your exported content is optimized for its intended platform, whether it’s a website, a mobile app, or a print-ready document. --- [Source](https:/img.ly/docs/cesdk/angular/concepts/undo-and-history-99479d) # Undo and History ``` // Manage history stacksconst newHistory = engine.editor.createHistory();const oldHistory = engine.editor.getActiveHistory();engine.editor.setActiveHistory(newHistory);engine.editor.destroyHistory(oldHistory); const unsubscribe = engine.editor.onHistoryUpdated(() => { const canUndo = engine.editor.canUndo(); const canRedo = engine.editor.canRedo(); console.log('History updated', { canUndo, canRedo });}); // Push a new state to the undo stackengine.editor.addUndoStep(); // Perform an undo, if possible.if (engine.editor.canUndo()) { engine.editor.undo();} // Perform a redo, if possible.if (engine.editor.canRedo()) { engine.editor.redo();} ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to undo and redo steps in the `editor` API. ## Functions[#](#functions) ``` createHistory(): HistoryId ``` Create a history which consists of an undo/redo stack for editing operations. There can be multiple. But only one can be active at a time. * Returns The handle of the created history. ``` destroyHistory(history: HistoryId): void ``` Destroy the given history, throws an error if the handle doesn’t refer to a history. * `history`: The history to destroy. ``` setActiveHistory(history: HistoryId): void ``` Mark the given history as active, throws an error if the handle doesn’t refer to a history. All other histories get cleared from the active state. Undo/redo operations only apply to the active history. * `history`: The history to make active. ``` getActiveHistory(): HistoryId ``` Get the handle to the currently active history. If there’s none it will be created. * Returns History - The handle of the active history. ``` addUndoStep(): void ``` Adds a new history state to the stack, if undoable changes were made. ``` undo(): void ``` Undo one step in the history if an undo step is available. ``` canUndo(): boolean ``` If an undo step is available. * Returns True if an undo step is available. ``` redo(): void ``` Redo one step in the history if a redo step is available. ``` canRedo(): boolean ``` If a redo step is available. * Returns True if a redo step is available. ``` onHistoryUpdated: (callback: () => void) => (() => void) ``` Subscribe to changes to the undo/redo history. * `callback`: This function is called at the end of the engine update, if the undo/redo history has been changed. * Returns A method to unsubscribe ## Full Code[#](#full-code) Here’s the full code: ``` // Manage history stacksconst newHistory = engine.editor.createHistory();const oldHistory = engine.editor.getActiveHistory();engine.editor.setActiveHistory(newHistory);engine.editor.destroyHistory(oldHistory); const unsubscribe = engine.editor.onHistoryUpdated(() => { const canUndo = engine.editor.canUndo(); const canRedo = engine.editor.canRedo(); console.log('History updated', { canUndo, canRedo });}); // Push a new state to the undo stackengine.editor.addUndoStep(); // Perform an undo, if possible.if (engine.editor.canUndo()) { engine.editor.undo();} // Perform a redo, if possible.if (engine.editor.canRedo()) { engine.editor.redo();} ``` --- [Source](https:/img.ly/docs/cesdk/angular/concepts/scenes-e8596d) # Scenes ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then((engine) => { document.getElementById('cesdk_container').append(engine.element); let scene = engine.scene.get(); /* In engine only mode we have to create our own scene and page. */ if (!scene) { scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); } /* Find all pages in our scene. */ const pages = engine.block.findByType('page'); /* Use the first page we found. */ const page = pages[0]; /* Create an graphic block with an image fill and add it to the scene's page. */ const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setFill(block, imageFill); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); /* The content fill mode 'Contain' ensures the entire image is visible. */ engine.block.setEnum(block, 'contentFill/mode', 'Contain'); engine.block.appendChild(page, block); /* Zoom the scene's camera on our page. */ engine.scene.zoomToBlock(page);}); ``` ```
``` Commonly, a scene contains several pages which in turn contain any other blocks such as images and texts. A block (or design block) is the main building unit in CE.SDK. Blocks are organized in a hierarchy through parent-child relationships. A scene is a specialized block that acts as the root of this hierarchy. At any time, the engine holds only a single scene. Loading or creating a scene will replace the current one. ## Interacting With The Scene[#](#interacting-with-the-scene) ### Creating or Using an Existing Scene[#](#creating-or-using-an-existing-scene) When using the Engine’s API in the context of the CE.SDK editor, there’s already an existing scene. You can obtain a handle to this scene by calling the [SceneAPI](angular/concepts/scenes-e8596d/) ’s `scene.get(): number` method. However, when using the Engine on its own you first have to create a scene, e.g. using `scene.create(): number`. See the [Creating Scenes](angular/open-the-editor-23a1db/) guide for more details and options. ``` let scene = engine.scene.get(); /* In engine only mode we have to create our own scene and page. */ if (!scene) { scene = engine.scene.create(); ``` Next, we need a page to place our blocks on. The scene automatically arranges its pages either in a vertical (the default) or horizontal layout. Again in the context of the editor, there’s already an existing page. To fetch that page call the [BlockAPI](angular/concepts/blocks-90241e/) ’s `block.findByType(type: ObjectType): number[]` method and use the first element of the returned array. When only using the engine, you have to create a page yourself and append it to the scene. To do that create the page using `block.create(type: DesignBlockType): number` and append it to the scene with `block.appendChild(parent: number, child: number)`. ``` const page = engine.block.create('page'); engine.block.appendChild(scene, page); } /* Find all pages in our scene. */ const pages = engine.block.findByType('page'); /* Use the first page we found. */ const page = pages[0]; ``` At this point, you should have a handle to an existing scene as well as a handle to its page. Now it gets interesting when we start to add different types of blocks to the scene’s page. ### Modifying the Scene[#](#modifying-the-scene) As an example, we create a graphic block using the [BlockAPI](angular/concepts/blocks-90241e/) ’s `create()` method which we already used for creating our page. Then we set a rect shape and an image fill to this newly created block to give it a visual representation. To see what other kinds of blocks are available see the [Block Types](angular/concepts/blocks-90241e/) in the API Reference. ``` /* Create an graphic block with an image fill and add it to the scene's page. */const block = engine.block.create('graphic');engine.block.setShape(block, engine.block.createShape('rect'));const imageFill = engine.block.createFill('image');engine.block.setFill(block, imageFill); ``` We set a property of our newly created image fill by giving it a URL to reference an image file from. We also make sure the entire image stays visible by setting the block’s content fill mode to `'Contain'`. To learn more about block properties check out the [Block Properties](angular/concepts/blocks-90241e/) API Reference. ``` engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg');/* The content fill mode 'Contain' ensures the entire image is visible. */engine.block.setEnum(block, 'contentFill/mode', 'Contain'); ``` And finally, for our image to be visible we have to add it to our page using `appendChild`. ``` engine.block.appendChild(page, block); ``` To frame everything nicely and put it into view we direct the scene’s camera to zoom on our page. ``` /* Zoom the scene's camera on our page. */engine.scene.zoomToBlock(page); ``` ## Scene Type[#](#scene-type) Represents the scene and its global properties. This section describes the properties available for the **Scene Type** (`//ly.img.ubq/scene`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `alwaysOnBottom` | `Bool` | `false` | If true, this element’s global sorting order is automatically adjusted to be lower than all other siblings. | | `alwaysOnTop` | `Bool` | `false` | If true, this element’s global sorting order is automatically adjusted to be higher than all other siblings. | | `blend/mode` | `Enum` | `"Normal"` | The blend mode to use when compositing the block., Possible values: `"PassThrough"`, `"Normal"`, `"Darken"`, `"Multiply"`, `"ColorBurn"`, `"LinearBurn"`, `"DarkenColor"`, `"Lighten"`, `"Screen"`, `"ColorDodge"`, `"LinearDodge"`, `"LightenColor"`, `"Overlay"`, `"SoftLight"`, `"HardLight"`, `"VividLight"`, `"LinearLight"`, `"PinLight"`, `"HardMix"`, `"Difference"`, `"Exclusion"`, `"Subtract"`, `"Divide"`, `"Hue"`, `"Saturation"`, `"Color"`, `"Luminosity"` | | `clipped` | `Bool` | `false` | This component is used to identify elements whose contents and children should be clipped to their bounds. | | `contentFill/mode` | `Enum` | `"Cover"` | Defines how content should be resized to fit its container (e.g., Cover, Contain, Stretch)., Possible values: `"Crop"`, `"Cover"`, `"Contain"` | | `flip/horizontal` | `Bool` | `"-"` | Whether the block is flipped horizontally. | | `flip/vertical` | `Bool` | `"-"` | Whether the block is flipped vertically. | | `globalBoundingBox/height` | `Float` | `"-"` | The height of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/width` | `Float` | `"-"` | The width of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/x` | `Float` | `"-"` | The x-coordinate of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/y` | `Float` | `"-"` | The y-coordinate of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `height` | `Float` | `0` | The height of the block’s frame. | | `height/mode` | `Enum` | `"Auto"` | A mode describing how the height dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `highlightEnabled` | `Bool` | `true` | Show highlighting when selected or hovered | | `lastFrame/height` | `Float` | `"-"` | The height of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/width` | `Float` | `"-"` | The width of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/x` | `Float` | `"-"` | The x-coordinate of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/y` | `Float` | `"-"` | The y-coordinate of the block’s frame from the previous layout pass., _(read-only)_ | | `placeholder/enabled` | `Bool` | `false` | Whether the placeholder behavior is enabled or not. | | `playback/playing` | `Bool` | `false` | A tag that can be set on elements for their playback time to be progressed. | | `playback/soloPlaybackEnabled` | `Bool` | `false` | A tag for blocks where playback should progress while the scene is paused. | | `playback/time` | `Double` | `0` | The current playback time of the block contents in seconds. | | `position/x` | `Float` | `0` | The x-coordinate of the block’s origin. | | `position/x/mode` | `Enum` | `"Absolute"` | A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `position/y` | `Float` | `0` | The y-coordinate of the block’s origin. | | `position/y/mode` | `Enum` | `"Absolute"` | A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `rotation` | `Float` | `0` | The rotation of the block in degrees. | | `scene/aspectRatioLock` | `Bool` | `true` | Whether the ratio of the pageDimensions’ width and height should remain constant when changing either dimension. | | `scene/designUnit` | `Enum` | `"Pixel"` | The unit type in which the page values (size, distances, etc.) are defined., Possible values: `"Pixel"`, `"Millimeter"`, `"Inch"` | | `scene/dpi` | `Float` | `300` | The DPI value to use when exporting and when converting between pixels and inches or millimeter units. | | `scene/layout` | `Enum` | `"Free"` | A value describing how the scene’s children are laid out., Possible values: `"Free"`, `"VerticalStack"`, `"HorizontalStack"`, `"DepthStack"` | | `scene/mode` | `Enum` | `"Video"` | The mode of this scene and all elements inside of it., _(read-only)_, Possible values: `"Design"`, `"Video"` | | `scene/pageDimensions/height` | `Float` | `1` | The height of all pages in this scene. | | `scene/pageDimensions/width` | `Float` | `1` | The width of all pages in this scene. | | `scene/pageFormatId` | `String` | `""` | The identifier of the page format configuration that was most recently selected for the pages in this scene. | | `scene/pixelScaleFactor` | `Float` | `1` | A scale factor that is applied to the final export resolution if the design unit is Pixel. | | `selected` | `Bool` | `false` | Indicates if the block is currently selected. | | `selectionEnabled` | `Bool` | `false` | Whether the block can be selected in the editor. | | `transformLocked` | `Bool` | `false` | DesignBlocks with this tag can’t be transformed (moved, rotated, scaled, cropped, or flipped). | | `visible` | `Bool` | `true` | If the block is visible in the editor. | | `width` | `Float` | `0` | The width of the block’s frame. | | `width/mode` | `Enum` | `"Auto"` | A mode describing how the width dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | ### Full Code[#](#full-code) Here’s the full code snippet for exploring a scene’s contents using the `scene` API: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/assets'}; CreativeEngine.init(config).then((engine) => { document.getElementById('cesdk_container').append(engine.element); let scene = engine.scene.get(); /* In engine only mode we have to create our own scene and page. */ if (!scene) { scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); } /* Find all pages in our scene. */ const pages = engine.block.findByType('page'); /* Use the first page we found. */ const page = pages[0]; /* Create an graphic block with an image fill and add it to the scene's page. */ const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setFill(block, imageFill); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); /* The content fill mode 'Contain' ensures the entire image is visible. */ engine.block.setEnum(block, 'contentFill/mode', 'Contain'); engine.block.appendChild(page, block); /* Zoom the scene's camera on our page. */ engine.scene.zoomToBlock(page);}); ``` ## Exploring Scene Contents Using The Scene API[#](#exploring-scene-contents-using-the-scene-api) ### Functions[#](#functions) ``` getPages(): DesignBlockId[] ``` Get the sorted list of pages in the scene. * Returns The sorted list of pages in the scene. ``` setDesignUnit(designUnit: DesignUnit): void ``` Converts all values of the current scene into the given design unit. * `designUnit`: The new design unit of the scene ``` getDesignUnit(): DesignUnit ``` Returns the design unit of the current scene. * Returns The current design unit. ``` type DesignUnit = 'Pixel' | 'Millimeter' | 'Inch'; ``` The unit type in which the page values (size, distances, etc.) are defined. ``` getCurrentPage(): DesignBlockId | null ``` Get the current page, i.e., the page of the first selected element if this page is at least 25% visible or, otherwise, the page nearest to the viewport center. * Returns The current page in the scene or null. ``` findNearestToViewPortCenterByType(type: DesignBlockType): DesignBlockId[] ``` Find all blocks with the given type sorted by the distance to viewport center. * `type`: The type to search for. * Returns A list of block ids sorted by distance to viewport center. ``` findNearestToViewPortCenterByKind(kind: string): DesignBlockId[] ``` Find all blocks with the given kind sorted by the distance to viewport center. * `kind`: The kind to search for. * Returns A list of block ids sorted by distance to viewport center. ### Full Code[#](#full-code-1) Here’s the full code for exploring a scene’s contents: ``` const pages = engine.scene.getPages();const currentPage = engine.scene.getCurrentPage();const nearestPageByType = engine.scene.findNearestToViewPortCenterByType('//ly.img.ubq/page')[0];const nearestImageByKind = engine.scene.findNearestToViewPortCenterByKind('image')[0]; engine.scene.setDesignUnit('Pixel'); /* Now returns 'Pixel' */engine.scene.getDesignUnit(); ``` ## Exploring Scene Contents Using The Block API[#](#exploring-scene-contents-using-the-block-api) Learn how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to explore scenes through the `block` API. ### Functions[#](#functions-1) ``` findAll(): DesignBlockId[] ``` Return all blocks currently known to the engine. * Returns A list of block ids. ``` findAllPlaceholders(): DesignBlockId[] ``` Return all placeholder blocks in the current scene. * Returns A list of block ids. ``` findByType(type: ObjectType): DesignBlockId[] ``` Finds all blocks with the given type. * `type`: The type to search for. * Returns A list of block ids. ``` findByKind(kind: string): DesignBlockId[] ``` Finds all blocks with the given kind. * `kind`: The kind to search for. * Returns A list of block ids. ``` findByName(name: string): DesignBlockId[] ``` Finds all blocks with the given name. * `name`: The name to search for. * Returns A list of block ids. ### Full Code[#](#full-code-2) Here’s the full code snippet for exploring a scene’s contents using the `block` API: ``` const allIds = engine.block.findAll();const allPlaceholderIds = engine.block.findAllPlaceholders();const allPages = engine.block.findByType('page');const allImageFills = engine.block.findByType('fill/image');const allStarShapes = engine.block.findByType('shape/star');const allHalfToneEffects = try engine.block.findByType('effect/half_tone')const allUniformBlurs = try engine.block.findByType('blur/uniform')const allStickers = engine.block.findByKind('sticker');const ids = engine.block.findByName('someName'); ``` --- [Source](https:/img.ly/docs/cesdk/angular/concepts/resources-a58d71) # Working With Resources ``` const scene = engine.scene.get(); // Forcing all resources of all the blocks in a scene or the resources of graphic block to loadawait engine.block.forceLoadResources([scene]); const graphics = engine.block.findByType('graphic');await engine.block.forceLoadResources(graphics); ``` By default, a scene’s resources are loaded on-demand. You can manually trigger the loading of all resources in a scene of for specific blocks by calling `forceLoadResources`. Any set of blocks can be passed as argument and whatever resources these blocks require will be loaded. In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to forcibly pre-load all resources contained in a scene. ``` forceLoadResources(ids: DesignBlockId[]): Promise ``` Begins loading the resources of the given blocks and their children. If the resource had been loaded earlier and resulted in an error, it will be reloaded. This function is useful for preloading resources before they are needed. Warning: For elements with a source set, all elements in the source set will be loaded. * `ids`: The blocks whose resources should be loaded. The given blocks don’t require to have resources and can have children blocks (e.g. a scene block or a page block). * Returns A Promise that resolves once the resources have finished loading. ### Full Code[#](#full-code) Here’s the full code: ``` const scene = engine.scene.get(); // Forcing all resources of all the blocks in a scene or the resources of graphic block to loadawait engine.block.forceLoadResources([scene]); const graphics = engine.block.findByType('graphic');await engine.block.forceLoadResources(graphics); ``` --- [Source](https:/img.ly/docs/cesdk/angular/concepts/pages-7b6bae) # Pages Although the editor can manage a collection of pages with varying dimensions, our interfaces are presently designed to maintain a consistent dimension across all pages. Consequently, loading scenes with pages of different dimensions may lead to unexpected behavior, and the editor might adjust your scene accordingly. ## Page Type[#](#page-type) A block representing a page within a scene. This section describes the properties available for the **Page Type** (`//ly.img.ubq/page`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `alwaysOnBottom` | `Bool` | `false` | If true, this element’s global sorting order is automatically adjusted to be lower than all other siblings. | | `alwaysOnTop` | `Bool` | `false` | If true, this element’s global sorting order is automatically adjusted to be higher than all other siblings. | | `blend/mode` | `Enum` | `"Normal"` | The blend mode to use when compositing the block., Possible values: `"PassThrough"`, `"Normal"`, `"Darken"`, `"Multiply"`, `"ColorBurn"`, `"LinearBurn"`, `"DarkenColor"`, `"Lighten"`, `"Screen"`, `"ColorDodge"`, `"LinearDodge"`, `"LightenColor"`, `"Overlay"`, `"SoftLight"`, `"HardLight"`, `"VividLight"`, `"LinearLight"`, `"PinLight"`, `"HardMix"`, `"Difference"`, `"Exclusion"`, `"Subtract"`, `"Divide"`, `"Hue"`, `"Saturation"`, `"Color"`, `"Luminosity"` | | `blur/enabled` | `Bool` | `true` | Whether the blur should be enabled or not. | | `clipped` | `Bool` | `false` | This component is used to identify elements whose contents and children should be clipped to their bounds. | | `contentFill/mode` | `Enum` | `"Cover"` | Defines how content should be resized to fit its container (e.g., Cover, Contain, Stretch)., Possible values: `"Crop"`, `"Cover"`, `"Contain"` | | `dropShadow/blurRadius/x` | `Float` | `1` | The horizontal blur radius of the drop shadow. | | `dropShadow/blurRadius/y` | `Float` | `1` | The vertical blur radius of the drop shadow. | | `dropShadow/clip` | `Bool` | `false` | Whether the drop shadow should be clipped to the block’s bounds. | | `dropShadow/color` | `Color` | `{"r":0,"g":0,"b":0,"a":0.25}` | The color of the drop shadow. | | `dropShadow/enabled` | `Bool` | `false` | Whether the drop shadow is enabled. | | `dropShadow/offset/x` | `Float` | `1.76777` | The horizontal offset of the drop shadow. | | `dropShadow/offset/y` | `Float` | `1.76777` | The vertical offset of the drop shadow. | | `fill/enabled` | `Bool` | `true` | Whether the fill should be rendered or not. | | `fill/solid/color` | `Color` | `"-"` | The fill color. | | `flip/horizontal` | `Bool` | `"-"` | Whether the block is flipped horizontally. | | `flip/vertical` | `Bool` | `"-"` | Whether the block is flipped vertically. | | `globalBoundingBox/height` | `Float` | `"-"` | The height of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/width` | `Float` | `"-"` | The width of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/x` | `Float` | `"-"` | The x-coordinate of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `globalBoundingBox/y` | `Float` | `"-"` | The y-coordinate of the block’s axis-aligned bounding box in world coordinates., _(read-only)_ | | `height` | `Float` | `100` | The height of the block’s frame. | | `height/mode` | `Enum` | `"Absolute"` | A mode describing how the height dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `highlightEnabled` | `Bool` | `true` | Show highlighting when selected or hovered | | `lastFrame/height` | `Float` | `"-"` | The height of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/width` | `Float` | `"-"` | The width of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/x` | `Float` | `"-"` | The x-coordinate of the block’s frame from the previous layout pass., _(read-only)_ | | `lastFrame/y` | `Float` | `"-"` | The y-coordinate of the block’s frame from the previous layout pass., _(read-only)_ | | `page/margin/bottom` | `Float` | `10` | The bottom page margin in local coordinates. | | `page/margin/left` | `Float` | `10` | The left page margin in local coordinates. | | `page/margin/right` | `Float` | `10` | The right page margin in local coordinates. | | `page/margin/top` | `Float` | `10` | The top page margin in local coordinates. | | `page/marginEnabled` | `Bool` | `false` | Whether the bleed margin should be applied. | | `page/titleTemplate` | `String` | `"Page {{ubq.page_index}}"` | Page title label template. Can include custom text and template variables like `{{ubq.page_index}}`. | | `placeholder/enabled` | `Bool` | `false` | Whether the placeholder behavior is enabled or not. | | `placeholderControls/showButton` | `Bool` | `false` | Show the placeholder button. | | `placeholderControls/showOverlay` | `Bool` | `false` | Show the overlay pattern. | | `playback/duration` | `Double` | `5` | The duration in seconds for which this block should be visible. | | `playback/looping` | `Bool` | `true` | Whether the medium should start from the beginning again or should stop. | | `playback/muted` | `Bool` | `false` | Whether the audio is muted. | | `playback/playing` | `Bool` | `false` | A tag that can be set on elements for their playback time to be progressed. | | `playback/soloPlaybackEnabled` | `Bool` | `false` | A tag for blocks where playback should progress while the scene is paused. | | `playback/speed` | `Float` | `1` | The playback speed multiplier. | | `playback/time` | `Double` | `0` | The current playback time of the block contents in seconds. | | `playback/volume` | `Float` | `1` | Audio volume with a range of \[0, 1\]. | | `position/x` | `Float` | `0` | The x-coordinate of the block’s origin. | | `position/x/mode` | `Enum` | `"Absolute"` | A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `position/y` | `Float` | `0` | The y-coordinate of the block’s origin. | | `position/y/mode` | `Enum` | `"Absolute"` | A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `rotation` | `Float` | `0` | The rotation of the block in degrees. | | `selected` | `Bool` | `false` | Indicates if the block is currently selected. | | `selectionEnabled` | `Bool` | `true` | Whether the block can be selected in the editor. | | `stroke/color` | `Color` | `{"r":0.67,"g":0.67,"b":0.67,"a":1}` | The color of the stroke. | | `stroke/cornerGeometry` | `Enum` | `"Miter"` | The geometry of the stroke at corners (e.g., Miter, Round, Bevel)., Possible values: `"Bevel"`, `"Miter"`, `"Round"` | | `stroke/enabled` | `Bool` | `false` | Whether the stroke is enabled. | | `stroke/position` | `Enum` | `"Center"` | The position of the stroke relative to the shape’s edge (Inside, Center, Outside)., Possible values: `"Center"`, `"Inner"`, `"Outer"` | | `stroke/style` | `Enum` | `"Solid"` | The style of the stroke (e.g., Solid, Dotted, Dashed)., Possible values: `"Dashed"`, `"DashedRound"`, `"Dotted"`, `"LongDashed"`, `"LongDashedRound"`, `"Solid"` | | `stroke/width` | `Float` | `9.44882` | The width of the stroke. | | `transformLocked` | `Bool` | `false` | DesignBlocks with this tag can’t be transformed (moved, rotated, scaled, cropped, or flipped). | | `visible` | `Bool` | `true` | If the block is visible in the editor. | | `width` | `Float` | `100` | The width of the block’s frame. | | `width/mode` | `Enum` | `"Absolute"` | A mode describing how the width dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | --- [Source](https:/img.ly/docs/cesdk/angular/concepts/events-353f97) # Events ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('star')); engine.block.setFill(block, engine.block.createFill('color')); engine.block.appendChild(page, block); const unsubscribe = engine.event.subscribe([block], (events) => { for (let i = 0; i < events.length; i++) { const event = events[i]; console.log('Event:', event.type, event.block); if (engine.block.isValid(event.block)) { console.log('Block type:', engine.block.getType(event.block)); } } }); await sleep(1000); engine.block.setRotation(block, 0.5 * Math.PI); await sleep(1000); engine.block.destroy(block); await sleep(1000); unsubscribe(); function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); }}); ``` ```
``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to subscribe to creation, update, and destruction events of design blocks. ## Subscribing to Events[#](#subscribing-to-events) The event API provides a single function to subscribe to design block events. The types of events are: * `'Created'`: The design block was just created. * `'Updated'`: A property of the design block was updated. * `'Destroyed'`: The design block was destroyed. Note that a destroyed block will have become invalid and trying to use Block API functions on it will result in an exception. You can always use the Block API’s `isValid` function to verify whether a block is valid before use. All events that occur during an engine update are batched, deduplicated, and always delivered at the very end of the engine update. Deduplication means you will receive at most one `'Updated'` event per block per subscription, even though there could potentially be multiple updates to a block during the engine update. To be clear, this also means the order of the event list provided to your event callback won’t reflect the actual order of events within an engine update. * `subscribe(blocks: number[], callback: (events: {type: string, block: number}[]) => void): () => void` subscribe to events from a given list of blocks. Providing an empty list will subscribe to events from all of the engine’s blocks. The provided callback will receive a list of events that occurred in the last engine update. Each event consists of the event `type` and the affected `block`. The returned function shall be used to unsubscribe from receiving further events. ``` const unsubscribe = engine.event.subscribe([block], (events) => { for (let i = 0; i < events.length; i++) { const event = events[i]; ``` ## Unsubscribing from events[#](#unsubscribing-from-events) * `subscribe` returns a function that can be called to unsubscribe from receiving events. Note that it is important to unsubscribe when done. At the end of each update the engine has to prepare a list of events for each individual subscriber. Unsubscribing will help to reduce unnecessary work and improve performance. ``` unsubscribe(); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('star')); engine.block.setFill(block, engine.block.createFill('color')); engine.block.appendChild(page, block); let unsubscribe = engine.event.subscribe([block], events => { for (var i = 0; i < events.length; i++) { let event = events[i]; console.log('Event:', event.type, event.block); if (engine.block.isValid(event.block)) { console.log('Block type:', engine.block.getType(event.block)); } } }); await sleep(1000); engine.block.setRotation(block, 0.5 * Math.PI); await sleep(1000); engine.block.destroy(block); await sleep(1000); unsubscribe(); function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/concepts/edit-modes-1f5b6c) # Editor State ``` const unsubscribeState = engine.editor.onStateChanged(() => console.log('Editor state has changed'),); // Native modes: 'Transform', 'Crop', 'Text'engine.editor.setEditMode('Crop');engine.editor.getEditMode(); // 'Crop' engine.editor.unstable_isInteractionHappening(); // Use this information to alter the displayed cursorengine.editor.getCursorType();engine.editor.getCursorRotation(); // Query information about the text cursor positionengine.editor.getTextCursorPositionInScreenSpaceX();engine.editor.getTextCursorPositionInScreenSpaceY(); ``` The CreativeEditor SDK operates in different states called **Edit Modes**, each designed for a specific type of interaction on the canvas: * `Transform`: this is the default mode which allow to move, resize and manipulate things on the canvas * `Text`: Allows to edit the text elements on the canvas * `Crop`: Allow to Crop media blocks (images, videos, etc…) * `Trim`: Trim the clips in video mode * `Playback`: Play the media (mostly video) in video mode While users typically interact with these modes through the UI (e.g., showing or hiding specific controls based on the active mode), it’s also possible to manage them programmatically via the engine’s API, though this isn’t always required. In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to set and query the editor state in the `editor` API, i.e., what type of content the user is currently able to edit. ## State[#](#state) The editor state consists of the current edit mode, which informs what type of content the user is currently able to edit. The edit mode can be set to either `'Transform'`, `'Crop'`, `'Text'`, or a custom user-defined one. You can also query the intended mouse cursor and the location of the text cursor while editing text. Instead of having to constantly query the state in a loop, you can also be notified when the state has changed to then act on these changes in a callback. ``` onStateChanged: (callback: () => void) => (() => void) ``` Subscribe to changes to the editor state. * `callback`: This function is called at the end of the engine update, if the editor state has changed. * Returns A method to unsubscribe. ``` setEditMode(mode: EditMode): void ``` Set the edit mode of the editor. An edit mode defines what type of content can currently be edited by the user. Hint: the initial edit mode is “Transform”. * `mode`: “Transform”, “Crop”, “Text”, “Playback”, “Trim” or a custom value. ``` getEditMode(): EditMode ``` Get the current edit mode of the editor. An edit mode defines what type of content can currently be edited by the user. * Returns “Transform”, “Crop”, “Text”, “Playback”, “Trim” or a custom value. ``` unstable_isInteractionHappening(): boolean ``` If an user interaction is happening, e.g., a resize edit with a drag handle or a touch gesture. * Returns True if an interaction is happening. ## Cursor[#](#cursor) ``` getCursorType(): 'Arrow' | 'Move' | 'MoveNotPermitted' | 'Resize' | 'Rotate' | 'Text' ``` Get the type of cursor that should be displayed by the application. * Returns The cursor type. ``` getCursorRotation(): number ``` Get the rotation with which to render the mouse cursor. * Returns The angle in radians. ``` getTextCursorPositionInScreenSpaceX(): number ``` Get the current text cursor’s x position in screen space. * Returns The text cursor’s x position in screen space. ``` getTextCursorPositionInScreenSpaceY(): number ``` Get the current text cursor’s y position in screen space. * Returns The text cursor’s y position in screen space. ## Full Code[#](#full-code) Here’s the full code: ``` const unsubscribeState = engine.editor.onStateChanged(() => console.log('Editor state has changed'),); // Native modes: 'Transform', 'Crop', 'Text'engine.editor.setEditMode('Crop');engine.editor.getEditMode(); // 'Crop' engine.editor.unstable_isInteractionHappening(); // Use this information to alter the displayed cursorengine.editor.getCursorType();engine.editor.getCursorRotation(); // Query information about the text cursor positionengine.editor.getTextCursorPositionInScreenSpaceX();engine.editor.getTextCursorPositionInScreenSpaceY(); ``` --- [Source](https:/img.ly/docs/cesdk/angular/concepts/editing-workflow-032d27) # Editing Workflow ## Roles[#](#roles) User roles allow the CE.SDK to change and adapt its UI layout and functionality to provide the optimal editing experience for a specific purpose. ### Creator[#](#creator) The `Creator` role is the most powerful and least restrictive role that is offered by the CE.SDK. Running the editor with this role means that there are no limits to what the user can do with the loaded scene. Elements can be added, moved, deleted, and modified. All types of controls for modifying the selected elements are shown inside of the inspector. ### Adopter[#](#adopter) The `Adopter` role allows new elements to be added and modified. Existing elements of a scene are only modifiable based on the set of constraints that the `Creator` has manually enabled. This provides the `Adopter` with a simpler interface that is reduced to only the properties that they should be able to change and prevents them from accidentally changing or deleting parts of a design that should not be modified. An example use case for how such a distinction between `Creator` and `Adopter` roles can provide a lot of value is the process of designing business cards. A professional designer (using the `Creator` role) can create a template design of the business card with the company name, logo, colors, etc. They can then use the constraints to make only the name text editable for non-creators. Non-designers (either the employees themselves or the HR department) can then easily open the design in a CE.SDK instance with the `Adopter` role and are able to quickly change the name on the business card and export it for printing, without a designer having to get involved. ### Role customization[#](#role-customization) Roles in the CE.SDK are sets of global scopes and settings. When changing the role via the `setRole` command in the EditorAPI, the internal defaults for that role are applied as described in the previous sections. The CE.SDK and Engine provide a `onRoleChanged` callback subscription on the EditorAPI. Callbacks registered here are invoked whenever the role changes and can be used to configure additional settings or adjust the default scopes and settings. ``` instance.engine.editor.onRoleChanged(role => { if (role === 'Adopter') { // Enable the filter tab in the appearance panel when previewing the // design in the Adopter role. instance.engine.editor.setGlobalScope('appearance/filter', 'Allow'); }}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/concepts/design-units-cc6597) # Design Units The CreativeEditor SDK (CE.SDK) Engine supports three different design units for all layouting values. This includes element positions, sizes and bleed margins. Supported design units are: * Pixels `px` * Millimeters `mm` * Inches `in` ## Font sizes[#](#font-sizes) Unlike all other values, font sizes are always defined in points `pt`. ## DPI[#](#dpi) If a scene uses a unit other than pixel `px`, the `dpi` property of that scene determines all conversions between the unit and pixels whenever necessary. Therefore, the `dpi` controls the export resolution of such a scenes blocks. This `dpi` value is also used in order to convert all font sizes into the design unit of the current scene. If the `dpi` property is changed in a scene with pixel unit, all text block’s font sizes are automatically adjusted so that the text stays visually the same size. --- [Source](https:/img.ly/docs/cesdk/angular/concepts/blocks-90241e) # Blocks Blocks are the base building blocks for scenes and represent elements on the canvas. You’re able to create complex hierarchies of blocks by appending them as children to other blocks either directly or through groups. By default, the following blocks are available: * Page: `//ly.img.ubq/page` or `page` * Graphic: `//ly.img.ubq/graphic` or `graphic` * Text: `//ly.img.ubq/text` or `text` * Audio: `//ly.img.ubq/audio` or `audio` * Cutout: `//ly.img.ubq/cutout` or `cutout` ## Lifecycle[#](#lifecycle) Only blocks that are direct or indirect children of a `page` block are rendered. Scenes without any `page` child may not be properly displayed by the CE.SDK editor. ### Functions[#](#functions) ``` create(type: DesignBlockType): DesignBlockId ``` Create a new block, fails if type is unknown. * `type`: The type of the block that shall be created. * Returns The created blocks handle. To create a scene, use [`scene.create`](angular/open-the-editor-23a1db/) instead. ``` saveToString(blocks: DesignBlockId[], allowedResourceSchemes?: string[]): Promise ``` Saves the given blocks into a string. If given the root of a block hierarchy, e.g. a page with multiple children, the entire hierarchy is saved. * `blocks`: The blocks to save * Returns A promise that resolves to a string representing the blocks or an error. ``` saveToArchive(blocks: DesignBlockId[]): Promise ``` Saves the given blocks and all of their referenced assets into an archive. The archive contains all assets that were accessible when this function was called. Blocks in the archived scene reference assets relative from to the location of the scene file. These references are resolved when loading such a scene via `loadSceneFromURL`. * `blocks`: The blocks to save * Returns A promise that resolves with a Blob on success or an error on failure. ``` loadFromString(content: string): Promise ``` Loads existing blocks from the given string. The blocks are not attached by default and won’t be visible until attached to a page or the scene. The UUID of the loaded blocks is replaced with a new one. * `content`: A string representing the given blocks. * Returns A promise that resolves with a list of handles representing the found blocks or an error. ``` loadFromArchiveURL(url: string): Promise ``` Loads existing blocks from the given URL. The blocks are not attached by default and won’t be visible until attached to a page or the scene. The UUID of the loaded blocks is replaced with a new one. * `url`: The URL to load the blocks from. * Returns A promise that resolves with a list of handles representing the found blocks or an error. ``` getType(id: DesignBlockId): ObjectTypeLonghand ``` Get the type of the given block, fails if the block is invalid. * `id`: The block to query. * Returns The blocks type. ``` setName(id: DesignBlockId, name: string): void ``` Update a block’s name. * `id`: The block to update. * `name`: The name to set. ``` getName(id: DesignBlockId): string ``` Get a block’s name. * `id`: The block to query. ``` getUUID(id: DesignBlockId): string ``` Get a block’s UUID. * `id`: The block to query. ``` duplicate(id: DesignBlockId): DesignBlockId ``` Duplicates a block including its children. Required scope: ‘lifecycle/duplicate’ If the block is parented to a track that is set always-on-bottom, the duplicate is inserted in the same track immediately after the block. Otherwise, the duplicate is moved up in the hierarchy. * `id`: The block to duplicate. * Returns The handle of the duplicate. ``` destroy(id: DesignBlockId): void ``` Destroys a block. Required scope: ‘lifecycle/destroy’ * `id`: The block to destroy. ``` isValid(id: DesignBlockId): boolean ``` Check if a block is valid. A block becomes invalid once it has been destroyed. * `id`: The block to query. * Returns True, if the block is valid. ### Full Code[#](#full-code) In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to modify scenes through the `block` API. ``` // Create, save and load blocksconst block = engine.block.create('graphic');const savedBlocksString = await engine.block.saveToString([block]);const loadedBlocksString = await engine.block.loadFromString(savedBlocks);const savedBlocksArchive = await engine.block.saveToArchive([block]);const loadedBlocksArchive = await engine.block.loadFromArchiveURL('https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1_blocks.zip'); // Check a blocks typeconst blockType = engine.block.getType(block); // Alter a blocks nameengine.block.setName(block, 'someName');const name = engine.block.getName(block);const uuid = engine.block.getUUID(block);\ // You may duplicate or destroy blocksconst duplicate = engine.block.duplicate(block);engine.block.destroy(duplicate);engine.block.isValid(duplicate); // false ``` ## Properties[#](#properties) ### UUID[#](#uuid) A universally unique identifier (UUID) is assigned to each block upon creation and can be queried. This is stable across save & load and may be used to reference blocks. ``` getUUID(id: DesignBlockId): string ``` Get a block’s UUID. * `id`: The block to query. ### Reflection[#](#reflection) For every block, you can get a list of all its properties by calling `findAllProperties(id: number): string[]`. Properties specific to a block are prefixed with the block’s type followed by a forward slash. There are also common properties shared between blocks which are prefixed by their respective type. A list of all properties can be found in the [Blocks Overview](angular/concepts/blocks-90241e/) . ``` findAllProperties(id: DesignBlockId): string[] ``` Get all available properties of a block. * `id`: The block whose properties should be queried. * Returns A list of the property names. Given a property, you can query its type as an enum using `getPropertyType(property: string): 'Bool' | 'Int' | 'Float' | 'String' | 'Color' | 'Enum' | 'Struct'`. ``` getPropertyType(property: string): PropertyType ``` Get the type of a property given its name. * `property`: The name of the property whose type should be queried. * Returns The property type. The property type `'Enum'` is a special type. Properties of this type only accept a set of certain strings. To get a list of possible values for an enum property call `getEnumValues(enumProperty: string): string[]`. ``` getEnumValues(enumProperty: string): T[] ``` Get all the possible values of an enum given an enum property. * `enumProperty`: The name of the property whose enum values should be queried. * Returns A list of the enum value names as string. Some properties can only be written to or only be read. To find out what is possible with a property, you can use the `isPropertyReadable` and `isPropertyWritable` methods. ``` isPropertyReadable(property: string): boolean ``` Check if a property with a given name is readable * `property`: The name of the property whose type should be queried. * Returns Whether the property is readable or not. Will return false for unknown properties ``` isPropertyWritable(property: string): boolean ``` Check if a property with a given name is writable * `property`: The name of the property whose type should be queried. * Returns Whether the property is writable or not. Will return false for unknown properties ### Generic Properties[#](#generic-properties) There are dedicated setter and getter functions for each property type. You have to provide a block and the property path. Use `findAllProperties` to get a list of all the available properties a block has. Please make sure you call the setter and getter function matching the type of the property you want to set or query or else you will get an error. Use `getPropertyType` to figure out the pair of functions you need to use. ``` findAllProperties(id: DesignBlockId): string[] ``` Get all available properties of a block. * `id`: The block whose properties should be queried. * Returns A list of the property names. ``` setBool(id: DesignBlockId, property: string, value: boolean): void ``` Set a bool property of the given design block to the given value. * `id`: The block whose property should be set. * `property`: The name of the property to set. * `value`: The value to set. ``` getBool(id: DesignBlockId, property: string): boolean ``` Get the value of a bool property of the given design block. * `id`: The block whose property should be queried. * `property`: The name of the property to query. * Returns The value of the property. ``` setInt(id: DesignBlockId, property: string, value: number): void ``` Set an int property of the given design block to the given value. * `id`: The block whose property should be set. * `property`: The name of the property to set. * `value`: The value to set. ``` getInt(id: DesignBlockId, property: string): number ``` Get the value of an int property of the given design block. * `id`: The block whose property should be queried. * `property`: The name of the property to query. * Returns The value of the property. ``` setFloat(id: DesignBlockId, property: string, value: number): void ``` Set a float property of the given design block to the given value. * `id`: The block whose property should be set. * `property`: The name of the property to set. * `value`: The value to set. ``` getFloat(id: DesignBlockId, property: string): number ``` Get the value of a float property of the given design block. * `id`: The block whose property should be queried. * `property`: The name of the property to query. * Returns The value of the property. ``` setDouble(id: DesignBlockId, property: string, value: number): void ``` Set a double property of the given design block to the given value. * `id`: The block whose property should be set. * `property`: The name of the property to set. * `value`: The value to set. ``` getDouble(id: DesignBlockId, property: string): number ``` Get the value of a double property of the given design block. * `id`: The block whose property should be queried. * `property`: The name of the property to query. * Returns The value of the property. ``` setString(id: DesignBlockId, property: string, value: string): void ``` Set a string property of the given design block to the given value. * `id`: The block whose property should be set. * `property`: The name of the property to set. * `value`: The value to set. ``` getString(id: DesignBlockId, property: string): string ``` Get the value of a string property of the given design block. * `id`: The block whose property should be queried. * `property`: The name of the property to query. * Returns The value of the property. ``` setColor(id: DesignBlockId, property: string, value: Color): void ``` Set a color property of the given design block to the given value. * `id`: The block whose property should be set. * `property`: The name of the property to set. * `value`: The value to set. ``` getColor(id: DesignBlockId, property: string): Color ``` Get the value of a color property of the given design block. * `id`: The block whose property should be queried. * `property`: The name of the property to query. * Returns The value of the property. ``` setEnum(id: DesignBlockId, property: string, value: T): void ``` Set an enum property of the given design block to the given value. * `id`: The block whose property should be set. * `property`: The name of the property to set. * `value`: The enum value as string. ``` getEnum(id: DesignBlockId, property: string): T ``` Get the value of an enum property of the given design block. * `id`: The block whose property should be queried. * `property`: The name of the property to query. * Returns The value as string. ``` type HorizontalTextAlignment = 'Left' | 'Right' | 'Center'; ``` The horizontal text alignment options. ``` type VerticalTextAlignment = 'Top' | 'Bottom' | 'Center'; ``` The vertical text alignment options. ``` setGradientColorStops(id: DesignBlockId, property: string, colors: GradientColorStop[]): void ``` Set a gradient color stops property of the given design block. * `id`: The block whose property should be set. * `property`: The name of the property to set. ``` getGradientColorStops(id: DesignBlockId, property: string): GradientColorStop[] ``` Get the gradient color stops property of the given design block. * `id`: The block whose property should be queried. * `property`: The name of the property to query. * Returns The gradient colors. ``` setSourceSet(id: DesignBlockId, property: string, sourceSet: Source[]): void ``` Set the property of the given block. The crop and content fill mode of the associated block will be set to the default values. * `id`: The block whose property should be set. * `property`: The name of the property to set. * `sourceSet`: The block’s new source set. ``` getSourceSet(id: DesignBlockId, property: string): Source[] ``` Get the source set value of the given property. * `id`: The block that should be queried. * `property`: The name of the property to query. * Returns The block’s source set. ``` addImageFileURIToSourceSet(id: DesignBlockId, property: string, uri: string): Promise ``` Add a source to the `sourceSet` property of the given block. If there already exists in source set an image with the same width, that existing image will be replaced. If the source set is or gets empty, the crop and content fill mode of the associated block will be set to the default values. Note: This fetches the resource from the given URI to obtain the image dimensions. It is recommended to use setSourceSet if the dimension is known. * `id`: The block to update. * `property`: The name of the property to modify. * `uri`: The source to add to the source set. ``` addVideoFileURIToSourceSet(id: DesignBlockId, property: string, uri: string): Promise ``` Add a video file URI to the `sourceSet` property of the given block. If there already exists in source set an video with the same width, that existing video will be replaced. If the source set is or gets empty, the crop and content fill mode of the associated block will be set to the default values. Note: This fetches the resource from the given URI to obtain the video dimensions. It is recommended to use setSourceSet if the dimension is known. * `id`: The block to update. * `property`: The name of the property to modify. * `uri`: The source to add to the source set. ### Modifying Properties[#](#modifying-properties) Here’s the full code snippet for modifying a block’s properties: ``` const uuid = engine.block.getUUID(block); const propertyNamesStar = engine.block.findAllProperties(starShape); // Array [ "shape/star/innerDiameter", "shape/star/points", "opacity/value", ... ]const propertyNamesImage = engine.block.findAllProperties(imageFill); // Array [ "fill/image/imageFileURI", "fill/image/previewFileURI", "fill/image/externalReference", ... ]const propertyNamesText = engine.block.findAllProperties(text); // Array [ "text/text", "text/fontFileUri", "text/externalReference", "text/fontSize", "text/horizontalAlignment", ... ] const pointsType = engine.block.getPropertyType('shape/star/points'); // "Int"const alignmentType = engine.block.getPropertyType('text/horizontalAlignment'); // "Enum"engine.block.getEnumValues('text/horizontalAlignment');const readable = engine.block.isPropertyReadable('shape/star/points');const writable = engine.block.isPropertyWritable('shape/star/points'); // Generic Propertiesengine.block.setBool(scene, 'scene/aspectRatioLock', false);engine.block.getBool(scene, 'scene/aspectRatioLock');const points = engine.block.getInt(starShape, 'shape/star/points');engine.block.setInt(starShape, 'shape/star/points', points + 2);engine.block.setFloat(starShape, 'shape/star/innerDiameter', 0.75);engine.block.getFloat(starShape, 'shape/star/innerDiameter');const audio = engine.block.create('audio');engine.block.appendChild(scene, audio);engine.block.setDouble(audio, 'playback/duration', 1.0);engine.block.getDouble(audio, 'playback/duration'); engine.block.setString(text, 'text/text', '*o*');engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg',);engine.block.getString(text, 'text/text');engine.block.getString(imageFill, 'fill/image/imageFileURI');engine.block.setColor(colorFill, 'fill/color/value', { r: 1, g: 1, b: 1, a: 1,}); // Whiteengine.block.getColor(colorFill, 'fill/color/value');engine.block.setEnum(text, 'text/horizontalAlignment', 'Center');engine.block.setEnum(text, 'text/verticalAlignment', 'Center');engine.block.getEnum(text, 'text/horizontalAlignment');engine.block.getEnum(text, 'text/verticalAlignment');engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 1.0, g: 0.8, b: 0.2, a: 1.0 }, stop: 0 }, { color: { r: 0.3, g: 0.4, b: 0.7, a: 1.0 }, stop: 1 },]);engine.block.getGradientColorStops(gradientFill, 'fill/gradient/colors'); const imageFill = engine.block.createFill('image');engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [ { uri: 'http://img.ly/my-image.png', width: 800, height: 600, },]);const sourceSet = engine.block.getSourceSet(imageFill, 'fill/image/sourceSet');await engine.block.addImageFileURIToSourceSet( imageFill, 'fill/image/sourceSet', 'https://img.ly/static/ubq_samples/sample_1.jpg',); const videoFill = engine.block.createFill('video');await engine.block.addVideoFileURIToSourceSet( videoFill, 'fill/video/sourceSet', 'https://img.ly/static/example-assets/sourceset/1x.mp4',); ``` ### Kind Property[#](#kind-property) The `kind` of a design block is a custom string that can be assigned to a block in order to categorize it and distinguish it from other blocks that have the same type. The user interface can then customize its appearance based on the kind of the selected blocks. It can also be used for automation use cases in order to process blocks in a different way based on their kind. ``` setKind(id: DesignBlockId, kind: string): void ``` Set the kind of the given block, fails if the block is invalid. * `id`: The block whose kind should be changed. * `kind`: The new kind. * Returns The block’s kind. ``` getKind(id: DesignBlockId): string ``` Get the kind of the given block, fails if the block is invalid. * `id`: The block to query. * Returns The block’s kind. ``` findByKind(kind: string): DesignBlockId[] ``` Finds all blocks with the given kind. * `kind`: The kind to search for. * Returns A list of block ids. #### Full Code[#](#full-code-1) In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to modify a and query the kind property of design blocks through the `block` API. ``` engine.block.setKind(text, 'title');const kind = engine.block.getKind(text);const allTitles = engine.block.findByKind('title'); ``` ## Selection & Visibility[#](#selection--visibility) A block can potentially be _invisible_ (in the sense that you can’t see it), even though `isVisible()` returns true. This could be the case when a block has not been added to a parent, the parent itself is not visible, or the block is obscured by another block on top of it. ### Select blocks and change their visibility[#](#select-blocks-and-change-their-visibility) ``` setSelected(id: DesignBlockId, selected: boolean): void ``` Update the selection state of a block. Fails for invalid blocks. Required scope: ‘editor/select’ * `id`: The block to query. * `selected`: Whether or not the block should be selected. ``` isSelected(id: DesignBlockId): boolean ``` Get the selected state of a block. * `id`: The block to query. * Returns True if the block is selected, false otherwise. ``` select(id: DesignBlockId): void ``` Selects the given block and deselects all other blocks. * `id`: The block to be selected. ``` findAllSelected(): DesignBlockId[] ``` Get all currently selected blocks. * Returns An array of block ids. ``` onSelectionChanged: (callback: () => void) => (() => void) ``` Subscribe to changes in the current set of selected blocks. * `callback`: This function is called at the end of the engine update if the selection has changed. * Returns A method to unsubscribe. ``` onClicked: (callback: (id: DesignBlockId) => void) => (() => void) ``` Subscribe to block click events. * `callback`: This function is called at the end of the engine update if a block has been clicked. * Returns A method to unsubscribe. ``` setVisible(id: DesignBlockId, visible: boolean): void ``` Update a block’s visibility. Required scope: ‘layer/visibility’ * `id`: The block to update. * `visible`: Whether the block shall be visible. ``` isVisible(id: DesignBlockId): boolean ``` Query a block’s visibility. * `id`: The block to query. * Returns True if visible, false otherwise. ``` setClipped(id: DesignBlockId, clipped: boolean): void ``` Update a block’s clipped state. Required scope: ‘layer/clipping’ * `id`: The block to update. * `clipped`: Whether the block should clips its contents to its frame. ``` isClipped(id: DesignBlockId): boolean ``` Query a block’s clipped state. If true, the block should clip its contents to its frame. * `id`: The block to query. * Returns True if clipped, false otherwise. ``` isIncludedInExport(id: DesignBlockId): boolean ``` Query if the given block is included on the exported result. * `id`: The block to query. * Returns true, if the block is included on the exported result, false otherwise ``` setIncludedInExport(id: DesignBlockId, enabled: boolean): void ``` Set if you want the given design block to be included in exported result. * `id`: The block whose exportable state should be set. * `enabled`: If true, the block will be included on the exported result. ### Full Code[#](#full-code-2) In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to modify scenes through the `block` API. ``` engine.block.setSelected(block, true);const isSelected = engine.block.isSelected(block);engine.block.select(block);const selectedIds = engine.block.findAllSelected();const unsubscribeSelectionChanged = engine.block.onSelectionChanged(() => { const selectedIds = engine.block.findAllSelected(); console.log('Selection changed: ', selectedIds);});const unsubscribeOnClicked = engine.block.onClicked(block => { console.log('Block clicked: ', block);});const isVisible = engine.block.isVisible(block);engine.block.setVisible(block, true); const isClipped = engine.block.isClipped(page);engine.block.setClipped(page, true); const isIncludedInExport = engine.block.isIncludedInExport(block);engine.block.setIncludedInExport(block, true); ``` ## State[#](#state) Blocks can perform operations that take some time or that can end in bad results. When that happens, blocks put themselves in a pending state or an error state and visual feedback is shown pertaining to the state. When an external operation is done to blocks, for example with a plugin, you may want to manually set the block’s state to pending (if that external operation takes time) or to error (if that operation resulted in an error). The possible states of a block are: ``` BlockStateReady { type: 'Ready';}; BlockStatePending { type: 'Pending'; progress: number; // Expected range is [0, 1]} BlockStateError { type: 'Error'; error: | 'AudioDecoding' // Failed to decode the block's audio stream. | 'ImageDecoding' // Failed to decode the block's image stream. | 'FileFetch' // Failed to retrieve the block's remote content. | 'Unknown' // An unknown error occurred. | 'VideoDecoding'; // Failed to decode the block's video stream.} ``` When calling `getState`, the returned state reflects the combined state of a block, the block’s fill, the block’s shape and the block’s effects. If any of these blocks is in an `Error` state, the returned state will reflect that error. If none of these blocks is in error state but any is in `Pending` state, the returned state will reflect the aggregate progress of the block’s progress. If none of the blocks are in error state or pending state, the returned state is `Ready`. ``` getState(id: DesignBlockId): BlockState ``` Returns the block’s state. If this block is in error state or this block has a `Shape` block, `Fill` block or `Effect` block(s), that is in error state, the returned state will be `Error`. Else, if this block is in pending state or this block has a `Shape` block, `Fill` block or `Effect` block(s), that is in pending state, the returned state will be `Pending`. Else, the returned state will be `Ready`. * `id`: The block to query. * Returns The block’s state. ``` setState(id: DesignBlockId, state: BlockState): void ``` Set the state of a block. * `id`: The block whose state should be set. * `state`: The new state to set. ``` onStateChanged: (ids: DesignBlockId[], callback: (ids: DesignBlockId[]) => void) => (() => void) ``` Subscribe to changes to the state of a block. Like `getState`, the state of a block is determined by the state of itself and its `Shape`, `Fill` and `Effect` block(s). * `blocks`: A list of blocks to filter events by. If the list is empty, events for every block are sent. * `callback`: The event callback. * Returns Subscription A handle to the subscription. Use it to unsubscribe when done. ### Full Code[#](#full-code-3) In this example, we will show you how to use [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to retrieve’s a block’s state and to manually set a block in a pending state, an error state or back to a ready state. ``` const subscription = engine.block.onStateChanged([], blocks => { blocks.forEach(block => console.log(block));});const state = engine.block.getState(block);engine.block.setState(block, { type: 'Pending', progress: 0.5 });engine.block.setState(block, { type: 'Ready' });engine.block.setState(block, { type: 'Error', error: 'ImageDecoding' }); ``` --- [Source](https:/img.ly/docs/cesdk/angular/colors/overview-16a177) # Overview Colors are a fundamental part of design in the CreativeEditor SDK (CE.SDK). Whether you’re designing for digital screens or printed materials, consistent color management ensures your creations look the way you intend. CE.SDK offers flexible tools for working with colors through both the user interface and programmatically, making it easy to manage color workflows at any scale. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## For Print and Screen[#](#for-print-and-screen) Designing for screen and designing for print involve different color requirements, and CreativeEditor SDK (CE.SDK) is built to support both. * **Screen workflows** use RGB-based color spaces like sRGB and Display P3. These spaces are optimized for digital displays, ensuring vibrant, consistent colors across different devices. * **Print workflows** typically rely on CMYK and Spot Colors. These spaces reflect how physical inks combine on paper and require more precise color control to match print output. CE.SDK makes it easy to design for both by: * Supporting inputs in multiple color spaces, including sRGB, CMYK, and Spot Colors. * Automatically managing color conversions between spaces. * Providing tooling to ensure that exported files are optimized for either screen (e.g., PNG, WebP) or print (e.g., PDF with Spot Color support). **Note:** CE.SDK allows you to specify colors using CMYK values, but these are always converted to RGB internally. You cannot produce a true CMYK PDF with CE.SDK, and we do not support print-specific PDF variants like PDF/X. However, Spot Colors are fully supported and properly embedded in exported PDFs. ## Color Management[#](#color-management) Color management is the process of controlling how colors are represented across different devices and outputs—such as screens, printers, and files—to ensure that the colors you see during design match the final result. In CreativeEditor SDK (CE.SDK), color management includes: * Supporting multiple input color spaces (e.g., sRGB, Display P3 for screens, CMYK, Spot Colors for print). * Handling accurate conversions between color spaces (e.g., RGB ↔ CMYK, approximating Spot Colors). * Allowing custom color palettes and color libraries to maintain consistent color choices across a project or brand. * Providing tools to adjust color properties like brightness, contrast, and temperature. * Ensuring consistent color appearance across different export formats and output mediums. Color management ensures that your designs maintain color accuracy and visual integrity whether they are displayed on a screen or printed professionally. ## Color Libraries and Custom Palettes[#](#color-libraries-and-custom-palettes) Color libraries in CE.SDK are collections of predefined colors that appear in the color picker, helping users maintain brand or project consistency. Libraries are implemented as asset sources, where each color is represented as an individual asset. Each color library is identified by a unique source ID, allowing you to create, configure, and manage custom palettes tailored to your design needs. This setup makes it easy to offer curated color options to end users, improving both usability and design consistency. ## Supported Color Spaces[#](#supported-color-spaces) CreativeEditor SDK supports a wide range of color spaces to meet different design requirements: * **sRGB:** The standard color space for most digital screens. * **Display P3:** A wider gamut color space often used on high-end displays. * **CMYK:** A subtractive color model used primarily for print workflows. * **Spot Colors:** Special premixed inks for print-specific designs requiring precise color matching. Each color space serves different use cases, ensuring that your designs remain accurate whether viewed on a screen or produced in print. ## Applying and Modifying Colors[#](#applying-and-modifying-colors) CE.SDK allows you to apply and modify colors both through the UI and programmatically via the API. You can set colors for fills, strokes, outlines, and other properties dynamically, enabling a wide range of creative control. Whether you are adjusting a single design element or programmatically updating entire templates, the SDK provides the flexibility you need. ## Color Adjustments and Properties[#](#color-adjustments-and-properties) CreativeEditor SDK provides a range of color adjustments to fine-tune your designs. Commonly used adjustments include: * **Brightness:** Adjust the overall lightness or darkness. * **Contrast:** Adjust the difference between light and dark areas. * **Saturation:** Increase or decrease the intensity of colors. * **Exposure:** Modify the overall exposure level. * **Temperature:** Adjust the color balance between warm and cool tones. * **Sharpness:** Enhance the crispness and clarity of edges. In addition to these, CE.SDK supports many more detailed adjustments. You can also modify specific color-related properties like fill color, stroke color, and opacity. All adjustments and property changes can be applied both through the UI and programmatically. ## Color Conversion[#](#color-conversion) CreativeEditor SDK automatically manages color conversions to help ensure consistent visual output across different mediums. The following conversion behaviors are supported: * **RGB and CMYK colors** can be converted between each other using a mathematical approximation. * **Spot colors** can be represented in RGB and CMYK by using a corresponding color approximation. * **RGB and CMYK colors cannot be converted to spot colors.** These automatic conversions help ensure that designs maintain visual consistency whether they are viewed on a digital screen or prepared for professional printing. --- [Source](https:/img.ly/docs/cesdk/angular/colors/for-print-59bc05) # For Print --- [Source](https:/img.ly/docs/cesdk/angular/colors/create-color-palette-7012e0) # Create a Color Palette ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; const colors = [ { id: 'RGB Murky Magenta', label: { en: 'RGB Murky Magenta' }, tags: { en: ['RGB', 'Murky', 'Magenta'] }, payload: { color: { colorSpace: 'sRGB', r: 0.65, g: 0.3, b: 0.65, a: 1 } } }, { id: 'Spot Goo Green', label: { en: 'Spot Goo Green' }, tags: { en: ['Spot', 'Goo', 'Green'] }, payload: { color: { colorSpace: 'SpotColor', name: 'Spot Goo Green', externalReference: 'My Spot Color Book', representation: { colorSpace: 'sRGB', r: 0.7, g: 0.98, b: 0.13, a: 1 } } } }, { id: 'CMYK Baby Blue', label: { en: 'CMYK Baby Blue' }, tags: { en: ['CMYK', 'Baby', 'Blue'] }, payload: { color: { colorSpace: 'CMYK', c: 0.5, m: 0, y: 0, k: 0 } } }]; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' }), ui: { elements: {} }}; CreativeEditorSDK.create('#cesdk_container', config).then(async (cesdk) => { // Enable settings panel cesdk.feature.enable('ly.img.settings'); // Set the editor view mode cesdk.ui.setView('default'); // Set the locale using the new API cesdk.i18n.setLocale('en'); cesdk.i18n.setTranslations({ en: { 'libraries.myCustomColors.label': 'Custom Color Library' } }); cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ withUploadAssetSources: true }); cesdk.engine.asset.addLocalSource('myCustomColors', ['text/plain']); for (const asset of colors) { cesdk.engine.asset.addAssetToSource('myCustomColors', asset); } // Update color library entry with custom source IDs cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['ly.img.colors.defaultPalette', 'myCustomColors'] }); cesdk.createDesignScene();}); ``` ```
``` In this example, we will show you how to configure the [CreativeEditor SDK](https://img.ly/products/creative-sdk). CE.SDK has full support for custom color libraries. These appear in the color picker, and allow users to choose from pre-defined sets of colors to use in their design. They can include RGB colors, CMYK colors, and spot colors. They can be used to support your users with a variety of palettes, brand colors, or color books for printing. Note that many providers of color books (e.g. Pantone) require a license to use their data. ## General Concept[#](#general-concept) Color libraries are implemented as asset sources, containing individual colors as assets. Each color library is identified by a source ID, a unique string used when establishing and configuring the source. ## Defining Colors[#](#defining-colors) To integrate colors into a library, we need to supply them in the shape of an `AssetDefinition`. For more details on the `AssetDefinition` type, please consult our Guide on [integrating custom asset sources](angular/import-media/from-remote-source/unsplash-8f31f0/) . For colors, we are utilizing the `payload` key, providing an `AssetColor` to the `AssetPayload.color` property. In this example, we define one color for every type; see below for the applicable types: ### `AssetRGBColor`[#](#assetrgbcolor) | Member | Type | Description | | --- | --- | --- | | colorSpace | `'sRGB'` | | | r, g, b, a | `number` | Red, green, blue, and alpha color channel components | ### `AssetCMYKColor`[#](#assetcmykcolor) | Member | Type | Description | | --- | --- | --- | | colorSpace | `'CMYK'` | | | c, m, y, k | `number` | Cyan, magenta, yellow, and black color channel components | ### `AssetSpotColor`[#](#assetspotcolor) | Member | Type | Description | | ----------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | colorSpace | `'SpotColor'` | | | name | `string` | Unique identifier of this spot color. Make sure this matches the standardized name of the spot color when using color books like those supplied by Pantone. | | externalReference | `string` | Reference to the source of this spot color (e.g. name of color book), if applicable. | | representation | `AssetRGBColor` | `AssetCMYKColor` | Note that spot colors also require a CMYK or RGB color representation, which is used to display an approximate color on screen during editing. | In this example, we are defining one of each color type, and add them to a single library, for demonstration purposes. Although there is no technical requirement to do so, it is recommended to separate different color types (RGB, CMYK, Spot) into separate libraries, to avoid confusing users. ``` const colors = [ { id: 'RGB Murky Magenta', label: { en: 'RGB Murky Magenta' }, tags: { en: ['RGB', 'Murky', 'Magenta'] }, payload: { color: { colorSpace: 'sRGB', r: 0.65, g: 0.3, b: 0.65, a: 1 } } }, { id: 'Spot Goo Green', label: { en: 'Spot Goo Green' }, tags: { en: ['Spot', 'Goo', 'Green'] }, payload: { color: { colorSpace: 'SpotColor', name: 'Spot Goo Green', externalReference: 'My Spot Color Book', representation: { colorSpace: 'sRGB', r: 0.7, g: 0.98, b: 0.13, a: 1 } } } }, { id: 'CMYK Baby Blue', label: { en: 'CMYK Baby Blue' }, tags: { en: ['CMYK', 'Baby', 'Blue'] }, payload: { color: { colorSpace: 'CMYK', c: 0.5, m: 0, y: 0, k: 0 } } }]; ``` ## Configuration[#](#configuration) ### Labels[#](#labels) To show the correct labels for your color library, provide a matching i18n key in your configuration. Color libraries use keys in the format `libraries..label` to look up the correct label. ``` cesdk.i18n.setTranslations({ en: { 'libraries.myCustomColors.label': 'Custom Color Library' }}); ``` ### Order[#](#order) Color libraries appear in the color picker in a specific order. To define this order, use `cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: [...] })` after initialization. The special source `'ly.img.colors.defaultPalette'` is used to place the default palette (See: [Configuring the Default Color Palette](angular/user-interface/customization/color-palette-429fd9/) ). If you want to hide this default palette, just remove it from the array. ``` // Update color library entry with custom source IDscesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['ly.img.colors.defaultPalette', 'myCustomColors']}); ``` ## Adding the library[#](#adding-the-library) After initializing the engine, use the Asset API to add a local asset source using `addLocalSource`. Afterwards, add colors to the new source using `addAssetToSource`. Make sure to use the same source ID as is referenced in the configuration. See also [Local Asset Sources](angular/import-media/from-remote-source/unsplash-8f31f0/) in our Guide on [integrating custom asset sources](angular/import-media/from-remote-source/unsplash-8f31f0/) ``` cesdk.engine.asset.addLocalSource('myCustomColors', ['text/plain']);for (const asset of colors) { cesdk.engine.asset.addAssetToSource('myCustomColors', asset);} ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/index.js'; const colors = [ { id: 'RGB Murky Magenta', label: { en: 'RGB Murky Magenta' }, tags: { en: ['RGB', 'Murky', 'Magenta'] }, payload: { color: { colorSpace: 'sRGB', r: 0.65, g: 0.3, b: 0.65, a: 1, }, }, }, { id: 'Spot Goo Green', label: { en: 'Spot Goo Green' }, tags: { en: ['Spot', 'Goo', 'Green'] }, payload: { color: { colorSpace: 'SpotColor', name: 'Spot Goo Green', externalReference: 'My Spot Color Book', representation: { colorSpace: 'sRGB', r: 0.7, g: 0.98, b: 0.13, a: 1, }, }, }, }, { id: 'CMYK Baby Blue', label: { en: 'CMYK Baby Blue' }, tags: { en: ['CMYK', 'Baby', 'Blue'] }, payload: { color: { colorSpace: 'CMYK', c: 0.5, m: 0, y: 0, k: 0, }, }, },]; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', ui: { elements: { panels: { settings: true, }, }, },}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Set the editor view mode cesdk.ui.setView('default'); cesdk.i18n.setLocale('en'); cesdk.i18n.setTranslations({ en: { 'libraries.myCustomColors.label': 'Custom Color Library', }, }); cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ withUploadAssetSources: true }); cesdk.engine.asset.addLocalSource('myCustomColors', ['text/plain']); for (const asset of colors) { cesdk.engine.asset.addAssetToSource('myCustomColors', asset); } // Configure the color library order cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['ly.img.colors.defaultPalette', 'myCustomColors'] }); cesdk.createDesignScene();}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/colors/conversion-bcd82b) # Color Conversion To ease implementing advanced color interfaces, you may rely on the engine to perform color conversions. Converts a color to the given color space. * `color`: The color to convert. * `colorSpace`: The color space to convert to. * Returns The converted color. ``` // Convert a colorconst color = engine.block.getStrokeColor(block);const cmykColor = engine.editor.convertColorToColorSpace(color, 'CMYK'); ``` --- [Source](https:/img.ly/docs/cesdk/angular/colors/basics-307115) # Basics When specifying a color property, you can use one of three color spaces: [RGB](https://en.wikipedia.org/wiki/RGB_color_model), [CMYK](https://en.wikipedia.org/wiki/CMYK_color_model) and [spot color](https://en.wikipedia.org/wiki/Spot_color). During export, only RGB and spot color values will be inserted into the resulting PDF. Any color specified in CMYK values will be converted to RGB using the standard conversion. Tint values will be retained in the alpha channel. The following properties can be set with the function `setColor` and support all three color spaces: * `'backgroundColor/color'` * `'camera/clearColor'` * `'dropShadow/color'` * `'fill/color/value'` * `'stroke/color'` ## RGB[#](#rgb) RGB is the color space used when rendering a color to a screen. All values of `R`, `G`, `B`must be between `0.0` and `1.0` When using RGB, you typically also specify opacity or alpha as a value between `0.0` and `1.0` and is then referred to as `RGBA`. When a RGB color has an alpha value that is not `1.0`, it will be rendered to screen with corresponding transparency. ## CMYK[#](#cmyk) CMYK is the color space used when color printing. All values of `C`, `M`, `Y`, and `K` must be between `0.0` and `1.0` When using CMYK, you can also specify a tint value between `0.0` and `1.0`. When a CMYK color has a tint value that is not `1.0`, it will be rendered to screen as if transparent over a white background. When rendering to screen, CMYK colors are first converted to RGB using a simple mathematical conversion. Currently, the same conversion happens when exporting a scene to a PDF file. ## Spot Color[#](#spot-color) Spot colors are typically used for special printers or other devices that understand how to use them. Spot colors are defined primarily by their name as that is the information that the device will use to render. For the purpose of rendering a spot color to screen, it must be given either an RGB or CMYK color approximation or both. These approximations adhere to the same restrictions respectively described above. You can specify a tint as a value between `0.0` and `1.0` which will be interpreted as opacity when rendering to screen. It is up to the special printer or device how to interpret the tint value. You can also specify an external reference, a string describing the origin of this spot color. When rendering to screen, the spot color’s RGB or CMYK approximation will be used, in that order of preference. When exporting a scene to a PDF file, spot colors will be saved as a [Separation Color Space](https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/pdfreference1.6.pdf#G9.1850648). Using a spot color is a two step process: 1. you define a spot color with its name and color approximation(s) in the spot color registry. 2. you instantiate a spot color with its name, a tint and an external reference. The spot color registry allows you to: * list the defined spot colors * define a new a spot color with a name and its RGB or CMYK approximation * re-define an existing spot color’s RGB or CMYK approximation * retrieve the RGB or CMYK approximation of an already defined spot color * remove a spot color from the list of defined spot colors Multiple blocks and their properties can refer to the same spot color and each can have a different tint and external reference. **Warning** If a block’s color property refers to an undefined spot color, the default color magenta with an RGB approximation of (1, 0, 1) will be used. ## Converting between colors[#](#converting-between-colors) A utility function `convertColorToColorSpace` is provided to create a new color from an existing color and a new color space. RGB and CMYK colors can be converted between each other and is done so using a simple mathematical conversion. Spot colors can be converted to RGB and CMYK simply by using the corresponding approximation. RGB and CMYK colors cannot be converted to spot colors. ## Custom Color Libraries[#](#custom-color-libraries) You can configure CE.SDK with custom color libraries. More information is found [here](angular/colors/create-color-palette-7012e0/) . --- [Source](https:/img.ly/docs/cesdk/angular/colors/apply-2211e3) # Apply Colors ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); engine.block.setFill(block, engine.block.createFill('color')); engine.block.setPositionX(block, 350); engine.block.setPositionY(block, 400); engine.block.setWidth(block, 100); engine.block.setHeight(block, 100); const fill = engine.block.getFill(block); const rgbaBlue = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }; const cmykRed = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }; const cmykPartialRed = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 0.5 }; engine.editor.setSpotColorRGB('Pink-Flamingo', 0.988, 0.455, 0.992); engine.editor.setSpotColorCMYK('Yellow', 0.0, 0.0, 1.0, 0.0); const spotPinkFlamingo = { name: 'Pink-Flamingo', tint: 1.0, externalReference: 'Crayola' }; const spotPartialYellow = { name: 'Yellow', tint: 0.3, externalReference: '' }; engine.block.setColor(fill, `fill/color/value`, rgbaBlue); engine.block.setColor(fill, `fill/color/value`, cmykRed); engine.block.setColor(block, `stroke/color`, cmykPartialRed); engine.block.setColor(fill, `fill/color/value`, spotPinkFlamingo); engine.block.setColor(block, `dropShadow/color`, spotPartialYellow); const cmykBlueConverted = engine.editor.convertColorToColorSpace( rgbaBlue, 'CMYK' ); const rgbaPinkFlamingoConverted = engine.editor.convertColorToColorSpace( spotPinkFlamingo, 'sRGB' ); engine.editor.findAllSpotColors(); // ['Crayola-Pink-Flamingo', 'Yellow'] engine.editor.setSpotColorCMYK('Yellow', 0.2, 0.0, 1.0, 0.0); engine.editor.removeSpotColor('Yellow');}); ``` ## Setup the scene[#](#setup-the-scene) We first create a new scene with a graphic block that has a color fill. ``` document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page');engine.block.setWidth(page, 800);engine.block.setHeight(page, 600);engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const block = engine.block.create('graphic');engine.block.setShape(block, engine.block.createShape('rect'));engine.block.setFill(block, engine.block.createFill('color'));engine.block.setPositionX(block, 350);engine.block.setPositionY(block, 400);engine.block.setWidth(block, 100);engine.block.setHeight(block, 100); const fill = engine.block.getFill(block); ``` ## Create colors[#](#create-colors) Here we instantiate a few colors with RGB and CMYK color spaces. We also define two spot colors, one with an RGB approximation and another with a CMYK approximation. Note that a spot colors can have both color space approximations. ``` const rgbaBlue = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 };const cmykRed = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 };const cmykPartialRed = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 0.5 }; engine.editor.setSpotColorRGB('Pink-Flamingo', 0.988, 0.455, 0.992);engine.editor.setSpotColorCMYK('Yellow', 0.0, 0.0, 1.0, 0.0);const spotPinkFlamingo = { name: 'Pink-Flamingo', tint: 1.0, externalReference: 'Crayola'};const spotPartialYellow = { name: 'Yellow', tint: 0.3, externalReference: ''}; ``` ## Applying colors to a block[#](#applying-colors-to-a-block) We can use the defined colors to modify certain properties of a fill or properties of a block. Here we apply it to `'fill/color/value'`, `'stroke/color'` and `'dropShadow/color'`. ``` engine.block.setColor(fill, `fill/color/value`, rgbaBlue);engine.block.setColor(fill, `fill/color/value`, cmykRed);engine.block.setColor(block, `stroke/color`, cmykPartialRed);engine.block.setColor(fill, `fill/color/value`, spotPinkFlamingo);engine.block.setColor(block, `dropShadow/color`, spotPartialYellow); ``` ## Converting colors[#](#converting-colors) Using the utility function `convertColorToColorSpace` we create a new color in the CMYK color space by converting the `rgbaBlue` color to the CMYK color space. We also create a new color in the RGB color space by converting the `spotPinkFlamingo` color to the RGB color space. ``` const cmykBlueConverted = engine.editor.convertColorToColorSpace( rgbaBlue, 'CMYK');const rgbaPinkFlamingoConverted = engine.editor.convertColorToColorSpace( spotPinkFlamingo, 'sRGB'); ``` ## Listing spot colors[#](#listing-spot-colors) This function returns the list of currently defined spot colors. ``` engine.editor.findAllSpotColors(); // ['Crayola-Pink-Flamingo', 'Yellow'] ``` ## Redefine a spot color[#](#redefine-a-spot-color) We can re-define the RGB and CMYK approximations of an already defined spot color. Doing so will change the rendered color of the blocks. We change it for the CMYK approximation of `'Yellow'` and make it a bit greenish. The properties that have `'Yellow'` as their spot color will change when re-rendered. ``` engine.editor.setSpotColorCMYK('Yellow', 0.2, 0.0, 1.0, 0.0); ``` ## Removing the definition of a spot color[#](#removing-the-definition-of-a-spot-color) We can undefine a spot color. Doing so will make all the properties still referring to that spot color (`'Yellow'` in this case) use the default magenta RGB approximation. ``` engine.editor.removeSpotColor('Yellow'); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); engine.block.setFill(block, engine.block.createFill('color')); engine.block.setPositionX(block, 350); engine.block.setPositionY(block, 400); engine.block.setWidth(block, 100); engine.block.setHeight(block, 100); const fill = engine.block.getFill(block); const rgbaBlue = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }; const cmykRed = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }; const cmykPartialRed = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 0.5 }; engine.editor.setSpotColorRGB('Pink-Flamingo', 0.988, 0.455, 0.992); engine.editor.setSpotColorCMYK('Yellow', 0.0, 0.0, 1.0, 0.0); const spotPinkFlamingo = { name: 'Pink-Flamingo', tint: 1.0, externalReference: 'Crayola', }; const spotPartialYellow = { name: 'Yellow', tint: 0.3, externalReference: '', }; engine.block.setColor(fill, `fill/color/value`, rgbaBlue); engine.block.setColor(fill, `fill/color/value`, cmykRed); engine.block.setColor(block, `stroke/color`, cmykPartialRed); engine.block.setColor(fill, `fill/color/value`, spotPinkFlamingo); engine.block.setColor(block, `dropShadow/color`, spotPartialYellow); const cmykBlueConverted = engine.editor.convertColorToColorSpace( rgbaBlue, 'CMYK', ); const rgbaPinkFlamingoConverted = engine.editor.convertColorToColorSpace( spotPinkFlamingo, 'sRGB', ); engine.editor.findAllSpotColors(); // ['Crayola-Pink-Flamingo', 'Yellow'] engine.editor.setSpotColorCMYK('Yellow', 0.2, 0.0, 1.0, 0.0); engine.editor.removeSpotColor('Yellow');}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/automation/overview-34d971) # Overview Workflow automation with CreativeEditor SDK (CE.SDK) enables you to programmatically generate, manipulate, and export creative assets—at scale. Whether you’re creating thousands of localized ads, preparing platform-specific variants of a campaign, or populating print-ready templates with dynamic data, CE.SDK provides a flexible foundation for automation. You can run automation entirely on the client, integrate it with your backend, or build hybrid “human-in-the-loop” workflows where users interact with partially automated scenes before export. The automation engine supports static pipelines, making it suitable for a wide range of publishing, e-commerce, and marketing applications. Video support will follow soon. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## What Can Be Automated with CE.SDK[#](#what-can-be-automated-with-cesdk) CE.SDK supports a wide variety of automation use cases, including: * **Design generation at scale**: Create thousands of variants from a single template, such as product cards or regionalized campaigns. * **Data-driven customization**: Merge external data (e.g., CSV, JSON, APIs) into templates to personalize text, images, or layout. * **Responsive output creation**: Automatically resize designs and export assets in different aspect ratios or dimensions for various platforms. * **Pre-export validation**: Detect issues like empty placeholders or low-resolution images before generating final output. * **Multimodal exporting**: Automate delivery to multiple formats including JPG, PNG, PDF, and MP4. ## Automation Contexts[#](#automation-contexts) ### Headless / Server-Side Automation[#](#headless--server-side-automation) Server-side automation provides complete control over content generation without rendering a UI. This is ideal for background processing, such as creating assets in response to API requests or batch-generating print files for a mail campaign. ### UI-Integrated Automation (Human-in-the-Loop)[#](#ui-integrated-automation-human-in-the-loop) For workflows that require user input or final approval, you can embed automation into the CE.SDK UI. Users can review, customize, or finalize designs that were pre-filled with dynamic data—ideal for marketing teams, e-commerce admins, or print professionals. ### Client-Side vs. Backend-Supported Workflows[#](#client-side-vs-backend-supported-workflows) Many automation workflows can run fully in the browser thanks to CE.SDK’s client-side architecture. However, a backend may be required for use cases involving: * Secure access to private assets * Large dataset lookups * Server-side template rendering * Scheduled or event-based triggers ## Customization Capabilities[#](#customization-capabilities) CE.SDK gives you deep control over how your automation pipeline behaves: ### Data Sources[#](#data-sources) Connect to a variety of inputs: * Local or remote JSON * CSV files * REST APIs * CMS or PIM systems ### Template Customization[#](#template-customization) * Define dynamic variables and conditional placeholders * Use reusable templates or generate them on-the-fly * Lock or constrain specific fields to preserve brand integrity ### Design Rules[#](#design-rules) Enforce visual and content constraints: * Brand-compliant colors and fonts * Overflow handling and text auto-resizing * Show/hide conditions and fallback logic ### Output Formats[#](#output-formats) | Category | Supported Formats | | --- | --- | | **Images** | `.png` (with transparency), `.jpeg`, `.webp`, `.tga` | | **Video** | `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) | | **Print** | `.pdf` (supports underlayer printing and spot colors) | | **Scene** | `.scene` (description of the scene without any assets) | | **Archive** | `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) | Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. ## UI Customization for Automation[#](#ui-customization-for-automation) You can extend the CE.SDK UI to trigger and manage automation tasks directly in the interface: * Add buttons or panels to trigger workflows * Dynamically update the scene based on user input or external data * Customize visibility of UI components depending on the stage (e.g., pre-fill vs. review) This makes it easy to integrate human-in-the-loop flows while preserving a tailored editing experience. --- [Source](https:/img.ly/docs/cesdk/angular/automation/design-generation-98a99e) # Automate Design Generation Automating design generation simplifies workflows and allows you to create dynamic, personalized designs at scale. By combining design templates with external data or user-provided input, you can quickly generate professional outputs for various use cases, from banner ads to direct mail. With IMG.LY, you can use templates to define dynamic elements such as text, images, or other assets. These elements are populated with real-time data or user inputs during the generation process. This guide will walk you through the process of using the CE.SDK for programmatic design generation. [ Launch Web Demo ](https://img.ly/showcases/cesdk/headless-design/web) ## Populating a Template[#](#populating-a-template) A design template is a pre-configured layout that includes placeholders for dynamic elements such as text, images, or other assets. These placeholders define where and how specific content will appear in the final design. During the generation process, the placeholders are replaced with actual data to create a completed output. * **Creating or Editing Templates:** Design templates can be created or edited directly within the CE.SDK using our UI or programmatically. Learn more in the [Create Templates guide](angular/create-templates-3aef79/) . * **Dynamic Content Sources:** Templates can be populated with data from various sources, such as: * **JSON files:** Useful for batch operations where data is pre-prepared. * **External APIs:** Ideal for real-time updates and dynamic integrations. * **User Input:** Data provided directly by the user through a UI. For detailed information on using and managing templates, see [Use Templates](angular/use-templates-a88fd4/) . Below is a diagram illustrating how data is merged into a template to produce a final design: ![Template data merge process diagram showing how variables and assets flow into the final output](/docs/cesdk/_astro/schema.excalidraw.CEnF4vNU_GsqTX.svg) ## Example Workflow[#](#example-workflow) ### 1\. Prepare the Template[#](#1-prepare-the-template) Start by designing a template with text variables. Here’s an example postcard template with placeholders for the recipient’s details: ![Example postcard template with highlighted variable placeholders for name and address](/docs/cesdk/_astro/scene-example-backside.DrVrBaSF_ZWnyVB.webp) ### 2\. Load the Template into the Editor[#](#2-load-the-template-into-the-editor) Initialize the CE.SDK and load your prepared template: ``` // Load a template from your server or a CDNconst sceneUrl = 'https://cdn.img.ly/assets/demo/v2/ly.img.template/templates/cesdk_postcard_2.scene';await engine.scene.loadFromURL(sceneUrl); ``` ### 3\. Provide Data to Populate the Template[#](#3-provide-data-to-populate-the-template) Populate your template with data from your chosen source: ``` // Option 1: Prepare your data as a javascript objectconst data = { textVariables: { first_name: 'John', last_name: 'Doe', address: '123 Main St.', city: 'Anytown', },};// Option 2: Fetch from an API// const data = await fetch('https://api.example.com/design-data').then(res => res.json());engine.variable.setString('first_name', data.textVariables.first_name);engine.variable.setString('last_name', data.textVariables.last_name);engine.variable.setString('address', data.textVariables.address);engine.variable.setString('city', data.textVariables.city); ``` ### 4\. Export the Final Design[#](#4-export-the-final-design) Once the template is populated, export the final design in your preferred format: ``` const output = await engine.block.export(engine.scene.get(), { mimeType: 'application/pdf',});// Success: 'output' contains your generated design as a PDF Blob// You can now save it or display it in your application ``` Here’s what your final output should look like: ![Exported postcard design showing populated name and address fields](/docs/cesdk/_astro/scene-example-backside-export.CaGuyU7v_1hqBcg.webp) Need help with exports? Check out the [Export Guide](angular/export-save-publish/export-82f968/) for detailed instructions and options. ## Troubleshooting[#](#troubleshooting) If you encounter issues during the generation process: * Verify that all your variable names exactly match those in your template * Ensure your template is accessible from the provided URL * Check that your data values are in the correct format (strings for text variables) * Monitor the console for detailed error messages from the CE.SDK --- [Source](https:/img.ly/docs/cesdk/angular/api-reference/overview-8f24e1) # API Reference For Angular, the following packages are available: [ @cesdk/cesdk-js Our flagship package that includes our full-featured Editor UI for Design and Video editing ](angular/api/cesdk-js/)[ @cesdk/engine For headless applications and for building your own UI ](angular/api/engine/) --- [Source](https:/img.ly/docs/cesdk/angular/api/engine) # Package: documentation ## Classes[#](#classes) | Class | Description | | --- | --- | | [AssetAPI](https://img.ly/docs/cesdk/angular/api/engine/classes/assetapi/) | Manage asset sources and apply assets to scenes. | | [BlockAPI](https://img.ly/docs/cesdk/angular/api/engine/classes/blockapi/) | Create, manipulate, and query the building blocks of your design. | | [CreativeEngine](https://img.ly/docs/cesdk/angular/api/engine/classes/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](https://img.ly/docs/cesdk/angular/api/engine/classes/editorapi/) | Control the design editor’s behavior and settings. | | [EventAPI](https://img.ly/docs/cesdk/angular/api/engine/classes/eventapi/) | Subscribe to block lifecycle events in the design engine. | | [SceneAPI](https://img.ly/docs/cesdk/angular/api/engine/classes/sceneapi/) | Create, load, save, and manipulate scenes. | | [VariableAPI](https://img.ly/docs/cesdk/angular/api/engine/classes/variableapi/) | Manage text variables within design templates. | ## Functions[#](#functions) | Function | Description | | --- | --- | | [checkVideoExportSupport](https://img.ly/docs/cesdk/angular/api/engine/functions/checkvideoexportsupport/) | Throws an error if the current browser does not support video exporting. | | [checkVideoSupport](https://img.ly/docs/cesdk/angular/api/engine/functions/checkvideosupport/) | Throws an error if the current browser does not support video editing. | | [\_combineProperties](https://img.ly/docs/cesdk/angular/api/engine/functions/combineproperties/) | Combines multiple reactive properties into a single reactive property. | | [\_createDerivedProperty](https://img.ly/docs/cesdk/angular/api/engine/functions/createderivedproperty/) | Creates a derived reactive property from one or more sources. | | [\_createReactiveProperty](https://img.ly/docs/cesdk/angular/api/engine/functions/createreactiveproperty/) | Creates a reactive property with subscribe, value, and update methods. | | [\_createTrackedProperty](https://img.ly/docs/cesdk/angular/api/engine/functions/createtrackedproperty/) | Creates a reactive property that tracks a source and updates based on a getter/setter. | | [defaultLogger](https://img.ly/docs/cesdk/angular/api/engine/functions/defaultlogger/) | \- | | [isCMYKColor](https://img.ly/docs/cesdk/angular/api/engine/functions/iscmykcolor/) | Type guard for [CMYKColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cmykcolor/). | | [isRGBAColor](https://img.ly/docs/cesdk/angular/api/engine/functions/isrgbacolor/) | Type guard for [RGBAColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/rgbacolor/). | | [isSpotColor](https://img.ly/docs/cesdk/angular/api/engine/functions/isspotcolor/) | Type guard for [SpotColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/spotcolor/). | | [\_makeSource](https://img.ly/docs/cesdk/angular/api/engine/functions/makesource/) | Creates a simple event source that can emit values to subscribed listeners. | | [\_mergeSources](https://img.ly/docs/cesdk/angular/api/engine/functions/mergesources/) | Merges multiple event sources into a single source that emits when any source emits. | | [supportsBrowser](https://img.ly/docs/cesdk/angular/api/engine/functions/supportsbrowser/) | Checks if the current browser supports necessary technologies to match our supported browsers | | [supportsVideo](https://img.ly/docs/cesdk/angular/api/engine/functions/supportsvideo/) | Checks if the current browser supports video editing. | | [supportsVideoExport](https://img.ly/docs/cesdk/angular/api/engine/functions/supportsvideoexport/) | Checks if the current browser supports video exporting. | | [supportsWasm](https://img.ly/docs/cesdk/angular/api/engine/functions/supportswasm/) | Checks if the current browser supports web assembly | ## Type Aliases[#](#type-aliases) | Type Alias | Description | | --- | --- | | [AddImageOptions](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/addimageoptions/) | Options for adding images to the scene. | | [AnimationBaselineDirection](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationbaselinedirection/) | \- | | [AnimationBlockSwipeTextDirection](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationblockswipetextdirection/) | \- | | [AnimationEasing](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationeasing/) | \- | | [AnimationEntry](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationentry/) | Configuration options for animations. | | [AnimationGrowDirection](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationgrowdirection/) | \- | | [AnimationJumpLoopDirection](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationjumploopdirection/) | \- | | [AnimationKenBurnsDirection](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationkenburnsdirection/) | \- | | [AnimationMergeTextDirection](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationmergetextdirection/) | \- | | [AnimationOptions](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationoptions/) | Options for configuring animations (in, loop, out animations). | | [AnimationSpinDirection](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationspindirection/) | \- | | [AnimationSpinLoopDirection](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationspinloopdirection/) | \- | | [AnimationType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypeshorthand/) and [AnimationTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypelonghand/) for more details. | | [AnimationTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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)`. | | [AnimationTypeShorthand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypeshorthand/) | \- | | [AnimationTypewriterTextWritingStyle](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypewritertextwritingstyle/) | \- | | [AnimationWipeDirection](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationwipedirection/) | \- | | [ApplicationMimeType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/applicationmimetype/) | Represents the application MIME types used in the editor. | | [AssetColor](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetcolor/) | Asset Color payload | | [AssetGroups](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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. | | [AssetMetaData](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetmetadata/) | Generic asset information | | [AssetProperty](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetproperty/) | Asset property for payload | | [AssetTransformPreset](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assettransformpreset/) | Transform preset payload | | [AudioExportOptions](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/audioexportoptions/) | Represents the options for exporting audio. | | [AudioFromVideoOptions](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/audiofromvideooptions/) | Options for configuring audio extraction from video operations. | | [AudioMimeType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/audiomimetype/) | Represents the audio MIME types used in the editor. | | [BlendMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blendmode/) | \- | | [BlockEnumType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockenumtype/) | \- | | [BlockState](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockstate/) | Represents the state of a design block. | | [BlurType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtypeshorthand/) and [BlurTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtypelonghand/) for more details. | | [BlurTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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)`. | | [BlurTypeShorthand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtypeshorthand/) | \- | | [BooleanOperation](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/booleanoperation/) | Represents the names of boolean operations. | | [BoolPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/boolpropertyname/) | \- | | [CameraClampingOvershootMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cameraclampingovershootmode/) | \- | | [Canvas](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/canvas/) | An HTML Canvas or an Offscreen Canvas | | [CaptionHorizontalAlignment](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/captionhorizontalalignment/) | \- | | [CaptionVerticalAlignment](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/captionverticalalignment/) | \- | | [CMYK](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cmyk/) | Represents a color in the CMYK color space. | | [Color](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | Represents all color types supported by the engine. | | [ColorPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/colorpropertyname/) | \- | | [ColorSpace](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/colorspace/) | Represents the color space used in the editor. | | [ContentFillMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/contentfillmode/) | \- | | [CreateSceneOptions](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/createsceneoptions/) | Options for creating a video scene. | | [CutoutOperation](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cutoutoperation/) | Represents the type of a cutout. | | [CutoutType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cutouttype/) | \- | | [DefaultAssetSourceId](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/defaultassetsourceid/) | Represents the default asset source IDs used in the editor. | | [DemoAssetSourceId](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/demoassetsourceid/) | Represents the default demo asset source IDs used in the editor. | | [DesignBlockId](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblockid/) | A numerical identifier for a design block | | [DesignBlockType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktypeshorthand/) and [DesignBlockTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktypelonghand/) for more details. | | [DesignBlockTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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)`. | | [DesignBlockTypeShorthand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktypeshorthand/) | \- | | [DoubleClickSelectionMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/doubleclickselectionmode/) | \- | | [DoublePropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/doublepropertyname/) | \- | | [DropShadowOptions](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/dropshadowoptions/) | Options for configuring drop shadow effects on blocks. | | [EditMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/editmode/) | Represents the current edit mode of the editor. | | [EffectType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttypeshorthand/) and [EffectTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttypelonghand/) for more details. | | [EffectTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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)`. | | [EffectTypeShorthand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttypeshorthand/) | \- | | [EnginePluginContext](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/engineplugincontext/) | Represents the context for an engine plugin. | | [EnumPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/enumpropertyname/) | \- | | [EnumValues](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/enumvalues/) | \- | | [\_EqualsFn](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/equalsfn/) | A function that compares two values for equality | | [ExportOptions](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/exportoptions/) | Represents the options for exporting a design block. | | [FillPixelStreamOrientation](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fillpixelstreamorientation/) | \- | | [FillType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/filltypeshorthand/) and [FillTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/filltypelonghand/) for more details. | | [FillTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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)`. | | [FillTypeShorthand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/filltypeshorthand/) | \- | | [FloatPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/floatpropertyname/) | \- | | [FontSizeUnit](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontsizeunit/) | Extended design unit type that includes Point for font size operations. Maintains consistency with SceneDesignUnit’s capitalized naming convention. | | [FontStyle](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontstyle/) | Represents the style of a font. | | [FontWeight](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontweight/) | Represents the weight of a font. | | [GradientstopRGBA](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/gradientstoprgba/) | Represents a gradient stop in the RGBA color space. | | [HeightMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/heightmode/) | \- | | [HexColorString](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/hexcolorstring/) | Represents a hexadecimal color value (RGB or RGBA) that starts with a ’#’. | | [HistoryId](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/historyid/) | A numerical identifier for a history stack | | [HorizontalBlockAlignment](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/horizontalblockalignment/) | \- | | [ImageMimeType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/imagemimetype/) | Represents the image MIME types used in the editor. | | [IntPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/intpropertyname/) | \- | | [\_LegacySource](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/legacysource/) | A simplified source type for legacy API streams | | [\_Listener](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/listener/) | A listener function that receives value updates | | [Locale](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/locale/) | e.g. `en`, `de`, etc. | | [LogLevel](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/loglevel/) | Provides logging functionality for the Creative Editor SDK. | | [MimeType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/mimetype/) | Represents the MIME types used in the editor. | | [ObjectType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttypeshorthand/) and [ObjectTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttypelonghand/) for more details. | | [ObjectTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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. | | [ObjectTypeShorthand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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. | | [OffscreenCanvas](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/offscreencanvas/) | A simplified placeholder type for `OffscreenCanvas`, to avoid a dependency on `@types/offscreencanvas` | | [OptionalPrefix](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/optionalprefix/) | \- | | [PaletteColor](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/palettecolor/) | Represents a color definition for the custom color palette. | | [PositionMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionmode/) | \- | | [PositionXMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionxmode/) | \- | | [PositionYMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionymode/) | \- | | [PropertyType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/propertytype/) | Represents the various types of properties that can be associated with design blocks. Each type corresponds to a different kind of data that can be used to define the properties of a design block within the system. | | [RGBA](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) | Represents a color in the RGBA color space. | | [RoleString](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rolestring/) | Represents a role string. | | [DesignUnit](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designunit/) | \- | | [SceneLayout](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scenelayout/) | \- | | [SceneMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scenemode/) | \- | | [Scope](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/) | Represents the various scopes that define the capabilities and permissions within the Creative Editor SDK. Each scope corresponds to a specific functionality or action that can be performed within the editor. | | [SettingBoolPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingboolpropertyname/) | \- | | [SettingColorPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname/) | \- | | [SettingEnumPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumpropertyname/) | \- | | [SettingEnumType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/) | \- | | [SettingEnumValues](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumvalues/) | \- | | [SettingFloatPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingfloatpropertyname/) | \- | | [SettingIntPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingintpropertyname/) | \- | | [SettingKey](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingkey/) | Union type of all valid setting keys. | | [SettingsBool](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsbool/) | \- | | [SettingsColor](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingscolor/) | Represents the color settings available in the editor. | | [~SettingsColorRGBA~](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingscolorrgba/) | Represents the color settings available in the editor. | | [SettingsEnum](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsenum/) | \- | | [SettingsFloat](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsfloat/) | \- | | [SettingsInt](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsint/) | \- | | [SettingsString](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsstring/) | \- | | [SettingStringPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingstringpropertyname/) | \- | | [SettingType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingtype/) | Represents the type of a setting. | | [SettingValueType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingvaluetype/) | Gets the value type for a specific setting key. | | [ShapeType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetypeshorthand/) and [ShapeTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetypelonghand/) for more details. | | [ShapeTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetypelonghand/) | The longhand block type IDs for the blocks. These are the IDs used to create new shapes using `cesdk.engine.block.createShape(id)`. | | [ShapeTypeShorthand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetypeshorthand/) | \- | | [SizeMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sizemode/) | \- | | [SortingOrder](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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. | | [SourceSetPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sourcesetpropertyname/) | \- | | [SplitOptions](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/splitoptions/) | Options for configuring block split operations. | | [StringPropertyName](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/stringpropertyname/) | \- | | [StrokeCornerGeometry](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokecornergeometry/) | \- | | [StrokePosition](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokeposition/) | \- | | [StrokeStyle](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokestyle/) | \- | | [\_Subscription](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/subscription/) | Represents a subscription to an event. | | [TextAnimationWritingStyle](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textanimationwritingstyle/) | \- | | [TextCase](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textcase/) | Represents the text case of a text block. | | [HorizontalTextAlignment](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/horizontaltextalignment/) | \- | | [TextVerticalAlignment](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textverticalalignment/) | \- | | [TouchPinchAction](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/touchpinchaction/) | \- | | [TouchRotateAction](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/touchrotateaction/) | \- | | [~TypefaceDefinition~](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/typefacedefinition/) | Represents a typeface definition used in the editor. | | [\_Unsubscribe](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/) | An unsubscribe function that removes a listener | | [VerticalBlockAlignment](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/verticalblockalignment/) | \- | | [VideoExportOptions](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/videoexportoptions/) | Represents the options for exporting a video. | | [VideoMimeType](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/videomimetype/) | Represents the video MIME types used in the editor. | | [WidthMode](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/widthmode/) | \- | | [XYWH](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/xywh/) | Describes a rectangle on the screen. | | [ZoomAutoFitAxis](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/zoomautofitaxis/) | The axis(es) for which to auto-fit. | | [ZoomOptions](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/zoomoptions/) | Options for zooming to a block with optional animation. | ## Interfaces[#](#interfaces) | Interface | Description | | --- | --- | | [AddVideoOptions](https://img.ly/docs/cesdk/angular/api/engine/interfaces/addvideooptions/) | Options for adding videos to the scene. | | [ApplyAssetOptions](https://img.ly/docs/cesdk/angular/api/engine/interfaces/applyassetoptions/) | Options for applying an asset to the scene. | | [Asset](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) | Generic asset information | | [AssetBooleanProperty](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetbooleanproperty/) | Asset boolean property definition | | [AssetCMYKColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetcmykcolor/) | Asset Color payload CMYK representation | | [AssetColorProperty](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetcolorproperty/) | Asset color property definition | | [AssetDefinition](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetdefinition/) | Definition of an asset used if an asset is added to an asset source. | | [AssetEnumProperty](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetenumproperty/) | Asset enum property definition | | [AssetFixedAspectRatio](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetfixedaspectratio/) | Asset transform preset payload fixed aspect ratio | | [AssetFixedSize](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetfixedsize/) | Asset transform preset payload fixed size | | [AssetFreeAspectRatio](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetfreeaspectratio/) | Asset transform preset payload free aspect ratio | | [AssetNumberProperty](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetnumberproperty/) | Asset number property definition | | [AssetPayload](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetpayload/) | Asset payload | | [AssetQueryData](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetquerydata/) | Defines a request for querying assets | | [AssetResult](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | Single asset result of a query from the engine. | | [\_AssetResultCredits](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresultcredits/) | Represents the credits for an asset result. | | [\_AssetResultLicense](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresultlicense/) | Represents the license for an asset result. | | [AssetRGBColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetrgbcolor/) | Asset Color payload RGB representation | | [AssetSource](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetsource/) | A source of assets | | [AssetSpotColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetspotcolor/) | Asset Color payload SpotColor representation | | [AssetsQueryResult](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetsqueryresult/) | Return type of a `findAssets` query. | | [AssetStringProperty](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetstringproperty/) | Asset string property definition | | [AudioTrackInfo](https://img.ly/docs/cesdk/angular/api/engine/interfaces/audiotrackinfo/) | Information about a single audio track from a video. This interface provides comprehensive metadata about audio tracks, including codec information, technical specifications, and track details. | | [BlockEvent](https://img.ly/docs/cesdk/angular/api/engine/interfaces/blockevent/) | Represents an event related to a design block. | | [BlockStateError](https://img.ly/docs/cesdk/angular/api/engine/interfaces/blockstateerror/) | Represents an error state for a design block. | | [BlockStatePending](https://img.ly/docs/cesdk/angular/api/engine/interfaces/blockstatepending/) | Represents a pending state for a design block. | | [BlockStateReady](https://img.ly/docs/cesdk/angular/api/engine/interfaces/blockstateready/) | Represents a ready state for a design block. | | [BlurEvent](https://img.ly/docs/cesdk/angular/api/engine/interfaces/blurevent/) | Dispatched on the engine canvas when the text input has been blurred. Call `preventDefault()` to disallow this and refocus the engine text input. | | [Buffer](https://img.ly/docs/cesdk/angular/api/engine/interfaces/buffer/) | Represents a buffer of data. | | [CMYKColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cmykcolor/) | Represents a CMYK color value. | | [CompleteAssetResult](https://img.ly/docs/cesdk/angular/api/engine/interfaces/completeassetresult/) | Asset results that are returned from the engine. | | [Configuration](https://img.ly/docs/cesdk/angular/api/engine/interfaces/configuration/) | Specifies the configuration for the Creative Editor SDK. | | [CursorEvent](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/) | Dispatched on the engine canvas when the text input has been blurred. Call `preventDefault()` to disallow this and refocus the engine text input. | | [EnginePlugin](https://img.ly/docs/cesdk/angular/api/engine/interfaces/engineplugin/) | Represents an engine plugin. | | [\_FindAssetsQuery](https://img.ly/docs/cesdk/angular/api/engine/interfaces/findassetsquery/) | Represents a query for finding assets. | | [\_Flip](https://img.ly/docs/cesdk/angular/api/engine/interfaces/flip/) | Specifies the horizontal and vertical flip states of a design block. | | [Font](https://img.ly/docs/cesdk/angular/api/engine/interfaces/font/) | Represents a font. | | [GradientColorStop](https://img.ly/docs/cesdk/angular/api/engine/interfaces/gradientcolorstop/) | Represents a gradient color stop. | | [HTMLCreativeEngineCanvasElement](https://img.ly/docs/cesdk/angular/api/engine/interfaces/htmlcreativeenginecanvaselement/) | A wrapper around a plain canvas | | [Logger](https://img.ly/docs/cesdk/angular/api/engine/interfaces/logger/) | Represents a logger function. | | [PageDuration](https://img.ly/docs/cesdk/angular/api/engine/interfaces/pageduration/) | \- | | [Range](https://img.ly/docs/cesdk/angular/api/engine/interfaces/range/) | An open range. | | [Reaction](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reaction/) | Reactions track read calls and provide a way to react if they change. | | [\_ReactiveProperty](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactiveproperty/) | A reactive property with subscribe, value, and update methods | | [\_ReactivePropertyOptions](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactivepropertyoptions/) | Options for creating a reactive property | | [Reactor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactor/) | The reactor coordinates the update of registered _Reactions_. | | [\_ReadonlyReactiveProperty](https://img.ly/docs/cesdk/angular/api/engine/interfaces/readonlyreactiveproperty/) | A read-only reactive property with subscribe and value methods | | [RefocusEvent](https://img.ly/docs/cesdk/angular/api/engine/interfaces/refocusevent/) | Dispatched on the engine canvas right before the engine will refocus its text input after a blur. Call `preventDefault()` to prevent the refocusing. | | [RGBAColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/rgbacolor/) | Represents an RGBA color value. | | [RGBColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/rgbcolor/) | Represents an RGB color value. | | [Settings](https://img.ly/docs/cesdk/angular/api/engine/interfaces/settings/) | Map of all available settings with their types. This provides type-safe access to all editor settings. | | [Size2](https://img.ly/docs/cesdk/angular/api/engine/interfaces/size2/) | \- | | [Source](https://img.ly/docs/cesdk/angular/api/engine/interfaces/source/) | A single source width an intrinsic width & height. | | [\_Source](https://img.ly/docs/cesdk/angular/api/engine/interfaces/source-1/) | A source that can emit values to subscribed listeners | | [SpotColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/spotcolor/) | Represents a spot color value. | | [TextFontSizeOptions](https://img.ly/docs/cesdk/angular/api/engine/interfaces/textfontsizeoptions/) | Options for text font size operations with unit support. | | [TransientResource](https://img.ly/docs/cesdk/angular/api/engine/interfaces/transientresource/) | Represents a transient resource. | | [Typeface](https://img.ly/docs/cesdk/angular/api/engine/interfaces/typeface/) | Represents a typeface. | | [\_UBQAudioFromVideoOptions](https://img.ly/docs/cesdk/angular/api/engine/interfaces/ubqaudiofromvideooptions/) | Specifies options for configuring audio extraction from video operations. | | [\_UBQExportAudioOptions](https://img.ly/docs/cesdk/angular/api/engine/interfaces/ubqexportaudiooptions/) | Specifies options for exporting audio design blocks to various formats. | | [\_UBQExportOptions](https://img.ly/docs/cesdk/angular/api/engine/interfaces/ubqexportoptions/) | Specifies options for exporting design blocks to various formats. | | [\_UBQExportVideoOptions](https://img.ly/docs/cesdk/angular/api/engine/interfaces/ubqexportvideooptions/) | Specifies options for exporting video design blocks to various formats. | | [\_UBQSplitOptions](https://img.ly/docs/cesdk/angular/api/engine/interfaces/ubqsplitoptions/) | Specifies options for configuring block split operations. | | [Vec2](https://img.ly/docs/cesdk/angular/api/engine/interfaces/vec2/) | \- | | [Vec3](https://img.ly/docs/cesdk/angular/api/engine/interfaces/vec3/) | \- | ## Variables[#](#variables) | Variable | Description | | --- | --- | | [ANIMATION\_TYPES](https://img.ly/docs/cesdk/angular/api/engine/variables/animation_types/) | The shorthand block type IDs for the animation blocks. These are the IDs used to create new animations using `cesdk.engine.block.createAnimation(id)`. | | [AnimationBaselineDirectionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationbaselinedirectionvalues/) | \- | | [AnimationBlockSwipeTextDirectionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationblockswipetextdirectionvalues/) | \- | | [AnimationEasingValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationeasingvalues/) | \- | | [AnimationGrowDirectionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationgrowdirectionvalues/) | \- | | [AnimationJumpLoopDirectionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationjumploopdirectionvalues/) | \- | | [AnimationKenBurnsDirectionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationkenburnsdirectionvalues/) | \- | | [AnimationMergeTextDirectionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationmergetextdirectionvalues/) | \- | | [AnimationSpinDirectionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationspindirectionvalues/) | \- | | [AnimationSpinLoopDirectionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationspinloopdirectionvalues/) | \- | | [AnimationTypewriterTextWritingStyleValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationtypewritertextwritingstylevalues/) | \- | | [AnimationWipeDirectionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/animationwipedirectionvalues/) | \- | | [BlendModeValues](https://img.ly/docs/cesdk/angular/api/engine/variables/blendmodevalues/) | \- | | [BLUR\_TYPES](https://img.ly/docs/cesdk/angular/api/engine/variables/blur_types/) | The shorthand block type IDs for the blur blocks. These are the IDs used to create new blurs using `cesdk.engine.block.createBlur(id)`. | | [CameraClampingOvershootModeValues](https://img.ly/docs/cesdk/angular/api/engine/variables/cameraclampingovershootmodevalues/) | \- | | [CaptionHorizontalAlignmentValues](https://img.ly/docs/cesdk/angular/api/engine/variables/captionhorizontalalignmentvalues/) | \- | | [CaptionVerticalAlignmentValues](https://img.ly/docs/cesdk/angular/api/engine/variables/captionverticalalignmentvalues/) | \- | | [ContentFillModeValues](https://img.ly/docs/cesdk/angular/api/engine/variables/contentfillmodevalues/) | \- | | [CutoutTypeValues](https://img.ly/docs/cesdk/angular/api/engine/variables/cutouttypevalues/) | \- | | [DESIGN\_BLOCK\_TYPES](https://img.ly/docs/cesdk/angular/api/engine/variables/design_block_types/) | 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)`. | | [DoubleClickSelectionModeValues](https://img.ly/docs/cesdk/angular/api/engine/variables/doubleclickselectionmodevalues/) | \- | | [EFFECT\_TYPES](https://img.ly/docs/cesdk/angular/api/engine/variables/effect_types/) | The shorthand block type IDs for the effect blocks. These are the IDs used to create new effects using `cesdk.engine.block.createEffect(id)`. | | [FILL\_TYPES](https://img.ly/docs/cesdk/angular/api/engine/variables/fill_types/) | The shorthand block type IDs for the fill blocks. These are the IDs used to create new fills using `cesdk.engine.block.createFill(id)`. | | [FillPixelStreamOrientationValues](https://img.ly/docs/cesdk/angular/api/engine/variables/fillpixelstreamorientationvalues/) | \- | | [HeightModeValues](https://img.ly/docs/cesdk/angular/api/engine/variables/heightmodevalues/) | \- | | [~LogLevel~](https://img.ly/docs/cesdk/angular/api/engine/variables/loglevel/) | Provides a set of predefined log levels for the Creative Editor SDK. | | [~MimeType~](https://img.ly/docs/cesdk/angular/api/engine/variables/mimetype/) | Represents the MIME types used in the editor. | | [PositionXModeValues](https://img.ly/docs/cesdk/angular/api/engine/variables/positionxmodevalues/) | \- | | [PositionYModeValues](https://img.ly/docs/cesdk/angular/api/engine/variables/positionymodevalues/) | \- | | [SceneDesignUnitValues](https://img.ly/docs/cesdk/angular/api/engine/variables/scenedesignunitvalues/) | \- | | [SceneLayoutValues](https://img.ly/docs/cesdk/angular/api/engine/variables/scenelayoutvalues/) | \- | | [SceneModeValues](https://img.ly/docs/cesdk/angular/api/engine/variables/scenemodevalues/) | \- | | [SHAPE\_TYPES](https://img.ly/docs/cesdk/angular/api/engine/variables/shape_types/) | The shorthand block type IDs for the shape blocks. These are the IDs used to create new shapes using `cesdk.engine.block.createShape(id)`. | | [StrokeCornerGeometryValues](https://img.ly/docs/cesdk/angular/api/engine/variables/strokecornergeometryvalues/) | \- | | [StrokePositionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/strokepositionvalues/) | \- | | [StrokeStyleValues](https://img.ly/docs/cesdk/angular/api/engine/variables/strokestylevalues/) | \- | | [TextAnimationWritingStyleValues](https://img.ly/docs/cesdk/angular/api/engine/variables/textanimationwritingstylevalues/) | \- | | [TextHorizontalAlignmentValues](https://img.ly/docs/cesdk/angular/api/engine/variables/texthorizontalalignmentvalues/) | \- | | [TextVerticalAlignmentValues](https://img.ly/docs/cesdk/angular/api/engine/variables/textverticalalignmentvalues/) | \- | | [TouchPinchActionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/touchpinchactionvalues/) | \- | | [TouchRotateActionValues](https://img.ly/docs/cesdk/angular/api/engine/variables/touchrotateactionvalues/) | \- | | [WidthModeValues](https://img.ly/docs/cesdk/angular/api/engine/variables/widthmodevalues/) | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js) # Package: documentation ## Classes[#](#classes) | Class | Description | | --- | --- | | [AssetAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/assetapi/) | Manage asset sources and apply assets to scenes. | | [BlockAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/blockapi/) | Create, manipulate, and query the building blocks of your design. | | [CreativeEngine](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/editorapi/) | Control the design editor’s behavior and settings. | | [EventAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/eventapi/) | Subscribe to block lifecycle events in the design engine. | | [SceneAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/sceneapi/) | Create, load, save, and manipulate scenes. | | [VariableAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/variableapi/) | Manage text variables within design templates. | | [ActionsAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/actionsapi/) | ActionsAPI provides a centralized way to manage and customize actions for various user interactions in the Creative Engine SDK. | | [CreativeEditorSDK](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeeditorsdk/) | The main entry point for the Creative Editor SDK. | | [FeatureAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/featureapi/) | Controls the availability of features within the Creative Editor SDK. | | [InternationalizationAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/internationalizationapi/) | Manages localization and internationalization settings for the Creative Editor SDK. | | [UserInterfaceAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/userinterfaceapi/) | Control the user interface and behavior of the Creative Editor SDK. | | [UtilsAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/utilsapi/) | UtilsAPI provides utility functions for common operations in the Creative Engine SDK. | ## Functions[#](#functions) | Function | Description | | --- | --- | | [supportsBrowser](https://img.ly/docs/cesdk/angular/api/cesdk-js/functions/supportsbrowser/) | Checks if the current browser supports necessary technologies to match our supported browsers | | [checkVideoSupport](https://img.ly/docs/cesdk/angular/api/cesdk-js/functions/checkvideosupport/) | Throws an error if the current browser does not support video editing. | | [supportsVideo](https://img.ly/docs/cesdk/angular/api/cesdk-js/functions/supportsvideo/) | Checks if the current browser supports video editing. | | [checkVideoExportSupport](https://img.ly/docs/cesdk/angular/api/cesdk-js/functions/checkvideoexportsupport/) | Throws an error if the current browser does not support video exporting. | | [supportsVideoExport](https://img.ly/docs/cesdk/angular/api/cesdk-js/functions/supportsvideoexport/) | Checks if the current browser supports video exporting. | | [supportsWasm](https://img.ly/docs/cesdk/angular/api/cesdk-js/functions/supportswasm/) | Checks if the current browser supports web assembly | ## Type Aliases[#](#type-aliases) | Type Alias | Description | | --- | --- | | [SizeMode](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sizemode/) | \- | | [PositionMode](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionmode/) | \- | | [VerticalBlockAlignment](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/verticalblockalignment/) | \- | | [HorizontalBlockAlignment](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/horizontalblockalignment/) | \- | | [PropertyType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/propertytype/) | Represents the various types of properties that can be associated with design blocks. Each type corresponds to a different kind of data that can be used to define the properties of a design block within the system. | | [TextCase](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/textcase/) | Represents the text case of a text block. | | [BooleanOperation](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/booleanoperation/) | Represents the names of boolean operations. | | [EngineExportOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineexportoptions/) | Represents the options for exporting a design block. | | [VideoExportOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videoexportoptions/) | Represents the options for exporting a video. | | [AudioExportOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/audioexportoptions/) | Represents the options for exporting audio. | | [SplitOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/splitoptions/) | Options for configuring block split operations. | | [DropShadowOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dropshadowoptions/) | Options for configuring drop shadow effects on blocks. | | [AnimationEntry](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationentry/) | Configuration options for animations. | | [AnimationOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationoptions/) | Options for configuring animations (in, loop, out animations). | | [AddImageOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/addimageoptions/) | Options for adding images to the scene. | | [SettingType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingtype/) | Represents the type of a setting. | | [SettingsBool](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingsbool/) | \- | | [SettingsString](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingsstring/) | \- | | [SettingsFloat](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingsfloat/) | \- | | [SettingsColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingscolor/) | Represents the color settings available in the editor. | | [~SettingsColorRGBA~](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingscolorrgba/) | Represents the color settings available in the editor. | | [SettingsEnum](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingsenum/) | \- | | [ZoomOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomoptions/) | Options for zooming to a block with optional animation. | | [CreateSceneOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/createsceneoptions/) | Options for creating a video scene. | | [DefaultAssetSourceId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/defaultassetsourceid/) | Represents the default asset source IDs used in the editor. | | [DemoAssetSourceId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/demoassetsourceid/) | Represents the default demo asset source IDs used in the editor. | | [~TypefaceDefinition~](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/typefacedefinition/) | Represents a typeface definition used in the editor. | | [EnginePluginContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineplugincontext/) | Represents the context for an engine plugin. | | [LogLevel](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/loglevel/) | Provides logging functionality for the Creative Editor SDK. | | [MimeType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/mimetype/) | Represents the MIME types used in the editor. | | [ImageMimeType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/imagemimetype/) | Represents the image MIME types used in the editor. | | [AudioMimeType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/audiomimetype/) | Represents the audio MIME types used in the editor. | | [VideoMimeType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videomimetype/) | Represents the video MIME types used in the editor. | | [ApplicationMimeType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/applicationmimetype/) | Represents the application MIME types used in the editor. | | [AssetGroups](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetmetadata/) | Generic asset information | | [AssetColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetcolor/) | Asset Color payload | | [AssetTransformPreset](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assettransformpreset/) | Transform preset payload | | [AssetProperty](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetproperty/) | Asset property for payload | | [DesignBlockTypeShorthand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblocktypeshorthand/) | \- | | [DesignBlockTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblocktypeshorthand/) and [DesignBlockTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblocktypelonghand/) for more details. | | [ShapeTypeShorthand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/shapetypeshorthand/) | \- | | [ShapeTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/shapetypeshorthand/) and [ShapeTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/shapetypelonghand/) for more details. | | [FillTypeShorthand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filltypeshorthand/) | \- | | [FillTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filltypeshorthand/) and [FillTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filltypelonghand/) for more details. | | [EffectTypeShorthand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/effecttypeshorthand/) | \- | | [EffectTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/effecttypeshorthand/) and [EffectTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/effecttypelonghand/) for more details. | | [BlurTypeShorthand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blurtypeshorthand/) | \- | | [BlurTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blurtypeshorthand/) and [BlurTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blurtypelonghand/) for more details. | | [AnimationTypeShorthand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationtypeshorthand/) | \- | | [AnimationTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationtypeshorthand/) and [AnimationTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationtypelonghand/) for more details. | | [ObjectTypeShorthand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/objecttypeshorthand/) and [ObjectTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/objecttypelonghand/) for more details. | | [OffscreenCanvas](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/offscreencanvas/) | A simplified placeholder type for `OffscreenCanvas`, to avoid a dependency on `@types/offscreencanvas` | | [Canvas](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvas/) | An HTML Canvas or an Offscreen Canvas | | [HexColorString](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/hexcolorstring/) | Represents a hexadecimal color value (RGB or RGBA) that starts with a ’#’. | | [PaletteColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/palettecolor/) | Represents a color definition for the custom color palette. | | [ColorSpace](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/colorspace/) | Represents the color space used in the editor. | | [CutoutOperation](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/cutoutoperation/) | Represents the type of a cutout. | | [DesignBlockId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblockid/) | A numerical identifier for a design block | | [HistoryId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/historyid/) | A numerical identifier for a history stack | | [ZoomAutoFitAxis](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomautofitaxis/) | The axis(es) for which to auto-fit. | | [EditMode](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/editmode/) | Represents the current edit mode of the editor. | | [FontWeight](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/fontweight/) | Represents the weight of a font. | | [FontStyle](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/fontstyle/) | Represents the style of a font. | | [BlendMode](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blendmode/) | \- | | [ContentFillMode](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/contentfillmode/) | \- | | [DesignUnit](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designunit/) | \- | | [SceneLayout](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scenelayout/) | \- | | [SceneMode](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scenemode/) | \- | | [StrokeCornerGeometry](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/strokecornergeometry/) | \- | | [StrokePosition](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/strokeposition/) | \- | | [StrokeStyle](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/strokestyle/) | \- | | [CutoutType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/cutouttype/) | \- | | [AnimationEasing](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationeasing/) | \- | | [RoleString](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rolestring/) | Represents a role string. | | [Scope](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scope/) | Represents the various scopes that define the capabilities and permissions within the Creative Editor SDK. Each scope corresponds to a specific functionality or action that can be performed within the editor. | | [RGBA](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rgba/) | Represents a color in the RGBA color space. | | [CMYK](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/cmyk/) | Represents a color in the CMYK color space. | | [XYWH](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/xywh/) | Describes a rectangle on the screen. | | [GradientstopRGBA](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/gradientstoprgba/) | Represents a gradient stop in the RGBA color space. | | [BlockState](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blockstate/) | Represents the state of a design block. | | [ActionFunction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionfunction/) | Type helper for retrieving the correct action function type based on the action ID. Returns the strongly-typed action for known actions, or a custom action type for unknown IDs. | | [ActionId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionid/) | Available action event types that can be registered with the ActionsAPI. These correspond to different UI actions that can be customized. Supports both predefined action types from the Actions interface and custom string identifiers. | | [AssetEntryId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid/) | Asset library entry IDs that can be used with asset library APIs. Includes built-in entry IDs registered by the SDK, and allows custom entry IDs. | | [AssetLibraryDockComponent](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetlibrarydockcomponent/) | Represents an asset library dock component. | | [AssetLibraryPanelPayload](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetlibrarypanelpayload/) | Represents the payload for the asset library panel in the Creative Editor SDK. This interface defines the title, entries, and placement options for the asset library panel. | | [BuilderRenderFunction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/builderrenderfunction/) | Function that defines a component with the help of the passed builder object. | | [CanvasBarComponentId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/) | Represents the ID of a canvas bar component. | | [CanvasMenuComponentId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/) | A list of the component IDs that can be used in the canvas menu. | | [CanvasMenuComponents](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponents/) | \- | | [CanvasMenuOrderComponent](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent/) | \- | | [ChildrenOrder](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/childrenorder/) | Represents the order of children components in a dropdown. | | [ComponentId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentid/) | Represents the ID of a component. | | [Configuration](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/configuration/) | Represents the user-provided configuration for the Creative Editor SDK. This type allows for partial configuration settings, making all properties optional. | | [CopyAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/copyaction/) | Action function for copying selected blocks to the clipboard | | [CustomActionFunction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/customactionfunction/) | A generic action function type for custom actions. Supports both synchronous and asynchronous implementations with flexible parameters. | | [CustomPanelMountFunction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/custompanelmountfunction/) | Represents a function that mounts a custom panel. | | [DialogAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogaction/) | Represents an action in the dialog. | | [DialogContent](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogcontent/) | Represents the content of the dialog. | | [DialogProgress](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogprogress/) | Represents the progress of the dialog. | | [DialogSize](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogsize/) | Represents the size of the dialog. | | [DialogType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogtype/) | Represents the type of dialog. | | [DockOrderComponent](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponent/) | Represents a dock order component. | | [DockOrderComponentId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/) | Represents the ID of a dock order component. | | [EditorPluginContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/editorplugincontext/) | Represents the context for an editor plugin. This type extends the `EnginePluginContext` with an optional `cesdk` property. | | [ExportAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/exportaction/) | Action function for handling export operations. Can be called with or without options to customize the export behavior. Supports both standard and video export workflows through a generic type parameter. The return type is automatically inferred based on the input options type. | | [ExportSceneAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/exportsceneaction/) | Action function for handling scene export operations. | | [FeatureId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | All built-in CE.SDK Feature Ids. | | [FeaturePredicate](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featurepredicate/) | The feature predicate is used to enable or disable a feature based on the boolean or the return value of the function. | | [FeaturePredicateContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featurepredicatecontext/) | Represents the context for enabling a feature. This type extends `IsEnabledFeatureContext` and includes a function to check the previous enable state and a function to get the default predicate. | | [FileMimeType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filemimetype/) | Represents the MIME types for files supported by the file operations in UtilsAPI. | | [ImportSceneAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/importsceneaction/) | Action function for handling scene import operations. | | [InsertOrderComponentLocation](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/insertordercomponentlocation/) | Represents the location for inserting an order component. | | [InspectorBarComponentId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/) | Represents the ID of an inspector bar component. | | [IsEnabledFeatureContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/isenabledfeaturecontext/) | Represents the context for determining if a feature is enabled. This type includes the `CreativeEngine` instance. | | [LocaleKey](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/localekey/) | Represents the supported locale keys for the Creative Editor SDK. | | [NavigationBarComponentId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid/) | A list of the component IDs that can be used in the navigation bar. | | [NavigationBarComponents](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponents/) | \- | | [NavigationBarOrderComponent](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarordercomponent/) | \- | | [NotificationDuration](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/notificationduration/) | Represents the duration of the notification. | | [NotificationType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/notificationtype/) | Represents the type of notification. | | [OnExportOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onexportoptions/) | This interface extends the base ExportOptions with additional information about the export, including which design blocks were exported and the mimeType. | | [OnExportVideoOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onexportvideooptions/) | This interface extends the base VideoExportOptions with additional information about the export, including which design blocks were exported and the mimeType. | | [OnUnsupportedBrowserAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onunsupportedbrowseraction/) | Action function that is invoked when an unsupported browser is detected. This allows custom handling of unsupported browser scenarios. | | [Optional](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/optional/) | Turn value at K of T into a Partial | | [OrderComponentMatcher](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/) | Represents a matcher for order components. | | [PageFormatDefinition](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pageformatdefinition/) | Represents the definition of a page format in the Creative Editor SDK. This interface defines the width, height, unit, and optional fixed orientation for a page format. | | [PanelDisposer](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneldisposer/) | Represents a function that disposes of a panel. | | [PanelId](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | Represents a unique identifier for a panel in the Creative Editor SDK. This type defines specific panel IDs and allows for custom panel IDs. | | [PanelOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneloptions/) | Represents the options for a panel in the Creative Editor SDK. This interface defines the options for a panel, including whether it is closable by the user, its position, whether it is floating, and its payload. | | [PanelPayload](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelpayload/) | Represents the payload for a panel in the Creative Editor SDK. This type defines the payload based on the panel ID. | | [PasteAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pasteaction/) | Action function for pasting blocks from the clipboard | | [PreviewType](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/previewtype/) | Represents a preview, which can be either an image or a color. | | [PreviewTypeColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/previewtypecolor/) | Represents a color preview. | | [PreviewTypeImage](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/previewtypeimage/) | Represents an image preview. | | [SaveSceneAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/savesceneaction/) | Action function for handling scene saving operations. | | [ScrollToBlockAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scrolltoblockaction/) | Action function for scrolling to a specific block | | [ScrollToPageAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scrolltopageaction/) | Action function for scrolling to a specific page | | [ShareSceneAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sharesceneaction/) | Action function for handling scene sharing operations. | | [Suffix](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | Represents additional options for a button, which can be used as a suffix. | | [TimelineCollapseAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinecollapseaction/) | Action function for collapsing the video timeline | | [TimelineExpandAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelineexpandaction/) | Action function for expanding the video timeline | | [TimelineZoomInAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoominaction/) | Action function for zooming in the video timeline by one step | | [TimelineZoomOutAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomoutaction/) | Action function for zooming out the video timeline by one step | | [TimelineZoomResetAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomresetaction/) | Action function for resetting the video timeline zoom to default level (1.0) | | [TimelineZoomToFitAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomtofitaction/) | Action function for fitting the video timeline to show all content | | [TimelineZoomToLevelAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomtolevelaction/) | Action function for setting the video timeline zoom to a specific level | | [UnknownPanelPayload](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unknownpanelpayload/) | Represents an unknown payload for a panel in the Creative Editor SDK. This type defines a generic payload with unknown keys and values. | | [UnknownTranslations](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unknowntranslations/) | Allows for custom translation keys beyond the built-in ones. | | [UploadAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uploadaction/) | Action function for uploading files to asset sources. | | [ViewStyle](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/viewstyle/) | Represents the view style options in the Creative Editor SDK. This type defines the possible view styles, which are ‘advanced’ and ‘default’. | | [ZoomInAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoominaction/) | Action function for zooming in by one step | | [ZoomOutAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomoutaction/) | Action function for zooming out by one step | | [ZoomToBlockAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtoblockaction/) | Action function for zooming to a specific block | | [ZoomToLevelAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtolevelaction/) | Action function for setting zoom to a specific level | | [ZoomToPageAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtopageaction/) | Action function for zooming to a page with optional padding | | [ZoomToSelectionAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtoselectionaction/) | Action function for zooming to the current selection | ## Enumerations[#](#enumerations) | Enumeration | Description | | --- | --- | | [PanelPosition](https://img.ly/docs/cesdk/angular/api/cesdk-js/enumerations/panelposition/) | This enum is used to specify the position of various panels within the user interface, such as the inspector, settings, and asset library panels. | ## Interfaces[#](#interfaces) | Interface | Description | | --- | --- | | [ApplyAssetOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/applyassetoptions/) | Options for applying an asset to the scene. | | [AddVideoOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/addvideooptions/) | Options for adding videos to the scene. | | [HTMLCreativeEngineCanvasElement](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/htmlcreativeenginecanvaselement/) | A wrapper around a plain canvas | | [\_EngineConfiguration](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/engineconfiguration/) | Specifies the configuration for the Creative Editor SDK. | | [EnginePlugin](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/engineplugin/) | Represents an engine plugin. | | [Logger](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/logger/) | Represents a logger function. | | [Source](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/source/) | A single source width an intrinsic width & height. | | [AssetRGBColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetrgbcolor/) | Asset Color payload RGB representation | | [AssetCMYKColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetcmykcolor/) | Asset Color payload CMYK representation | | [AssetSpotColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetspotcolor/) | Asset Color payload SpotColor representation | | [AssetFixedAspectRatio](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetfixedaspectratio/) | Asset transform preset payload fixed aspect ratio | | [AssetFreeAspectRatio](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetfreeaspectratio/) | Asset transform preset payload free aspect ratio | | [AssetFixedSize](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetfixedsize/) | Asset transform preset payload fixed size | | [AssetStringProperty](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetstringproperty/) | Asset string property definition | | [AssetNumberProperty](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetnumberproperty/) | Asset number property definition | | [AssetBooleanProperty](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetbooleanproperty/) | Asset boolean property definition | | [AssetEnumProperty](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetenumproperty/) | Asset enum property definition | | [AssetColorProperty](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetcolorproperty/) | Asset color property definition | | [AssetPayload](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetpayload/) | Asset payload | | [Asset](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) | Generic asset information | | [AssetDefinition](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetdefinition/) | Definition of an asset used if an asset is added to an asset source. | | [AssetResult](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | Single asset result of a query from the engine. | | [CompleteAssetResult](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/completeassetresult/) | Asset results that are returned from the engine. | | [AssetQueryData](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetquerydata/) | Defines a request for querying assets | | [AssetsQueryResult](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetsqueryresult/) | Return type of a `findAssets` query. | | [AssetSource](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetsource/) | A source of assets | | [RGBColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/rgbcolor/) | Represents an RGB color value. | | [RGBAColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/rgbacolor/) | Represents an RGBA color value. | | [CMYKColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/cmykcolor/) | Represents a CMYK color value. | | [SpotColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/spotcolor/) | Represents a spot color value. | | [GradientColorStop](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/gradientcolorstop/) | Represents a gradient color stop. | | [Range](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/range/) | An open range. | | [Font](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/font/) | Represents a font. | | [Typeface](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/typeface/) | Represents a typeface. | | [Buffer](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/buffer/) | Represents a buffer of data. | | [TransientResource](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/transientresource/) | Represents a transient resource. | | [BlockEvent](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/blockevent/) | Represents an event related to a design block. | | [AssetLibraryEntry](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/) | Represents an entry in the asset library, combining data and view configurations. | | [Builder](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builder/) | Interface for all available builder. Depending on the context different implementation might be used. A “Button” in the canvas menu might render different component than a button in the topbar or a panel. | | [BuilderRenderFunctionContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builderrenderfunctioncontext/) | Represents the context for rendering a builder function. | | [BuiltinTranslations](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | Built-in translation keys provided by the Creative Editor SDK. | | [ButtonGroupOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/buttongroupoptions/) | Represents options for a button group. | | [ButtonOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/buttonoptions/) | Represents options for a button. | | [CanvasMenuActionButton](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuactionbutton/) | Base interface for action buttons in the canvas menu. Contains common properties shared across all canvas menu button types. | | [CanvasMenuCustomActionButton](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenucustomactionbutton/) | Interface representing a custom canvas menu action button. Note: This component requires a key and has a required label, unlike other action buttons. | | [CanvasMenuOptionsComponent](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuoptionscomponent/) | Interface representing the canvas menu options dropdown component. This component can contain children components that are rendered in a dropdown menu. | | [CESDKConfiguration](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/cesdkconfiguration/) | Represents the configuration settings for the Creative Editor SDK. This interface defines various settings such as locale, theme, development mode, user interface, internationalization, accessibility, callbacks, feature flags, and logger. | | [CheckboxOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/checkboxoptions/) | Represents options for a checkbox. | | [ColorInputOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/colorinputoptions/) | Represents options for a color input. | | [ComponentOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentoptions/) | Represents options for a component. | | [ComponentPayload](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) | Represents the payload of a component. | | [CustomDockComponent](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/customdockcomponent/) | Represents a custom dock component. | | [Dialog](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dialog/) | Represents a dialog configuration. | | [DropdownChildrenContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dropdownchildrencontext/) | Represents the context for the children of a dropdown. | | [DropdownOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dropdownoptions/) | Represents options for a dropdown. | | [EditorPlugin](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/editorplugin/) | Represents an editor plugin. This interface defines the structure of an editor plugin, including its name, version, and initialization function. | | [ExportOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/exportoptions/) | Specifies options for exporting design blocks to various formats. | | [HeadingOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/headingoptions/) | Represents options for a heading. | | [InputOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | Represents options for an input. | | [LibraryOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/libraryoptions/) | Represents options for a library. | | [MediaPreviewOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/mediapreviewoptions/) | Represents options for a media preview. | | [NavigationBarActionButton](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/navigationbaractionbutton/) | Base interface for action buttons in the navigation bar. Contains common properties shared across all action button types. | | [NavigationBarCustomActionButton](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/navigationbarcustomactionbutton/) | Interface representing a generic Action Button in the navigation bar component. Note: This component requires a key and has a required label, unlike other action buttons. | | [Notification](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/notification/) | Represents a notification configuration. | | [NumberInputOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/numberinputoptions/) | Represents options for a number input. | | [OrderComponent](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | Represents an order component. | | [OrderComponentWithChildren](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/) | Represents a custom dock component. | | [OrderContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Interface representing the context for ordering components. | | [RegisteredActions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/registeredactions/) | Represents a collection of action functions used throughout the application. Each property corresponds to a specific UI action or event that can be customized. | | [ReplaceAssetLibraryEntriesContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/replaceassetlibraryentriescontext/) | Provides context for replacing asset library entries, including selected blocks and default entry IDs. | | [SectionOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/sectionoptions/) | Represents options for a section. | | [SelectOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/selectoptions/) | Represents options for a select input. | | [SelectValue](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/selectvalue/) | Represents a value for a select input. | | [SliderOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/slideroptions/) | Represents options for a slider. | | [TextAreaOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textareaoptions/) | Represents options for a text area. | | [TextInputOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textinputoptions/) | Represents options for a text input. | | [TextOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textoptions/) | Represents options for text. | | [Translations](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations/) | Complete translation type that includes both built-in and custom translations. | | [UserInterface](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/userinterface/) | Specifies the configuration for the user interface of the Creative Editor SDK. | ## Namespaces[#](#namespaces) | Namespace | Description | | --- | --- | | [CESDKConfiguration](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/cesdkconfiguration/) | Namespace for `CESDKConfiguration` to include deprecated keys. This namespace includes deprecated keys that are part of the public API via the `CombinedConfiguration` type. These keys are used in the ConfigMigrations but are not used internally. | | [ConfigTypes](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/) | \- | | [ExperimentalBuilder](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/) | Namespace containing experimental features for the builder. These features are subject to change and may not be stable for production use. | | [ExperimentalUserInterfaceAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentaluserinterfaceapi/) | Provides experimental methods for controlling the UI of the Creative Editor SDK. | | [UserInterfaceElements](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/) | \- | ## Variables[#](#variables) | Variable | Description | | --- | --- | | [~LogLevel~](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/loglevel/) | Provides a set of predefined log levels for the Creative Editor SDK. | | [~MimeType~](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/mimetype/) | Represents the MIME types used in the editor. | --- [Source](https:/img.ly/docs/cesdk/angular/animation/types-4e5f41) # Supported Animation Types ## Animation Categories[#](#animation-categories) There are three different categories of animations: _In_, _Out_ and _Loop_ animations. ### In Animations[#](#in-animations) _In_ animations animate a block for a specified duration after the block first appears in the scene. For example, if a block has a time offset of 4s in the scene and it has an _In_ animation with a duration of 1s, then the appearance of the block will be animated between 4s and 5s with the _In_ animation. ### Out Animations[#](#out-animations) _Out_ animations animate a block for a specified duration before the block disappears from the scene. For example, if a block has a time offset of 4s in the scene and a duration of 5s and it has an _Out_ animation with a duration of 1s, then the appearance of the block will be animated between 8s and 9s with the _Out_ animation. ### Loop Animations[#](#loop-animations) _Loop_ animations animate a block for the total duration that the block is visible in the scene. _Loop_ animations also run simultaneously with _In_ and _Out_ animations, if those are present. ## Animation Presets[#](#animation-presets) We currently support the following _In_ and _Out_ animation presets: * `'//ly.img.ubq/animation/slide'` * `'//ly.img.ubq/animation/pan'` * `'//ly.img.ubq/animation/fade'` * `'//ly.img.ubq/animation/blur'` * `'//ly.img.ubq/animation/grow'` * `'//ly.img.ubq/animation/zoom'` * `'//ly.img.ubq/animation/pop'` * `'//ly.img.ubq/animation/wipe'` * `'//ly.img.ubq/animation/baseline'` * `'//ly.img.ubq/animation/crop_zoom'` * `'//ly.img.ubq/animation/spin'` * `'//ly.img.ubq/animation/ken_burns'` * `'//ly.img.ubq/animation/typewriter_text'` (text-only) * `'//ly.img.ubq/animation/block_swipe_text'` (text-only) * `'//ly.img.ubq/animation/merge_text'` (text-only) * `'//ly.img.ubq/animation/spread_text'` (text-only) and the following _Loop_ animation types: * `'//ly.img.ubq/animation/spin_loop'` * `'//ly.img.ubq/animation/fade_loop'` * `'//ly.img.ubq/animation/blur_loop'` * `'//ly.img.ubq/animation/pulsating_loop'` * `'//ly.img.ubq/animation/breathing_loop'` * `'//ly.img.ubq/animation/jump_loop'` * `'//ly.img.ubq/animation/squeeze_loop'` * `'//ly.img.ubq/animation/sway_loop'` ## Animation Type Properties[#](#animation-type-properties) ## Baseline Type[#](#baseline-type) A text animation that slides text in along its baseline. This section describes the properties available for the **Baseline Type** (`//ly.img.ubq/animation/baseline`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/baseline/direction` | `Enum` | `"Up"` | The direction of the wipe animation., Possible values: `"Up"`, `"Right"`, `"Down"`, `"Left"` | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | ## Block Swipe Text Type[#](#block-swipe-text-type) A text animation that reveals text with a colored block swiping across. This section describes the properties available for the **Block Swipe Text Type** (`//ly.img.ubq/animation/block_swipe_text`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/block_swipe_text/blockColor` | `Color` | `{"r":0,"g":0,"b":0,"a":1}` | The overlay block color. | | `animation/block_swipe_text/direction` | `Enum` | `"Right"` | The direction of the block swipe animation., Possible values: `"Up"`, `"Right"`, `"Down"`, `"Left"` | | `animation/block_swipe_text/useTextColor` | `Bool` | `true` | Whether the overlay block should use the text color. | | `playback/duration` | `Double` | `1.2` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | ## Blur Type[#](#blur-type) An animation that applies a blur effect over time. This section describes the properties available for the **Blur Type** (`//ly.img.ubq/animation/blur`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/blur/fade` | `Bool` | `true` | Whether an opacity fade animation should be applied during the blur animation. | | `animation/blur/intensity` | `Float` | `1` | The maximum intensity of the blur. | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | ## Blur Loop Type[#](#blur-loop-type) A looping animation that continuously applies a blur effect. This section describes the properties available for the **Blur Loop Type** (`//ly.img.ubq/animation/blur_loop`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/blur_loop/intensity` | `Float` | `1` | The maximum blur intensity of this effect. | | `playback/duration` | `Double` | `1.2` | The duration in seconds for which this block should be visible. | ## Breathing Loop Type[#](#breathing-loop-type) A looping animation with a slow, breathing-like scale effect. This section describes the properties available for the **Breathing Loop Type** (`//ly.img.ubq/animation/breathing_loop`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/breathing_loop/intensity` | `Float` | `0` | Controls the intensity of the scaling. A value of 0 results in a maximum scale of 1.25. A value of 1 results in a maximum scale of 2.5. | | `playback/duration` | `Double` | `1.2` | The duration in seconds for which this block should be visible. | ## Crop Zoom Type[#](#crop-zoom-type) An animation that zooms the content within the block’s frame. This section describes the properties available for the **Crop Zoom Type** (`//ly.img.ubq/animation/crop_zoom`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/crop_zoom/fade` | `Bool` | `true` | Whether an opacity fade animation should be applied during the crop zoom animation. | | `animation/crop_zoom/scale` | `Float` | `1.25` | The maximum crop scale value. | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `1.2` | The duration in seconds for which this block should be visible. | ## Fade Type[#](#fade-type) An animation that fades the block in or out. This section describes the properties available for the **Fade Type** (`//ly.img.ubq/animation/fade`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | ## Fade Loop Type[#](#fade-loop-type) A looping animation that continuously fades the block in and out. This section describes the properties available for the **Fade Loop Type** (`//ly.img.ubq/animation/fade_loop`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `playback/duration` | `Double` | `1.2` | The duration in seconds for which this block should be visible. | ## Grow Type[#](#grow-type) An animation that scales the block up from a point. This section describes the properties available for the **Grow Type** (`//ly.img.ubq/animation/grow`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/grow/direction` | `Enum` | `"All"` | Whether the grow animation should be applied to the width or height or both., Possible values: `"Horizontal"`, `"Vertical"`, `"All"` | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | ## Jump Loop Type[#](#jump-loop-type) A looping animation with a jumping motion. This section describes the properties available for the **Jump Loop Type** (`//ly.img.ubq/animation/jump_loop`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/jump_loop/direction` | `Enum` | `"Up"` | The direction of the jump animation., Possible values: `"Up"`, `"Right"`, `"Down"`, `"Left"` | | `animation/jump_loop/intensity` | `Float` | `0.5` | Controls how far the block should move as a percentage of its width or height. | | `playback/duration` | `Double` | `1.2` | The duration in seconds for which this block should be visible. | ## Ken Burns Type[#](#ken-burns-type) An animation that simulates the Ken Burns effect by panning and zooming on content. This section describes the properties available for the **Ken Burns Type** (`//ly.img.ubq/animation/ken_burns`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/ken_burns/direction` | `Enum` | `"Right"` | The direction of the pan travel., Possible values: `"Up"`, `"Right"`, `"Down"`, `"Left"` | | `animation/ken_burns/fade` | `Bool` | `false` | Whether an opacity fade animation should be applied during the animation. | | `animation/ken_burns/travelDistanceRatio` | `Float` | `1` | The movement distance relative to the length of the crop. | | `animation/ken_burns/zoomIntensity` | `Float` | `0.5` | The factor by which to zoom in or out. | | `animationEasing` | `Enum` | `"EaseOutQuint"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `2.4` | The duration in seconds for which this block should be visible. | ## Merge Text Type[#](#merge-text-type) A text animation where lines of text merge from opposite directions. This section describes the properties available for the **Merge Text Type** (`//ly.img.ubq/animation/merge_text`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/merge_text/direction` | `Enum` | `"Left"` | The in-animation direction of the first line of text., Possible values: `"Right"`, `"Left"` | | `animation/merge_text/intensity` | `Float` | `0.5` | The intensity of the pan. | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `1.2` | The duration in seconds for which this block should be visible. | ## Pan Type[#](#pan-type) An animation that pans the block across the view. This section describes the properties available for the **Pan Type** (`//ly.img.ubq/animation/pan`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/pan/direction` | `Float` | `0` | The movement direction of the animation in radians. | | `animation/pan/distance` | `Float` | `0.1` | The movement distance relative to the longer side of the page. | | `animation/pan/fade` | `Bool` | `true` | Whether an opacity fade animation should be applied during the pan animation. | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | ## Pop Type[#](#pop-type) An animation that quickly scales the block up and down. This section describes the properties available for the **Pop Type** (`//ly.img.ubq/animation/pop`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | ## Pulsating Loop Type[#](#pulsating-loop-type) A looping animation with a pulsating scale effect. This section describes the properties available for the **Pulsating Loop Type** (`//ly.img.ubq/animation/pulsating_loop`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/pulsating_loop/intensity` | `Float` | `0` | Controls the intensity of the pulsating effect. A value of 0 results in a maximum scale of 1.25. A value of 1 results in a maximum scale of 2.5. | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | ## Slide Type[#](#slide-type) An animation that slides the block into or out of view. This section describes the properties available for the **Slide Type** (`//ly.img.ubq/animation/slide`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/slide/direction` | `Float` | `0` | The movement direction angle of the slide animation in radians. | | `animation/slide/fade` | `Bool` | `false` | Whether an opacity fade animation should be applied during the slide animation. | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | ## Spin Type[#](#spin-type) An animation that rotates the block. This section describes the properties available for the **Spin Type** (`//ly.img.ubq/animation/spin`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/spin/direction` | `Enum` | `"Clockwise"` | The direction of the spin animation., Possible values: `"Clockwise"`, `"CounterClockwise"` | | `animation/spin/fade` | `Bool` | `true` | Whether an opacity fade animation should be applied during the pan animation. | | `animation/spin/intensity` | `Float` | `1` | How far the animation should spin the block. 1.0 is a full rotation (360°). | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | ## Spin Loop Type[#](#spin-loop-type) A looping animation that continuously rotates the block. This section describes the properties available for the **Spin Loop Type** (`//ly.img.ubq/animation/spin_loop`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/spin_loop/direction` | `Enum` | `"Clockwise"` | The direction of the spin animation., Possible values: `"Clockwise"`, `"CounterClockwise"` | | `playback/duration` | `Double` | `1.2` | The duration in seconds for which this block should be visible. | ## Spread Text Type[#](#spread-text-type) A text animation where letters spread apart or come together. This section describes the properties available for the **Spread Text Type** (`//ly.img.ubq/animation/spread_text`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/spread_text/fade` | `Bool` | `true` | Whether the text should fade in / out during the spread animation. | | `animation/spread_text/intensity` | `Float` | `0.5` | The intensity of the spread. | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | ## Squeeze Loop Type[#](#squeeze-loop-type) A looping animation with a squeezing effect. This section describes the properties available for the **Squeeze Loop Type** (`//ly.img.ubq/animation/squeeze_loop`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `playback/duration` | `Double` | `1.2` | The duration in seconds for which this block should be visible. | ## Sway Loop Type[#](#sway-loop-type) A looping animation with a swaying rotational motion. This section describes the properties available for the **Sway Loop Type** (`//ly.img.ubq/animation/sway_loop`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/sway_loop/intensity` | `Float` | `1` | The intensity of the animation. Defines the maximum sway angle between 15° and 45°. | | `playback/duration` | `Double` | `1.2` | The duration in seconds for which this block should be visible. | ## Typewriter Text Type[#](#typewriter-text-type) A text animation that reveals text as if it’s being typed. This section describes the properties available for the **Typewriter Text Type** (`//ly.img.ubq/animation/typewriter_text`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/typewriter_text/writingStyle` | `Enum` | `"Character"` | Whether the text should appear one character or one word at a time., Possible values: `"Character"`, `"Word"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | ## Wipe Type[#](#wipe-type) An animation that reveals or hides the block with a wipe transition. This section describes the properties available for the **Wipe Type** (`//ly.img.ubq/animation/wipe`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/wipe/direction` | `Enum` | `"Right"` | The direction of the wipe animation., Possible values: `"Up"`, `"Right"`, `"Down"`, `"Left"` | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | ## Zoom Type[#](#zoom-type) An animation that scales the entire block. This section describes the properties available for the **Zoom Type** (`//ly.img.ubq/animation/zoom`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `animation/zoom/fade` | `Bool` | `true` | Whether an opacity fade animation should be applied during the zoom animation. | | `animationEasing` | `Enum` | `"Linear"` | The easing function to apply to the animation., Possible values: `"Linear"`, `"EaseIn"`, `"EaseOut"`, `"EaseInOut"`, `"EaseInQuart"`, `"EaseOutQuart"`, `"EaseInOutQuart"`, `"EaseInQuint"`, `"EaseOutQuint"`, `"EaseInOutQuint"`, `"EaseInBack"`, `"EaseOutBack"`, `"EaseInOutBack"`, `"EaseInSpring"`, `"EaseOutSpring"`, `"EaseInOutSpring"` | | `playback/duration` | `Double` | `0.6` | The duration in seconds for which this block should be visible. | | `textAnimationOverlap` | `Float` | `0.35` | The overlap factor for text animations. | | `textAnimationWritingStyle` | `Enum` | `"Line"` | The writing style for text animations (e.g., by character, by word)., Possible values: `"Block"`, `"Line"`, `"Character"`, `"Word"` | --- [Source](https:/img.ly/docs/cesdk/angular/animation/create-15cf50) # Create Animations --- [Source](https:/img.ly/docs/cesdk/angular/animation/overview-6a2ef2) # Overview Animations in CreativeEditor SDK (CE.SDK) bring your designs to life by adding motion to images, text, and design elements. Whether you’re creating a dynamic social media post, a video ad, or an engaging product demo, animations help capture attention and communicate ideas more effectively. With CE.SDK, you can create and edit animations either through the built-in UI timeline or programmatically using the CreativeEngine API. Animated designs can be exported as MP4 videos, allowing you to deliver polished, motion-rich content entirely client-side. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Animation Capabilities in CE.SDK[#](#animation-capabilities-in-cesdk) CE.SDK enables animation across a variety of design elements, giving you the flexibility to animate: * **Images:** Animate image blocks with movements like fades, zooms, or rotations. * **Text:** Animate text layers to create effects such as typewriter reveals or slide-ins. * **Shapes and Graphics:** Add motion to vector shapes, icons, and graphic blocks to create visually rich layouts. You can animate key properties of these elements, including: * **Position:** Move elements across the canvas. * **Scale:** Zoom in or out dynamically. * **Rotation:** Spin or pivot elements over time. * **Opacity:** Fade elements in and out. ## Supported Animation Types[#](#supported-animation-types) CE.SDK provides a range of animation types designed for common motion effects. Core categories include: * **Fade:** Smooth transitions in or out using opacity changes. * **Slide:** Move elements into or out of the frame from any direction. * **Zoom:** Scale elements up or down to create dynamic emphasis. * **Rotate:** Apply rotational motion for spins or turns. These animations can be used as in, out or loop animations to create complex sequences. ## Timeline and Keyframes[#](#timeline-and-keyframes) Animations in CE.SDK are structured around a **timeline-based editing system**. Each scene has a timeline where elements are placed and animated relative to playback time. Animations can be created entirely through the UI’s timeline editor or managed programmatically by interacting with the CreativeEngine’s animation APIs, offering flexibility for different workflows. --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/ui-extensions/register-new-component-b04a04) # Register a New Component The CE.SDK web editor provides a set of built-in components that you can reference and render in a specific order. You can see a list of all available components in the respective documentation, including [Dock](angular/user-interface/customization/dock-cb916c/) , [Canvas Menu](angular/user-interface/customization/canvas-menu-0d2b5b/) , [Inspector Bar](angular/user-interface/customization/inspector-bar-8ca1cd/) , [Navigation Bar](angular/user-interface/customization/navigation-bar-4e5d39/) and [Canvas Bar](angular/user-interface/customization/canvas-632c8e/) . Additionally, you can write your own custom components, register them, and use them just like the built-in components. This allows you to extend the functionality of the CE.SDK web editor with custom logic and create a more personalized experience for your users. ## Registering a Custom Component[#](#registering-a-custom-component) The entry point for writing a custom component is the method `registerComponent`. For a given identifier, you add a function that will be called repeatedly to render this component. Several arguments are passed to this function that can be used to access the current state of the `engine` and render an UI with the help of the `builder`. ``` cesdk.ui.registerComponent( 'myCustomComponent', ({ builder: { Button }, engine }) => { const selectedIds = engine.block.findAllSelected(); if (selectedIds.length !== 1) return; Button('button-id', { label: 'My Button', onClick: () => { console.log('Button clicked'); }, }); },); ``` ### When is a Component Rendered?[#](#when-is-a-component-rendered) It is important concept to understand when a registered component re-renders after its initial rendering. The component assumes that all its state is stored in the `engine` or the local state. Whenever we detect a change that is relevant for this component it will re-render. ### Using the Engine[#](#using-the-engine) In the above example, we query for all selected blocks and based on the result we render a button or not. The engine detects the call to `findAllSelected` and now knows that if the selection changes, it needs to re-render this component. This works with all methods provided by the engine. ### Using Local State[#](#using-local-state) Besides the `engine`, the render function also receives a `state` argument to manage local state. This can be used to control input components or store state in general. When the state changes, the component will be re-rendered as well. The `state` argument is a function that is called with a unique ID for the state. Any subsequent call to the state within this registered component will return the same state. The second optional argument is the default value for this state. If the state has not been set yet, it will return this value. Without this argument, you’ll need to handle `undefined` values manually. The return value of the state call is an object with `value` and `setValue` properties, which can be used to get and set the state. Since these property names match those used by input components, the object can be directly spread into the component options. ``` cesdk.ui.registerComponent('counter', ({ builder, state }) => { const { value, setValue } = state('counter', 0); builder.Button('counter-button', { label: `${value} clicks`, onClick: () => { const pressed = value + 1; setValue(pressed); } });}); ``` ## Passing Data to a Custom Component[#](#passing-data-to-a-custom-component) If you add a component to an order, you can either pass a string representing the component or an object with the id and additional data. This data can be accessed in the component function with inside the `payload` property. ``` cesdk.ui.registerComponent( 'myDockEnry.dock', ({ builder: { Button }, engine, payload }) => { const { label } = payload; console.log('Label', label); },); cesdk.ui.setDockOrder([ { id: 'myDockEnry.dock', label: 'Custom Label', },]); ``` ## Using the Builder[#](#using-the-builder) The `builder` object passed to the render function provides a set of methods to create UI elements. Calling this method will add a builder component to the user interface. This includes buttons, dropdowns, text, etc. ### Available Builder components[#](#available-builder-components) Not every location supports every builder component yet. It will be extended over time. If you are unsure, you can always check the documentation of the respective component. | Builder Component | Description | Properties | Available For | | --- | --- | --- | --- | | `builder.Button` | A simple button to react on a user click. | **label**: The label inside the button. If it is a i18n key, it will be used for translation. **onClick**: Executed when the button is clicked. **variant**: The variant of the button. `regular` is the default variant, `plain` is a variant without any background or border. **color**: The color of the button. `accent` is the accent color to stand out, `danger` is a red color. **icon**: The icon of the button. **trailingIcon**: The trailing icon of the button. **isActive**: A boolean to indicate that the button is active. **isSelected**: A boolean to indicate that the button is selected. **isDisabled**: A boolean to indicate that the button is disabled. **isLoading**: A boolean to indicate that the button is in a loading state. **loadingProgress**: A number between 0 and 1 to indicate the progress of a loading button. **tooltip**: A tooltip displayed upon hover. If it is a i18n key, it will be used for translation. | [Dock](angular/user-interface/customization/dock-cb916c/) , [Canvas Menu](angular/user-interface/customization/canvas-menu-0d2b5b/) , [Inspector Bar](angular/user-interface/customization/inspector-bar-8ca1cd/) , [Navigation Bar](angular/user-interface/customization/navigation-bar-4e5d39/) and [Canvas Bar](angular/user-interface/customization/canvas-632c8e/) | | `builder.ButtonGroup` | Grouping of multiple buttons in a single segmented control. | **children**: A function executed to render grouped buttons. Only the Button and Dropdown builder components are allowed to be rendered inside this function. | [Dock](angular/user-interface/customization/dock-cb916c/) , [Canvas Menu](angular/user-interface/customization/canvas-menu-0d2b5b/) , [Inspector Bar](angular/user-interface/customization/inspector-bar-8ca1cd/) , [Navigation Bar](angular/user-interface/customization/navigation-bar-4e5d39/) and [Canvas Bar](angular/user-interface/customization/canvas-632c8e/) | | `builder.Dropdown` | A button that opens a dropdown with additional content when the user clicks on it. | The same properties as for `builder.Button`, but instead of `onClick` it provides: **children**: A function executed to render the content of the dropdown. Every builder component called in this children function, will be rendered in the dropdown | [Canvas Menu](angular/user-interface/customization/canvas-menu-0d2b5b/) , [Inspector Bar](angular/user-interface/customization/inspector-bar-8ca1cd/) and [Navigation Bar](angular/user-interface/customization/navigation-bar-4e5d39/) | | `builder.Heading` | Renders its content as heading to the navigation bar. | **content**: The content of the header as a string | [Navigation Bar](angular/user-interface/customization/navigation-bar-4e5d39/) | | `builder.Separator` | Adds a small space (invisible `
` element) in the canvas menu to help the visual separation of entries. Separators follow some special layouting rules: \- If 2 or more separators end up next to each other (e.g. due to other components not rendering), **only 1** separator will be rendered. \- Separators that end up being the first or last element in the canvas menu will **not** be rendered. \- Separators directly adjacent _to the top side_ of a spacer (see below) will **not** be rendered. | \- | [Dock](angular/user-interface/customization/dock-cb916c/) , [Canvas Menu](angular/user-interface/customization/canvas-menu-0d2b5b/) , [Inspector Bar](angular/user-interface/customization/inspector-bar-8ca1cd/) , [Navigation Bar](angular/user-interface/customization/navigation-bar-4e5d39/) and [Canvas Bar](angular/user-interface/customization/canvas-632c8e/) | | `builder.Component` | Renders a custom component that has been registered with `cesdk.ui.registerComponent`. | **componentId**: The id of the component to render. This must match the id used in the `cesdk.ui.registerComponent` call. **payload**: An object that is passed to the component function as the `payload` argument. This can be used to pass additional data to the component or override default behavior. | [Dock](angular/user-interface/customization/dock-cb916c/) , [Canvas Menu](angular/user-interface/customization/canvas-menu-0d2b5b/) , [Inspector Bar](angular/user-interface/customization/inspector-bar-8ca1cd/) , [Navigation Bar](angular/user-interface/customization/navigation-bar-4e5d39/) and [Canvas Bar](angular/user-interface/customization/canvas-632c8e/) | --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/ui-extensions/quick-actions-1e478d) # Quick Actions Custom quick actions are one-click editing functionalities, that either reuse existing functionalities or add new one and combine those into a simple workflow triggered by a user interactions as simple as a button click. There are multiple entry points where this quick action can be added. ## Quick Action: Background Removal[#](#quick-action-background-removal) The background removal plugin is a great example of a one-click quick action. It allows you to remove the background of an image with a single click. After adding the plugin, you won’t see any immediate change to the editor. You will need to define where to place this feature. ``` import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web'; [...] // Adding this plugin will automatically register user interface componentsawait cesdk.addPlugin(BackgroundRemovalPlugin()); // Prepend it to the canvas menu ...cesdk.ui.setCanvasMenuOrder([ 'ly.img.background-removal.canvasMenu' ...cesdk.ui.getCanvasMenuOrder(),]); // ... or the inspector barcesdk.ui.setInspectorBar([ 'ly.img.background-removal.inspectorBar' ...cesdk.ui.getInspectorBar(),]); ``` ## Quick Action: Vectorizer[#](#quick-action-vectorizer) For the vectorizer plugin, the process is exactly the same. Simply install and add the plugin, then use the component Ids to extend the user interface. ``` import VectorizerPlugin from '@imgly/plugin-vectorizer-web'; [...] // Adding this plugin will automatically register user interface componentsawait cesdk.addPlugin(VectorizerPlugin()); // Prepend it to the canvas menu ...cesdk.ui.setCanvasMenuOrder([ 'ly.img.vectorizer.canvasMenu' ...cesdk.ui.getCanvasMenuOrder(),]); // ... or the inspector barcesdk.ui.setInspectorBar([ 'ly.img.vectorizer.inspectorBar' ...cesdk.ui.getInspectorBar(),]); ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/ui-extensions/customize-behaviour-c09cb2) # Customize UI Behavior Control CE.SDK’s interface programmatically at runtime through event subscriptions, panel operations, notifications, and dynamic feature management. ![Customize UI Behavior](/docs/cesdk/_astro/browser.hero.DnSf8BPi_Z1A1GV8.webp) 8 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-ui-extensions-customize-behaviour-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-ui-extensions-customize-behaviour-browser) UI behavior customization enables responsive, context-aware editing experiences. You can listen for user interactions, manipulate UI state dynamically based on application logic, integrate CE.SDK with external workflows, and build custom behavior that responds to editing events. ``` import type { CreativeEngine, EditorPlugin, EditorPluginContext} from '@cesdk/cesdk-js';import type { BlockEvent } from '@cesdk/cesdk-js'; export default class CustomizeBehaviorExample implements EditorPlugin { name = 'CustomizeBehaviorExample'; version = '1.0.0'; async initialize({ cesdk, engine }: EditorPluginContext) { // Load a simple scene for demonstration await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v2/ly.img.template/templates/cesdk_postcard_1.scene' ); // Show welcome dialog first, then run demonstrations after user confirms this.demonstrateDialogs(cesdk, engine); } private demonstrateEventSubscription( engine: CreativeEngine, cesdk: any ): void { // Subscribe to all block events const unsubscribe = engine.event.subscribe([], (events: BlockEvent[]) => { events.forEach((event) => { // eslint-disable-next-line no-console console.log(`Block event: ${event.type} on block ${event.block}`); // Show notification when blocks are created if (event.type === 'Created') { cesdk.ui.showNotification({ message: `Block created: ${event.block}`, type: 'info', duration: 'short' }); } }); }); // Store unsubscribe function for cleanup (window as any).unsubscribeEvents = unsubscribe; } private demonstratePanelManagement(cesdk: any): void { // Check if inspector panel is open const isInspectorOpen = cesdk.ui.isPanelOpen('//ly.img.panel/inspector'); // eslint-disable-next-line no-console console.log('Inspector panel open:', isInspectorOpen); // Open panel conditionally if (!isInspectorOpen) { cesdk.ui.openPanel('//ly.img.panel/inspector'); } // Close panel after delay (for demonstration) setTimeout(() => { cesdk.ui.closePanel('//ly.img.panel/inspector'); // eslint-disable-next-line no-console console.log('Inspector panel closed'); }, 2000); // Find all available panels const allPanels = cesdk.ui.findAllPanels(); // eslint-disable-next-line no-console console.log('Available panels:', allPanels); } private demonstrateNotifications(cesdk: any): void { // Show simple notification const notificationId = cesdk.ui.showNotification('Welcome to CE.SDK!'); // eslint-disable-next-line no-console console.log('Notification ID:', notificationId); // Show notification with configuration setTimeout(() => { cesdk.ui.showNotification({ message: 'This is a success message', type: 'success', duration: 'medium' }); }, 1000); // Show error notification setTimeout(() => { cesdk.ui.showNotification({ message: 'This is an error notification', type: 'error', duration: 'long' }); }, 2000); } private demonstrateDialogs(cesdk: any, engine: CreativeEngine): void { // Show welcome dialog immediately cesdk.ui.showDialog({ type: 'info', content: { title: 'Welcome to CE.SDK UI Behavior Customization', message: "This example demonstrates how to programmatically control CE.SDK's interface through event subscriptions, panel management, notifications, dialogs, custom actions, and theme controls. Click 'Confirm' to start the demonstration." }, actions: [ { label: 'Cancel', onClick: (context) => { // eslint-disable-next-line no-console console.log('User cancelled demonstration'); cesdk.ui.closeDialog(context.id); } }, { label: 'Confirm', onClick: (context) => { // eslint-disable-next-line no-console console.log('User confirmed - starting demonstrations'); cesdk.ui.closeDialog(context.id); // Run all demonstrations after user confirms this.demonstrateEventSubscription(engine, cesdk); this.demonstratePanelManagement(cesdk); this.demonstrateNotifications(cesdk); this.demonstrateCustomActions(cesdk); this.demonstrateThemeControl(cesdk); this.demonstrateFeatureManagement(cesdk); } } ] }); } private demonstrateCustomActions(cesdk: any): void { // Register a custom download action cesdk.actions.register( 'downloadFile', async (blob: Blob, mimeType: string) => { // eslint-disable-next-line no-console console.log('Custom download action called:', { blob, mimeType }); // Custom download logic const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `export.${mimeType.split('/')[1]}`; link.click(); URL.revokeObjectURL(url); cesdk.ui.showNotification({ message: 'File downloaded successfully!', type: 'success' }); } ); // List all registered actions const actions = cesdk.actions.list(); // eslint-disable-next-line no-console console.log('Registered actions:', actions); // Check if specific action exists const downloadAction = cesdk.actions.get('downloadFile'); // eslint-disable-next-line no-console console.log('Download action registered:', !!downloadAction); } private demonstrateThemeControl(cesdk: any): void { // Get current theme const currentTheme = cesdk.ui.getTheme(); // eslint-disable-next-line no-console console.log('Current theme:', currentTheme); // Toggle theme after delay setTimeout(() => { const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; cesdk.ui.setTheme(newTheme); // eslint-disable-next-line no-console console.log('Theme changed to:', newTheme); cesdk.ui.showNotification({ message: `Theme switched to ${newTheme} mode`, type: 'info' }); }, 5000); // Get current scale const currentScale = cesdk.ui.getScale(); // eslint-disable-next-line no-console console.log('Current scale:', currentScale); } private demonstrateFeatureManagement(cesdk: any): void { // Check if feature is enabled const isUndoEnabled = cesdk.feature.isEnabled('ly.img.undo'); // eslint-disable-next-line no-console console.log('Undo feature enabled:', isUndoEnabled); // Disable feature conditionally setTimeout(() => { // Example: Disable undo for demonstration // cesdk.feature.disable('ly.img.undo'); // eslint-disable-next-line no-console console.log('Feature management demonstrated (undo not disabled)'); }, 6000); // List features matching pattern const allFeatures = cesdk.feature.list({ matcher: 'ly.img.*' }); // eslint-disable-next-line no-console console.log('Available features:', allFeatures.slice(0, 10)); } async demonstrateExternalIntegration( engine: CreativeEngine, cesdk: any ): Promise { // Example: Integrate with external state management const externalState = { selectedBlockCount: 0, lastEventType: '' }; // Subscribe to events and update external state engine.event.subscribe([], (events: BlockEvent[]) => { events.forEach((event) => { externalState.lastEventType = event.type; // eslint-disable-next-line no-console console.log('External state updated:', externalState); }); }); // Listen for external changes and update UI // In a real app, this would connect to Redux, MobX, etc. setInterval(() => { const selectedBlocks = engine.block.findAllSelected(); if (selectedBlocks.length !== externalState.selectedBlockCount) { externalState.selectedBlockCount = selectedBlocks.length; // eslint-disable-next-line no-console console.log('Selection changed:', externalState.selectedBlockCount); // Show panel when blocks are selected if (selectedBlocks.length > 0) { cesdk.ui.openPanel('//ly.img.panel/inspector'); } } }, 1000); } private demonstrateContextAwareWorkflow( engine: CreativeEngine, cesdk: any ): void { // Create context-aware workflow engine.event.subscribe([], (events: BlockEvent[]) => { events.forEach((event) => { if (event.type === 'Created') { // Show notification for new blocks cesdk.ui.showNotification({ message: 'New block created - Opening inspector', type: 'info' }); // Open inspector panel cesdk.ui.openPanel('//ly.img.panel/inspector'); } if (event.type === 'Destroyed') { // Check if any blocks remain const allBlocks = engine.block.findAll(); if (allBlocks.length === 0) { cesdk.ui.showNotification({ message: 'All blocks removed', type: 'info' }); } } }); }); }} ``` This guide demonstrates the core behavior customization APIs: notifications and dialogs for user feedback, custom action registration, dynamic theme and scale control, feature management, and external state integration. For detailed event handling and panel management, see the dedicated guides linked in each section. ## Listening to Editing Events[#](#listening-to-editing-events) Subscribe to block events to react to changes in your scene. The event system delivers batched updates for Created, Updated, and Destroyed events. ``` const unsubscribe = engine.event.subscribe([], (events: BlockEvent[]) => { events.forEach((event) => { if (event.type === 'Created') { cesdk.ui.showNotification({ message: 'Block created', type: 'info' }); } });}); ``` For comprehensive event handling patterns including selection tracking and state synchronization, see the [Event Subscriptions guide](/user-interface/ui-extensions/event-subscriptions). ## Programmatic Panel Management[#](#programmatic-panel-management) Control panel visibility dynamically using the UI API. Open, close, and query panel state to adapt your interface to user actions. ``` if (!cesdk.ui.isPanelOpen('//ly.img.panel/inspector')) { cesdk.ui.openPanel('//ly.img.panel/inspector');} ``` For complete panel management including custom panel registration and advanced patterns, see the [Custom Panels guide](/user-interface/ui-extensions/custom-panels). ## Showing Notifications and Dialogs[#](#showing-notifications-and-dialogs) ### Displaying Notifications[#](#displaying-notifications) Show temporary feedback using `cesdk.ui.showNotification()`. Configure the notification’s message, type (`info`, `success`, `error`), and duration (`short`, `medium`, `long`). ``` cesdk.ui.showNotification({ message: 'Operation completed successfully', type: 'success', duration: 'medium'}); ``` ### Creating Confirmation Dialogs[#](#creating-confirmation-dialogs) Present user decisions with `cesdk.ui.showDialog()`. Define `onClick` handlers for action buttons that receive a `context` parameter containing the dialog ID. ``` cesdk.ui.showDialog({ type: 'info', content: { title: 'Confirm Action', message: 'Are you sure you want to proceed?' }, actions: [ { label: 'Cancel', onClick: (context) => cesdk.ui.closeDialog(context.id) }, { label: 'Confirm', onClick: (context) => { cesdk.ui.closeDialog(context.id); // Your action logic here } } ]}); ``` ## Registering Custom Actions[#](#registering-custom-actions) Register custom action handlers to intercept UI events like export, load, and download. The editor calls your action when users trigger the corresponding UI event. ``` cesdk.actions.register('downloadFile', async (blob: Blob, mimeType: string) => { const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `export.${mimeType.split('/')[1]}`; link.click(); URL.revokeObjectURL(url);}); ``` ## Dynamic Theme and Scale Control[#](#dynamic-theme-and-scale-control) Control the editor’s theme and UI scale at runtime. Set theme to `'light'`, `'dark'`, or `'system'`, and scale to `'normal'` or `'large'`. ``` // Toggle themeconst currentTheme = cesdk.ui.getTheme();cesdk.ui.setTheme(currentTheme === 'dark' ? 'light' : 'dark'); // Set scalecesdk.ui.setScale('large'); ``` ## Feature Management at Runtime[#](#feature-management-at-runtime) Control feature availability based on user permissions or application state. Enable, disable, and query features dynamically. ``` // Check and toggle featuresif (cesdk.feature.isEnabled('ly.img.undo')) { cesdk.feature.disable('ly.img.undo');} else { cesdk.feature.enable('ly.img.undo');} // List available featuresconst features = cesdk.feature.list({ matcher: 'ly.img.*' }); ``` ## Integrating with External State[#](#integrating-with-external-state) Connect CE.SDK events to Redux, MobX, or other state systems for bidirectional synchronization. ``` // Subscribe to CE.SDK events and update external stateengine.event.subscribe([], (events: BlockEvent[]) => { events.forEach((event) => { // Dispatch to your state management system dispatch({ type: 'CESDK_EVENT', payload: event }); });}); // Listen to external state changes and update CE.SDK UIstore.subscribe(() => { const state = store.getState(); if (state.shouldShowInspector) { cesdk.ui.openPanel('//ly.img.panel/inspector'); }}); ``` ## Troubleshooting[#](#troubleshooting) ### Event Subscriptions Not Firing[#](#event-subscriptions-not-firing) Verify the engine is initialized and blocks exist before subscribing. Event subscriptions only fire for changes after subscription - you won’t receive events for existing state. Check that your callback function executes without errors, as exceptions are logged but don’t prevent future events. ### Panel Operations Failing[#](#panel-operations-failing) Check panel ID spelling and registration status. Panel IDs are case-sensitive and must match exactly. Verify the panel is registered before attempting to open it. Custom panels must be registered through plugins before they become available for panel operations. ### Actions Not Executing[#](#actions-not-executing) Ensure the action is registered before calling `cesdk.actions.run()`. The method throws an error if the action doesn’t exist. Register actions during plugin initialization or before they’re needed. Check that action names match exactly when registering and executing. ### Memory Leaks from Event Subscriptions[#](#memory-leaks-from-event-subscriptions) Always call the unsubscribe cleanup function when you no longer need event listeners. Store the return value from `engine.event.subscribe()` and call it when your component unmounts or the feature is disabled. Failing to unsubscribe causes memory leaks and unnecessary callback executions. ### UI Not Updating After State Changes[#](#ui-not-updating-after-state-changes) Verify event handlers execute without errors. Check the browser console for exceptions thrown in callbacks. Ensure your UI update logic runs after async operations complete. Theme and feature changes apply immediately, so check that you’re querying the correct state after modifications. ### Theme or Scale Changes Not Applying[#](#theme-or-scale-changes-not-applying) Check if function-based configs are evaluated correctly. For theme functions, ensure they return valid values (`'light'` or `'dark'`). For scale functions, verify the container width calculation is correct. Function-based configs re-evaluate on each access, so ensure your logic accounts for this behavior. ## API Reference[#](#api-reference) | Method | Purpose | | --- | --- | | `engine.event.subscribe()` | Subscribe to block lifecycle events | | `cesdk.ui.openPanel()` | Open a specific panel programmatically | | `cesdk.ui.closePanel()` | Close a panel by ID or pattern | | `cesdk.ui.isPanelOpen()` | Check if panel is currently open | | `cesdk.ui.findAllPanels()` | Find all available panels with filtering | | `cesdk.ui.showNotification()` | Display temporary notification message | | `cesdk.ui.showDialog()` | Show confirmation or custom dialog | | `cesdk.ui.closeDialog()` | Close dialog by ID | | `cesdk.actions.register()` | Register custom action handler | | `cesdk.actions.get()` | Retrieve registered action function | | `cesdk.actions.run()` | Execute registered action | | `cesdk.actions.list()` | List all registered action IDs | | `cesdk.ui.setTheme()` | Change editor theme at runtime | | `cesdk.ui.getTheme()` | Get current resolved theme | | `cesdk.ui.setScale()` | Control UI density and sizing | | `cesdk.ui.getScale()` | Get current resolved scale | | `cesdk.feature.enable()` | Enable feature dynamically | | `cesdk.feature.disable()` | Disable feature dynamically | | `cesdk.feature.isEnabled()` | Check if feature is enabled | | `cesdk.feature.list()` | List features matching pattern | --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/ui-extensions/notifications-and-dialogs-fec36a) # Notifications and Dialogs The CE.SDK editor brings notification and dialog APIs designed to deliver information to the user. Notifications convey non-intrusive information without disrupting the user’s current workflow. Dialogs are used to convey important information, warnings, or to request user input. They provide a range of customization options to fit your specific needs. ## Notifications[#](#notifications) The CE.SDK editor notification API delivers messages appearing in the lower right corner of the user interface. * `cesdk.ui.showNotification(notification: string | Notification): string` displays a new notification to the user, accepting either a simple string message or a more complex notification object that allows for additional configuration options (detailed below). It returns an id of the notification. * `cesdk.ui.updateNotification(notificationId: string, notification: Notification): updates a notification given by the id. All configuration options can be changed. If the` notificationId\` doesn’t exist or the notification has already been dismissed, this action will have no effect. * `cesdk.ui.dismissNotification(notificationId: string)` removes a notification identified by the provided notification `notificationId`. If the `notificationId` doesn’t exist or the notification has already been dismissed, this action will have no effect. ### Notification Options[#](#notification-options) All options apart from `message` are optional | Option | Description | | --- | --- | | `message` | The message displayed on the notification. This can either be a string or an internationalization (i18n) key from the CE.SDK translations, allowing for localized messages. | | `type` | Notifications can be displayed in various styles, each differing in appearance to convey the appropriate context to the user. The available types include `info` (which is the default setting), `warning`, `error`, `success`, and `loading` (which displays a loading spinner). | | `duration` | Notifications typically disappear after a set period, but the duration can vary based on the message’s importance. Less critical updates may vanish swiftly, whereas warnings or significant alerts stay open for a longer time. You can specify this duration using either a numerical value representing milliseconds or predefined strings from CE.SDK, such as `short`, `medium` (which is the default setting), or `long`, each corresponding to different default durations. For notifications that should remain visible indefinitely, the `infinite` value can be used to prevent automatic dismissal. | | `onDismiss` | A callback function that is triggered upon the dismissal of the notification, whether it’s done automatically, programmatically, or manually by the user. | | `action: { label: "Retry", onClick: () => void }` | Adds a single action button within the notification for user interaction. | ### Example Code[#](#example-code) ``` CreativeEditorSDK.create('#cesdk', config).then(async (cesdk) => { await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ withUploadAssetSources: true }); await cesdk.createDesignScene(); cesdk.ui.showNotification("Welcome to our editor!"); const notificationId = cesdk.ui.showNotification({ type: 'loading', message: 'Loading data...', duration: 'infinite' }); setTimeout(() => { cesdk.ui.updateNotification(notificationId, { type: 'success', message: "Data loaded", duration: 'short' }); }, 5000); ``` ## Dialogs[#](#dialogs) The dialog API provides methods to show, update, and close dialogs. Dialogs can be updated on the fly to reflect changes in the underlying data or to provide feedback to the user. * `cesdk.ui.showDialog(dialog: string | Dialog): string` displays a new dialog to the user, accepting either a simple string message or a more complex dialog object that allows for additional configuration options (detailed below). It returns an id of the dialog. * `cesdk.ui.updateDialog(dialogId: string, dialog: Dialog)` updates a dialog given by the id. All configuration options can be changed. If the `dialogId` doesn’t exist or the dialog has already been dismissed, this action will have no effect. * `cesdk.ui.closeDialog(dialogId: string)` removes a dialog identified by the provided dialog `dialogId`. If the `dialogId` doesn’t exist or the dialog has already been dismissed, this action will have no effect. ### Dialog Options[#](#dialog-options) All options apart from `content` are optional. All strings can be internationalization (i18n) keys from the CE.SDK translations, allowing for localized messages. | Option | Description | | --- | --- | | `type` | The type of dialog to display. The available types include `regular`, `success`, `error`, `info`, `warning`, and `loading`. The default type is `regular`. | | `size` | The size of the dialog. The available sizes include `regular` and `large`. The default size is `regular`. | | `content` | The content of the dialog. This can either be a `string` or an object with a `title` and `message` property. The `title` is optional. The `message` can be a string or an array of strings. | | `progress` | The progress of the dialog. This can be a `number`, `indeterminate`, or an object with a `value` and `max` property. | | `actions` | An array of action objects. Each action object must have a `label` and an `onClick` function. The `variant` and `color` properties are optional. The `variant` can be `regular` or `plain`. The `color` can be `accent` or `danger`. To remove all actions, you can provide an empty array `actions: []` | | `cancel` | An action object that represents the cancel action. The structure is the same as for the `actions` property. | | `onClose` | A callback function that is triggered when the dialog is closed. This can be used to perform cleanup operations or to trigger additional actions. | | `clickOutsideToClose` | A boolean value that determines whether the dialog can be closed by clicking outside of it. The default value is `true`. | ### Code[#](#code) ``` CreativeEditorSDK.create('#cesdk', config).then(async cesdk => { await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ withUploadAssetSources: true }); await cesdk.createDesignScene(); // Use the dialog API to show a simple dialog const simpleDialogId = cesdk.ui.showDialog( 'This is a simple information Dialog', ); // Use the API to close the dialog cesdk.ui.closeDialog(simpleDialogId); // Show a warning dialog cesdk.ui.showDialog({ type: 'warning', content: { title: 'warning', message: 'This is a warning dialog', }, actions: [ { label: 'OK', onClick: context => cesdk.ui.closeDialog(context.id) }, ], cancel: { label: 'Cancel', onClick: context => cesdk.ui.closeDialog(context.id), }, onClose: () => console.log('Warning dialog closed'), }); // Show a simple loading dialog cesdk.ui.showDialog({ type: 'loading', content: 'loading...', progress: 'indeterminate', cancel: { label: 'Cancel', onClick: context => cesdk.ui.closeDialog(context.id), }, }); // Show a large loading dialog with a progress value const largeProgressDialogId = cesdk.ui.showDialog({ type: 'loading', content: { title: 'Loading', message: 'Loading data...', }, progress: 0, cancel: { label: 'Cancel', onClick: context => cesdk.ui.closeDialog(context.id), }, }); // Update the progress value of the large loading dialog cesdk.ui.updateDialog(largeProgressDialogId, { progress: 50, });}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/ui-extensions/create-custom-panel-d87b83) # Create a Custom Panel Similar to registering [custom components](angular/user-interface/ui-extensions/register-new-component-b04a04/) , the CE.SDK web editor allows you to render custom panels. Built-in UI elements ensure that your custom panel blends seamlessly with the editor’s look and feel, while still enabling you to adapt the editor to your unique workflows. ``` registerPanel(panelId: string, renderFunction: ({ builder, engine, state }) => void) ``` Registers a panel whose content can be rendered with a panel builder, similar to how custom components are registered. The builder’s render function is called with three arguments: the builder, the engine, and the state. The builder object is used to define which base components (such as buttons) should be rendered. The engine is used to retrieve any state from the engine. The render function will be called again if any engine-related state changes occur due to engine calls or the local state was updated. * `panelId`: The unique ID of the new registered panel. * `renderFunction`: The render function of the panel. ## When is a Panel Rendered?[#](#when-is-a-panel-rendered) It is important concept to understand when a panel re-renders after its initial rendering. The component assumes that all its state is stored in the `engine` or the local state. Whenever we detect a change that is relevant for this panel it will re-render. ### Using the Engine[#](#using-the-engine) Inside the render function, any calls that retrieve values from the engine will be tracked. If a change is detected, the render function will be automatically re-called. For example, in a panel, we could query for all selected blocks and decide whether to render a button based on the result. The engine detects the call to findAllSelected and knows that if the selection changes, it needs to re-render the panel. This behavior applies to all methods provided by the engine. ### Using Local State[#](#using-local-state) Besides the `engine`, the render function also receives a `state` argument to manage local state. This can be used to control input components or store state in general. When the state changes, the panel will be re-rendered as well. The `state` argument is a function that is called with a unique ID for the state. Any subsequent call to the state within this panel will return the same state. The second optional argument is the default value for this state. If the state has not been set yet, it will return this value. Without this argument, you’ll need to handle `undefined` values manually. The return value of the state call is an object with `value` and `setValue` properties, which can be used to get and set the state. Since these property names match those used by input components, the object can be directly spread into the component options. ``` cesdk.ui.registerPanel('counter', ({ builder, state }) => { const urlState = state('url', ''); const { value, setValue } = state('counter', 0); builder.Section('counter', { children: () => { builder.TextInput('text-input-1', { inputLabel: 'TextInput 1', ...urlState }); builder.Button('submit-button', { label: 'Submit', onClick: () => { const pressed = value + 1; setValue(pressed); console.log( `Pressed ${pressed} times with the current URL ${urlState.value}` ); } }); } });}); ``` ## Integrate the Panel into the Editor[#](#integrate-the-panel-into-the-editor) After registering a component, it is not automatically opened or integrated in any other way. The CE.SDK editor is just aware that there is a panel with this id. ### Opening a Panel[#](#opening-a-panel) Once a panel is registered, it can be controlled using the [Panel API](angular/user-interface/customization/panel-7ce1ee/) , just like any other panel. For instance, you can open a custom panel with `cesdk.ui.openPanel(registeredPanelId)`. Other settings, such as position and floating, can also be adjusted accordingly. The payload passed by `openPanel` is also accessible within the panel’s render function. In most cases, you will want to open it using a custom button, .e.g in a button inside the [Dock](angular/user-interface/customization/dock-cb916c/) or [Inspector Bar](angular/user-interface/customization/inspector-bar-8ca1cd/) . ### Setting the Title of a Custom Panel[#](#setting-the-title-of-a-custom-panel) The title of a panel is determined by a translation based on the panel’s ID. For example, if the panel ID is `myCustomPanel`, the corresponding translation key would be `panel.myCustomPanel`. ``` cesdk.i18n.setTranslations({ en: { 'panel.myCustomPanel': 'My Custom Panel', }, de: { 'panel.myCustomPanel': 'Mein eigenes Panel', }}); ``` ## Using the Builder[#](#using-the-builder) The `builder` object passed to the render function provides a set of methods to create UI elements. Calling this method will add a builder component to the user interface. This includes buttons, dropdowns, text, etc. ## Builder Components[#](#builder-components) The following builder components can be used inside a registered panel. ### Button[#](#button) A simple button to react on a user click. | Property | Description | | --- | --- | | `label` | The label inside the button. If it is a i18n key, it will be used for translation. | | `labelAlignment` | How the label inside the button is aligned. Either `left` or `center`. | | `inputLabel` | An optional label next to/above the button. If it is a i18n key, it will be used for translation. | | `inputLabelPosition` | Input label position relative to the button - either `'top'` or `'left'`. | | `tooltip` | A tooltip displayed upon hover. If it is a i18n key, it will be used for translation. | | `onClick` | Executed when the button is clicked. | | `variant` | The variant of the button. `regular` is the default variant, `plain` is a variant without any background or border. | | `color` | The color of the button. `accent` is the accent color to stand out, `danger` is a red color. | | `icon` | The icon of the button. See [Icon API](angular/user-interface/appearance/icons-679e32/) for more information about how to add new icons. | | `trailingIcon` | The trailing icon of the button. See [Icon API](angular/user-interface/appearance/icons-679e32/) for more information about how to add new icons. | | `size` | The size of the button. Either `'normal'` or `'large'`. | | `isActive` | A boolean to indicate that the button is active. | | `isSelected` | A boolean to indicate that the button is selected. | | `isDisabled` | A boolean to indicate that the button is disabled. | | `isLoading` | A boolean to indicate that the button is in a loading state. | | `loadingProgress` | A number between 0 and 1 to indicate the progress of a loading button. | | `suffix` | An object with properties similar to those of a Button. When provided, it will render a button without a label on the right side of the component. If the object includes only an icon (with a tooltip), only the icon will be displayed. An empty object will render as an empty space, which can be useful for aligning multiple components. | ### ButtonGroup[#](#buttongroup) Grouping of multiple buttons in a single segmented control. | Property | Description | | --- | --- | | `inputLabel` | An optional label next to/above the button group. If it is a i18n key, it will be used for translation. | | `inputLabelPosition` | Input label position relative to the button group - either `'top'` or `'left'`. | | `children` | A function executed to render grouped buttons. Only the `Button`, `Dropdown` and `Select` builder components are allowed to be rendered inside this function. | | `suffix` | An object with properties similar to those of a Button. When provided, it will render a button without a label on the right side of the component. If the object includes only an icon (with a tooltip), only the icon will be displayed. An empty object will render as an empty space, which can be useful for aligning multiple components. | ### Checkbox[#](#checkbox) A labeled checkbox. | Property | Description | | --- | --- | | `inputLabel` | An optional label next to the checkbox. If it is a i18n key, it will be used for translation. | | `inputLabelPosition` | Input label position relative to the checkbox - either `'left'` (default) or `'right'`. | | `icon` | The icon of the checkbox. See [Icon API](angular/user-interface/appearance/icons-679e32/) for more information about how to add new icons. | | `isDisabled` | A boolean to indicate that the checkbox is disabled. | ### ColorInput[#](#colorinput) A big color swatch that opens a color picker when clicked. | Property | Description | | --- | --- | | `inputLabel` | An optional label next to the color input. If it is a i18n key, it will be used for translation. | | `inputLabelPosition` | Input label position relative to the color input - either `'left'` (default) or `'top'`. | | `icon` | The icon of the checkbox. See [Icon API](angular/user-interface/appearance/icons-679e32/) for more information about how to add new icons. | | `isDisabled` | A boolean to indicate that the color input is disabled. | | `value` | The color value that the input is showing. | | `setValue` | A callback that receives the new color value when the user picks one. | | `suffix` | An object with properties similar to those of a Button. When provided, it will render a button without a label on the right side of the component. If the object includes only an icon (with a tooltip), only the icon will be displayed. An empty object will render as an empty space, which can be useful for aligning multiple components. | ### Dropdown[#](#dropdown) A button that opens a dropdown with additional content when the user clicks on it. | Property | Description | | --- | --- | | `label` | The label inside the button. If it is a i18n key, it will be used for translation. | | `tooltip` | A tooltip displayed upon hover. If it is a i18n key, it will be used for translation. | | `variant` | The variant of the button. `regular` is the default variant, `plain` is a variant without any background or border. | | `color` | The color of the button. `accent` is the accent color to stand out, `danger` is a red color. | | `icon` | The icon of the button. See [Icon API](angular/user-interface/appearance/icons-679e32/) for more information about how to add new icons. | | `isActive` | A boolean to indicate that the button is active. | | `isSelected` | A boolean to indicate that the button is selected. | | `isDisabled` | A boolean to indicate that the button is disabled. | | `isLoading` | A boolean to indicate that the button is in a loading state. | | `loadingProgress` | A number between 0 and 1 to indicate the progress of a loading button. | | `children` | A function executed to render the content of the dropdown. Every builder component called in this children function, will be rendered in the dropdown. | | `suffix` | An object with properties similar to those of a Button. When provided, it will render a button without a label on the right side of the component. If the object includes only an icon (with a tooltip), only the icon will be displayed. An empty object will render as an empty space, which can be useful for aligning multiple components. | ### Heading[#](#heading) Renders its content as heading to the panel. | Property | Description | | --- | --- | | `content` | The content of the header as a string. | ### Library[#](#library) A complete asset library with a search option. | Property | Description | | --- | --- | | `entries` | An array of Asset Library entry IDs that determines which assets are shown in which way. See [Asset Library Entry](angular/import-media/asset-panel/basics-f29078/) for reference. | | `onSelect` | A callback receiving the selected asset when the user picks one. | | `searchable` | When set, makes the Library searchable. | ### MediaPreview[#](#mediapreview) A large preview area showing an image or color. Optionally contains a button in the bottom right corner, offering contextual action. | Property | Description | | --- | --- | | `size` | Size of the preview, either `'small'` or `'medium'` (default). | | `preview` | Determines the kind of preview. Can be either an image, or a color. Use an object with the following shape: `{ type: 'image', uri: string }` or `{ type: 'color', color: string }` | | `action` | Button option object that is passed along to the overlayed button. See [Button](angular/user-interface/ui-extensions/create-custom-panel-d87b83/) for reference. | ### NumberInput[#](#numberinput) A number input field. | Property | Description | | --- | --- | | `inputLabel` | An optional label next to/above the number input. If it is a i18n key, it will be used for translation. | | `inputLabelPosition` | Input label position relative to the input - either `'top'` or `'left'`. | | `value` | The number contained in the input. | | `setValue` | A callback that receives the new number when it is changed by the user. | | `min` | Minimum value of the input. | | `max` | Maximum value of the input. | | `step` | Interval of changes when using the arrow keys to change the number. | | `suffix` | An object with properties similar to those of a Button. When provided, it will render a button without a label on the right side of the component. If the object includes only an icon (with a tooltip), only the icon will be displayed. An empty object will render as an empty space, which can be useful for aligning multiple components. | ### Select[#](#select) A dropdown to select one of multiple choices. | Property | Description | | --- | --- | | `inputLabel` | An optional label next to/above the control. If it is a i18n key, it will be used for translation. | | `inputLabelPosition` | Input label position relative to the control - either `'top'` or `'left'`. | | `tooltip` | A tooltip displayed upon hover. If it is a i18n key, it will be used for translation. | | `value` | The currently selected value. | | `setValue` | A callback that receives the new selection when it is changed by the user. | | `values` | The set of values from which the user can select. | | `isDisabled` | A boolean to indicate that the control is disabled. | | `isLoading` | A boolean to indicate that the control is in a loading state. | | `loadingProgress` | A number between 0 and 1 to indicate the progress of loading. | | `suffix` | An object with properties similar to those of a Button. When provided, it will render a button without a label on the right side of the component. If the object includes only an icon (with a tooltip), only the icon will be displayed. An empty object will render as an empty space, which can be useful for aligning multiple components. | ### Separator[#](#separator) Adds a separator (`
` element) in the panel to help the visual separation of entries. This builder component has no properties. ### Slider[#](#slider) A slider for intuitively adjusting a number. | Property | Description | | --- | --- | | `inputLabel` | An optional label next to/above the text field. If it is a i18n key, it will be used for translation. | | `inputLabelPosition` | Input label position relative to the input - either `'top'` or `'left'`. | | `value` | The text contained in the field. | | `setValue` | A callback that receives the new text when it is changed by the user. | | `min` | Minimum value of the slider. | | `max` | Maximum value of the slider. | | `step` | Interval of the slider movement. | | `centered` | Adds a snapping point in the middle of the slider. | | `suffix` | An object with properties similar to those of a Button. When provided, it will render a button without a label on the right side of the component. If the object includes only an icon (with a tooltip), only the icon will be displayed. An empty object will render as an empty space, which can be useful for aligning multiple components. | ### Text[#](#text) A piece of non-interactive text. | Property | Description | | --- | --- | | `content` | The content of the text as a string. | ### TextArea[#](#textarea) A large text field accepting user input. | Property | Description | | --- | --- | | `inputLabel` | An optional label above the text field. If it is a i18n key, it will be used for translation. | | `value` | The text contained in the field. | | `setValue` | A callback that receives the new text when it is changed by the user. | | `isDisabled` | A boolean to indicate that the text area is disabled. | | `placeholder` | Hint text shown when the field is empty. | | `suffix` | An object with properties similar to those of a Button. When provided, it will render a button without a label on the right side of the input label. Please note that the suffix is not rendered if there is no input label. If the object includes only an icon (with a tooltip), only the icon will be displayed. | ### TextInput[#](#textinput) A small text field accepting user input. | Property | Description | | --- | --- | | `inputLabel` | An optional label next to/above the text field. If it is a i18n key, it will be used for translation. | | `inputLabelPosition` | Input label position relative to the input - either `'top'` or `'left'`. | | `value` | The text contained in the field. | | `setValue` | A callback that receives the new text when it is changed by the user. | | `isDisabled` | A boolean to indicate that the text field is disabled. | | `suffix` | An object with properties similar to those of a Button. When provided, it will render a button without a label on the right side of the component. If the object includes only an icon (with a tooltip), only the icon will be displayed. An empty object will render as an empty space, which can be useful for aligning multiple components. | ### Component[#](#component) Renders a custom component that has been registered with `cesdk.ui.registerComponent`. | Property | Description | | --- | --- | | `componentId` | The id of the component to render. This must match the id used in the `cesdk.ui.registerComponent` call. | | `payload` | An object that is passed to the component function as the `payload` argument. This can be used to pass additional data to the component or override default behavior. | --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/ui-extensions/add-new-button-74884d) # Add a New Button Customization not only includes changing the existing behavior but also extends to adding new features tailored to your needs. This guide will show you how to add new buttons to different locations within the web editor. ## Adding a Document Button to the Dock[#](#adding-a-document-button-to-the-dock) In our default configuration of the web editor, we only show dock buttons that open asset libraries. In this example, we want to extend that functionality by adding a button that opens the document inspector. In the default view of the web editor, the inspector panel is not always visible. Additionally, the document inspector only appears if no block is selected. If your use case requires a simple user interface with just the inspector bar and an easy way for the customer to access the document inspector, we can now add a custom button to achieve this. First, we need to register a new component. This component will check if the document inspector is already open. To open it, we will deselect all blocks and use the [Panel API](angular/user-interface/customization/panel-7ce1ee/) to open the inspector panel. ``` cesdk.ui.registerComponent( 'document.dock', ({ builder: { Button }, engine }) => { const inspectorOpen = cesdk.ui.isPanelOpen('//ly.img.panel/inspector'); Button('open-document', { label: 'Document', // Using the open state to mark the button as selected isSelected: inspectorOpen, onClick: () => { // Deselect all blocks to enable the document inspector engine.block.findAllSelected().forEach(blockId => { engine.block.setSelected(blockId, false); }); if (inspectorOpen) { cesdk.ui.closePanel('//ly.img.panel/inspector'); } else { cesdk.ui.openPanel('//ly.img.panel/inspector'); } }, }); },); ``` That is all for the component for now. What is left to do is to add this component to the dock order. ``` cesdk.ui.setDockOrder([ ...cesdk.ui.getDockOrder(), // We add a spacer to push the document inspector button to the bottom 'ly.img.spacer', // The id of the component we registered earlier 'document.dock',]); ``` ## Add a Button to the Canvas Menu to Mark Blocks[#](#add-a-button-to-the-canvas-menu-to-mark-blocks) In our next example, we aim to establish a workflow where a designer can review a design and mark blocks that need to be reviewed by another designer. We will define a field in the metadata for this purpose and add a button to the canvas menu that toggles this marker. Once again, we start by registering a new component. ``` cesdk.ui.registerComponent( 'marker.canvasMenu', ({ builder: { Button }, engine }) => { const selectedBlockIds = engine.block.findAllSelected(); // Only show the button if exactly one block is selected if (selectedBlockIds.length !== 1) return; const selectedBlockId = selectedBlockIds[0]; // Check if the block is already marked const isMarked = engine.block.hasMetadata(selectedBlockId, 'marker'); Button('marker-button', { label: isMarked ? 'Unmark' : 'Mark', // Change the color if the block is marked to indicate the state color: isMarked ? 'accent' : undefined, onClick: () => { if (isMarked) { engine.block.removeMetadata(selectedBlockId, 'marker'); } else { // Metadata is a simple key-value store. We do not care about the // actual value but only if it was set. engine.block.setMetadata(selectedBlockId, 'marker', 'marked'); } }, }); },); ``` Now, instead of appending this button, we want to put it at the beginning as this needs to be a prominent feature. ``` cesdk.ui.setCanvasMenuOrder([ 'marker.canvasMenu', ...cesdk.ui.getCanvasMenuOrder(),]); ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/ui-extensions/add-custom-feature-2a26b6) # Add a Custom Feature Creating your own plugin can be useful for your integration if you want to bundle features together or even publish them for others to use. **Do I Need to Create a Plugin to Customize the Editor?** Short answer: No. Keep in mind that you neither have to create a plugin to customize the CE.SDK, nor do you have to publish it. Feel free to use all APIs directly after initializing the CE.SDK. This is completely fine. Even if you decide to bundle everything into a plugin, you can still keep it private and use it only for your own integration. ## Create a Plugin[#](#create-a-plugin) Plugins are added to the editor using the `addPlugin` method. This method takes a plugin object that needs to provide specific properties and methods. The most important method is `initialize`, which is called when the plugin is added to the editor. It will receive the current execution context as an argument. If the plugin is added only to the engine, the `cesdk` argument will be undefined. This allows you to write plugins that can be used for both the engine and the editor. You can pass this `MyPlugin` object directly to the `addPlugin` method. If you plan to publish your plugin in private or public repositories, this object is what should be exported. However, most plugins will need some kind of configuration. If you expose a plugin, it is a good convention to export a function that returns the plugin object and accepts a config object as an argument. Even if you don’t need any configuration yet, it is recommended to use this pattern to avoid breaking user code in the future once you introduce an optional configuration. ``` const MyPlugin = () => ({ name: 'MyPlugin', version: '1.0.0', initialize: ({ // This argument is only defined if the plugin is added to the editor. // If you call the `addPlugin` method on the engine, this argument will be undefined. cesdk, // The engine is always defined engine, }) => { // Your plugin code here },}); await cesdk.addPlugin(MyPlugin()); ``` ## Initialization of a Plugin[#](#initialization-of-a-plugin) What is supposed to be done in the `initialize` method of a plugin? There are no enforced rules, but some conventions are recommended, especially if you plan to publish your plugin in any way. Adding a plugin will call the `initialize` method of the plugin object directly. The purpose of this method is to register components, and features, or subscribe to events and changes of blocks. It is not supposed to immediately execute any action or make changes to the editor. This includes changing the order of any location, such as adding a new component to it. The integrator of the plugin needs to decide when to add which component and where. If the plugin wants to add a shortcut for that, the default locations can be optionally set via the plugin configuration. ``` const MyPlugin = ({ ui: { locations } }) => ({ name: 'MyPlugin', version: '1.0.0', initialize: ({ cesdk, engine }) => { // Register a new components cesdk.ui.registerComponent('myComponent.canvasMenu', [...]); cesdk.ui.registerComponent('myComponent.inspectorBar', [...]); // Register a new feature cesdk.feature.enable('myFeature', true); // Subscribe to events or similar // [...] if (locations.includes('canvasMenu') { cesdk.ui.setCanvasMenuOrder(['myComponent.canvasMenu', ...cesdk.ui.getCanvasMenuOrder()]); } if (locations.includes('inspectorBar') { cesdk.ui.setInspectorBarOrder(['myComponent.inspectorBar', ...cesdk.ui.getInspectorBarOrder()]); } }}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/appearance/icons-679e32) # Icons Using our API, you can register your own icon sets for usage within the CE.SDK editor. The API is as follows: ## Add new Icon Set[#](#add-new-icon-set) ``` cesdk.ui.addIconSet(id: string, svgSprite: string) ``` The icon set is a string containing a SVG sprite with symbols. The id of each symbol is used to reference the icon in the editor. These ids need to start with a `@` to be recognized in the editor. Please Note: The SVG sprite will be injected into the (shadow) DOM without any sanitization. Make sure to only use trusted sources to prevent e.g. XSS attacks. If you are unsure about the source of the sprite, consider using libraries like DOMPurify to sanitize the SVG string before adding it. ## Examples[#](#examples) ### Register an Icon Set[#](#register-an-icon-set) Registering an SVG string with a single symbol might look like this: ``` cesdk.ui.addIconSet( '@imgly/custom', ` `,); ``` ### Replace a Dock Icon[#](#replace-a-dock-icon) You could use your custom icon set to replace the “Image” icon of the default Dock: ``` cesdk.ui.setDockOrder( cesdk.ui.getDockOrder().map(entry => { if (entry.key === 'ly.img.image') return { ...entry, icon: '@some/icon/ZoomIn', // Note the ID referencing the SVG symbol }; else return entry; }),); ``` ### Use within a custom Component[#](#use-within-a-custom-component) Using your new symbol in a [custom component](angular/user-interface/ui-extensions/register-new-component-b04a04/) is then done by referencing the symbol ID directly: ``` cesdk.ui.registerComponent('CustomIcon', ({ builder: { Button } }) => { Button('customIcon', { label: 'Custom Icon', icon: '@some/icon/ZoomIn', // Note the ID referencing the SVG symbol onClick: () => { console.log('Custom Icon clicked'); }, });}); ``` ## Built-In Icons[#](#built-in-icons) These built-in icons can be referenced by their name string directly: ### Set ‘Essentials’[#](#set-essentials) | Name | Icon | | --- | --- | | `@imgly/Adjustments` | ![Adjustments Icon](/docs/cesdk/_astro/Adjustments.CMpGLfUm_68cTD.svg) | | `@imgly/Animation` | ![Animation Icon](/docs/cesdk/_astro/Animation.B2rhC3jX_68cTD.svg) | | `@imgly/Appearance` | ![Appearance Icon](/docs/cesdk/_astro/Appearance.DNDO2WuP_68cTD.svg) | | `@imgly/Apps` | ![Apps Icon](/docs/cesdk/_astro/Apps.DznTjKmh_68cTD.svg) | | `@imgly/ArrowDown` | ![ArrowDown Icon](/docs/cesdk/_astro/ArrowDown.DF55uy6X_68cTD.svg) | | `@imgly/ArrowLeft` | ![ArrowLeft Icon](/docs/cesdk/_astro/ArrowLeft.rNR_kJjE_68cTD.svg) | | `@imgly/ArrowRight` | ![ArrowRight Icon](/docs/cesdk/_astro/ArrowRight.9eua18dC_68cTD.svg) | | `@imgly/ArrowUp` | ![ArrowUp Icon](/docs/cesdk/_astro/ArrowUp.CVAHSy6F_68cTD.svg) | | `@imgly/ArrowsDirectionHorizontal` | ![ArrowsDirectionHorizontal Icon](/docs/cesdk/_astro/ArrowsDirectionHorizontal.B0bUSo3k_68cTD.svg) | | `@imgly/ArrowsDirectionVertical` | ![ArrowsDirectionVertical Icon](/docs/cesdk/_astro/ArrowsDirectionVertical.BpuSfMrI_68cTD.svg) | | `@imgly/AsClip` | ![AsClip Icon](/docs/cesdk/_astro/AsClip.CVGpviFn_68cTD.svg) | | `@imgly/AsOverlay` | ![AsOverlay Icon](/docs/cesdk/_astro/AsOverlay.5eEK9ZPF_68cTD.svg) | | `@imgly/Audio` | ![Audio Icon](/docs/cesdk/_astro/Audio.uOK5I2sE_68cTD.svg) | | `@imgly/AudioAdd` | ![AudioAdd Icon](/docs/cesdk/_astro/AudioAdd.B-ssll_o_68cTD.svg) | | `@imgly/Backward` | ![Backward Icon](/docs/cesdk/_astro/Backward.C2BFbDeQ_68cTD.svg) | | `@imgly/Blendmode` | ![Blendmode Icon](/docs/cesdk/_astro/Blendmode.z9rB9rxU_68cTD.svg) | | `@imgly/Blur` | ![Blur Icon](/docs/cesdk/_astro/Blur.DgAVmk6g_68cTD.svg) | | `@imgly/BooleanExclude` | ![BooleanExclude Icon](/docs/cesdk/_astro/BooleanExclude.By40Ey3m_68cTD.svg) | | `@imgly/BooleanIntersect` | ![BooleanIntersect Icon](/docs/cesdk/_astro/BooleanIntersect.CY4HM50Y_68cTD.svg) | | `@imgly/BooleanSubstract` | ![BooleanSubstract Icon](/docs/cesdk/_astro/BooleanSubstract.CwYzfMbe_68cTD.svg) | | `@imgly/BooleanUnion` | ![BooleanUnion Icon](/docs/cesdk/_astro/BooleanUnion.C-xUCyCc_68cTD.svg) | | `@imgly/CaseAsTyped` | ![CaseAsTyped Icon](/docs/cesdk/_astro/CaseAsTyped.l6bSq4oc_68cTD.svg) | | `@imgly/CaseLowercase` | ![CaseLowercase Icon](/docs/cesdk/_astro/CaseLowercase.BEN90R29_68cTD.svg) | | `@imgly/CaseSmallCaps` | ![CaseSmallCaps Icon](/docs/cesdk/_astro/CaseSmallCaps.BTdtiBHa_68cTD.svg) | | `@imgly/CaseTitleCase` | ![CaseTitleCase Icon](/docs/cesdk/_astro/CaseTitleCase.6GhYywMm_68cTD.svg) | | `@imgly/CaseUppercase` | ![CaseUppercase Icon](/docs/cesdk/_astro/CaseUppercase.B4vfd36q_68cTD.svg) | | `@imgly/CheckboxCheckmark` | ![CheckboxCheckmark Icon](/docs/cesdk/_astro/CheckboxCheckmark.pMjPiK5g_68cTD.svg) | | `@imgly/CheckboxMixed` | ![CheckboxMixed Icon](/docs/cesdk/_astro/CheckboxMixed.DOxJYYWZ_68cTD.svg) | | `@imgly/Checkmark` | ![Checkmark Icon](/docs/cesdk/_astro/Checkmark.CP0StQxb_68cTD.svg) | | `@imgly/ChevronDown` | ![ChevronDown Icon](/docs/cesdk/_astro/ChevronDown.f4OqdrJU_68cTD.svg) | | `@imgly/ChevronLeft` | ![ChevronLeft Icon](/docs/cesdk/_astro/ChevronLeft.BU6Cbcnc_68cTD.svg) | | `@imgly/ChevronRight` | ![ChevronRight Icon](/docs/cesdk/_astro/ChevronRight.DaVhuEy-_68cTD.svg) | | `@imgly/ChevronUp` | ![ChevronUp Icon](/docs/cesdk/_astro/ChevronUp.BcBhYGEB_68cTD.svg) | | `@imgly/Collage` | ![Collage Icon](/docs/cesdk/_astro/Collage.C9m_-pZR_68cTD.svg) | | `@imgly/ColorFill` | ![ColorFill Icon](/docs/cesdk/_astro/ColorFill.Due-2va6_68cTD.svg) | | `@imgly/ColorGradientAngular` | ![ColorGradientAngular Icon](/docs/cesdk/_astro/ColorGradientAngular.CWntlp_d_68cTD.svg) | | `@imgly/ColorGradientLinear` | ![ColorGradientLinear Icon](/docs/cesdk/_astro/ColorGradientLinear.DmT3R1oC_68cTD.svg) | | `@imgly/ColorGradientRadial` | ![ColorGradientRadial Icon](/docs/cesdk/_astro/ColorGradientRadial.DzApV2NU_68cTD.svg) | | `@imgly/ColorOpacity` | ![ColorOpacity Icon](/docs/cesdk/_astro/ColorOpacity.DMNZ-UhH_68cTD.svg) | | `@imgly/ColorSolid` | ![ColorSolid Icon](/docs/cesdk/_astro/ColorSolid.DVTQ0W3Q_68cTD.svg) | | `@imgly/ConnectionLostSlash` | ![ConnectionLostSlash Icon](/docs/cesdk/_astro/ConnectionLostSlash.DTcmxMhK_68cTD.svg) | | `@imgly/Copy` | ![Copy Icon](/docs/cesdk/_astro/Copy.BmABgrWc_68cTD.svg) | | `@imgly/CornerJoinBevel` | ![CornerJoinBevel Icon](/docs/cesdk/_astro/CornerJoinBevel.DqlY245R_68cTD.svg) | | `@imgly/CornerJoinMiter` | ![CornerJoinMiter Icon](/docs/cesdk/_astro/CornerJoinMiter.D3jd16NL_68cTD.svg) | | `@imgly/CornerJoinRound` | ![CornerJoinRound Icon](/docs/cesdk/_astro/CornerJoinRound.BwcufozW_68cTD.svg) | | `@imgly/Crop` | ![Crop Icon](/docs/cesdk/_astro/Crop.DYPLk0m-_68cTD.svg) | | `@imgly/CropCoverMode` | ![CropCoverMode Icon](/docs/cesdk/_astro/CropCoverMode.CGAJdwRR_68cTD.svg) | | `@imgly/CropCropMode` | ![CropCropMode Icon](/docs/cesdk/_astro/CropCropMode.DkkLoYje_68cTD.svg) | | `@imgly/CropFitMode` | ![CropFitMode Icon](/docs/cesdk/_astro/CropFitMode.BO_JImlA_68cTD.svg) | | `@imgly/CropFreefromMode` | ![CropFreefromMode Icon](/docs/cesdk/_astro/CropFreefromMode.BnRsz2W6_68cTD.svg) | | `@imgly/Cross` | ![Cross Icon](/docs/cesdk/_astro/Cross.txikJ9io_68cTD.svg) | | `@imgly/CrossRoundSolid` | ![CrossRoundSolid Icon](/docs/cesdk/_astro/CrossRoundSolid.BOTrEi6a_68cTD.svg) | | `@imgly/CustomLibrary` | ![CustomLibrary Icon](/docs/cesdk/_astro/CustomLibrary.CI29Obfk_68cTD.svg) | | `@imgly/Download` | ![Download Icon](/docs/cesdk/_astro/Download.CZGsxZgt_68cTD.svg) | | `@imgly/DropShadow` | ![DropShadow Icon](/docs/cesdk/_astro/DropShadow.C4Pf5WpM_68cTD.svg) | | `@imgly/Duplicate` | ![Duplicate Icon](/docs/cesdk/_astro/Duplicate.DrdC6vQb_68cTD.svg) | | `@imgly/Edit` | ![Edit Icon](/docs/cesdk/_astro/Edit.CUHjt2nS_68cTD.svg) | | `@imgly/Effects` | ![Effects Icon](/docs/cesdk/_astro/Effects.DRlbFdXp_68cTD.svg) | | `@imgly/ExternalLink` | ![ExternalLink Icon](/docs/cesdk/_astro/ExternalLink.25xxhZJX_68cTD.svg) | | `@imgly/EyeClosed` | ![EyeClosed Icon](/docs/cesdk/_astro/EyeClosed.Cu1m0jfI_68cTD.svg) | | `@imgly/EyeOpen` | ![EyeOpen Icon](/docs/cesdk/_astro/EyeOpen.Ds3PBojz_68cTD.svg) | | `@imgly/Filter` | ![Filter Icon](/docs/cesdk/_astro/Filter.O79QRETm_68cTD.svg) | | `@imgly/FlipHorizontal` | ![FlipHorizontal Icon](/docs/cesdk/_astro/FlipHorizontal.Ei-fC6h9_68cTD.svg) | | `@imgly/FlipVertical` | ![FlipVertical Icon](/docs/cesdk/_astro/FlipVertical.M9ofU4J4_68cTD.svg) | | `@imgly/FontAutoSizing` | ![FontAutoSizing Icon](/docs/cesdk/_astro/FontAutoSizing.DexdGxcq_68cTD.svg) | | `@imgly/FontSize` | ![FontSize Icon](/docs/cesdk/_astro/FontSize.S7lZw5Ga_68cTD.svg) | | `@imgly/Forward` | ![Forward Icon](/docs/cesdk/_astro/Forward.BcuMexaI_68cTD.svg) | | `@imgly/FullscreenEnter` | ![FullscreenEnter Icon](/docs/cesdk/_astro/FullscreenEnter.kF_8SSV7_68cTD.svg) | | `@imgly/FullscreenLeave` | ![FullscreenLeave Icon](/docs/cesdk/_astro/FullscreenLeave.DzxL3476_68cTD.svg) | | `@imgly/Group` | ![Group Icon](/docs/cesdk/_astro/Group.DAQiJIa__68cTD.svg) | | `@imgly/GroupEnter` | ![GroupEnter Icon](/docs/cesdk/_astro/GroupEnter.H1qCSB2q_68cTD.svg) | | `@imgly/GroupExit` | ![GroupExit Icon](/docs/cesdk/_astro/GroupExit.Cxgs51O9_68cTD.svg) | | `@imgly/Home` | ![Home Icon](/docs/cesdk/_astro/Home.DATK_4gX_68cTD.svg) | | `@imgly/Image` | ![Image Icon](/docs/cesdk/_astro/Image.D2nUt11G_68cTD.svg) | | `@imgly/Info` | ![Info Icon](/docs/cesdk/_astro/Info.DNnpRpS4_68cTD.svg) | | `@imgly/LayerBringForward` | ![LayerBringForward Icon](/docs/cesdk/_astro/LayerBringForward.CTq67SoU_68cTD.svg) | | `@imgly/LayerBringForwardArrow` | ![LayerBringForwardArrow Icon](/docs/cesdk/_astro/LayerBringForwardArrow.BcT_xGMM_68cTD.svg) | | `@imgly/LayerBringToFront` | ![LayerBringToFront Icon](/docs/cesdk/_astro/LayerBringToFront.BeM-z2uF_68cTD.svg) | | `@imgly/LayerBringToFrontArrow` | ![LayerBringToFrontArrow Icon](/docs/cesdk/_astro/LayerBringToFrontArrow.CnSyUJQI_68cTD.svg) | | `@imgly/LayerOpacity` | ![LayerOpacity Icon](/docs/cesdk/_astro/LayerOpacity.OWYnyPUZ_68cTD.svg) | | `@imgly/LayerSendBackward` | ![LayerSendBackward Icon](/docs/cesdk/_astro/LayerSendBackward.CFC8GyHY_68cTD.svg) | | `@imgly/LayerSendBackwardArrow` | ![LayerSendBackwardArrow Icon](/docs/cesdk/_astro/LayerSendBackwardArrow.5_XvmVuj_68cTD.svg) | | `@imgly/LayerSendToBack` | ![LayerSendToBack Icon](/docs/cesdk/_astro/LayerSendToBack.BvPugqHt_68cTD.svg) | | `@imgly/LayerSendToBackArrow` | ![LayerSendToBackArrow Icon](/docs/cesdk/_astro/LayerSendToBackArrow.YfQYh_l3_68cTD.svg) | | `@imgly/LayoutHorizontal` | ![LayoutHorizontal Icon](/docs/cesdk/_astro/LayoutHorizontal.CePOuWsz_68cTD.svg) | | `@imgly/LayoutVertical` | ![LayoutVertical Icon](/docs/cesdk/_astro/LayoutVertical.DxgvBSD0_68cTD.svg) | | `@imgly/Library` | ![Library Icon](/docs/cesdk/_astro/Library.xdK4TnnL_68cTD.svg) | | `@imgly/LineHeight` | ![LineHeight Icon](/docs/cesdk/_astro/LineHeight.CVWOG1lW_68cTD.svg) | | `@imgly/LinkClosed` | ![LinkClosed Icon](/docs/cesdk/_astro/LinkClosed.DSl2uQyi_68cTD.svg) | | `@imgly/LinkOpen` | ![LinkOpen Icon](/docs/cesdk/_astro/LinkOpen.DofM8u7F_68cTD.svg) | | `@imgly/LoopClip` | ![LoopClip Icon](/docs/cesdk/_astro/LoopClip.ClOhgNoV_68cTD.svg) | | `@imgly/LoadingSpinner` | ![LoadingSpinner Icon](/docs/cesdk/_astro/LoadingSpinner.DVqX5QnF_68cTD.svg) | | `@imgly/LockClosed` | ![LockClosed Icon](/docs/cesdk/_astro/LockClosed.CNalJFXd_68cTD.svg) | | `@imgly/LockOpen` | ![LockOpen Icon](/docs/cesdk/_astro/LockOpen.TJhEPjeL_68cTD.svg) | | `@imgly/Minus` | ![Minus Icon](/docs/cesdk/_astro/Minus.CqBSW4Hh_68cTD.svg) | | `@imgly/MoreOptionsHorizontal` | ![MoreOptionsHorizontal Icon](/docs/cesdk/_astro/MoreOptionsHorizontal.L63utfkH_68cTD.svg) | | `@imgly/MoreOptionsVertical` | ![MoreOptionsVertical Icon](/docs/cesdk/_astro/MoreOptionsVertical.CuZa1NAq_68cTD.svg) | | `@imgly/Move` | ![Move Icon](/docs/cesdk/_astro/Move.BcjZGlar_68cTD.svg) | | `@imgly/Next` | ![Next Icon](/docs/cesdk/_astro/Next.D6AnK3jG_68cTD.svg) | | `@imgly/None` | ![None Icon](/docs/cesdk/_astro/None.94s_6ShU_68cTD.svg) | | `@imgly/ObjectAlignBottom` | ![ObjectAlignBottom Icon](/docs/cesdk/_astro/ObjectAlignBottom.Q-hKPxE5_68cTD.svg) | | `@imgly/ObjectAlignDistributedHorizontal` | ![ObjectAlignDistributedHorizontal Icon](/docs/cesdk/_astro/ObjectAlignDistributedHorizontal.X0A9Wwpy_68cTD.svg) | | `@imgly/ObjectAlignDistributedVertical` | ![ObjectAlignDistributedVertical Icon](/docs/cesdk/_astro/ObjectAlignDistributedVertical.CNGw3lI8_68cTD.svg) | | `@imgly/ObjectAlignHorizontalCenter` | ![ObjectAlignHorizontalCenter Icon](/docs/cesdk/_astro/ObjectAlignHorizontalCenter.DYUFnb31_68cTD.svg) | | `@imgly/ObjectAlignLeft` | ![ObjectAlignLeft Icon](/docs/cesdk/_astro/ObjectAlignLeft.esiSYWS7_68cTD.svg) | | `@imgly/ObjectAlignRight` | ![ObjectAlignRight Icon](/docs/cesdk/_astro/ObjectAlignRight.GPKDNQHR_68cTD.svg) | | `@imgly/ObjectAlignTop` | ![ObjectAlignTop Icon](/docs/cesdk/_astro/ObjectAlignTop.l_WErmNU_68cTD.svg) | | `@imgly/ObjectAlignVerticalCenter` | ![ObjectAlignVerticalCenter Icon](/docs/cesdk/_astro/ObjectAlignVerticalCenter.8hE0T5x6_68cTD.svg) | | `@imgly/OrientationToggleLandscape` | ![OrientationToggleLandscape Icon](/docs/cesdk/_astro/OrientationToggleLandscape.CSDa8O0M_68cTD.svg) | | `@imgly/OrientationTogglePortrait` | ![OrientationTogglePortrait Icon](/docs/cesdk/_astro/OrientationTogglePortrait.DxVF38g4_68cTD.svg) | | `@imgly/PageResize` | ![PageResize Icon](/docs/cesdk/_astro/PageResize.Cu1xAsRj_68cTD.svg) | | `@imgly/Paste` | ![Paste Icon](/docs/cesdk/_astro/Paste.BuMonsY9_68cTD.svg) | | `@imgly/Pause` | ![Pause Icon](/docs/cesdk/_astro/Pause.DDGCVnKM_68cTD.svg) | | `@imgly/PlaceholderConnected` | ![PlaceholderConnected Icon](/docs/cesdk/_astro/PlaceholderConnected.BkUyWaQ7_68cTD.svg) | | `@imgly/PlaceholderStripes` | ![PlaceholderStripes Icon](/docs/cesdk/_astro/PlaceholderStripes.BFineOwo_68cTD.svg) | | `@imgly/Play` | ![Play Icon](/docs/cesdk/_astro/Play.DSpjfhWu_68cTD.svg) | | `@imgly/Plus` | ![Plus Icon](/docs/cesdk/_astro/Plus.D3IdVb1T_68cTD.svg) | | `@imgly/Position` | ![Position Icon](/docs/cesdk/_astro/Position.DhnoEfwQ_68cTD.svg) | | `@imgly/Previous` | ![Previous Icon](/docs/cesdk/_astro/Previous.CCrN_eRf_68cTD.svg) | | `@imgly/Redo` | ![Redo Icon](/docs/cesdk/_astro/Redo.CfjN5TI8_68cTD.svg) | | `@imgly/Rename` | ![Rename Icon](/docs/cesdk/_astro/Rename.CxI-t7Fn_68cTD.svg) | | `@imgly/Reorder` | ![Reorder Icon](/docs/cesdk/_astro/Reorder.CzUg_r09_68cTD.svg) | | `@imgly/Repeat` | ![Repeat Icon](/docs/cesdk/_astro/Repeat.B2e75pG7_68cTD.svg) | | `@imgly/RepeatOff` | ![RepeatOff Icon](/docs/cesdk/_astro/RepeatOff.B29qufK8_68cTD.svg) | | `@imgly/Replace` | ![Replace Icon](/docs/cesdk/_astro/Replace.B7aKEXkR_68cTD.svg) | | `@imgly/Reset` | ![Reset Icon](/docs/cesdk/_astro/Reset.Cxse5Eti_68cTD.svg) | | `@imgly/RotateCCW90` | ![RotateCCW90 Icon](/docs/cesdk/_astro/RotateCCW90.BIw29FPG_68cTD.svg) | | `@imgly/RotateCW` | ![RotateCW Icon](/docs/cesdk/_astro/RotateCW.BdtOYcHi_68cTD.svg) | | `@imgly/RotateCW90` | ![RotateCW90 Icon](/docs/cesdk/_astro/RotateCW90.Dr3zp4wc_68cTD.svg) | | `@imgly/Save` | ![Save Icon](/docs/cesdk/_astro/Save.C0V1utdu_68cTD.svg) | | `@imgly/Scale` | ![Scale Icon](/docs/cesdk/_astro/Scale.Ap3A7VA6_68cTD.svg) | | `@imgly/Search` | ![Search Icon](/docs/cesdk/_astro/Search.OK9LIXmS_68cTD.svg) | | `@imgly/Settings` | ![Settings Icon](/docs/cesdk/_astro/Settings.VScoKX0i_68cTD.svg) | | `@imgly/SettingsCog` | ![SettingsCog Icon](/docs/cesdk/_astro/SettingsCog.CHzkR7oC_68cTD.svg) | | `@imgly/ShapeOval` | ![ShapeOval Icon](/docs/cesdk/_astro/ShapeOval.CJRIxxg5_68cTD.svg) | | `@imgly/ShapePolygon` | ![ShapePolygon Icon](/docs/cesdk/_astro/ShapePolygon.BAIvfUsG_68cTD.svg) | | `@imgly/ShapeRectangle` | ![ShapeRectangle Icon](/docs/cesdk/_astro/ShapeRectangle.D_GcPdj4_68cTD.svg) | | `@imgly/ShapeStar` | ![ShapeStar Icon](/docs/cesdk/_astro/ShapeStar.ChTrfgau_68cTD.svg) | | `@imgly/Shapes` | ![Shapes Icon](/docs/cesdk/_astro/Shapes.bR8cU9cb_68cTD.svg) | | `@imgly/Share` | ![Share Icon](/docs/cesdk/_astro/Share.CxVmAh-Q_68cTD.svg) | | `@imgly/SidebarOpen` | ![SidebarOpen Icon](/docs/cesdk/_astro/SidebarOpen.DP_Nkz_M_68cTD.svg) | | `@imgly/Split` | ![Split Icon](/docs/cesdk/_astro/Split.CtHPO2rr_68cTD.svg) | | `@imgly/Sticker` | ![Sticker Icon](/docs/cesdk/_astro/Sticker.giyPqv3w_68cTD.svg) | | `@imgly/Stop` | ![Stop Icon](/docs/cesdk/_astro/Stop.Dk91ehJn_68cTD.svg) | | `@imgly/Straighten` | ![Straighten Icon](/docs/cesdk/_astro/Straighten.QTpTGn7c_68cTD.svg) | | `@imgly/StrokeDash` | ![StrokeDash Icon](/docs/cesdk/_astro/StrokeDash.G2iLl7Ql_68cTD.svg) | | `@imgly/StrokeDotted` | ![StrokeDotted Icon](/docs/cesdk/_astro/StrokeDotted.BNij6pGg_68cTD.svg) | | `@imgly/StrokePositionCenter` | ![StrokePositionCenter Icon](/docs/cesdk/_astro/StrokePositionCenter.DLGkhfZI_68cTD.svg) | | `@imgly/StrokePositionInside` | ![StrokePositionInside Icon](/docs/cesdk/_astro/StrokePositionInside.YLPd54Fr_68cTD.svg) | | `@imgly/StrokePositionOutside` | ![StrokePositionOutside Icon](/docs/cesdk/_astro/StrokePositionOutside.BToQBEp3_68cTD.svg) | | `@imgly/StrokeSolid` | ![StrokeSolid Icon](/docs/cesdk/_astro/StrokeSolid.BbQK_ttd_68cTD.svg) | | `@imgly/StrokeWeight` | ![StrokeWeight Icon](/docs/cesdk/_astro/StrokeWeight.p9i4NW18_68cTD.svg) | | `@imgly/Template` | ![Template Icon](/docs/cesdk/_astro/Template.DiqM4ifM_68cTD.svg) | | `@imgly/Text` | ![Text Icon](/docs/cesdk/_astro/Text.D20mu4op_68cTD.svg) | | `@imgly/TextAlignBottom` | ![TextAlignBottom Icon](/docs/cesdk/_astro/TextAlignBottom.Lrl-KvaG_68cTD.svg) | | `@imgly/TextAlignCenter` | ![TextAlignCenter Icon](/docs/cesdk/_astro/TextAlignCenter.GaFLxW6o_68cTD.svg) | | `@imgly/TextAlignLeft` | ![TextAlignLeft Icon](/docs/cesdk/_astro/TextAlignLeft.JPvbI_Iv_68cTD.svg) | | `@imgly/TextAlignMiddle` | ![TextAlignMiddle Icon](/docs/cesdk/_astro/TextAlignMiddle.Cc4CeA8h_68cTD.svg) | | `@imgly/TextAlignRight` | ![TextAlignRight Icon](/docs/cesdk/_astro/TextAlignRight.DtFvwWBW_68cTD.svg) | | `@imgly/TextAlignTop` | ![TextAlignTop Icon](/docs/cesdk/_astro/TextAlignTop.BlMx73E2_68cTD.svg) | | `@imgly/TextAutoHeight` | ![TextAutoHeight Icon](/docs/cesdk/_astro/TextAutoHeight.fSi8isZl_68cTD.svg) | | `@imgly/TextAutoSize` | ![TextAutoSize Icon](/docs/cesdk/_astro/TextAutoSize.Bp4copWt_68cTD.svg) | | `@imgly/TextBold` | ![TextBold Icon](/docs/cesdk/_astro/TextBold.DQnuwuNI_68cTD.svg) | | `@imgly/TextFixedSize` | ![TextFixedSize Icon](/docs/cesdk/_astro/TextFixedSize.8ULsWSkZ_68cTD.svg) | | `@imgly/TextItalic` | ![TextItalic Icon](/docs/cesdk/_astro/TextItalic.vCylf_bp_68cTD.svg) | | `@imgly/Timeline` | ![Timeline Icon](/docs/cesdk/_astro/Timeline.BZOGSaoW_68cTD.svg) | | `@imgly/ToggleIconOff` | ![ToggleIconOff Icon](/docs/cesdk/_astro/ToggleIconOff.tOLH9iio_68cTD.svg) | | `@imgly/ToggleIconOn` | ![ToggleIconOn Icon](/docs/cesdk/_astro/ToggleIconOn.C1vynusd_68cTD.svg) | | `@imgly/TransformSection` | ![TransformSection Icon](/docs/cesdk/_astro/TransformSection.Cd_1rtk4_68cTD.svg) | | `@imgly/TrashBin` | ![TrashBin Icon](/docs/cesdk/_astro/TrashBin.DIRoLX4y_68cTD.svg) | | `@imgly/TriangleDown` | ![TriangleDown Icon](/docs/cesdk/_astro/TriangleDown.qVuJ48qB_68cTD.svg) | | `@imgly/TriangleUp` | ![TriangleUp Icon](/docs/cesdk/_astro/TriangleUp.BZYFGYKM_68cTD.svg) | | `@imgly/TrimMedia` | ![TrimMedia Icon](/docs/cesdk/_astro/TrimMedia.BgO_0rmP_68cTD.svg) | | `@imgly/Typeface` | ![Typeface Icon](/docs/cesdk/_astro/Typeface.DqVOeIHT_68cTD.svg) | | `@imgly/Undo` | ![Undo Icon](/docs/cesdk/_astro/Undo.CPyRKh4X_68cTD.svg) | | `@imgly/Ungroup` | ![Ungroup Icon](/docs/cesdk/_astro/Ungroup.CFB9nh2f_68cTD.svg) | | `@imgly/Upload` | ![Upload Icon](/docs/cesdk/_astro/Upload.DXKuDONZ_68cTD.svg) | | `@imgly/Video` | ![Video Icon](/docs/cesdk/_astro/Video.DY9tRwlD_68cTD.svg) | | `@imgly/VideoCamera` | ![VideoCamera Icon](/docs/cesdk/_astro/VideoCamera.Dlw252lj_68cTD.svg) | | `@imgly/Volume` | ![Volume Icon](/docs/cesdk/_astro/Volume.DyYIA3JG_68cTD.svg) | | `@imgly/VolumeMute` | ![VolumeMute Icon](/docs/cesdk/_astro/VolumeMute.BPyJ4_Sl_68cTD.svg) | | `@imgly/ZoomIn` | ![ZoomIn Icon](/docs/cesdk/_astro/ZoomIn.BldHnJXW_68cTD.svg) | | `@imgly/ZoomOut` | ![ZoomOut Icon](/docs/cesdk/_astro/ZoomOut.CC-7T1Td_68cTD.svg) | --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/appearance/theming-4b0938) # Theming Customize the visual appearance of CE.SDK’s user interface through theming, allowing you to adapt colors, fonts, and sizes to match your brand identity or application design. ![CE.SDK editor with custom green and olive nature theme showing themed UI elements](/docs/cesdk/_astro/browser.hero.DGi4MK0a_yo0cW.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples)[ GitHub](https://github.com/imgly/cesdk-web-examples) CE.SDK provides comprehensive theming capabilities at two levels: built-in themes for immediate use, and a complete CSS theming API for detailed brand-specific styling. This guide demonstrates how to use each approach to customize the editor’s appearance. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; const GREEN_OLIVE_THEME_CSS = `.ubq-public[data-ubq-theme='light'][data-ubq-scale='normal'] { --ubq-canvas: hsl(95, 25%, 88%) !important; --ubq-elevation-1: hsl(92, 22%, 83%) !important; --ubq-elevation-2: hsl(88, 20%, 78%) !important; --ubq-elevation-3: hsl(85, 18%, 73%) !important; --ubq-interactive-default: hsl(88, 20%, 82%) !important; --ubq-interactive-hover: hsl(88, 24%, 75%) !important; --ubq-interactive-pressed: hsl(88, 28%, 68%) !important; --ubq-interactive-accent-default: hsl(135, 45%, 48%) !important; --ubq-interactive-accent-hover: hsl(135, 50%, 43%) !important; --ubq-interactive-accent-pressed: hsl(135, 55%, 38%) !important;}`; /** * CE.SDK Plugin: Theming Guide * * This example demonstrates: * - Setting theme (light, dark, system) * - Setting scale (normal, large, modern) * - Dynamic scale with callback * - Custom theme via CSS custom properties */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Set the theme to light, dark, or system // 'system' automatically follows the user's OS theme preference cesdk.ui.setTheme('light'); // Set a fixed scale: 'normal', 'large', or 'modern' (default) // - normal: Standard UI scaling for desktop // - large: Increased sizes for accessibility and touch devices // - modern: Modern theme with refined visual design cesdk.ui.setScale('normal'); // Apply custom green/olive theme after CE.SDK initialization const style = document.createElement('style'); style.textContent = GREEN_OLIVE_THEME_CSS; document.head.appendChild(style); // Force theme refresh to pick up custom colors cesdk.ui.setTheme('dark'); await new Promise((resolve) => setTimeout(resolve, 100)); cesdk.ui.setTheme('light'); // Or use a dynamic scale based on viewport and device cesdk.ui.setScale(({ containerWidth, isTouch }) => { // Use large scale for small screens or touch devices if ((containerWidth && containerWidth < 600) || isTouch) { return 'large'; } // Use normal scale for larger screens return 'normal'; }); // Get the current active theme const currentTheme = cesdk.ui.getTheme(); // Returns 'light' or 'dark' // eslint-disable-next-line no-console console.log('Current theme:', currentTheme); // Get the current scale setting const currentScale = cesdk.ui.getScale(); // Returns scale or callback function // eslint-disable-next-line no-console console.log('Current scale:', currentScale); // Create a design scene await cesdk.createDesignScene(); // Add asset sources await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page dimensions engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); // Add a visual element to demonstrate the theme const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Add an image to show theme effects const imageBlock = await engine.block.addImage(imageUri, { x: 100, y: 100, size: { width: 600, height: 400 } }); engine.block.appendChild(page, imageBlock); // Note: The custom theme defined in custom-theme.css will automatically apply // when the theme/scale combination matches the CSS selectors // Example: .ubq-public[data-ubq-theme='dark'][data-ubq-scale='normal'] }} export default Example; ``` ## Built-in Themes and Scales[#](#built-in-themes-and-scales) We provide ready-to-use theme options and scale settings that can be configured at runtime, allowing you to adapt the editor’s appearance without writing custom CSS. ### Setting the Theme[#](#setting-the-theme) Use `cesdk.ui.setTheme()` to switch between light, dark, or system themes. The system option automatically follows the user’s operating system theme preference. ``` // Set the theme to light, dark, or system// 'system' automatically follows the user's OS theme preferencecesdk.ui.setTheme('light'); ``` By default, the light theme is active. When you set the theme to `'system'`, CE.SDK automatically adapts to the user’s OS preference and updates whenever the system theme changes. ### Reading the Current Theme[#](#reading-the-current-theme) To determine which theme is currently active, use `cesdk.ui.getTheme()`: ``` // Get the current active themeconst currentTheme = cesdk.ui.getTheme(); // Returns 'light' or 'dark'// eslint-disable-next-line no-consoleconsole.log('Current theme:', currentTheme); // Get the current scale settingconst currentScale = cesdk.ui.getScale(); // Returns scale or callback function// eslint-disable-next-line no-consoleconsole.log('Current scale:', currentScale); ``` This method always returns either `'light'` or `'dark'`, never `'system'`. When the system theme is configured, `getTheme()` returns the resolved theme based on the current OS preference. ### Setting the Scale[#](#setting-the-scale) CE.SDK supports three scale modes that affect UI element sizes, spacing, and typography. Use `cesdk.ui.setScale()` to select a fixed scale: ``` // Set a fixed scale: 'normal', 'large', or 'modern' (default)// - normal: Standard UI scaling for desktop// - large: Increased sizes for accessibility and touch devices// - modern: Modern theme with refined visual designcesdk.ui.setScale('normal'); ``` The scale modes offer different visual experiences: * **`normal`**: Standard UI scaling optimized for desktop and larger screens * **`large`**: Increased element sizes, margins, and fonts for improved readability and accessibility, particularly beneficial for users with visual or motor impairments and those on small screens * **`modern`** (default): Modern theme with refined color palette, unified elevation surfaces, and improved visual hierarchy ### Dynamic Scale with Callbacks[#](#dynamic-scale-with-callbacks) For responsive designs, you can provide a callback function that returns the appropriate scale based on viewport properties: ``` // Or use a dynamic scale based on viewport and devicecesdk.ui.setScale(({ containerWidth, isTouch }) => { // Use large scale for small screens or touch devices if ((containerWidth && containerWidth < 600) || isTouch) { return 'large'; } // Use normal scale for larger screens return 'normal';}); ``` The callback receives an object with two properties: * `containerWidth`: The width in pixels of the HTML element containing CE.SDK * `isTouch`: Boolean indicating whether the user agent supports touch input This callback is evaluated when the viewport size changes or when the touch capability is detected, allowing CE.SDK to adapt the scale dynamically. ## Custom CSS Theming[#](#custom-css-theming) For complete control over the editor’s appearance, use CE.SDK’s CSS custom properties system. This approach allows you to define every aspect of the UI’s visual design through CSS variables. ### Theme Structure[#](#theme-structure) Custom themes use CSS selectors that combine the root class, theme attribute, and scale attribute: ``` .ubq-public[data-ubq-theme='dark'][data-ubq-scale='normal'] { /* Custom properties here */} ``` The selector components are: * `.ubq-public`: Root class that scopes all CE.SDK UI elements * `[data-ubq-theme]`: Attribute for theme variant (`'light'` or `'dark'`) * `[data-ubq-scale]`: Attribute for scale mode (`'normal'`, `'large'`, or `'modern'`) ### Loading Custom Themes[#](#loading-custom-themes) Load custom themes by linking a CSS file in your HTML or including a ` ``` ### CSS Custom Properties[#](#css-custom-properties) The theming API provides CSS custom properties organized into color and typography categories. #### Color Properties[#](#color-properties) Color properties control surfaces, interactive elements, borders, and notifications. Key color property categories: * **Canvas and Elevation**: `--ubq-canvas`, `--ubq-elevation-1`, `--ubq-elevation-2` * **Foreground**: `--ubq-foreground-default`, `--ubq-foreground-light`, `--ubq-foreground-info` * **Interactive States**: `--ubq-interactive-default`, `--ubq-interactive-hover`, `--ubq-interactive-pressed` * **Input Elements**: `--ubq-input-default`, `--ubq-input-hover` * **Borders and Strokes**: `--ubq-border-default`, `--ubq-stroke-contrast-1`, `--ubq-stroke-contrast-2` * **Notices**: `--ubq-notice-info`, `--ubq-notice-warning`, `--ubq-notice-error`, `--ubq-notice-success` #### Typography Properties[#](#typography-properties) Typography properties control font families, sizes, line heights, letter spacing, and weights for different text styles: * **Headlines**: `--ubq-typography-headline-l-*`, `--ubq-typography-headline-m-*` * **Labels**: `--ubq-typography-label-m-*`, `--ubq-typography-label-s-*` * **Body Text**: `--ubq-typography-body-m-*` * **Input Text**: `--ubq-typography-input-m-*` * **Buttons**: `--ubq-typography-button-m-*` Each typography style includes properties for: * `-size`: Font size in pixels * `-line_height`: Line height in pixels * `-letter_spacing`: Letter spacing (e.g., `0.02em`) * `-font_family`: Font family with fallbacks (uses `--ubq-typography-font_family` variable, defaults to `'Inter', sans-serif`) * `-weight`: Font weight (`normal`, `600`, etc.) ### Creating Theme Variants[#](#creating-theme-variants) We recommend providing both light and dark theme variants for the best user experience. Users expect to choose their preferred theme or have it follow their system preference. ``` /* Dark theme */.ubq-public[data-ubq-theme='dark'][data-ubq-scale='normal'] { --ubq-canvas: hsl(230.27, 52.11%, 13.92%); --ubq-foreground-default: hsla(0, 0%, 100%, 0.9); /* ... more properties ... */} /* Light theme */.ubq-public[data-ubq-theme='light'][data-ubq-scale='normal'] { --ubq-canvas: hsl(0, 0%, 98%); --ubq-foreground-default: hsla(0, 0%, 0%, 0.9); /* ... more properties ... */} ``` Similarly, consider providing scale variants for `normal`, `large`, and `modern` scales to ensure your theme looks correct at all scale settings. ## Best Practices[#](#best-practices) ### Design Considerations[#](#design-considerations) When creating custom themes: * **Provide both light and dark variants** to respect user preferences * **Support all three scale options** to ensure accessibility * **Maintain sufficient contrast ratios** for readability (WCAG AA: 4.5:1 for normal text, 3:1 for large text) * **Test with real content** to verify the theme works across all UI elements * **Use system fonts as fallbacks** for reliable cross-platform rendering ### Implementation Tips[#](#implementation-tips) For reliable theme implementation: * **Load themes before CE.SDK initialization** to prevent visual flashes * **Organize theme files** by theme variant and scale for maintainability * **Document custom property values** for team collaboration * **Version control theme files** to track changes over time ### Performance[#](#performance) Optimize theme performance by: * **Minimizing CSS specificity** for faster selector matching * **Using CSS custom properties** for efficient theme switching * **Avoiding unnecessary repaints** by grouping property updates * **Caching theme preferences** in localStorage to persist user choices ### Accessibility[#](#accessibility) Ensure themes are accessible: * **Respect system theme preference** by defaulting to `'system'` theme * **Meet WCAG AA contrast ratios** for all text and interactive elements * **Provide the `large` scale option** for users who need larger UI elements * **Test with screen readers** to verify theme doesn’t interfere with assistive technology * **Include theme switching controls** for users to customize their experience ## Troubleshooting[#](#troubleshooting) ### Theme Not Applying[#](#theme-not-applying) If your custom theme isn’t visible: 1. Verify CSS is loaded **before** CE.SDK initialization 2. Check CSS selector specificity matches or exceeds built-in theme selectors 3. Ensure `.ubq-public` class is used correctly in all selectors 4. Verify `data-ubq-theme` and `data-ubq-scale` attributes match the theme and scale you’ve set ### Theme Switching Not Working[#](#theme-switching-not-working) If `setTheme()` doesn’t update the UI: 1. Confirm the method is called **after** CE.SDK initialization completes 2. Verify CSS selectors cover all theme variants (light/dark) 3. Check the browser console for JavaScript errors 4. Inspect the DOM to ensure `data-ubq-theme` attribute is updating ### Colors Display Incorrectly[#](#colors-display-incorrectly) If colors appear wrong: 1. Check HSL/HSLA values are valid (hue: 0-360, saturation/lightness: 0%-100%, alpha: 0-1) 2. Verify alpha channel values are in the correct range (0.0 to 1.0) 3. Test color combinations for sufficient contrast 4. Look for typos in CSS property names (they fail silently) ### Typography Not Matching Design[#](#typography-not-matching-design) If fonts don’t match your design: 1. Verify font family names are spelled correctly and match loaded fonts 2. Check that custom fonts are loaded and available 3. Confirm fallback fonts are specified for reliability 4. Test that the specified font weights are available in the font family ### Scale Callback Not Triggering[#](#scale-callback-not-triggering) If dynamic scale doesn’t work: 1. Check callback function signature matches expected parameters 2. Verify `containerWidth` is being evaluated correctly (handle `undefined`) 3. Test on different viewport sizes to confirm callback execution 4. Add `console.log` statements to debug callback parameters ## API Reference[#](#api-reference) Quick reference for all theming-related APIs: ### Theme Management[#](#theme-management) | Method | Description | | --- | --- | | `cesdk.ui.setTheme('light' | 'dark' | 'system')` | Set the theme to light, dark, or system (follows OS preference) | | `cesdk.ui.getTheme()` | Get current active theme (returns `'light'` or `'dark'`) | ### Scale Management[#](#scale-management) | Method | Description | | --- | --- | | `cesdk.ui.setScale('normal' | 'large' | 'modern')` | Set a fixed scale: normal (standard), large (touch-friendly), modern (refined) | | `cesdk.ui.setScale(ScaleCallback)` | Set dynamic scale using callback based on viewport and device | | `cesdk.ui.getScale()` | Get current scale setting (returns scale value or callback function) | **ScaleCallback Type:** ``` type ScaleCallback = (context: { containerWidth: number; isTouch: boolean;}) => 'normal' | 'large' | 'modern' ``` ### CSS Custom Properties[#](#css-custom-properties-1) Complete reference of all available CSS custom properties for theming: #### Color Tokens[#](#color-tokens) **Canvas and Elevation** * `--ubq-canvas`: Main canvas background color * `--ubq-elevation-1`: First elevation level background * `--ubq-elevation-2`: Second elevation level background * `--ubq-elevation-3`: Third elevation level background **Foreground Colors** * `--ubq-foreground-default`: Default text and icon color * `--ubq-foreground-light`: Lighter text color for secondary content * `--ubq-foreground-info`: Informational text color * `--ubq-foreground-active`: Active state foreground color * `--ubq-foreground-accent`: Accent foreground color * `--ubq-foreground-danger-default`: Danger state foreground color * `--ubq-foreground-notice-default`: Notice foreground color **Interactive Elements** * `--ubq-interactive-default`: Default interactive element background * `--ubq-interactive-hover`: Hover state background * `--ubq-interactive-pressed`: Pressed state background * `--ubq-interactive-selected`: Selected state background * `--ubq-interactive-active-default`: Active element default state * `--ubq-interactive-active-hover`: Active element hover state * `--ubq-interactive-active-pressed`: Active element pressed state * `--ubq-interactive-accent-default`: Accent interactive default state * `--ubq-interactive-accent-hover`: Accent interactive hover state * `--ubq-interactive-accent-pressed`: Accent interactive pressed state * `--ubq-interactive-danger-default`: Danger interactive default state * `--ubq-interactive-danger-hover`: Danger interactive hover state * `--ubq-interactive-danger-pressed`: Danger interactive pressed state * `--ubq-interactive-group-default`: Group interactive default state * `--ubq-interactive-group-hover`: Group interactive hover state * `--ubq-interactive-group-active-default`: Active group default state * `--ubq-interactive-group-active-hover`: Active group hover state * `--ubq-interactive-template-default`: Template interactive default state * `--ubq-interactive-template-hover`: Template interactive hover state * `--ubq-interactive-template-pressed`: Template interactive pressed state **Input Elements** * `--ubq-input-default`: Default input background * `--ubq-input-hover`: Input hover state background **Progress Indicators** * `--ubq-progress`: Progress bar color **Borders and Strokes** * `--ubq-border-default`: Default border color * `--ubq-stroke-contrast-1`: Low contrast stroke color * `--ubq-stroke-contrast-2`: Medium contrast stroke color * `--ubq-stroke-contrast-3`: High contrast stroke color **Focus Indicators** * `--ubq-focus-default`: Default focus indicator color * `--ubq-focus-outline`: Focus outline color with transparency **Overlays** * `--ubq-overlay`: Modal and overlay background **Notices and Feedback** * `--ubq-notice-info`: Informational notice color * `--ubq-notice-warning`: Warning notice color * `--ubq-notice-error`: Error notice color * `--ubq-notice-success`: Success notice color **Effects** * `--ubq-effect-shadow`: Box shadow effect for elevation * `--ubq-effect-focus`: Focus state shadow effect **Static Colors** (theme-independent) * `--ubq-static-selection-frame`: Selection frame color * `--ubq-static-contrast-white`: Static white color * `--ubq-static-contrast-black`: Static black color * `--ubq-static-snapping`: Snapping guide color * `--ubq-static-bleed`: Bleed area color * `--ubq-static-text-variable`: Variable text indicator color * `--ubq-static-card-label-background`: Card label background gradient * `--ubq-static-card-background`: Card background gradient #### Typography Tokens[#](#typography-tokens) Each typography style supports the following properties: * `-size`: Font size in pixels * `-line_height`: Line height in pixels * `-letter_spacing`: Letter spacing (e.g., `0.02em`) * `-font_family`: Font family (uses `--ubq-typography-font_family` with fallback to `'Inter', sans-serif`) * `-weight`: Font weight (numeric values like `450`, `600`) **Headline Large** (`--ubq-typography-headline-l-*`) * Used for main headings and titles * Normal scale: 16px size, 20px line height, 0.01em letter spacing, 600 weight * Large scale: 20px size, 25px line height, 0.01em letter spacing, 600 weight **Headline Medium** (`--ubq-typography-headline-m-*`) * Used for secondary headings * Normal scale: 12px size, 16px line height, 0.03em letter spacing, 600 weight * Large scale: 15px size, 20px line height, 0.03em letter spacing, 600 weight **Label Medium** (`--ubq-typography-label-m-*`) * Used for form labels and UI labels * Normal scale: 12px size, 16px line height, 0.02em letter spacing, 450 weight * Large scale: 15px size, 20px line height, 0.02em letter spacing, normal weight **Label Small** (`--ubq-typography-label-s-*`) * Used for small labels and captions * Normal scale: 10px size, 14px line height, 0.02em letter spacing, 450 weight * Large scale: 12.5px size, 17.5px line height, 0.02em letter spacing, normal weight **Body Medium** (`--ubq-typography-body-m-*`) * Used for body text and descriptions * Normal scale: 12px size, 18px line height, 0.02em letter spacing, 450 weight * Large scale: 15px size, 22.5px line height, 0.02em letter spacing, normal weight **Input Medium** (`--ubq-typography-input-m-*`) * Used for input field text * Normal scale: 12px size, 16px line height, 0.02em letter spacing, 450 weight * Large scale: 16px size, 20px line height, 0.02em letter spacing, normal weight (16px minimum prevents iOS zoom) **Button Medium** (`--ubq-typography-button-m-*`) * Used for button text * Normal scale: 12px size, 16px line height, 0.02em letter spacing, 450 weight * Large scale: 15px size, 20px line height, 0.02em letter spacing, normal weight **Base Font Family** * `--ubq-typography-font_family`: Base font family variable used by all typography tokens #### Spacing and Measurements[#](#spacing-and-measurements) **Scale Base** * `--ubq-scale-base`: Base unit for spacing calculations (4px normal, 5px large) **Margins** * `--ubq-margin-base`: Base margin unit (4px normal, 5px large) * `--ubq-margin-xs`: Extra small margin (4px normal, 5px large) * `--ubq-margin-s`: Small margin (8px normal, 10px large) * `--ubq-margin-m`: Medium margin (12px normal, 15px large) * `--ubq-margin-l`: Large margin (16px normal, 20px large) * `--ubq-margin-xl`: Extra large margin (24px normal, 30px large) **Border Radius** * `--ubq-border_radius-base`: Base border radius (4px normal, 5px large) * `--ubq-border_radius-xs`: Extra small radius (2px normal, 2.5px large) * `--ubq-border_radius-s`: Small radius (4px normal, 5px large) * `--ubq-border_radius-m`: Medium radius (8px normal, 10px large) * `--ubq-border_radius-l`: Large radius (12px normal, 15px large) #### CSS Selector Pattern[#](#css-selector-pattern) All custom properties must be scoped using this pattern: ``` .ubq-public[data-ubq-theme='light' | 'dark'][data-ubq-scale='normal' | 'large' | 'modern'] { /* Custom properties here */} ``` ## Next Steps[#](#next-steps) * Explore [UI Configuration](/docs/guides/user-interface/configuration) for additional customization options * Learn about [Custom Components](/docs/guides/user-interface/custom-components) for extending the UI * Review [Accessibility Guidelines](/docs/guides/user-interface/accessibility) for inclusive design * Check [Asset Library Customization](/docs/guides/user-interface/asset-library) for complete branding --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/appearance/custom-labels-7794f7) # Custom Labels Customize UI text labels in CE.SDK to match your brand voice and product terminology without changing the entire interface language. ![Custom Labels example showing CE.SDK with customized UI text](/docs/cesdk/_astro/browser.hero.CdaA72Ce_Z1gvBIK.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples)[ GitHub](https://github.com/imgly/cesdk-web-examples) ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; /** * CE.SDK Plugin: Custom Labels Guide * * Demonstrates customizing UI text labels in CE.SDK: * - Overriding specific labels while keeping default locale * - Customizing action button labels (Export, Save, Delete, etc.) * - Changing navigation labels (Back, Close, Done) * - Modifying panel and component labels * - Runtime label updates * - Common customization scenarios for branding */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Enable features to demonstrate various UI labels cesdk.feature.enable('ly.img.fill'); cesdk.feature.enable('ly.img.adjustment'); cesdk.feature.enable('ly.img.layer'); cesdk.feature.enable('ly.img.settings'); // Load assets and create scene await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page dimensions const pageWidth = 800; const pageHeight = 600; engine.block.setWidth(page, pageWidth); engine.block.setHeight(page, pageHeight); // ===== Custom Label Translations ===== // Apply all custom label translations in a single call // This demonstrates customizing multiple UI elements at once // Example 1: Undo Button Label // Visible in the navigation bar cesdk.i18n.setTranslations({ en: { 'common.undo': 'Revert' } }); // Example 2: Elements Dock Button // Visible in the dock/library panel cesdk.i18n.setTranslations({ en: { 'component.library.elements': 'Shapes' } }); // Example 3: Image Dock Button // Visible in the dock/library panel cesdk.i18n.setTranslations({ en: { 'libraries.ly.img.image.label': 'Photos' } }); // Example 4: Add Page Button // Visible in page management controls cesdk.i18n.setTranslations({ en: { 'action.page.add': 'New Page' } }); // Example 5: Preview Button // Visible in the navigation bar or view controls cesdk.i18n.setTranslations({ en: { 'common.mode.preview': 'View Mode' } }); // Create a single text block showing all customizations const textBlock = engine.block.create('text'); const labelText = `Custom Labels Applied: 1. "Undo" → "Revert"2. "Elements" → "Shapes"3. "Images" → "Photos"4. "Add Page" → "New Page"5. "Preview" → "View Mode" Check the navigation bar, dock, and menus to see these changes!`; engine.block.setString(textBlock, 'text/text', labelText); engine.block.setWidth(textBlock, pageWidth * 0.8); engine.block.setHeight(textBlock, pageHeight * 0.8); engine.block.setPositionX(textBlock, pageWidth * 0.1); engine.block.setPositionY(textBlock, pageHeight * 0.1); engine.block.setFloat(textBlock, 'text/fontSize', 30); engine.block.appendChild(page, textBlock); // To discover available translation keys: // 1. Download en.json from CDN: // https://cdn.img.ly/packages/imgly/cesdk-js/$VERSION$/assets/i18n/en.json // 2. Inspect UI with browser DevTools to find key names // 3. Check console logs when interacting with UI components // Select the text block to show it in the canvas engine.block.setSelected(textBlock, true); }} export default Example; ``` CreativeEditor SDK (CE.SDK) provides extensive customization of UI text through its internationalization system. Custom labels allow you to override specific UI text elements without changing the entire interface language. While the full localization system manages complete language translations, custom labels focus on individual text elements. You can customize button labels, menu items, tooltips, and other UI text to match your application’s terminology and brand voice. This guide demonstrates how to replace default labels like “Export” with “Download” or “Delete” with “Remove” to align the editor with your users’ expectations. ## Understanding Custom Labels[#](#understanding-custom-labels) Custom labels let you modify individual UI text strings while keeping the rest of the interface in its default language. You can change “Export” to “Download”, “Back” to “Close”, or “Delete” to “Remove” - adjusting terminology to match your users’ expectations and your product’s vocabulary. The CE.SDK uses a key-value translation system where each UI element has a unique translation key (e.g., `common.export`, `action.block.delete`). By providing custom values for these keys, you override the default text throughout the interface. ## Translation Key Structure[#](#translation-key-structure) Translation keys in CE.SDK follow a hierarchical naming convention: ``` category.component.property ``` **Common Categories:** * `action` - Action buttons and menu items (e.g., `action.block.delete`, `action.image.crop`) * `common` - Frequently used labels across the interface (e.g., `common.save`, `common.export`) * `panel` - Panel and inspector titles (e.g., `panel.inspector.title`, `panel.assetLibrary.title`) * `component` - Component-specific labels (e.g., `component.canvas.openLibrary`) * `input` - Form input labels and placeholders * `meta` - Special metadata keys (e.g., `meta.currentLanguage`) ## Customizing Undo Button Label[#](#customizing-undo-button-label) The undo button appears in the top navigation bar and is one of the most commonly used actions. Here we change “Undo” to “Revert” using the `cesdk.i18n.setTranslations()` API: ``` // Example 1: Undo Button Label// Visible in the navigation barcesdk.i18n.setTranslations({ en: { 'common.undo': 'Revert' }}); ``` The API accepts an object where the first key is the locale code (`en` for English), and the value is an object mapping translation keys to custom strings. The system merges your custom labels with the default translations, overriding only the keys you specify. ## Customizing Elements Dock Button[#](#customizing-elements-dock-button) The elements button appears in the dock/library panel and provides access to design elements. Here we change “Elements” to “Shapes”: ``` // Example 2: Elements Dock Button// Visible in the dock/library panelcesdk.i18n.setTranslations({ en: { 'component.library.elements': 'Shapes' }}); ``` This customization is immediately visible in the dock interface, making it clear that users can access shapes and design elements from this button. ## Customizing Image Dock Button[#](#customizing-image-dock-button) The image library button appears in the dock/library panel. Here we change “Images” to “Photos”: ``` // Example 3: Image Dock Button// Visible in the dock/library panelcesdk.i18n.setTranslations({ en: { 'libraries.ly.img.image.label': 'Photos' }}); ``` This change uses the library-specific translation key to customize how the image library appears in the dock, aligning with consumer-friendly terminology. ## Customizing Add Page Button[#](#customizing-add-page-button) The add page action appears in page management controls. Here we change “Add Page” to “New Page”: ``` // Example 4: Add Page Button// Visible in page management controlscesdk.i18n.setTranslations({ en: { 'action.page.add': 'New Page' }}); ``` This customization affects page management buttons and actions, providing clearer terminology for creating new pages in multi-page designs. ## Customizing Preview Button[#](#customizing-preview-button) The preview button appears in the navigation bar or view controls. Here we change “Preview” to “View Mode”: ``` // Example 5: Preview Button// Visible in the navigation bar or view controlscesdk.i18n.setTranslations({ en: { 'common.mode.preview': 'View Mode' }}); ``` This change affects the preview/view mode button, making it clearer that users are switching to a different viewing mode rather than just previewing their work. ## Discovering Available Labels[#](#discovering-available-labels) To find which labels you can customize, CE.SDK provides several approaches: **1\. Download the English Translation File** The complete list of translation keys is available in the English translation file hosted on CE.SDK’s CDN: ``` https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/assets/i18n/en.json ``` This JSON file contains all translation keys with their default English values. You can search for specific labels or browse categories to find the keys you need. **2\. Inspect UI with Browser DevTools** Use browser developer tools to inspect UI elements and identify their translation keys: ``` // To discover available translation keys:// 1. Download en.json from CDN:// https://cdn.img.ly/packages/imgly/cesdk-js/$VERSION$/assets/i18n/en.json// 2. Inspect UI with browser DevTools to find key names// 3. Check console logs when interacting with UI components ``` The console logs and network requests often reveal translation key names when you interact with UI components. **3\. Reference the Translation Key Categories** Common patterns for finding translation keys: * **Action buttons**: Look for `action.{component}.{operation}` keys * **Common UI**: Check `common.{label}` keys for frequently used text * **Panel titles**: Use `panel.{panelName}.title` keys * **Component labels**: Search for `component.{componentName}.{property}` keys ## Best Practices[#](#best-practices) **Override Only What You Need** The translation system merges your custom labels with defaults, so you only need to specify the keys you want to change. Don’t copy the entire translation file - provide only the overrides you need: ``` // ✅ Good: Override only specific labelscesdk.i18n.setTranslations({ en: { 'common.undo': 'Revert', 'component.library.elements': 'Shapes' }}); // ❌ Avoid: Duplicating entire translation file// This creates maintenance burden and makes updates difficult ``` **Maintain Consistency Across Related Labels** When customizing labels, consider related operations and ensure consistent terminology: ``` cesdk.i18n.setTranslations({ en: { // Consistent library terminology across all dock buttons 'component.library.elements': 'Shapes', 'libraries.ly.img.image.label': 'Photos', 'libraries.ly.img.text.label': 'Typography', 'libraries.ly.img.sticker.label': 'Graphics' }}); ``` **Test Labels in Context** UI labels have length constraints based on their location. Test your custom labels in the actual interface to ensure they fit properly: * **Button labels**: Keep concise (1-2 words) * **Menu items**: Can be slightly longer (2-4 words) * **Tooltips**: Can include brief descriptions * **Panel titles**: Should be clear but compact **Document Your Custom Label Mappings** Maintain documentation of your custom label mappings for team reference: ``` /** * Custom Labels Configuration * * Brand-aligned terminology for immediately visible UI elements: * - "Undo" → "Revert" (navigation bar - clearer action terminology) * - "Elements" → "Shapes" (dock button - more specific) * - "Images" → "Photos" (dock button - consumer-friendly) * - "Add Page" → "New Page" (page controls - clearer action) */cesdk.i18n.setTranslations({ en: { 'common.undo': 'Revert', 'component.library.elements': 'Shapes', 'libraries.ly.img.image.label': 'Photos', 'action.page.add': 'New Page' }}); ``` ## Custom Labels vs. Full Localization[#](#custom-labels-vs-full-localization) Custom labels and full localization serve different purposes: **Custom Labels** (this guide): * Override specific UI text elements * Keep the default language (usually English) * Match your brand terminology * Refine specific translations * Use case: Branding, terminology alignment, UX refinement **Full Localization** ([see Localization guide](/user-interface/localization)): * Switch entire interface to different languages * Provide complete translation sets * Support multiple language locales * Use case: International markets, multilingual users You can combine both approaches - set a locale for the primary language, then override specific labels for branding: ``` // Set German as the primary localecesdk.i18n.setLocale('de'); // Override specific labels even in Germancesdk.i18n.setTranslations({ de: { 'common.export': 'Herunterladen' // Custom German label }}); ``` ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | `cesdk.i18n.setTranslations(definition)` | Sets or overrides UI text labels for specific locales | | `cesdk.i18n.getLocale()` | Gets the current interface locale | | `cesdk.i18n.setLocale(locale)` | Sets the interface language to a different locale | ### cesdk.i18n.setTranslations()[#](#cesdki18nsettranslations) **Signature:** ``` setTranslations(definition: { [locale: string]: object }): void ``` **Parameters:** * `definition` - Object mapping locale codes (e.g., `en`, `de`) to translation objects. Each translation object maps translation keys to custom strings. **Behavior:** * Merges with existing translations, overriding only the keys you specify * Changes apply immediately throughout the interface * Persists until changed or cleared * Does not reset when switching scenes **Example:** ``` cesdk.i18n.setTranslations({ en: { 'common.undo': 'Revert', 'libraries.ly.img.image.label': 'Photos' }}); ``` ### Common Translation Keys[#](#common-translation-keys) | Translation Key | Description | | --- | --- | | `common.undo` | Undo button label in navigation bar | | `common.redo` | Redo button label in navigation bar | | `common.export` | Export button label in navigation bar | | `common.mode.preview` | Preview/view mode button label | | `component.library.elements` | Elements library button in dock | | `libraries.ly.img.image.label` | Image library button in dock | | `libraries.ly.img.text.label` | Text library button in dock | | `libraries.ly.img.sticker.label` | Sticker library button in dock | | `action.block.duplicate` | Duplicate element action label | | `action.block.delete` | Delete element action label | | `action.page.add` | Add page button label | | `action.page.duplicate` | Duplicate page action label | | `action.page.delete` | Delete page action label | ### Discovering Translation Keys[#](#discovering-translation-keys) **Translation Files:** * English: `https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/assets/i18n/en.json` * German: `https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/assets/i18n/de.json` **Special Syntax:** * `$t(key)` - References another translation key (e.g., `"action.block.delete": "$t(common.delete)"` uses the value of `common.delete`) ## Next Steps[#](#next-steps) * [Localization](angular/user-interface/localization-508e20/) \- Learn about managing multiple languages in CE.SDK * [Theming](angular/user-interface/appearance/theming-4b0938/) \- Customize the visual appearance of the interface * [Custom UI Components](angular/user-interface/ui-extensions-d194d1/) \- Build custom UI elements for your workflow --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/appearance/change-ui-font-49b6fc) # Change UI Font Customize the font family used throughout the CE.SDK editor interface to match your application’s branding. ![CE.SDK editor with monospace font applied to all UI panels, buttons, and controls](/docs/cesdk/_astro/browser.hero.BwtTBMsW_Z1CVfdp.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-appearance-change-ui-font-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-appearance-change-ui-font-browser) CE.SDK’s UI uses CSS custom properties for typography, allowing you to apply a custom font to all editor elements—panels, buttons, labels, and inputs—through a single CSS variable. ``` import type CreativeEditorSDK from '@cesdk/cesdk-js'; export async function initialize(cesdk: CreativeEditorSDK) { // Create a design scene to showcase the UI font customization await cesdk.createDesignScene(); // Add a text block to demonstrate the design canvas const page = cesdk.engine.block.findByType('page')[0]; const text = cesdk.engine.block.create('text'); cesdk.engine.block.setString(text, 'text/text', 'Monospace UI Font'); cesdk.engine.block.setWidth(text, 400); cesdk.engine.block.setPositionX(text, cesdk.engine.block.getWidth(page) / 2 - 200); cesdk.engine.block.setPositionY(text, cesdk.engine.block.getHeight(page) / 2 - 50); cesdk.engine.block.appendChild(page, text); // You can verify the current theme and scale settings const currentTheme = cesdk.ui.getTheme(); // 'light' or 'dark' const currentScale = cesdk.ui.getScale(); // 'normal', 'large', or 'modern' console.log('Current theme:', currentTheme); console.log('Current scale:', currentScale); // Optional: Change theme to see font in different contexts // Uncomment to test: // cesdk.ui.setTheme('dark'); // cesdk.ui.setScale('large'); // Zoom to fit the page await cesdk.engine.scene.zoomToBlock(page);} ``` This guide covers loading custom fonts from various sources, setting the CSS variable, verifying the application, and troubleshooting common issues. ## Understanding the UI Theming System[#](#understanding-the-ui-theming-system) CE.SDK’s typography uses CSS custom properties scoped to `.ubq-public` with theme and scale attributes. The `--ubq-typography-font_family` variable controls all UI elements, providing centralized font customization. All UI text inherits from this single variable. When you set `--ubq-typography-font_family`, panels, buttons, dropdowns, inputs, and labels all update to use your chosen font. ## Loading Custom Fonts[#](#loading-custom-fonts) Before setting the CSS variable, fonts must be available in the browser. You can use system fonts, self-host font files, load from Google Fonts, or use other providers. ### Using Self-Hosted Fonts[#](#using-self-hosted-fonts) Define `@font-face` rules in your CSS with woff2 format for modern browsers and woff fallback: ``` @font-face { font-family: 'CustomFont'; src: url('/fonts/CustomFont-Regular.woff2') format('woff2'), url('/fonts/CustomFont-Regular.woff') format('woff'); font-weight: 400; font-style: normal;} @font-face { font-family: 'CustomFont'; src: url('/fonts/CustomFont-SemiBold.woff2') format('woff2'), url('/fonts/CustomFont-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal;} ``` CE.SDK uses font weights 450 and 600 throughout the interface. Load these weights or the closest alternatives (400 and 600 work well). ### Using Google Fonts[#](#using-google-fonts) Add `` tags to your HTML `` to load fonts from Google Fonts CDN. Place these before CE.SDK initialization to prevent flash of unstyled text. ``` ``` The `preconnect` links establish early connections to Google’s servers, reducing latency. The main font link loads Roboto with multiple weights. The `display=swap` parameter shows fallback text immediately while the custom font loads. ### Using Adobe Fonts or Other Providers[#](#using-adobe-fonts-or-other-providers) Load fonts according to the provider’s documentation, typically via `` or ` ``` By default, the CreativeEditor SDK ships with an extensive list of commonly used formats, as shown below: ![](/docs/cesdk/_astro/page-presets.Bly6ylud_Z2mPx2y.webp) The CE.SDK can be configured with a series of page formats that can then be selected in the editor by a user with the `Creator` [role](angular/concepts/editing-workflow-032d27/) . The available page formats can be controlled through the `config.ui.pagePresetLibraries` object and by creating custom asset sources or updating the content.json from the default asset source on the CDN. To enable the CE.SDK defaults enable our default asset sources by using `addDefaultAssetSources`. ``` await addDefaultAssetSources(); ``` ## Configuring Custom Page Formats[#](#configuring-custom-page-formats) You can define your own page formats by [creating a custom asset source](angular/import-media/from-remote-source/unsplash-8f31f0/) and by registering it in the configuration under `ui.pagePresetLibraries`. Each of the asset objects in the asset source must define a value for its `payload.transformPreset` property. ``` { id: 'din-a1-portrait', label: { en: 'DIN A1 Portrait' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/din-a1-portrait.png` }, payload: { transformPreset: { type: 'FixedSize', width: 594, height: 841, designUnit: 'Millimeter' } }} ``` * `type: type` specifies the preset type. ``` type: "FixedSize", ``` * `width: number` specifies the width of the page in the specified design unit. ``` width: 1280, ``` * `height: number` specifies the height of the page in the specified design unit. ``` height: 720, ``` * `unit: 'Millimeter'|'Inch'|'Pixel'` describes unit in which `width`, `height` and `bleedMargin` are specified. ``` designUnit: 'Pixel', ``` * `default: true` can be used to mark a page format as the default format. The asset source must be available before the scene initialization for the default to take effect. ``` default: true, ``` ## Page Orientation[#](#page-orientation) The initial orientation of a page is simply defined by the `width` and `height` properties in the format definition. For example, the `DIN A6` format defined above defaults to landscape, the `American Letter` to portrait. The orientation of a page can be changed in the editor with the button inside the document inspector. This button is disabled if the `fixedOrientation` property of the applied preset set to `true`. ## Full Code[#](#full-code) Here’s the full code for configuring the default page formats: ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' }), ui: { stylesheets: { /* ... */ }, elements: { /* ... */ } }}; CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => { // Do something with the instance of CreativeEditor SDK // Set scale using the new API instance.ui.setScale('normal'); // Populate the asset library with default / demo asset sources. instance.addDefaultAssetSources(); instance.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); // Add a custom page preset asset source. instance.engine.asset.addLocalSource('my-custom-formats'); instance.engine.asset.addAssetToSource( 'my-custom-formats', { id: 'din-a1-portrait', label: { en: 'DIN A1 Portrait' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/din-a1-portrait.png` }, payload: { transformPreset: { type: 'FixedSize', width: 594, height: 841, designUnit: 'Millimeter' } } } ); // Update page presets library entry instance.ui.updateAssetLibraryEntry('ly.img.pagePresets', { sourceIds: [ // 'ly.img.page.presets', // 'ly.img.page.presets.video', 'my-custom-formats' ] }); await instance.createDesignScene();}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/customization/navigation-bar-4e5d39) # Navigation Bar Actions that affect browser navigation (e.g. going back or closing the editor), have global effects on the scene (e.g. undo/redo and zoom), or process the scene in some way (e.g. saving and exporting) should be placed in the navigation bar. ## Show or Hide the Navigation[#](#show-or-hide-the-navigation) `show: boolean` is used to show or hide the complete navigation `position: string` is used to set the location of the navigation bar to either top or bottom. ``` import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', ui: { elements: { /* ... */ navigation: { show: true, // 'false' to hide the navigation completely position: 'top', // 'top' or 'bottom' /* ... */ }, panels: { /* ... */ }, dock: { /* ... */ }, libraries: { /* ... */ }, blocks: { /* ... */ }, }, },}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Set the editor view mode cesdk.ui.setView('default'); // Do something with the instance of CreativeEditor SDK, for example: // Populate the asset library with default / demo asset sources. cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true, }); await cesdk.createDesignScene();}); ``` ## Configure Navigation Buttons[#](#configure-navigation-buttons) Navigation bar components are configured dynamically using the Navigation Bar Order API. The `insertNavigationBarOrderComponent` method allows you to add or insert components into the navigation bar. ### Adding Action Buttons[#](#adding-action-buttons) Use the actions dropdown component to add action buttons to the navigation bar: ``` import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', ui: { elements: { /* ... */ navigation: { show: true, // 'false' to hide the navigation completely position: 'top', // 'top' or 'bottom' }, panels: { /* ... */ }, dock: { /* ... */ }, libraries: { /* ... */ }, blocks: { /* ... */ }, }, },}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Configure navigation bar actions after initialization cesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', 'ly.img.importScene.navigationBar', 'ly.img.exportImage.navigationBar', 'ly.img.exportPDF.navigationBar', 'ly.img.exportScene.navigationBar', ], }); // Add back button at the beginning cesdk.ui.insertNavigationBarOrderComponent( 'first', { id: 'ly.img.back.navigationBar', onClick: () => { // Handle back action window.history.back(); }, }, 'before', ); // Add close button at the end cesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.close.navigationBar', onClick: () => { // Handle close action window.close(); }, }); // Populate the asset library with default / demo asset sources. cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true, }); await cesdk.createDesignScene();}); ``` ## Custom Call-To-Action Buttons[#](#custom-call-to-action-buttons) Custom actions are added using the Navigation Bar Order API. Add custom buttons to the actions dropdown menu with full control over their behavior: * `label` a string, which can be an i18n key that will be looked up in the translation table. * `icon` defines the icon shown on the button. You can use any of the icon ids found within our IMG.LY Icon Set ‘Essentials’ ( [see full list here](angular/user-interface/appearance/icons-679e32/) ), or any icon id that you’ve added yourself using the `addIconSet` API ( [see details here](angular/user-interface/appearance/icons-679e32/) ). * `onClick` a custom callback function with the signature `() => void | Promise`. This function is called when the button is clicked. If the function returns a promise, the button is disabled and a spinner is shown on the button until the promise resolves. ``` import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', ui: { elements: { /* ... */ navigation: { show: true, // 'false' to hide the navigation completely position: 'top', // 'top' or 'bottom' }, panels: { /* ... */ }, dock: { /* ... */ }, libraries: { /* ... */ }, blocks: { /* ... */ }, }, },}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Add actions dropdown with custom buttons cesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ // Default save button with custom behavior { id: 'ly.img.saveScene.navigationBar', onClick: async () => { const scene = await cesdk.engine.scene.saveToString(); console.log('Scene ready to save:', scene.length, 'characters'); // Production: // await saveToBackend(scene); cesdk.ui.showNotification('Scene saved successfully'); }, }, // Custom action button { id: 'ly.img.action.navigationBar', key: 'custom-action', // Required for custom actions label: 'common.custom', // string or i18n key icon: '@imgly/Download', // icon id from our 'Essentials' set, or a custom icon id onClick: () => { // callback signature is `() => void | Promise` // place custom functionality here }, }, // Share button { id: 'ly.img.shareScene.navigationBar', onClick: () => { // Custom share logic navigator.share({ title: 'My Design', text: 'Check out my design!', url: window.location.href, }); }, }, ], }); // Populate the asset library with default / demo asset sources. cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true, }); await cesdk.createDesignScene();}); ``` ## Rearrange Components[#](#rearrange-components) There are 6 APIs for getting, setting, updating, removing, and inserting components in the Navigation Bar. The content of the Navigation Bar changes based on the current [edit mode](angular/concepts/edit-modes-1f5b6c/) (`'Transform'` (the default), `'Text'`, `'Crop'`, `'Trim'`, or a custom value), so all APIs accept an `orderContext` argument to specify the mode. For example usage of similar APIs, see also [Moving Existing Buttons](angular/user-interface/customization/rearrange-buttons-97022a/) or [Adding New Buttons](angular/user-interface/ui-extensions/add-new-button-74884d/) in the Guides section. Note that the Navigation Bar is also configurable using our [UI configuration](angular/user-interface/customization-72b2f8/) . ### Get the Current Order[#](#get-the-current-order) ``` getNavigationBarOrder( orderContext: OrderContext = { editMode: 'Transform' }) ``` When omitting the `orderContext` parameter, the order for the `'Transform'` edit mode is returned, e.g. ``` cesdk.ui.getNavigationBarOrder();// => [// {id: 'ly.img.back.navigationBar'},// {id: 'ly.img.undoRedo.navigationBar'},// ...// ] ``` ### Set a new Order[#](#set-a-new-order) ``` setNavigationBarOrder( navigationBarOrder: (NavigationBarComponentId | OrderComponent)[], orderContext: OrderContext = { editMode: 'Transform' }) ``` When omitting the `orderContext` parameter, the order is set for the default edit mode (`'Transform'`), e.g.: ``` // Sets the order for transform mode by defaultcesdk.ui.setNavigationBarOrder(['my.component.for.transform.mode']); ``` ### Update Components[#](#update-components) ``` updateNavigationBarOrderComponent( matcher: OrderComponentMatcher>, update: NavigationBarComponentId | Partial> | ((component: OrderComponent) => Partial>), orderContext?: OrderContext) ``` Updates existing components in the navigation bar. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches The update can be: * A new component ID string * A partial object with updated properties * A function that receives the current component and returns the updated one Returns an object with the number of updated components and the updated order array. ``` // Change the save button label and style for a specific contextcesdk.ui.updateNavigationBarOrderComponent( 'ly.img.saveScene.navigationBar', component => ({ ...component, label: 'Save Draft', color: 'accent', }),); // Disable export buttons when user doesn't have export permissionscesdk.ui.updateNavigationBarOrderComponent( { id: 'ly.img.exportImage.navigationBar' }, { isDisabled: true },); // Replace the default actions with a custom action buttoncesdk.ui.updateNavigationBarOrderComponent( component => component.id === 'ly.img.actions.navigationBar', { id: 'ly.img.customAction.navigationBar', label: 'Publish', icon: '@imgly/Share', },); ``` ### Remove Components[#](#remove-components) ``` removeNavigationBarOrderComponent( matcher: OrderComponentMatcher>, orderContext?: OrderContext) ``` Removes components from the navigation bar. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches Returns an object with the number of removed components and the updated order array. ``` // Remove PDF export option for mobile userscesdk.ui.removeNavigationBarOrderComponent('ly.img.exportPDF.navigationBar'); // Remove all export buttons for users without export permissionscesdk.ui.removeNavigationBarOrderComponent(component => component.id.includes('export'),); // Remove the close button in embedded modecesdk.ui.removeNavigationBarOrderComponent({ id: 'ly.img.close.navigationBar',}); ``` ### Insert Components[#](#insert-components) ``` insertNavigationBarOrderComponent( matcher: OrderComponentMatcher>, component: NavigationBarComponentId | OrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext) ``` Inserts new components into the navigation bar. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index (e.g., `2`) * A component ID string (e.g., `'ly.img.saveScene.navigationBar'`) * A partial object describing the component to match (e.g., `{ id: 'ly.img.saveScene.navigationBar' }`) * A function that receives the component and index, returning true if it matches The location can be: * `'before'` - Insert before the matched component * `'after'` - Insert after the matched component (default) * `'replace'` - Replace the matched component Returns the updated navigation bar order array. ``` // Add actions dropdown at the end of the navigation barcesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', 'ly.img.exportImage.navigationBar', ],}); // Add a back button at the beginningcesdk.ui.insertNavigationBarOrderComponent( 'first', { id: 'ly.img.back.navigationBar', onClick: () => window.history.back(), }, 'before',); // Insert a custom button after the save buttoncesdk.ui.insertNavigationBarOrderComponent( { id: 'ly.img.saveScene.navigationBar' }, { id: 'ly.img.custom.navigationBar', label: 'Custom Action', onClick: () => console.log('Custom action'), }, 'after',); ``` ## Navigation Bar Components[#](#navigation-bar-components) The following lists the default Navigation Bar components available within CE.SDK. ### Available Action Components[#](#available-action-components) These components can be added to the `ly.img.actions.navigationBar` container: | Component ID | Description | | --- | --- | | `ly.img.saveScene.navigationBar` | Save scene action - saves the current scene | | `ly.img.importScene.navigationBar` | Load scene action - loads a scene file | | `ly.img.exportScene.navigationBar` | Download scene action - downloads the current scene | | `ly.img.exportImage.navigationBar` | Export as image - exports the design as an image file | | `ly.img.exportPDF.navigationBar` | Export as PDF - exports the design as a PDF file | | `ly.img.exportVideo.navigationBar` | Export as video - exports the design as a video file | | `ly.img.exportArchive.navigationBar` | Create archive - creates an archive of the scene | | `ly.img.importArchive.navigationBar` | Load archive - loads an archive file | | `ly.img.shareScene.navigationBar` | Share action - custom share functionality | | `ly.img.action.navigationBar` | Custom action button (requires `key` property) | ### Layout Helpers[#](#layout-helpers) | Component ID | Description | | --- | --- | | `ly.img.separator` | Adds a vertical separator (`
` element) in the Navigation Bar. Separators follow some special layouting rules: \- If 2 or more separators end up next to each other (e.g. due to other components not rendering), **only 1** separator will be rendered. \- Separators that end up being the first or last element in the Inspector Bar will **not** be rendered. \- Separators directly adjacent _to the left side_ of a spacer (see below) will **not** be rendered. | | `ly.img.spacer` | Adds horizontal spacing in the Navigation Bar. Spacers will try to fill all available whitespace, by distributing the available space between all spacers found in the Navigation Bar. | ### Common Controls[#](#common-controls) | Component ID | Description | | --- | --- | | `ly.img.title.navigationBar` | Title: A section displaying the title of the currently opened scene file. The title displayed on the UI is set by the `config.ui.elements.navigation.title` parameter. If this parameter is not specified, the system will instead check the component’s payload. To define a payload, rather than adding the ID directly to the order, insert an object structured like this: `{ id: 'ly.img.title.navigationBar', title: 'My Scene' }` | | `ly.img.back.navigationBar` | Back button: A button used to navigate to the previous page. Note that this button is hidden by default, and can be configured using the UI Elements configuration. | | `ly.img.close.navigationBar` | Close button: A button used to close the editor. Note that this button is hidden by default, and can be configured using the UI Elements configuration. | | `ly.img.undoRedo.navigationBar` | Undo/Redo controls: Two buttons for un-doing and re-doing recent changes. | | `ly.img.pageResize.navigationBar` | Page Resize button: A button used to control the page resize panel. | | `ly.img.zoom.navigationBar` | Zoom controls: Two buttons for zooming the view in and out, separated by a third button showing the current zoom level and opening a dropdown offering common zoom operations (Auto-Fit Page, Fit Page, Fit Selection, 200% Zoom, 100% Zoom, 50% Zoom, Zoom In, Zoom Out). | | `ly.img.preview.navigationBar` | Preview button: Toggles Preview mode, which allows viewing and editing the scene like an Adopter would (e.g. with all Placeholder constraints enforced). Changes made in Preview are not saved and will be discarded when leaving Preview. | | `ly.img.actions.navigationBar` | Call To Action buttons: A dropdown container for action buttons. You can customize its children to include any combination of save, export, load, and custom action buttons. The first child appears as a prominent button in the navigation bar, while additional children appear in the dropdown menu. | ## Default Order[#](#default-order) The default order of the Navigation Bar is the following: ``` [ 'ly.img.undoRedo.navigationBar', 'ly.img.pageResize.navigationBar', 'ly.img.spacer', 'ly.img.title.navigationBar', 'ly.img.spacer', 'ly.img.zoom.navigationBar', 'ly.img.preview.navigationBar',]; ``` ## Integration with Callbacks API[#](#integration-with-callbacks-api) Action buttons in the navigation bar automatically trigger the corresponding callbacks registered with the Callbacks API when used as string IDs. You can also provide custom onClick handlers to override the default behavior. ### Using Registered Callbacks[#](#using-registered-callbacks) ``` // Register callbacks with the Callbacks APIcesdk.actions.register('saveScene', async () => { const scene = await cesdk.engine.scene.saveToString(); console.log('Scene ready to save:', scene.length, 'characters'); // Production: // await fetch('/api/scenes', { // method: 'POST', // body: JSON.stringify({ scene }), // headers: { 'Content-Type': 'application/json' }, // }); cesdk.ui.showNotification('Scene saved successfully');}); cesdk.actions.register('exportDesign', async options => { const { blobs, options: exportOptions } = await cesdk.utils.export(options); console.log('Export ready:', blobs[0].size, 'bytes'); // Production: // await uploadToCDN(blobs[0]); cesdk.ui.showNotification('Export successful');}); // Add navigation buttons that will use registered callbackscesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', // Uses registered saveScene callback 'ly.img.exportImage.navigationBar', // Uses registered exportDesign callback ],}); ``` ### Custom onClick Override[#](#custom-onclick-override) ``` // Override default callback with custom onClick handlercesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.saveScene.navigationBar', onClick: async () => { // Custom logic that overrides the registered callback const scene = await cesdk.engine.scene.saveToString(); console.log('Scene ready for custom save:', scene.length, 'characters'); // Production: // await customSaveLogic(scene); }, }, ],}); ``` ## Default Behaviors[#](#default-behaviors) The following action components trigger their corresponding callbacks when used as string IDs: | Component ID | Callback Triggered | Default Behavior | | --- | --- | --- | | `ly.img.saveScene.navigationBar` | `saveScene` | Downloads the scene as a `.scene` file to the user’s device | | `ly.img.importScene.navigationBar` | `importScene` | Opens a file picker to load a `.scene` file from the user’s device | | `ly.img.exportScene.navigationBar` | `exportScene` | Downloads the current scene as a `.scene` file | | `ly.img.exportImage.navigationBar` | `exportDesign` | Exports and downloads the design as an image file (PNG/JPEG) | | `ly.img.exportPDF.navigationBar` | `exportDesign` | Exports and downloads the design as a PDF file | | `ly.img.exportVideo.navigationBar` | `exportDesign` | Exports and downloads the design as a video file (MP4) | | `ly.img.exportArchive.navigationBar` | `exportScene` | Creates and downloads an archive of the scene with all assets | | `ly.img.importArchive.navigationBar` | `importScene` | Opens a file picker to load an archive file | | `ly.img.shareScene.navigationBar` | `shareScene` | No default behavior - requires callback registration | ## Using Default vs Custom Behaviors[#](#using-default-vs-custom-behaviors) ### Example 1: Default Behavior[#](#example-1-default-behavior) When using just the string ID without registering a custom callback, the default behavior is triggered (downloads the file to the user’s device): ``` // Using default behavior - downloads scene file to user's devicecesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', // Uses default download behavior ],}); ``` ### Example 2: Custom Behavior via Registered Callback[#](#example-2-custom-behavior-via-registered-callback) Register a custom callback to override the default behavior for all instances of the button: ``` // Register custom saveScene callbackcesdk.actions.register('saveScene', async () => { const scene = await cesdk.engine.scene.saveToString(); console.log('Scene ready to save:', scene.length, 'characters'); // Production: // await fetch('/api/scenes', { // method: 'POST', // body: JSON.stringify({ scene }), // headers: { 'Content-Type': 'application/json' }, // }); cesdk.ui.showNotification('Scene saved to cloud');}); // String ID now uses the registered callback instead of defaultcesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', // Triggers registered saveScene callback ],}); ``` ### Example 3: Custom Behavior via onClick Handler[#](#example-3-custom-behavior-via-onclick-handler) Provide a custom onClick handler directly in the component configuration to override both default and registered callbacks: ``` // Override with custom onClick handlercesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.saveScene.navigationBar', onClick: async () => { // This custom onClick overrides any registered callback const scene = await cesdk.engine.scene.saveToString(); console.log( 'Scene ready for alternative save:', scene.length, 'characters', ); // Production: // await alternativeSaveLogic(scene); cesdk.ui.showNotification('Saved with alternative method'); }, }, ],}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/customization/hide-elements-fe945c) # Hide Elements CE.SDK provides flexible APIs to control the visibility of every UI element. You can hide elements using the Feature API (which completely removes features from the UI), ordering APIs (which control what appears in ordered lists like navigation bars), or panel management APIs (which control panel state). This guide demonstrates how to hide and show different UI elements to create custom editing experiences tailored to your application’s needs. ![Hide Elements example showing CE.SDK with various UI elements hidden](/docs/cesdk/_astro/browser.hero.B9eelvQX_215CXi.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples)[ GitHub](https://github.com/imgly/cesdk-web-examples) ## Understanding UI Element Hiding Approaches[#](#understanding-ui-element-hiding-approaches) CE.SDK provides three methods to control UI visibility: the Feature API for disabling features entirely, ordering APIs for controlling component layout, and panel management for dynamic show/hide behavior. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // ===== Hide Elements Examples ===== // Configure UI visibility before loading assets and creating scene // Show only navigation bar and inspector bar, hide everything else // Hide canvas bar and canvas menu using Feature API cesdk.feature.disable(['ly.img.canvas.bar', 'ly.img.canvas.menu']); // Hide the entire dock using Feature API cesdk.feature.disable('ly.img.dock'); // Hide UI elements using ordering APIs (alternative method) // Setting empty array removes all components cesdk.ui.setDockOrder([]); cesdk.ui.setCanvasBarOrder([], 'top'); cesdk.ui.setCanvasMenuOrder([]); // Close all panels using wildcard pattern cesdk.ui.closePanel('//ly.img.panel/*'); // Check if panels are open const inspectorPanelId = '//ly.img.panel/inspector'; const isInspectorOpen = cesdk.ui.isPanelOpen(inspectorPanelId); console.log('Inspector panel open:', isInspectorOpen); // Find all panels const allPanels = cesdk.ui.findAllPanels(); console.log('All panels:', allPanels); // Using glob patterns to control multiple features const navigationFeatures = cesdk.feature.list({ matcher: 'ly.img.navigation.*' }); console.log('Navigation features:', navigationFeatures); // Disable all navigation features at once using wildcard pattern // cesdk.feature.disable('ly.img.navigation.*'); // Check if features are enabled const isDockEnabled = cesdk.feature.isEnabled('ly.img.dock'); const isNavBarEnabled = cesdk.feature.isEnabled('ly.img.navigation.bar'); console.log('Dock enabled:', isDockEnabled); console.log('Navigation bar enabled:', isNavBarEnabled); // Hide notification toasts cesdk.feature.disable('ly.img.notifications'); // Or hide specific notification types: // cesdk.feature.disable('ly.img.notifications.undo'); // cesdk.feature.disable('ly.img.notifications.redo'); // ===== Load Assets and Create Scene ===== // Now that UI is configured, load assets and create scene await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Add a single image to the canvas const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri); engine.block.appendChild(page, imageBlock); // Center and fit the image on the page const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const imageWidth = engine.block.getWidth(imageBlock); const imageHeight = engine.block.getHeight(imageBlock); // Calculate scale to fit image within page const scaleX = pageWidth / imageWidth; const scaleY = pageHeight / imageHeight; const scale = Math.min(scaleX, scaleY) * 0.8; // 80% of page size // Apply scale and center engine.block.setWidth(imageBlock, imageWidth * scale); engine.block.setHeight(imageBlock, imageHeight * scale); const scaledWidth = engine.block.getWidth(imageBlock); const scaledHeight = engine.block.getHeight(imageBlock); engine.block.setPositionX(imageBlock, (pageWidth - scaledWidth) / 2); engine.block.setPositionY(imageBlock, (pageHeight - scaledHeight) / 2); // Select the image to show the inspector engine.block.setSelected(imageBlock, true); console.log('Hide elements example loaded successfully!'); }} export default Example; ``` ## Hiding Elements with the Feature API[#](#hiding-elements-with-the-feature-api) The Feature API is the primary way to hide UI elements in CE.SDK. When you disable a feature, it’s completely removed from the interface. You can hide various UI components including: * **Navigation Bar** (`ly.img.navigation.bar`) - Contains buttons like back, close, undo/redo, and zoom controls * **Inspector Bar** (`ly.img.inspector.bar`) - Provides access to block properties and editing controls * **Dock** (`ly.img.dock`) - Sidebar that provides quick access to assets and tools * **Notifications** (`ly.img.notifications`) - Toast messages for actions like undo and redo Here’s how to disable and hide the dock: ``` // Hide the entire dock using Feature APIcesdk.feature.disable('ly.img.dock'); ``` And how to disable and hide canvas elements: ``` // Hide canvas bar and canvas menu using Feature APIcesdk.feature.disable(['ly.img.canvas.bar', 'ly.img.canvas.menu']); ``` By passing an array to `feature.disable()`, you can hide multiple features in a single call. The Feature API also supports glob patterns with wildcards (`*`) for batch operations, and you can check feature state with `isEnabled()` before making changes. ## Hiding Elements with Ordering APIs[#](#hiding-elements-with-ordering-apis) Ordering APIs provide an alternative method for hiding UI elements by controlling what appears in component lists. Setting an empty order array removes all components from that area. This approach doesn’t disable features - it just controls layout. ``` // Hide UI elements using ordering APIs (alternative method)// Setting empty array removes all componentscesdk.ui.setDockOrder([]);cesdk.ui.setCanvasBarOrder([], 'top');cesdk.ui.setCanvasMenuOrder([]); ``` The key difference between ordering APIs and the Feature API is that ordering APIs only affect visual layout. The underlying features remain enabled and can still be accessed programmatically. ## Managing Panel Visibility[#](#managing-panel-visibility) Panels in CE.SDK can be opened and closed dynamically using the panel management APIs. This allows you to create context-sensitive interfaces that show relevant panels based on user actions. ``` // Close all panels using wildcard patterncesdk.ui.closePanel('//ly.img.panel/*'); // Check if panels are openconst inspectorPanelId = '//ly.img.panel/inspector';const isInspectorOpen = cesdk.ui.isPanelOpen(inspectorPanelId);console.log('Inspector panel open:', isInspectorOpen); // Find all panelsconst allPanels = cesdk.ui.findAllPanels();console.log('All panels:', allPanels); ``` ## Using Glob Patterns[#](#using-glob-patterns) The Feature API supports glob patterns for batch operations. This makes it easy to enable or disable groups of related features. ``` // Using glob patterns to control multiple featuresconst navigationFeatures = cesdk.feature.list({ matcher: 'ly.img.navigation.*'});console.log('Navigation features:', navigationFeatures); ``` ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | `cesdk.feature.enable(featureId)` | Enable a feature | | `cesdk.feature.disable(featureId)` | Disable a feature or array of features | | `cesdk.feature.isEnabled(featureId)` | Check if a feature is enabled | | `cesdk.feature.list({ matcher })` | List features matching a glob pattern | | `cesdk.ui.setNavigationBarOrder(order)` | Set navigation bar component order | | `cesdk.ui.setCanvasBarOrder(order, position)` | Set canvas bar component order | | `cesdk.ui.setCanvasMenuOrder(order)` | Set canvas menu component order | | `cesdk.ui.setDockOrder(order)` | Set dock component order | | `cesdk.ui.setInspectorBarOrder(order)` | Set inspector bar component order | | `cesdk.ui.openPanel(panelId)` | Open a panel | | `cesdk.ui.closePanel(panelId)` | Close a panel (supports wildcards) | | `cesdk.ui.isPanelOpen(panelId)` | Check if a panel is open | | `cesdk.ui.findAllPanels(options)` | Find all panels with optional filtering | ## Next Steps[#](#next-steps) After mastering UI element hiding, explore these related guides: * [UI Overview](angular/user-interface/overview-41101a/) \- Understanding CE.SDK’s UI architecture * [Disable or Enable Features](angular/user-interface/customization/disable-or-enable-f058e2/) \- Feature API deep dive * [Customize Dock](angular/user-interface/customization/dock-cb916c/) \- Dock customization patterns * [Customize Panels](angular/user-interface/customization/panel-7ce1ee/) \- Panel management patterns --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/customization/inspector-bar-8ca1cd) # Inspector Bar The main location for block-specific functionality is the inspector bar. Any action or setting available to the user for the currently selected block that does not appear in the canvas menu should be added here. ## Show or Hide the Inspector Bar[#](#show-or-hide-the-inspector-bar) Two different views of the editor are available: * The ‘advanced’ view always shows an inspector panel to the side of the canvas. * The ‘default’ view hides the inspector panel until it is needed, and uses a minimal inspector bar on top of the canvas instead. Use `cesdk.ui.setView()` to toggle between `'advanced'` and `'default'` view after initializing the editor. ``` import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', ui: { elements: { /* ... */ navigation: { /* ... */ }, panels: { /* ... */ }, dock: { /* ... */ }, libraries: { /* ... */ }, blocks: { /* ... */ }, }, },}; CreativeEditorSDK.create('#cesdk_container', config).then(async instance => { // Set the editor view mode instance.ui.setView('default'); // Do something with the instance of CreativeEditor SDK, for example: // Populate the asset library with default / demo asset sources. cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true, }); await cesdk.createDesignScene();}); ``` ## Show or Hide Sections[#](#show-or-hide-sections) * `opacity: boolean` shows or hides the `opacity` section in the inspector ui for every block. * `transform: boolean` shows or hides the `transform` section in the inspector ui for every block. * `adjustments: boolean` shows or hides the `adjustments` section in the inspector ui for the image block. * `filters: boolean` shows or hides the `filters` section in the inspector ui for the image block. * `effects: boolean` shows or hides the `effects` section in the inspector ui for the image block. * `blur: boolean` shows or hides the `blur` section in the inspector ui for the image block. * `crop: boolean` shows or hides the `crop` section in the inspector ui for the image block. ``` import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', ui: { elements: { /* ... */ navigation: { /* ... */ }, panels: { /* ... */ }, dock: { /* ... */ }, libraries: { /* ... */ }, blocks: { opacity: false, // true or false transform: false, // true or false '//ly.img.ubq/graphic': { adjustments: true, // true or false filters: false, // true or false effects: false, // true or false blur: true, // true or false crop: false, // true or false }, /* ... */ }, }, },}; CreativeEditorSDK.create('#cesdk_container', config).then(async instance => { // Set the editor view mode instance.ui.setView('default'); // Do something with the instance of CreativeEditor SDK, for example: // Populate the asset library with default / demo asset sources. cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true, }); await cesdk.createDesignScene();}); ``` ## Pages[#](#pages) * `manage: boolean` if `false` removes all UI elements to add/duplicate/delete pages for every role. * `format: boolean` if `false` removes all UI elements to change the format of pages for every role. * `maxDuration: number` controls the maximum allowed duration of a page, if in video mode ``` import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', ui: { elements: { /* ... */ navigation: { /* ... */ }, panels: { /* ... */ }, dock: { /* ... */ }, libraries: { /* ... */ }, blocks: { /* ... */ '//ly.img.ubq/page': { manage: true, format: true, maxDuration: 30 * 60, }, }, }, },}; CreativeEditorSDK.create('#cesdk_container', config).then(async instance => { // Set the editor view mode instance.ui.setView('default'); // Do something with the instance of CreativeEditor SDK, for example: // Populate the asset library with default / demo asset sources. cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true, }); await cesdk.createDesignScene();}); ``` ## Rearrange Components[#](#rearrange-components) There are 6 APIs for getting, setting, updating, removing, and inserting components in the Inspector Bar. The content of the Inspector Bar changes based on the current [edit mode](angular/concepts/edit-modes-1f5b6c/) (`'Transform'` (the default), `'Text'`, `'Crop'`, `'Trim'`, or a custom value), so all APIs accept an `orderContext` argument to specify the mode. For example usage of these APIs, see also [Moving Existing Buttons](angular/user-interface/customization/rearrange-buttons-97022a/) in the Guides section. ### Get the Current Order[#](#get-the-current-order) ``` cesdk.ui.getInspectorBarOrder( ((orderContext: OrderContext) = { editMode: 'Transform' })); ``` When omitting the `orderContext` parameter, the order for the `'Transform'` edit mode is returned, e.g. ``` cesdk.ui.getInspectorBarOrder();// => [// {id: 'ly.img.text.typeFace.inspectorBar'},// {id: 'ly.img.text.fontSize.inspectorBar'},// ...// ] ``` ### Set a new Order[#](#set-a-new-order) ``` cesdk.ui.setInspectorBarOrder( inspectorBarOrder: (InspectorBarComponentId | OrderComponent)[], orderContext: OrderContext = { editMode: 'Transform' }) ``` When omitting the `orderContext` parameter, the order is set for the default edit mode (`'Transform'`), e.g.: ``` // Sets the order for transform mode by defaultcesdk.ui.setInspectorBarOrder(['my.component.for.transform.mode']); ``` ### Update Components[#](#update-components) ``` updateInspectorBarOrderComponent( matcher: OrderComponentMatcher>, update: InspectorBarComponentId | Partial> | ((component: OrderComponent) => Partial>), orderContext?: OrderContext) ``` Updates existing components in the inspector bar. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches The update can be: * A new component ID string * A partial object with updated properties * A function that receives the current component and returns the updated one Returns an object with the number of updated components and the updated order array. ``` // Replace the fill controls with a custom fill componentcesdk.ui.updateInspectorBarOrderComponent( 'ly.img.fill.inspectorBar', 'custom-fill',); // Replace text controls with simplified versions for basic userscesdk.ui.updateInspectorBarOrderComponent( component => component.id === 'ly.img.text.fontSize.inspectorBar', 'my-custom-font-size-component',); ``` ### Remove Components[#](#remove-components) ``` removeInspectorBarOrderComponent( matcher: OrderComponentMatcher>, orderContext?: OrderContext) ``` Removes components from the inspector bar. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches Returns an object with the number of removed components and the updated order array. ``` // Remove advanced text controls for simplified interfacecesdk.ui.removeInspectorBarOrderComponent('ly.img.text.advanced.inspectorBar'); // Remove all filter and effect controls for basic userscesdk.ui.removeInspectorBarOrderComponent( component => component.id.includes('filter') || component.id.includes('effect'),); // Remove shadow controls for specific block typescesdk.ui.removeInspectorBarOrderComponent({ id: 'ly.img.shadow.inspectorBar' }); ``` ### Insert Components[#](#insert-components) ``` insertInspectorBarOrderComponent( matcher: OrderComponentMatcher>, component: InspectorBarComponentId | OrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext) ``` Inserts new components into the inspector bar. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches The location can be: * `'before'` - Insert before the matched component * `'after'` - Insert after the matched component (default) * `'replace'` - Replace the matched component * `'asChild'` - Insert as a child of the matched component Returns the updated inspector bar order array. ``` // Add a custom control after the fill controlscesdk.ui.insertInspectorBarOrderComponent( 'ly.img.fill.inspectorBar', 'my-custom-component',); // Add a separator before the stroke controls for better organizationcesdk.ui.insertInspectorBarOrderComponent( 'ly.img.stroke.inspectorBar', 'ly.img.separator', 'before',); // Replace the default options with a custom options componentcesdk.ui.insertInspectorBarOrderComponent( 'ly.img.options.inspectorBar', 'ly.img.customOptions.inspectorBar', 'replace',); ``` ## Inspector Bar Components[#](#inspector-bar-components) The following lists the default Inspector Bar components available within CE.SDK. Take special note of the “Feature ID” column. Most components can be hidden/disabled by disabling the corresponding feature using the Feature API. Also note that many components are only rendered for the block types listed in the “Renders for” column, because their associated controls (e.g. font size) are only meaningful for specific kinds of blocks (e.g. text). ### Layout Helpers[#](#layout-helpers) | Component ID | Description | | --- | --- | | `ly.img.separator` | Adds a vertical separator (`
` element) in the Inspector Bar. Separators follow some special layouting rules: \- If 2 or more separators end up next to each other (e.g. due to other components not rendering), **only 1** separator will be rendered. \- Separators that end up being the first or last element in the Inspector Bar will **not** be rendered. \- Separators directly adjacent _to the left side_ of a spacer (see below) will **not** be rendered. | | `ly.img.spacer` | Adds horizontal spacing in the Inspector Bar. Spacers will try to fill all available whitespace, by distributing the available space between all spacers found in the Inspector Bar. | ### Common Controls[#](#common-controls) These components are useful for editing various different block types. | Component ID | Description | Feature ID | Renders for | | --- | --- | --- | --- | | `ly.img.fill.inspectorBar` | Fill controls button: Opens the Fill panel, containing controls for selecting the fill type (Color, Image, Video, Audio) , and for editing the fill. For Color, this contains the Color Picker and the Color Library. For Images, this contains a Preview card, a “Replace” button to replace the media, and a “Crop” button for opening the Crop panel. For Video, this contains a Preview card, a “Replace” button to replace the media, a “Crop” button for opening the Crop panel, a “Trim” button for opening the Trim panel, and a Volume slider. | `ly.img.fill` | All blocks except: Stickers and Cutouts | | `ly.img.combine.inspectorBar` | Combine button: Opens a dropdown offering a choice of boolean operations (Union, Subtract, Intersect, Exclude). | `ly.img.combine` | Selections containing multiple Shapes or Cutouts | | `ly.img.crop.inspectorBar` | Crop button: Enters Crop mode when pressed. See the section on Crop Mode below for components used during that mode. | `ly.img.crop` | Image, Video, Shapes with Image Fill | | `ly.img.stroke.inspectorBar` | Stroke controls button: Renders a labeled color swatch button when stroke is inactive, which opens the Color Panel when pressed. When stroke is active, renders 2 additional controls: a “Width” button opening a dropdown containing a number input to control stroke width, and a “Style” button opening a dropdown containing a selection of stroke styles (Solid, Dashed, Dashed Round, Long Dashes, Long Dashed Round, Dotted). | `ly.img.stroke` | Image, Shape, Text, Video | | `ly.img.adjustment.inspectorBar` | Adjustment button: Opens the Adjustment panel containing sliders to influence numerous image properties (Brightness, Saturation, Contrast, Gamma, Clarity, Exposure, Shadows, Highlights, Blacks, Whites, Temperature, Sharpness). | `ly.img.adjustment` | Image, Shape, Text, Video | | `ly.img.filter.inspectorBar` | Filter button: Opens the Filter panel containing a large selection of image filters, and an “Intensity” slider for the currently selected filter. | `ly.img.filter` | Image, Shape, Text, Video | | `ly.img.effect.inspectorBar` | Effect button: Opens the Effect panel containing a large selection of image effects, and various sliders controlling the properties of the selected effect. | `ly.img.effect` | Image, Shape, Text, Video | | `ly.img.blur.inspectorBar` | Blur button: Opens the Blur panel containing a selection of blur effects, and various sliders controlling the properties of the selected blur. | `ly.img.blur` | Image, Shape, Text, Video | | `ly.img.shadow.inspectorBar` | Shadow controls button: Opens the Shadow panel containing a “Color” Subinspector controlling the shadow color, an “Angle” number input controlling the shadow offset direction, a “Distance” number input controlling the shadow offset, and a “Blur” number input controlling the shadows blur intensity). | `ly.img.shadow` | All blocks expect Pages, Cutouts, and Groups | | `ly.img.position.inspectorBar` | Position button: Opens a dropdown containing a selection of position commands (Bring to Front, Bring Forward, Send Backward, Send to Back, Fixed to Front, Fixed to Back, Align Left/Centered/Right/Top/Middle/Bottom) | `ly.img.position` | Any block except: Pages. Selections containing multiple elements. | | `ly.img.options.inspectorBar` | More options button: Opens a dropdown containing an Opacity slider (if opacity is supported by the selected block), a Blend mode button opening a dropdown containing a selection of different blend modes (if blending is supported by the selected block), a “Copy Element” button to copy the element, a “Paste Element” button to insert a previously copied element, and a “Show Inspector” button that opens the Advanced UI Inspector when pressed. | `ly.img.options` | Every block | | `ly.img.inspectorToggle.inspectorBar` | Inspector Toggle Button: Opens the Advanced UI Inspector when pressed. | `ly.img.inspector.toggle` | Every block | ### Text[#](#text) These components are relevant for editing text blocks, and will only render when a text block is selected. | Component ID | Description | Feature ID | | --- | --- | --- | | `ly.img.text.typeFace.inspectorBar` | Typeface selection button: Opens a dropdown containing available typefaces. | `ly.img.text.typeface` | | `ly.img.text.fontSize.inspectorBar` | Font size controls: A labeled number input to set the font size, with a button to open a dropdown containing many preset sizes and the “Auto-Size” option. | `ly.img.text.fontSize` | | `ly.img.text.bold.inspectorBar` | Bold font toggle: Toggles the bold cut for the selected text, if available in the currently used font. | `ly.img.text.fontStyle` | | `ly.img.text.italic.inspectorBar` | Italic font toggle: Toggles the italic cut for the selected text, if available in the currently used font. | `ly.img.text.fontStyle` | | `ly.img.text.alignHorizontal.inspectorBar` | Text alignment button: Opens a dropdown containing options to align the selected text horizontally (to the left, to the right, or centered). | `ly.img.text.alignment` | ### Shape[#](#shape) These components are relevant for editing shape blocks, and will only render when a shape block is selected. | Component ID | Description | Feature ID | | --- | --- | --- | | `ly.img.shape.options.inspectorBar` | Shape options button: Opens a dropdown containing sliders to set number of sides, number of points, and inner diameter (depending on the specific shape selected). Only renders when a shape block is selected. | `ly.img.shape.options` | ### Cutout[#](#cutout) These components are relevant for editing cutouts, and will only render when a cutout block is selected. | Component ID | Description | Feature ID | | --- | --- | --- | | `ly.img.cutout.type.inspectorBar` | Cutout type button: Opens a dropdown to select the cut type (Cut, Perforated). | `ly.img.cutout` | | `ly.img.cutout.offset.inspectorBar` | Cutout offset button: Opens a dropdown containing a labeled number input to set the cutout offset. | `ly.img.cutout` | | `ly.img.cutout.smoothing.inspectorBar` | Cutout smoothing button: Opens a dropdown containing a labeled slider controlling the outline smoothing. | `ly.img.cutout` | ### Video, Audio[#](#video-audio) These components are relevant for editing video and audio. | Component ID | Description | Feature ID | Renders for | | --- | --- | --- | --- | | `ly.img.trim.inspectorBar` | Trim button: Enters Trim mode when pressed. See the section on Trim Mode below for components used during that mode. | `ly.img.trim` | Video, Audio | | `ly.img.volume.inspectorBar` | Volume control for audio and video. | `ly.img.volume` | Video, Audio | | `ly.img.audio.replace.inspectorBar` | Replace button: Opens the “Replace Audio” panel when pressed. | `ly.img.replace` | Audio | ### Groups[#](#groups) | Component ID | Description | Feature ID | Renders for | | --- | --- | --- | --- | | `ly.img.group.create.inspectorBar` | Group button: When pressed, creates a new group from all selected elements. | `ly.img.group` | Selections containing multiple elements | | `ly.img.group.ungroup.inspectorBar` | Ungroup button: When pressed, the selected group is dissolved, and all contained elements are released. | `ly.img.group` | Groups | ### Crop[#](#crop) This component only appears in Crop mode by default. Registering it for other edit modes is not meaningful. | Component ID | Description | Feature ID | | --- | --- | --- | | `ly.img.cropControls.inspectorBar` | Controls used when cropping images: These include a “Done” button to finish cropping, a “Straighten” slider for rotating the image, a “Turn” button to rotate the image by 90 degrees, “Mirror” buttons to flip the image vertically/horizontally, and a “Reset” button to reset the crop.) | `ly.img.crop` | ### Trim[#](#trim) This component only appears in Trim mode by default. Registering it for other edit modes is not meaningful. | Component ID | Description | Feature ID | | --- | --- | --- | | `ly.img.trimControls.inspectorBar` | Controls used when trimming video and audio: These include a “Play” button to preview the trimmed video, a “Duration” number input to set the trim duration, a video/audio strip visualizing the trimmed section in relation to the full media, and a “Done” button to finish trimming. | `ly.img.trim` | ## Default Order[#](#default-order) The default order of the Inspector Bar is the following: ### Transform Mode[#](#transform-mode) ``` [ 'ly.img.spacer', 'ly.img.shape.options.inspectorBar', 'ly.img.cutout.type.inspectorBar', 'ly.img.cutout.offset.inspectorBar', 'ly.img.cutout.smoothing.inspectorBar', 'ly.img.group.create.inspectorBar', 'ly.img.group.ungroup.inspectorBar', 'ly.img.audio.replace.inspectorBar', 'ly.img.separator', 'ly.img.text.typeFace.inspectorBar', 'ly.img.text.style.inspectorBar', 'ly.img.text.bold.inspectorBar', 'ly.img.text.italic.inspectorBar', 'ly.img.text.fontSize.inspectorBar', 'ly.img.text.alignHorizontal.inspectorBar', 'ly.img.text.advanced.inspectorBar', 'ly.img.combine.inspectorBar', 'ly.img.separator', 'ly.img.fill.inspectorBar', 'ly.img.trim.inspectorBar', 'ly.img.volume.inspectorBar', 'ly.img.crop.inspectorBar', 'ly.img.separator', 'ly.img.stroke.inspectorBar', 'ly.img.separator', 'ly.img.text.background.inspectorBar', 'ly.img.separator', 'ly.img.animations.inspectorBar', 'ly.img.separator', 'ly.img.adjustment.inspectorBar', 'ly.img.filter.inspectorBar', 'ly.img.effect.inspectorBar', 'ly.img.blur.inspectorBar', 'ly.img.separator', 'ly.img.shadow.inspectorBar', 'ly.img.separator', 'ly.img.opacityOptions.inspectorBar', 'ly.img.separator', 'ly.img.position.inspectorBar', 'ly.img.spacer', 'ly.img.separator', 'ly.img.inspectorToggle.inspectorBar',]; ``` ### Crop Mode[#](#crop-mode) ``` ['ly.img.cropControls.inspectorBar']; ``` ### Trim Mode[#](#trim-mode) ``` ['ly.img.trimControls.inspectorBar']; ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/customization/force-crop-c2854e) # Force Crop The `applyForceCrop` API allows you to programmatically apply a crop preset to a specific design block. This is useful in scenarios where you want to enforce a particular format (e.g., fixed aspect ratio) and define how the editor should respond after the preset is applied. * * * ## Overview[#](#overview) You can use `applyForceCrop` to apply a predefined crop preset to a selected block (typically an image or other block that supports cropping). The API provides flexible behavior through the `mode` parameter, controlling whether the crop UI is shown and whether cropping is conditionally applied based on the block’s current dimensions. This API is available on the UI namespace as `cesdk.ui.applyForceCrop`. ``` cesdk.ui.applyForceCrop(blockId: DesignBlock, { sourceId: string; presetId: string; mode: 'silent' | 'always' | 'ifNeeded';}): Promise; ``` * * * ## Parameters[#](#parameters) | Name | Type | Description | | --- | --- | --- | | `blockId` | `DesignBlock` | The ID of the block you want to apply the crop to. Must support cropping. | | `sourceId` | `string` | ID of the asset source where the crop preset is defined. | | `presetId` | `string` | ID of the crop preset to apply. | | `mode` | `"silent" | "always" | "ifNeeded"` | Defines how the UI should behave after applying the crop. See below. | * * * ## Modes[#](#modes) | Mode | Behavior | | --- | --- | | `silent` | Applies the preset without opening the crop UI. | | `always` | Applies the preset and always switches to crop mode in the UI. | | `ifNeeded` | Only applies the preset if the block’s current dimensions or aspect ratio differ from the preset. Switches to crop mode only if a change is made. | * * * ## Usage Example[#](#usage-example) ``` const ui = cesdk.ui;const engine = cesdk.engine; const blockId = engine.block.findAllSelected()[0]; // Add a new custom presetengine.asset.addAssetToSource('ly.img.crop.presets', { id: 'custom-preset', label: { en: 'Custom Preset', de: 'Custom Preset', }, payload: { transformPreset: { type: 'FixedSize', width: 900, height: 900, designUnit: 'Pixel', }, },}); // Apply the preset to the selected blockawait ui.applyForceCrop(blockId, { mode: 'ifNeeded', presetId: 'custom-preset', sourceId: 'ly.img.crop.presets',}); ``` You can also apply presets shipped with CE.SDK, such as: ``` await ui.applyForceCrop(blockId, { mode: 'ifNeeded', presetId: 'aspect-ratio-1-1', sourceId: 'ly.img.crop.presets',}); ``` * * * ## Behavior Details[#](#behavior-details) * `applyForceCrop` bypasses the usual user interaction required to apply crop presets manually. * When used in `always` or `ifNeeded` mode, the crop UI is automatically opened (if appropriate). * This function hides the dimension inputs from the crop panel for a cleaner editing experience. * Invalid `presetId`, `sourceId`, or `mode` values will result in console warning output. * * * ## See Also[#](#see-also) * [Crop Images in JavaScript](angular/edit-image/transform/crop-f67a47/) * [Asset Library](angular/import-media/asset-library-65d6c4/) * [CreativeEngine Settings](angular/settings-970c98/) --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/customization/dock-cb916c) # Dock The dock is the main entry point for user interactions not directly related to the currently selected block. It occupies a prominent place in the editor and is primarily, though not exclusively, used to open panels with asset libraries. Therefore, the default and recommended position of the asset library panel is on the side of the dock. However, depending on the use case, it might be beneficial to add other buttons and functionalities (even block-specific ones) to highlight them due to the prominence of the dock. ## Configure Dock[#](#configure-dock) You can configure dock appearance using the editor settings API: * `dock/iconSize` - Sets the dock button icon size to `'large'` (24px) or `'normal'` (16px) * `dock/hideLabels` - Shows or hides the labels inside dock buttons (`true` to hide, `false` to show) ``` import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user',}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Configure dock appearance cesdk.engine.editor.setSetting('dock/iconSize', 'large'); cesdk.engine.editor.setSetting('dock/hideLabels', false); // Set the editor view mode cesdk.ui.setView('default'); // Do something with the instance of CreativeEditor SDK, for example: // Populate the asset library with default / demo asset sources. cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true, }); await cesdk.createDesignScene();}); ``` ## Rearrange Dock Components[#](#rearrange-dock-components) There are 6 APIs for getting, setting, updating, removing, and inserting components in the Dock. The content of the Dock changes based on the current [edit mode](angular/concepts/edit-modes-1f5b6c/) (`'Transform'` (the default), `'Text'`, `'Crop'`, `'Trim'`, or a custom value), so all APIs accept an `orderContext` argument to specify the mode. For example usage of these APIs, see also [Moving Existing Buttons](angular/user-interface/customization/rearrange-buttons-97022a/) or [Adding New Buttons](angular/user-interface/ui-extensions/add-new-button-74884d/) in the Guides section. ### Get the Current Order[#](#get-the-current-order) ``` getDockOrder( orderContext: OrderContext = { editMode: 'Transform' }) ``` When omitting the `orderContext` parameter, the order for the `'Transform'` edit mode is returned, e.g. ``` cesdk.ui.getDockOrder();// [// {// id: 'ly.img.assetLibrary.dock',// key: 'ly.img.template',// icon: '@imgly/Template',// label: 'libraries.ly.img.template.label',// entries: [ 'ly.img.template' ]// },// ...// ] ``` ### Set a new Order[#](#set-a-new-order) ``` setDockOrder( dockOrder: (DockOrderComponentId | DockOrderComponent)[], orderContext: OrderContext = { editMode: 'Transform' }) ``` When omitting the `orderContext` parameter, the order is set for the default edit mode (`'Transform'`), e.g.: ``` // Sets the order for transform mode by defaultcesdk.ui.setDockOrder(['my.component.for.transform.mode']); ``` ### Update Components[#](#update-components) ``` updateDockOrderComponent( matcher: OrderComponentMatcher>, update: DockOrderComponentId | Partial> | ((component: OrderComponent) => Partial>), orderContext?: OrderContext) ``` Updates existing components in the dock. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches The update can be: * A new component ID string * A partial object with updated properties * A function that receives the current component and returns the updated one Returns an object with the number of updated components and the updated order array. ``` // Change the icon and label for the image librarycesdk.ui.updateDockOrderComponent( { id: 'ly.img.assetLibrary.dock', key: 'ly.img.image' }, component => ({ ...component, icon: '@imgly/Photo', label: 'My Photos', entries: ['ly.img.image', 'ly.img.custom.photos'], }),); // Update the upload library label for different user contextscesdk.ui.updateDockOrderComponent( { id: 'ly.img.assetLibrary.dock', key: 'ly.img.upload' }, { label: 'Upload Files' },); // Update the entries for the elements library to show only specific categoriescesdk.ui.updateDockOrderComponent( { id: 'ly.img.assetLibrary.dock', key: 'ly.img.elements' }, { entries: ['ly.img.image', 'ly.img.text', 'ly.img.vectorpath'] },); ``` ### Remove Components[#](#remove-components) ``` removeDockOrderComponent( matcher: OrderComponentMatcher>, orderContext?: OrderContext) ``` Removes components from the dock. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches Returns an object with the number of removed components and the updated order array. ``` // Remove the video library for mobile userscesdk.ui.removeDockOrderComponent( component => component.id === 'ly.img.assetLibrary.dock' && component.key === 'ly.img.video',); // Remove all template libraries for users without template accesscesdk.ui.removeDockOrderComponent( component => component.id === 'ly.img.assetLibrary.dock' && component.key && component.key.includes('template'),); // Remove the audio library by keycesdk.ui.removeDockOrderComponent({ id: 'ly.img.assetLibrary.dock', key: 'ly.img.audio',}); ``` ### Insert Components[#](#insert-components) ``` insertDockOrderComponent( matcher: OrderComponentMatcher>, component: DockOrderComponentId | OrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext) ``` Inserts new components into the dock. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches The location can be: * `'before'` - Insert before the matched component * `'after'` - Insert after the matched component (default) * `'replace'` - Replace the matched component * `'asChild'` - Insert as a child of the matched component > **Note:** The `'asChild'` option is only supported for custom components that you register via `registerComponent`. Built-in dock components like `ly.img.assetLibrary.dock` do not support yet take advantage of this pattern. Returns the updated dock order array. ``` // Add a custom asset library after the image librarycesdk.ui.insertDockOrderComponent( { id: 'ly.img.assetLibrary.dock', key: 'ly.img.image' }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.custom', icon: 'custom-icon', label: 'Custom Assets', entries: ['ly.img.custom', 'ly.img.brand'], },); // Add a separator before the upload library for better organizationcesdk.ui.insertDockOrderComponent( { id: 'ly.img.assetLibrary.dock', key: 'ly.img.upload' }, 'ly.img.separator', 'before',); // Replace the elements library with a simplified versioncesdk.ui.insertDockOrderComponent( { id: 'ly.img.assetLibrary.dock', key: 'ly.img.elements' }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.elements.simple', icon: '@imgly/Library', label: 'Basic Elements', entries: ['ly.img.image', 'ly.img.text'], }, 'replace',); ``` ## Dock Components[#](#dock-components) The following lists the default Dock components available within CE.SDK. ### Layout Helpers[#](#layout-helpers) | Component ID | Description | | --- | --- | | `ly.img.separator` | Adds a small space (invisible `
` element) in the Dock to help the visual separation of entries. Separators follow some special layouting rules: \- If 2 or more separators end up next to each other (e.g. due to other components not rendering), **only 1** separator will be rendered. \- Separators that end up being the first or last element in the Dock will **not** be rendered. \- Separators directly adjacent _to the top side_ of a spacer (see below) will **not** be rendered. | | `ly.img.spacer` | Adds vertical spacing in the Dock. Spacers will try to fill all available whitespace, by distributing the available space between all spacers found in the Dock. | ### Asset Library[#](#asset-library) | Component ID | Description | | --- | --- | | `ly.img.assetLibrary.dock` | Asset Library: A button that opens the Asset Library Panel, showing the content of one or more associated asset entries. Requires additional keys to be set on the object passed to `setDockOrder`, as described below. | #### Payload[#](#payload) | Key | Type | Description | | --- | --- | --- | | `key` | `string` | Needs to be unique within the set of components in the Dock. | | `label` | `string` | Used as a label for the button. If a matching I18N key is found, the label is localized. | | `icon` | `CustomIcon` | One of 3 things: \-A URL string pointing to an SVG image, or: \- The string identifier of a custom or built-in icon (see [Icons](angular/user-interface/appearance/icons-679e32/) ), or: \- A callback returning a URL, which takes a single parameter of type `{theme: string, iconSize: 'normal' | 'large' }`. | | `entries` | `string[]` | List of Asset Entries that will be shown in the Asset Library Panel when pressing the button. A single entry will open that entry directly. Multiple entries will show a group overview. | #### Example Usage[#](#example-usage) ``` // Set the Dock Order to show only the Image Asset Library.cesdk.ui.setDockOrder([ { id: 'ly.img.assetLibrary.dock', // Component id // All other keys are payload / parameters passed to the component key: 'ly.img.image', icon: '@imgly/Image', label: 'libraries.ly.img.image.label', // Using a I18N key entries: [ 'ly.img.image', // Only 1 entry is to be shown ], },]); ``` ## Default Order[#](#default-order) ``` [ { id: 'ly.img.assetLibrary.dock', key: 'ly.img.template', icon: '@imgly/Template', label: 'libraries.ly.img.template.label', entries: ['ly.img.template'], }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.video.template', icon: '@imgly/Template', label: 'libraries.ly.img.video.template.label', entries: ['ly.img.video.template'], }, { id: 'ly.img.separator', }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.elements', icon: '@imgly/Library', label: 'component.library.elements', entries: [ 'ly.img.upload', 'ly.img.video', 'ly.img.audio', 'ly.img.image', 'ly.img.text', 'ly.img.vectorpath', 'ly.img.sticker', 'cutout-entry', ], }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.upload', icon: '@imgly/Upload', label: 'libraries.ly.img.upload.label', entries: ['ly.img.upload'], }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.video', icon: '@imgly/Video', label: 'libraries.ly.img.video.label', entries: ['ly.img.video'], }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.audio', icon: '@imgly/Audio', label: 'libraries.ly.img.audio.label', entries: ['ly.img.audio'], }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.image', icon: '@imgly/Image', label: 'libraries.ly.img.image.label', entries: ['ly.img.image'], }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.text', icon: '@imgly/Text', label: 'libraries.ly.img.text.label', entries: ['ly.img.text'], }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.vectorpath', icon: '@imgly/Shapes', label: 'libraries.ly.img.vectorpath.label', entries: ['ly.img.vectorpath'], }, { id: 'ly.img.assetLibrary.dock', key: 'ly.img.sticker', icon: '@imgly/Sticker', label: 'libraries.ly.img.sticker.label', entries: ['ly.img.sticker'], },]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/customization/disable-or-enable-f058e2) # Disable or Enable Features ## Enable Feature[#](#enable-feature) The following API allows to enable a custom or built-in feature (see the list of built-in features below): ``` enable(featureId: FeatureId | FeatureId[]) ``` This method enables one or more features using their default predicates. If you need custom predicate logic, use the `set()` method instead (see below). Tip: `FeatureId` can be an arbitrary string, so you can use this mechanism to toggle your own custom features, as well. ### Example: Enable Single Feature[#](#example-enable-single-feature) ``` // Enable a feature with its default predicatecesdk.feature.enable('ly.img.delete'); ``` ### Example: Enable Multiple Features[#](#example-enable-multiple-features) ``` // Enable multiple features at oncecesdk.feature.enable(['ly.img.delete', 'ly.img.duplicate']); ``` ### Example: Enable with Glob Pattern[#](#example-enable-with-glob-pattern) ``` // Enable all video featurescesdk.feature.enable('ly.img.video.*'); // Enable all crop featurescesdk.feature.enable('ly.img.crop.*'); ``` ### Example: Control Notifications[#](#example-control-notifications) ``` // Disable all notifications from the enginecesdk.feature.disable('ly.img.notifications'); // Disable only undo notificationscesdk.feature.disable('ly.img.notifications.undo'); // Disable only redo notificationscesdk.feature.disable('ly.img.notifications.redo'); // Conditionally enable notifications only in specific modescesdk.feature.set('ly.img.notifications', ({ engine }) => { // Only show notifications in Video mode return engine.scene.getMode() === 'Video';}); ``` ## Disable Feature[#](#disable-feature) The `disable()` method provides a convenient way to explicitly disable one or more features: ``` disable(featureId: FeatureId | FeatureId[]) ``` This method disables features by setting their enable/disable state to `false`. Note that `disable()` works best with `enable()` for simple on/off control. If you’ve used `set()` with boolean predicates, those will be evaluated first and may override the disable state. ### Example: Disable Single Feature[#](#example-disable-single-feature) ``` cesdk.feature.disable('ly.img.delete'); ``` ### Example: Disable Multiple Features[#](#example-disable-multiple-features) ``` cesdk.feature.disable(['ly.img.delete', 'ly.img.duplicate']); ``` ### Example: Disable with Glob Pattern[#](#example-disable-with-glob-pattern) ``` // Disable all video featurescesdk.feature.disable('ly.img.video.*'); // Disable all crop featurescesdk.feature.disable('ly.img.crop.*'); ``` ## Set Feature[#](#set-feature) The `set()` method is the unified approach for configuring feature state with custom predicates: ``` set(featureId: FeatureId, enabled: boolean | FeaturePredicate) ``` The `enabled` parameter can be: * A boolean (`true` or `false`) to enable or disable the feature * A function (predicate) that takes a context and returns a boolean The predicate function receives an `EnableFeatureContext` with: * `engine: CreativeEngine` - The engine instance * `isPreviousEnable: () => boolean` - Returns the result of any previously registered predicates * `defaultPredicate: () => boolean` - Returns the result of the default predicate ### Understanding Predicate Chaining and Evaluation Order[#](#understanding-predicate-chaining-and-evaluation-order) Multiple predicates can be registered for the same feature, forming a **predicate chain**. Understanding the evaluation order is crucial: **Evaluation Order:** 1. **Most recent `set()` predicate** runs FIRST 2. **Older `set()` predicates** in reverse chronological order (most recent first) 3. **`enable()`/`disable()` state** runs LAST This means: * **`set()` predicates can override `enable()` and `disable()`** - They’re evaluated first * **Boolean predicates are always terminal** - They immediately return their value without continuing the chain * **Function predicates control the chain** - The function implementation decides whether to call `isPreviousEnable()` (continue chain) or return directly (end chain) **Key Principles:** * Use `enable()` and `disable()` for simple on/off control * Use `set()` when you need custom logic or want to override enable/disable * Each `set()` call adds a new predicate to the front of the chain * Boolean predicates (true/false) are always terminal - they cannot continue the chain * Function predicates decide whether to continue the chain by calling `isPreviousEnable()`, or end it by returning directly ### Example: Enable Feature[#](#example-enable-feature) ``` cesdk.feature.set('ly.img.delete', true); ``` ### Example: Disable Feature[#](#example-disable-feature) ``` cesdk.feature.set('ly.img.delete', false); ``` **Important:** Using `set()` with a boolean creates a terminal predicate. If you later call `enable()` or `disable()`, they won’t have an effect because `set()` predicates are evaluated first: ``` // This creates a terminal predicatecesdk.feature.set('ly.img.delete', true); // This won't disable the feature because set(true) is terminalcesdk.feature.disable('ly.img.delete');// Feature is still enabled! // For simple on/off, use enable() and disable() instead:cesdk.feature.enable('ly.img.delete'); // Enabledcesdk.feature.disable('ly.img.delete'); // Now disabled ``` ### Example: Custom Predicate[#](#example-custom-predicate) ``` cesdk.feature.set('ly.img.delete', ({ engine }) => { const selectedBlocks = engine.block.findAllSelected(); return selectedBlocks.length > 0;}); ``` ### Example: Extending Default Predicate[#](#example-extending-default-predicate) You can extend the default predicate provided for built-in features: ``` cesdk.feature.set('ly.img.delete', ({ defaultPredicate }) => { // Only allow delete after 10 pm return defaultPredicate() && new Date().getHours() >= 22;}); ``` ### Example: Chaining Predicates[#](#example-chaining-predicates) Predicates can access the result of previously registered predicates: ``` // First, enable with defaultcesdk.feature.enable('my.feature'); // Then, add additional logic that chains with previous predicatescesdk.feature.set('my.feature', ({ isPreviousEnable }) => { // Disable the feature after 10 pm, otherwise use previous result return new Date().getHours() >= 22 ? false : isPreviousEnable();}); ``` ### Example: Overwriting Defaults for Custom Block Types[#](#example-overwriting-defaults-for-custom-block-types) Let’s say you introduced a new kind of block that represents an Avatar. You want to hide the duplicate & delete buttons in the canvas menu for this block: ``` cesdk.feature.set('ly.img.delete', ({ engine, isPreviousEnable }) => { const selectedBlock = engine.block.findAllSelected()[0]; const kind = engine.block.getKind(selectedBlock); if (kind === 'avatar') { return false; } else { return isPreviousEnable(); }}); cesdk.feature.set('ly.img.duplicate', ({ engine, isPreviousEnable }) => { const selectedBlock = engine.block.findAllSelected()[0]; const kind = engine.block.getKind(selectedBlock); if (kind === 'avatar') { return false; } else { return isPreviousEnable(); }}); ``` ### Example: Glob Pattern with Predicate[#](#example-glob-pattern-with-predicate) ``` // Apply custom logic to all video featurescesdk.feature.set('ly.img.video.*', ({ engine }) => { return engine.scene.getMode() === 'Video';}); ``` ## Check Feature[#](#check-feature) The following API allows to query if the feature is currently enabled: ``` isEnabled(featureId: FeatureId): boolean ``` This method returns `true` if the feature is currently enabled, `false` otherwise. ### Example[#](#example) ``` if (!cesdk.feature.isEnabled('ly.img.navigation.close')) { return null;} // Check multiple featuresif ( cesdk.feature.isEnabled('ly.img.delete') && cesdk.feature.isEnabled('ly.img.duplicate')) { console.log('Both delete and duplicate are enabled');} // Check with glob patternif (cesdk.feature.isEnabled('ly.img.video.*')) { console.log('All video features are enabled');} ``` ## List Features[#](#list-features) The `list()` method returns all registered feature IDs, with optional pattern matching: ``` list(options?: { matcher?: string }): FeatureId[] ``` This method is useful for discovering available features and debugging feature configurations. ### Example: List All Features[#](#example-list-all-features) ``` const allFeatures = cesdk.feature.list();console.log('All features:', allFeatures); ``` ### Example: List with Pattern Matching[#](#example-list-with-pattern-matching) ``` // List all video featuresconst videoFeatures = cesdk.feature.list({ matcher: 'ly.img.video.*' }); // List all crop featuresconst cropFeatures = cesdk.feature.list({ matcher: 'ly.img.crop.*' }); // List all navigation featuresconst navFeatures = cesdk.feature.list({ matcher: 'ly.img.navigation.*' }); ``` ## Get Feature Predicates[#](#get-feature-predicates) The `get()` method allows you to retrieve the predicates associated with a feature: ``` get(featureId: FeatureId): FeaturePredicate[] | undefined ``` This is useful for debugging or understanding what predicates have been registered for a feature. ### Example[#](#example-1) ``` const predicates = cesdk.feature.get('ly.img.delete');console.log(`Feature has ${predicates?.length || 0} predicates`); ``` ## Glob Pattern Support[#](#glob-pattern-support) All main Feature API methods support glob pattern matching for batch operations, allowing you to control multiple related features at once. ### Supported Methods[#](#supported-methods) * `enable(pattern)` - Enable all matching features * `disable(pattern)` - Disable all matching features * `set(pattern, predicate)` - Set all matching features * `isEnabled(pattern)` - Check if all matching features are enabled * `list({ matcher: pattern })` - List features matching pattern ### Pattern Syntax[#](#pattern-syntax) * `*` matches any sequence of characters within a segment * `ly.img.video.*` matches all features starting with `ly.img.video.` * `ly.img.crop.*` matches all features starting with `ly.img.crop.` ### Examples[#](#examples) ``` // Enable all video featurescesdk.feature.enable('ly.img.video.*'); // Disable all crop featurescesdk.feature.disable('ly.img.crop.*'); // Check if all navigation features are enabledconst allEnabled = cesdk.feature.isEnabled('ly.img.navigation.*'); // Set all filter features with custom predicatecesdk.feature.set('ly.img.filter.*', ({ engine }) => { const selectedBlocks = engine.block.findAllSelected(); return selectedBlocks.some((id) => engine.block.hasEffects(id));}); // List all features in a namespaceconst allVideoFeatures = cesdk.feature.list({ matcher: 'ly.img.video.*' }); ``` ### Best Practices[#](#best-practices) * Use glob patterns to manage related features together * Combine with predicates for conditional bulk operations * Use `list()` with matchers to discover available features in a namespace ## Built-In Features[#](#built-in-features) The following features are built-in to CE.SDK: | Feature ID | Description | | --- | --- | | `ly.img.navigation.bar` | Controls visibility of the Navigation Bar. Defaults to the value of the configuration option `ui.elements.navigation`, or `true` if not set. | | `ly.img.navigation.back` | Controls visibility of the “Back” button in the Navigation Bar. | | `ly.img.navigation.close` | Controls visibility of the “Close” button in the Navigation Bar. | | `ly.img.navigation.undoRedo` | Controls visibility of the “Undo” and “Redo” button in the Navigation Bar. | | `ly.img.navigation.zoom` | Controls visibility of the “Zoom” controls in the Navigation Bar. | | `ly.img.navigation.actions` | Controls visibility of the “Actions” in the Navigation Bar. | | `ly.img.inspector.bar` | Controls the visibility of the “Inspector Bar” in the Editor. Defaults to the value of the configuration option `ui.elements.inspectorBar`, or `true` if not set. | | `ly.img.inspector.panel` | Controls the visibility of the “Advanced Inspector” in the Editor. Defaults to `false` if not explicitly enabled. | | `ly.img.inspector.toggle` | Controls presence of the Inspector Toggle button in the Inspector bar. | | `ly.img.canvas.bar` | Controls the visibility of the “Canvas Bar” in the Editor. | | `ly.img.canvas.menu` | Controls the visibility of the “Canvas Menu” in the Editor. | | `ly.img.dock` | Controls the visibility of the “Dock” in the Editor. Defaults to the value of the configuration option `ui.elements.dock`, or `true` if not set. | | `ly.img.library.panel` | Controls the visibility of the “Asset Library” panel in the Editor. Defaults to `true` if not explicitly disabled. | | `ly.img.settings` | Controls the visibility of the “Settings” panel in the Editor. Defaults to `false` if not explicitly enabled. | | `ly.img.notifications` | Controls the global visibility of all notifications from the engine. When disabled, no notifications will be shown regardless of specific notification type settings. Defaults to `true`. | | `ly.img.notifications.undo` | Controls the visibility of undo-specific notifications. When disabled, notifications with the `undo.` prefix (e.g., “Undo: Apply Blur”) will not be shown. Requires `ly.img.notifications` to be enabled. Defaults to `true`. | | `ly.img.notifications.redo` | Controls the visibility of redo-specific notifications. When disabled, notifications with the `redo.` prefix (e.g., “Redo: Remove Effect”) will not be shown. Requires `ly.img.notifications` to be enabled. Defaults to `true`. | | `ly.img.preview` | Controls existence of the “Preview” button in the Navigation Bar. Returns `true` when `cesdk.engine.editor.getRole()` returns `Creator`, e.g. when editing in the Creator role. | | `ly.img.delete` | Controls the ability to delete a block. Changes visibility of the “Delete” button in the Canvas Menu, as well as the ability to delete by pressing the `delete` key. Will return `false` when the operation would delete all pages of the document. Will return `false` when target block is a page and page management features are disabled via Feature API, or during `'Video'` scene mode. | | `ly.img.duplicate` | Controls visibility of the “Duplicate” button in the Canvas Menu. Copy/paste using keyboard shortcuts will be disabled when set to `false`. Will return `false` when target block is a page and page management features are disabled via Feature API, or during `'Video'` scene mode, or when scene layout is set to `'Free'` or `'DepthStack'`. | | `ly.img.replace` | Controls presence of the “Replace” button in the Canvas Menu, and in the Fill Panel for image and video fills. Returns `false` by default for stickers. | | `ly.img.group` | Controls features for creating and dissolving groups, currently: The existence of “Group” and “Ungroup” buttons in the Inspector Bar. Returns `false` during `'Video'` scene mode. | | `ly.img.placeholder` | Controls visibility of the “Placeholder” button in the Canvas Menu. Will return `true` for blocks of type `'//ly.img.ubq/text'`, `'//ly.img.ubq/group'`, `'//ly.img.ubq/page'`, `'//ly.img.ubq/audio'`, or `'//ly.img.ubq/graphic'`. | | `ly.img.placeholder.general` | Controls visibility of the “General” section in the Placeholder Settings panel. Includes opacity, blend mode, duplicate, and delete options. Returns `false` for Video pages by default. | | `ly.img.placeholder.general.opacity` | Controls the “Opacity” option within the General section of Placeholder Settings. | | `ly.img.placeholder.general.blendMode` | Controls the “Blend Mode” option within the General section of Placeholder Settings. Returns `false` for audio blocks and pages. | | `ly.img.placeholder.general.duplicate` | Controls the “Duplicate” option within the General section of Placeholder Settings. | | `ly.img.placeholder.general.delete` | Controls the “Delete” option within the General section of Placeholder Settings. | | `ly.img.placeholder.arrange` | Controls visibility of the “Arrange” section in the Placeholder Settings panel. Includes move, resize, rotate, and flip options. | | `ly.img.placeholder.arrange.move` | Controls the “Move” option within the Arrange section of Placeholder Settings. Returns `false` for pages. | | `ly.img.placeholder.arrange.resize` | Controls the “Resize” option within the Arrange section of Placeholder Settings. Returns `false` for pages. | | `ly.img.placeholder.arrange.rotate` | Controls the “Rotate” option within the Arrange section of Placeholder Settings. Returns `false` for pages and audio blocks. | | `ly.img.placeholder.arrange.flip` | Controls the “Flip” option within the Arrange section of Placeholder Settings. Returns `false` for pages and audio blocks. | | `ly.img.placeholder.audio` | Controls visibility of the “Audio” section in the Placeholder Settings panel. Only shown for audio blocks. | | `ly.img.placeholder.audio.change` | Controls the “Replace Audio” option within the Audio section of Placeholder Settings. Allows users to replace audio tracks. | | `ly.img.placeholder.fill` | Controls visibility of the “Fill” section in the Placeholder Settings panel. Returns `true` for blocks that support fill (excluding stickers and audio blocks). | | `ly.img.placeholder.fill.change` | Controls the “Change Fill” option within the Fill section of Placeholder Settings. Returns `false` for stickers and audio blocks. | | `ly.img.placeholder.fill.changeType` | Controls the “Change Fill Type” option within the Fill section of Placeholder Settings. Only shown for graphic and page blocks. | | `ly.img.placeholder.fill.actAsPlaceholder` | Controls the “Act as Placeholder” option for fills. Shows placeholder stripes/patterns for image fills. Only shown when the fill supports placeholder behavior. | | `ly.img.placeholder.fill.crop` | Controls the “Crop” option within the Fill section of Placeholder Settings. Only shown for blocks that support crop. | | `ly.img.placeholder.shape` | Controls visibility of the “Shape” section in the Placeholder Settings panel. | | `ly.img.placeholder.shape.change` | Controls the “Change Shape” option within the Shape section of Placeholder Settings. | | `ly.img.placeholder.stroke` | Controls visibility of the “Stroke” section in the Placeholder Settings panel. Returns `true` for blocks that support stroke (excluding stickers and line shapes). | | `ly.img.placeholder.stroke.change` | Controls the “Change Stroke” option within the Stroke section of Placeholder Settings. | | `ly.img.placeholder.text` | Controls visibility of the “Text” section in the Placeholder Settings panel. Only returns `true` for text blocks. | | `ly.img.placeholder.text.edit` | Controls the “Edit Text” option within the Text section of Placeholder Settings. | | `ly.img.placeholder.text.actAsPlaceholder` | Controls the “Act as Placeholder” option for text. Shows placeholder behavior for text blocks. Only shown when the block supports placeholder behavior. | | `ly.img.placeholder.text.character` | Controls the “Character” option within the Text section of Placeholder Settings. | | `ly.img.placeholder.appearance` | Controls visibility of the “Appearance” section in the Placeholder Settings panel. Includes adjustments, filters, effects, blur, shadow, and animations options. | | `ly.img.placeholder.appearance.adjustments` | Controls the “Adjustments” option within the Appearance section of Placeholder Settings. Returns `false` for stickers. | | `ly.img.placeholder.appearance.filter` | Controls the “Filter” option within the Appearance section of Placeholder Settings. Returns `false` for stickers. | | `ly.img.placeholder.appearance.effect` | Controls the “Effect” option within the Appearance section of Placeholder Settings. Returns `false` for stickers. | | `ly.img.placeholder.appearance.blur` | Controls the “Blur” option within the Appearance section of Placeholder Settings. Returns `false` for stickers. | | `ly.img.placeholder.appearance.shadow` | Controls the “Shadow” option within the Appearance section of Placeholder Settings. Returns `false` for pages. | | `ly.img.placeholder.appearance.animations` | Controls the “Animations” option within the Appearance section of Placeholder Settings. Only shown for graphic and text blocks in video mode. | | `ly.img.position` | Controls presence of the Position dropdown, and can disable the corresponding controls in the Advanced UI Inspector Panel. Returns `false` if target block is a page. | | `ly.img.options` | Controls presence of the Options button (`...` button) in the Default UI Inspector Bar. Returns `true` by default. | | `ly.img.animations` | Controls presence of the Animations button. Returns `true` by default for Graphic and Text blocks in video mode. | | `ly.img.page.add` | Controls the ability to add pages, by showing the “Add Page” button in the Canvas Bar. Returns `false` during `'Video'` scene mode, or when scene layout is set to `'Free'` or `'DepthStack'`. | | `ly.img.page.move` | Controls the ability to move pages, by showing the “Move Up/Down/Left/Right” buttons in the Canvas Menu. Returns `false` during `'Video'` scene mode, or when scene layout is set to `'Free'` or `'DepthStack'`. Note that the “Move Up/Left” components will not show up when the target page is already the first page of the document, and “Move Down/Right” will not show up when the target page is already the last page of the document. | | `ly.img.page.resize` | Controls the presence of the Resize button in the navigation bar, as well as the page formats button in the document inspector. | | `ly.img.text.edit` | Controls presence of the “Edit” button in the Canvas Menu. Only returns `true` for text blocks by default. | | `ly.img.text.typeface` | Controls presence of the Typeface dropdown, and can disable the corresponding dropdown in the Advanced UI Inspector Panel. Only returns `true` for text blocks by default. | | `ly.img.text.fontSize` | Controls presence of the Font Size input, and can disable the corresponding input in the Advanced UI Inspector Panel. Only returns `true` for text blocks by default. | | `ly.img.text.fontStyle` | Controls presence of the Font Style controls (Bold toggle, Italic toggle), in the Canvas Menu, and can disable the corresponding inputs in the Advanced UI Inspector Panel. Only returns `true` for text blocks by default. | | `ly.img.text.alignment` | Controls presence of the Text Horizontal Alignment dropdown, and can disable the corresponding controls in the Advanced UI Inspector Panel. Only returns `true` for text blocks by default. | | `ly.img.text.advanced` | Controls the presence of the Advanced text controls in the Editor. Only returns `true` for text blocks by default. | | `ly.img.fill` | Controls presence of the Fill button (opening the Fill Panel), and can disable the corresponding button in the Advanced UI Inspector Panel. Returns `false` for stickers by default. | | `ly.img.stroke` | Controls presence of the Stroke controls (Color, Width, Stroke), and can disable the corresponding controls in the Advanced UI Inspector Panel. Returns `false` for stickers by default. | | `ly.img.adjustment` | Controls visibility of the “Adjustments” button, and can disable the corresponding button in the Advanced UI Inspector Panel. Returns `false` for stickers by default. | | `ly.img.filter` | Controls visibility of the “Filter” button, and can disable the corresponding button in the Advanced UI Inspector Panel. Returns `false` for stickers by default. | | `ly.img.filter.lut` | Controls visibility of LUT (Lookup Table) filter controls. | | `ly.img.filter.duotone` | Controls visibility of duotone filter controls. | | `ly.img.effect` | Controls visibility of the “Effect” button, and can disable the corresponding button in the Advanced UI Inspector Panel. Returns `false` for stickers by default. | | `ly.img.blur` | Controls visibility of the “Blur” button, and can disable the corresponding button in the Advanced UI Inspector Panel. Returns `false` for stickers by default. | | `ly.img.shadow` | Controls visibility of the Shadow button, and can disable the corresponding control in the Advanced UI Inspector Panel. Returns `false` for pages by default. | | `ly.img.shape.options` | Controls presence of the Shape Options dropdown in the Default UI Inspector Bar, and can disable the corresponding button in the Advanced UI Inspector Panel. Returns `true` by default, but note that the component itself checks for the target block type and will only render for shape blocks. | | `ly.img.combine` | Controls presence of the Combine dropdown, and can disable the corresponding button in the Advanced UI Inspector Panel. Returns `true` by default, but note that the component itself checks for the target block type and will only render if the selection contains only shape blocks and text, or only cutouts. | | `ly.img.cutout` | Controls visibility of the Cutout controls (Cutout Type, Cutout Offset, Cutout Smoothing), and can disable the corresponding controls in the Advanced UI Inspector Panel. Only returns `true` for cutouts by default. | | `ly.img.transform.position` | Controls presence of the Transform X and Y Position controls. | | `ly.img.transform.size` | Controls presence of the Transform width and height controls. | | `ly.img.transform.rotation` | Controls presence of the Transform Rotation controls. | | `ly.img.transform.flip` | Controls presence of the Transform Flip controls. | | `ly.img.crop` | Controls presence of the Crop button, and can disable the corresponding button in the Fill Panel. Returns `false` for stickers by default. | | `ly.img.crop.size` | Controls visibility of crop size controls. | | `ly.img.crop.position` | Controls visibility of crop position controls. | | `ly.img.crop.rotation` | Controls visibility of crop rotation controls. | | `ly.img.crop.flip` | Controls visibility of crop flip controls. | | `ly.img.crop.scale` | Controls visibility of crop scale controls. | | `ly.img.crop.fillMode` | Controls visibility of crop fill mode controls. | | `ly.img.crop.panel.autoOpen` | Controls whether the crop panel automatically opens when entering crop mode. Defaults to `true`. When disabled, integrators can programmatically control panel opening via `cesdk.ui.openPanel()` or implement custom workflows. | | `ly.img.trim` | Controls presence of the Trim button, and can disable the corresponding button in the Fill Panel. Only returns `true` when scene mode is `'Video'`. | | `ly.img.volume` | Controls presence of the Volume control, and can disable the corresponding button in the Fill Panel. Only returns `true` when scene mode is `'Video'`. Disabled for pages by default. | | `ly.img.video.timeline` | Controls the visibility of the “Video Timeline” in the Editor. | | `ly.img.video.clips` | Controls visibility and behavior of the video clips track in the timeline. | | `ly.img.video.overlays` | Controls visibility and behavior of the overlays track in the timeline. | | `ly.img.video.audio` | Controls visibility and behavior of the audio track in the timeline. | | `ly.img.video.addClip` | Controls the ability to add new clips to the timeline. | | `ly.img.video.controls` | Base feature for all video control UI elements. | | `ly.img.video.controls.toggle` | Controls visibility of the video timeline collapse/expand toggle button. | | `ly.img.video.controls.playback` | Controls visibility of play/pause button, playback loop, and timestamp controls in video mode. | | `ly.img.video.controls.loop` | Controls visibility of the loop toggle control. | | `ly.img.video.controls.split` | Controls visibility of the split clip control. | | `ly.img.video.controls.background` | Controls visibility of background color controls in video mode. | | `ly.img.video.controls.timelineZoom` | Controls visibility of timeline zoom controls. | --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/customization/crop-presets-f94f26) # Crop Presets ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' }), ui: { stylesheets: { /* ... */ }, elements: { /* ... */ } }}; CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => { // Do something with the instance of CreativeEditor SDK // Set scale using the new API instance.ui.setScale('normal'); // Populate the asset library with default / demo asset sources. instance.addDefaultAssetSources(); instance.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); // Add a custom crop preset asset source. instance.engine.asset.addLocalSource('my-custom-crop-presets'); instance.engine.asset.addAssetToSource( 'my-custom-crop-presets', { id: 'aspect-ratio-free', label: { en: 'Free' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/ratio-free.png` }, payload: { transformPreset: { type: 'FreeAspectRatio' } } } ); instance.engine.asset.addAssetToSource( 'my-custom-crop-presets', { id: 'aspect-ratio-16-9', label: { en: '16:9' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/ratio-16-9.png` }, payload: { transformPreset: { type: 'FixedAspectRatio', width: 16, height: 9 } } } ); instance.engine.asset.addAssetToSource( 'my-custom-crop-presets', { id: 'din-a1-portrait', label: { en: 'DIN A1 Portrait' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/din-a1-portrait.png` }, payload: { transformPreset: { type: 'FixedSize', width: 594, height: 841, designUnit: 'Millimeter' } } } ); // Update crop presets library entry instance.ui.updateAssetLibraryEntry('ly.img.cropPresets', { sourceIds: [ // 'ly.img.crop.presets', 'my-custom-crop-presets' ] }); await instance.createDesignScene();}); ``` ```
``` By default, the CreativeEditor SDK ships with an extensive list of commonly used crop presets, as shown below: ![](/docs/cesdk/_astro/crop-presets.65SiE7vt_ZAWUF2.webp) The CE.SDK can be configured with a series of crop presets by creating custom asset sources or updating the content.json from the default asset source on the CDN, and then using the API to update the crop presets library entry. To enable the CE.SDK defaults enable our default asset sources by using `addDefaultAssetSources`. ``` await addDefaultAssetSources(); ``` ## Configuring Custom Crop Presets[#](#configuring-custom-crop-presets) You can define your own crop presets by [creating a custom asset source](angular/import-media/from-remote-source/unsplash-8f31f0/) and then updating the crop presets library entry using `cesdk.ui.updateAssetLibraryEntry('ly.img.cropPresets', { sourceIds: [...] })`. Each of the asset objects in the asset source must define a value for its `payload.transformPreset` property. ### Fixed Aspect Ratio[#](#fixed-aspect-ratio) When a fixed aspect ratio preset is applied it will resize the crop frame based on the `width` and `height` values provided. ``` { id: 'aspect-ratio-16-9', label: { en: '16:9' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/ratio-16-9.png` }, payload: { transformPreset: { type: 'FixedAspectRatio', width: 16, height: 9 } }} ``` * `type: type` specifies the preset type. ``` type: "FixedAspectRatio", ``` * `width: number` specifies the width of the crop frame. ``` width: 16, ``` * `height: number` specifies the height of the crop frame. ``` height: 9, ``` ### Free Aspect Ratio[#](#free-aspect-ratio) When a free aspect ratio preset is applied it will enable the side-handles of the crop frame. ``` { id: 'aspect-ratio-free', label: { en: 'Free' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/ratio-free.png` }, payload: { transformPreset: { type: 'FreeAspectRatio' } }} ``` * `type: type` specifies the preset type. ``` type: "FreeAspectRatio", ``` ### Fixed Size[#](#fixed-size) When a fixed size preset is applied it will resize the selected block to the `width` and `height` provided. ``` { id: 'din-a1-portrait', label: { en: 'DIN A1 Portrait' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/din-a1-portrait.png` }, payload: { transformPreset: { type: 'FixedSize', width: 594, height: 841, designUnit: 'Millimeter' } }} ``` * `type: type` specifies the preset type. ``` type: "FixedSize", ``` * `width: number` specifies the width of the page in the specified design unit. ``` width: 1280, ``` * `height: number` specifies the height of the page in the specified design unit. ``` height: 720, ``` * `unit: 'Millimeter'|'Inch'|'Pixel'` describes unit in which `width`, `height` and `bleedMargin` are specified. ``` designUnit: 'Pixel', ``` ## Full Code[#](#full-code) Here’s the full code for configuring the default page formats: ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' }), ui: { stylesheets: { /* ... */ }, elements: { /* ... */ } }}; CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => { // Do something with the instance of CreativeEditor SDK // Set scale using the new API instance.ui.setScale('normal'); // Populate the asset library with default / demo asset sources. instance.addDefaultAssetSources(); instance.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); // Add a custom crop preset asset source. instance.engine.asset.addLocalSource('my-custom-crop-presets'); instance.engine.asset.addAssetToSource( 'my-custom-crop-presets', { id: 'aspect-ratio-free', label: { en: 'Free' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/ratio-free.png` }, payload: { transformPreset: { type: 'FreeAspectRatio' } } } ); instance.engine.asset.addAssetToSource( 'my-custom-crop-presets', { id: 'aspect-ratio-16-9', label: { en: '16:9' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/ratio-16-9.png` }, payload: { transformPreset: { type: 'FixedAspectRatio', width: 16, height: 9 } } } ); instance.engine.asset.addAssetToSource( 'my-custom-crop-presets', { id: 'din-a1-portrait', label: { en: 'DIN A1 Portrait' }, meta: { width: 80, height: 120, thumbUri: `${window.location.protocol}//${window.location.host}/din-a1-portrait.png` }, payload: { transformPreset: { type: 'FixedSize', width: 594, height: 841, designUnit: 'Millimeter' } } } ); // Update crop presets library entry instance.ui.updateAssetLibraryEntry('ly.img.cropPresets', { sourceIds: [ // 'ly.img.crop.presets', 'my-custom-crop-presets' ] }); await instance.createDesignScene();}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/customization/canvas-menu-0d2b5b) # Canvas Menu ## Rearrange Components[#](#rearrange-components) There are 6 APIs for getting, setting, updating, removing, and inserting components in the Canvas Menu. The content of the Canvas Menu changes based on the current [edit mode](angular/concepts/edit-modes-1f5b6c/) (`'Transform'` (the default), `'Text'`, `'Crop'`, `'Trim'`, or a custom value), so all APIs accept an `orderContext` argument to specify the mode. For example usage of these APIs, see also [Moving Existing Buttons](angular/user-interface/customization/rearrange-buttons-97022a/) or [Adding New Buttons](angular/user-interface/ui-extensions/add-new-button-74884d/) in the Guides section. ### Get the Current Order[#](#get-the-current-order) ``` cesdk.ui.getCanvasMenuOrder( orderContext: OrderContext = { editMode: 'Transform' }) ``` When omitting the `orderContext` parameter, the order for the `'Transform'` edit mode is returned, e.g. ``` cesdk.ui.getCanvasMenuOrder();// => [// {id: 'ly.img.group.enter.canvasMenu'},// {id: 'ly.img.group.select.canvasMenu'},// ...// ] ``` ### Set a new Order[#](#set-a-new-order) ``` setCanvasMenuOrder( canvasMenuOrder: (CanvasMenuComponentId | OrderComponent)[], orderContext: OrderContext = { editMode: 'Transform' }) ``` When omitting the `orderContext` parameter, the order is set for the default edit mode (`'Transform'`), e.g.: ``` // Sets the order for transform mode by defaultcesdk.ui.setCanvasMenuOrder(['my.component.for.transform.mode']); ``` ### Update Components[#](#update-components) ``` updateCanvasMenuOrderComponent( matcher: OrderComponentMatcher>, update: CanvasMenuComponentId | Partial> | ((component: OrderComponent) => Partial>), orderContext?: OrderContext) ``` Updates existing components in the canvas menu. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches The update can be: * A new component ID string * A partial object with updated properties * A function that receives the current component and returns the updated one Returns an object with the number of updated components and the updated order array. ``` // Replace the duplicate button with a custom duplicate componentcesdk.ui.updateCanvasMenuOrderComponent( 'ly.img.duplicate.canvasMenu', 'my-custom-duplicate-component',); // Replace text edit controls with simplified versions for basic userscesdk.ui.updateCanvasMenuOrderComponent( component => component.id === 'ly.img.text.edit.canvasMenu', 'my-simple-text-edit-component',); ``` ### Remove Components[#](#remove-components) ``` removeCanvasMenuOrderComponent( matcher: OrderComponentMatcher>, orderContext?: OrderContext) ``` Removes components from the canvas menu. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches Returns an object with the number of removed components and the updated order array. ``` // Remove placeholder controls for simplified interfacecesdk.ui.removeCanvasMenuOrderComponent('ly.img.placeholder.canvasMenu'); // Remove all text editing controls for basic userscesdk.ui.removeCanvasMenuOrderComponent(component => component.id.includes('text'),); // Remove group controls for single-element contextscesdk.ui.removeCanvasMenuOrderComponent({ id: 'ly.img.group.enter.canvasMenu',}); ``` ### Insert Components[#](#insert-components) ``` insertCanvasMenuOrderComponent( matcher: OrderComponentMatcher>, component: CanvasMenuComponentId | OrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext) ``` Inserts new components into the canvas menu. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches The location can be: * `'before'` - Insert before the matched component * `'after'` - Insert after the matched component (default) * `'replace'` - Replace the matched component * `'asChild'` - Insert as a child of the matched component Returns the updated canvas menu order array. ``` // Add a custom action after the duplicate buttoncesdk.ui.insertCanvasMenuOrderComponent( 'ly.img.duplicate.canvasMenu', 'my-custom-action-component',); // Add a separator before the delete button for better organizationcesdk.ui.insertCanvasMenuOrderComponent( 'ly.img.delete.canvasMenu', 'ly.img.separator', 'before',); // Replace the default replace button with a custom onecesdk.ui.insertCanvasMenuOrderComponent( 'ly.img.replace.canvasMenu', 'my-custom-replace-component', 'replace',); ``` ## Canvas Menu Components[#](#canvas-menu-components) The following lists the default Canvas Menu components available within CE.SDK. Take special note of the “Feature ID” column. Most components can be hidden/disabled by disabling the corresponding feature using the Feature API. Also note that many components are only rendered for the block types listed in the “Renders for” column, because their associated controls (e.g. font size) are only meaningful for specific kinds of blocks (e.g. text). ### Layout Helpers[#](#layout-helpers) | Component ID | Description | | --- | --- | | `ly.img.separator` | Adds a vertical separator (`
` element) in the Canvas Menu. Separators follow some special layouting rules: \- If 2 or more separators end up next to each other (e.g. due to other components not rendering), **only 1** separator will be rendered. \- Separators that end up being the first or last element in the Canvas Menu will **not** be rendered. \- Separators directly adjacent _to the left side_ of a spacer (see below) will **not** be rendered. | ### Common Controls[#](#common-controls) These components are useful for editing various different block types. | Component ID | Description | Feature ID | Renders for | | --- | --- | --- | --- | | `ly.img.replace.canvasMenu` | Replace button: Opens the “Replace” Panel offering to replace the current image or video fill. | `ly.img.replace` | Images, Videos | | `ly.img.placeholder.canvasMenu` | Placeholder button: Opens the “Placeholder” panel, allowing the user to toggle specific [constraints](angular/create-templates/add-dynamic-content/placeholders-d9ba8a/) on the selected block. | `ly.img.placeholder` | Every block | | `ly.img.duplicate.canvasMenu` | Duplicate button: Duplicates the selected elements when pressed. | `ly.img.duplicate` | Every block | | `ly.img.delete.canvasMenu` | Delete button: Deletes the selected elements when pressed. | `ly.img.delete` | Every block | ### Text[#](#text) These components are relevant for editing text blocks, and will only render when a text block is selected. | Component ID | Description | Feature ID | | --- | --- | --- | | `ly.img.text.edit.canvasMenu` | Edit button: Switches to text edit mode when pressed. | `ly.img.text.edit` | | `ly.img.text.color.canvasMenu` | Color swatch button: Opens the Color Panel, where the user can set the color for the currently selected text run. | `ly.img.fill` | | `ly.img.text.bold.canvasMenu` | Bold toggle: Toggles the bold cut (if available) for the currently selected text run. | `ly.img.text.edit` | | `ly.img.text.italic.canvasMenu` | Italic toggle: Toggles the italic cut (if available) for the currently selected text run. | `ly.img.text.edit` | | `ly.img.text.variables.canvasMenu` | Insert Variable button: Opens a dropdown containing the selection of available text variables. | | ### Groups[#](#groups) These controls will only render when a group or an element of a group is selected. | Component ID | Description | Feature ID | Renders for | | --- | --- | --- | --- | | `ly.img.group.enter.canvasMenu` | Enter group button: Moves selection to the first element of the group when pressed. | `ly.img.group` | Groups | | `ly.img.group.select.canvasMenu` | Select group button: Moves selection to the parent group of the currently selected element when pressed. | `ly.img.group` | Elements within groups | ### Page[#](#page) These controls will only render when a page is selected. | Component ID | Description | Feature ID | | --- | --- | --- | | `ly.img.page.moveUp.canvasMenu` | Move Up/Left button: Moves the current page closer to the **start** of a multi-page document. | `ly.img.page.move` | | `ly.img.page.moveDown.canvasMenu` | Move Down/Right button: Moves the current page closer to the **end** of a multi-page document. | `ly.img.page.move` | ## Default Order[#](#default-order) The default order of the Canvas Menu is the following: ### Transform Mode[#](#transform-mode) ``` [ 'ly.img.group.enter.canvasMenu', 'ly.img.group.select.canvasMenu', 'ly.img.page.moveUp.canvasMenu', 'ly.img.page.moveDown.canvasMenu', 'ly.img.separator', 'ly.img.text.edit.canvasMenu', 'ly.img.replace.canvasMenu', 'ly.img.separator', 'ly.img.placeholder.canvasMenu', 'ly.img.separator', 'ly.img.duplicate.canvasMenu', 'ly.img.delete.canvasMenu',]; ``` ### Text Mode[#](#text-mode) ``` [ 'ly.img.text.color.canvasMenu', 'ly.img.separator', 'ly.img.text.bold.canvasMenu', 'ly.img.text.italic.canvasMenu', 'ly.img.separator', 'ly.img.text.variables.canvasMenu',]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/customization/color-palette-429fd9) # Color Palette CE.SDK’s color palette system allows you to replace the default colors with custom brand colors, ensuring consistent visual identity across all user-created designs. By configuring color libraries through the asset system, you can provide users with predefined color sets that match your brand guidelines, simplify color selection, and maintain design consistency. ![Color Palette example showing custom brand colors organized in the CE.SDK color picker](/docs/cesdk/_astro/browser.hero.Mt9Zjyoa_Z2sYea2.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples)[ GitHub](https://github.com/imgly/cesdk-web-examples) The CE.SDK can be configured with a series of colors that can be directly used whenever a color needs to be chosen. These color libraries need to be provided as asset sources - see our guide on [Custom Color Libraries](angular/colors/create-color-palette-7012e0/) for more details on how this is achieved. CE.SDK organizes colors using an asset-based architecture. Colors are stored as assets in asset sources, and the `ly.img.colors` asset library entry controls which color sources appear in the color picker UI. This separation between color storage (asset sources) and color display (asset library entry) provides flexibility in organizing and presenting colors to users. By default, CE.SDK includes a predefined color palette accessible through the `ly.img.colors.defaultPalette` source ID. We can replace this with custom palettes, add multiple color libraries, or combine both approaches. ## Configure Internationalization[#](#configure-internationalization) Before creating color libraries, we set up internationalized names that will appear in the color picker UI. This ensures users see readable names for each color library in their preferred language. ``` // Set up internationalized names for custom color librariescesdk.i18n.setTranslations({ en: { 'libraries.brandPrimaryColors.label': 'Brand Primary', 'libraries.brandSecondaryColors.label': 'Brand Secondary', 'libraries.brandNeutralColors.label': 'Neutrals', 'libraries.accentColors.label': 'Accent Colors' }}); ``` The translation keys follow the pattern `libraries.{sourceId}.label`, where `sourceId` matches the asset source identifier we’ll create. ## Create Custom Color Libraries[#](#create-custom-color-libraries) We organize our brand colors into logical groups by creating separate asset sources for each category. This approach makes it easy for users to navigate between different color sets. ### Brand Primary Colors[#](#brand-primary-colors) We create the primary brand color library with the main brand color and its variations: ``` // Create Brand Primary color librarycesdk.engine.asset.addLocalSource('brandPrimaryColors'); // Add brand primary colorscesdk.engine.asset.addAssetToSource('brandPrimaryColors', { id: 'brand-blue', label: { en: 'Brand Blue' }, tags: { en: ['blue', 'primary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.2, g: 0.4, b: 0.8 } }}); cesdk.engine.asset.addAssetToSource('brandPrimaryColors', { id: 'brand-blue-dark', label: { en: 'Brand Blue Dark' }, tags: { en: ['blue', 'dark', 'primary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.1, g: 0.2, b: 0.5 } }}); cesdk.engine.asset.addAssetToSource('brandPrimaryColors', { id: 'brand-blue-light', label: { en: 'Brand Blue Light' }, tags: { en: ['blue', 'light', 'primary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.6, g: 0.7, b: 0.9 } }}); ``` Each color asset includes: * **id**: Unique identifier for the color * **label**: Display name (internationalized) * **tags**: Searchable keywords for filtering * **payload.color**: The actual color data with colorSpace and RGB values ### Brand Secondary Colors[#](#brand-secondary-colors) Next, we add secondary brand colors that complement the primary palette: ``` // Create Brand Secondary color librarycesdk.engine.asset.addLocalSource('brandSecondaryColors'); cesdk.engine.asset.addAssetToSource('brandSecondaryColors', { id: 'brand-orange', label: { en: 'Brand Orange' }, tags: { en: ['orange', 'secondary'] }, payload: { color: { colorSpace: 'sRGB', r: 1.0, g: 0.6, b: 0.0 } }}); cesdk.engine.asset.addAssetToSource('brandSecondaryColors', { id: 'brand-orange-dark', label: { en: 'Brand Orange Dark' }, tags: { en: ['orange', 'dark', 'secondary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.8, g: 0.4, b: 0.0 } }}); ``` ### Neutral Colors[#](#neutral-colors) We include a set of neutral colors for backgrounds, borders, and text: ``` // Create Brand Neutral colors librarycesdk.engine.asset.addLocalSource('brandNeutralColors'); cesdk.engine.asset.addAssetToSource('brandNeutralColors', { id: 'neutral-black', label: { en: 'Black' }, tags: { en: ['black', 'neutral'] }, payload: { color: { colorSpace: 'sRGB', r: 0.0, g: 0.0, b: 0.0 } }}); cesdk.engine.asset.addAssetToSource('brandNeutralColors', { id: 'neutral-gray', label: { en: 'Gray' }, tags: { en: ['gray', 'neutral'] }, payload: { color: { colorSpace: 'sRGB', r: 0.5, g: 0.5, b: 0.5 } }}); cesdk.engine.asset.addAssetToSource('brandNeutralColors', { id: 'neutral-white', label: { en: 'White' }, tags: { en: ['white', 'neutral'] }, payload: { color: { colorSpace: 'sRGB', r: 1.0, g: 1.0, b: 1.0 } }}); ``` ### Accent Colors[#](#accent-colors) We add accent colors for special use cases: ``` // Create Accent Colors librarycesdk.engine.asset.addLocalSource('accentColors'); cesdk.engine.asset.addAssetToSource('accentColors', { id: 'accent-green', label: { en: 'Accent Green' }, tags: { en: ['green', 'accent'] }, payload: { color: { colorSpace: 'sRGB', r: 0.2, g: 0.8, b: 0.3 } }}); cesdk.engine.asset.addAssetToSource('accentColors', { id: 'accent-gold', label: { en: 'Accent Gold' }, tags: { en: ['gold', 'accent'] }, payload: { color: { colorSpace: 'sRGB', r: 0.85, g: 0.65, b: 0.13 } }}); ``` ## Configure the Color Picker[#](#configure-the-color-picker) After creating all color libraries, we configure which ones appear in the color picker UI: ``` // Configure which color libraries appear in the color picker// The order in sourceIds determines the display order in the UIcesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: [ 'brandPrimaryColors', 'brandSecondaryColors', 'brandNeutralColors', 'accentColors' // Note: 'ly.img.colors.defaultPalette' is intentionally omitted // to replace the default palette completely ]}); ``` The `sourceIds` array determines both which libraries appear and their order in the UI. By omitting `ly.img.colors.defaultPalette`, we completely replace the default palette with our custom colors. ## Color Format Reference[#](#color-format-reference) CE.SDK supports three color formats in palette assets: ### RGB Colors (sRGB)[#](#rgb-colors-srgb) ``` payload: { color: { colorSpace: 'sRGB', r: 0.2, // Red: 0.0 to 1.0 g: 0.4, // Green: 0.0 to 1.0 b: 0.8 // Blue: 0.0 to 1.0 }} ``` ### CMYK Colors[#](#cmyk-colors) ``` payload: { color: { c: 0.0, // Cyan: 0.0 to 1.0 m: 1.0, // Magenta: 0.0 to 1.0 y: 0.0, // Yellow: 0.0 to 1.0 k: 0.0, // Black: 0.0 to 1.0 tint: 1.0 // Tint: 0.0 to 1.0 }} ``` ### Spot Colors[#](#spot-colors) ``` // First define the spot colorengine.editor.setSpotColorRGB('BrandGold', 0.85, 0.65, 0.13); // Then reference it in the assetpayload: { color: { name: 'BrandGold', tint: 1.0, externalReference: '' }} ``` ## Keep the Default Palette[#](#keep-the-default-palette) If you want to keep the default palette alongside your custom colors, include it in the `sourceIds` array: ``` cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: [ 'brandPrimaryColors', 'brandSecondaryColors', 'ly.img.colors.defaultPalette', // Include default palette 'brandNeutralColors' ]}); ``` The position in the array determines where the default palette appears relative to your custom libraries. ## Advanced Techniques[#](#advanced-techniques) ### Dynamic Color Loading[#](#dynamic-color-loading) You can load colors from an external API or configuration file: ``` async function loadBrandColors(apiUrl: string) { const response = await fetch(apiUrl); const brandColors = await response.json(); cesdk.engine.asset.addLocalSource('dynamicBrandColors'); brandColors.forEach((color: any) => { cesdk.engine.asset.addAssetToSource('dynamicBrandColors', { id: color.id, label: { en: color.name }, tags: { en: color.tags }, payload: { color: { colorSpace: 'sRGB', r: color.r, g: color.g, b: color.b } } }); }); cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['dynamicBrandColors'] });} ``` ### User-Specific Palettes[#](#user-specific-palettes) Provide different color palettes based on user roles or preferences: ``` function setupUserPalette(userRole: string) { const paletteMap: Record = { designer: ['fullBrandPalette', 'extendedColors'], marketer: ['limitedBrandPalette', 'templateColors'], viewer: ['basicColors'] }; cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: paletteMap[userRole] || ['basicColors'] });} ``` ## API Reference[#](#api-reference) | Method | Description | Parameters | Returns | | --- | --- | --- | --- | | `updateAssetLibraryEntry(id, config)` | Controls which asset sources appear in specific UI components | `id: string, config: { sourceIds: string[] }` | `void` | | `addLocalSource(sourceId)` | Creates a new local asset source | `sourceId: string` | `void` | | `addAssetToSource(sourceId, asset)` | Adds an asset to a source | `sourceId: string, asset: object` | `void` | | `setSpotColorRGB(name, r, g, b)` | Defines a spot color for use in assets | `name: string, r: number, g: number, b: number` | `void` | ## Next Steps[#](#next-steps) * Explore [Custom Color Libraries](angular/colors/create-color-palette-7012e0/) for advanced asset source patterns * Learn about [Spot Colors](angular/colors/for-print/spot-c3a150/) for print workflows * Customize the overall UI with [Theming](angular/user-interface/appearance/theming-4b0938/) --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/customization/canvas-632c8e) # Canvas Bar ## Rearrange Components[#](#rearrange-components) There are 6 APIs for getting, setting, updating, removing, and inserting components in the Canvas Bar. The Canvas Bar can appear in 2 positions: At the top of the canvas, and at the bottom of the canvas. The APIs can get and set the content for both of these positions independently. The content of the Canvas Bar changes based on the current [edit mode](angular/concepts/edit-modes-1f5b6c/) (`'Transform'` (the default), `'Text'`, `'Crop'`, `'Trim'`, or a custom value), so all APIs accept an `orderContext` argument to specify the mode. For example usage of similar APIs, see also [Moving Existing Buttons](angular/user-interface/customization/rearrange-buttons-97022a/) or [Adding New Buttons](angular/user-interface/ui-extensions/add-new-button-74884d/) in the Guides section. ### Get the Current Order[#](#get-the-current-order) ``` getCanvasBarOrder( position: 'top' | 'bottom', orderContext: OrderContext = { editMode: 'Transform' }) ``` When omitting the `orderContext` parameter, the order for the `'Transform'` edit mode is returned, e.g. ``` cesdk.ui.getCanvasBarOrder('bottom');// => [// {id: 'ly.img.settings.canvasBar'},// {id: 'ly.img.spacer'},// ...// ] ``` ### Set a new Order[#](#set-a-new-order) ``` setCanvasBarOrder( canvasBarOrder: (CanvasBarComponentId | OrderComponent)[], position: 'top' | 'bottom', orderContext: OrderContext = { editMode: 'Transform' }) ``` When omitting the `orderContext` parameter, the order is set for the default edit mode (`'Transform'`), e.g.: ``` // Sets the order for transform mode by defaultcesdk.ui.setCanvasBarOrder('bottom', ['my.component.for.transform.mode']); ``` ### Update Components[#](#update-components) ``` updateCanvasBarOrderComponent( matcher: OrderComponentMatcher>, update: CanvasBarComponentId | Partial> | ((component: OrderComponent) => Partial>), position: 'top' | 'bottom', orderContext?: OrderContext) ``` Updates existing components in the canvas bar. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches The update can be: * A new component ID string * A partial object with updated properties * A function that receives the current component and returns the updated one Returns an object with the number of updated components and the updated order array. ``` // Replace the settings button with a custom settings componentcesdk.ui.updateCanvasBarOrderComponent( 'ly.img.settings.canvasBar', 'my-custom-settings-component', 'bottom',); // Replace the add page button with a custom page management componentcesdk.ui.updateCanvasBarOrderComponent( component => component.id === 'ly.img.page.add.canvasBar', 'my-custom-page-component', 'top',); ``` ### Remove Components[#](#remove-components) ``` removeCanvasBarOrderComponent( matcher: OrderComponentMatcher>, position: 'top' | 'bottom', orderContext?: OrderContext) ``` Removes components from the canvas bar. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches Returns an object with the number of removed components and the updated order array. ``` // Remove the add page button for single-page documentscesdk.ui.removeCanvasBarOrderComponent('ly.img.page.add.canvasBar', 'bottom'); // Remove all settings controls for basic userscesdk.ui.removeCanvasBarOrderComponent( component => component.id.includes('settings'), 'top',); // Remove specific components by IDcesdk.ui.removeCanvasBarOrderComponent( { id: 'ly.img.settings.canvasBar' }, 'bottom',); ``` ### Insert Components[#](#insert-components) ``` insertCanvasBarOrderComponent( matcher: OrderComponentMatcher>, component: CanvasBarComponentId | OrderComponent, position: 'top' | 'bottom', location?: InsertOrderComponentLocation, orderContext?: OrderContext) ``` Inserts new components into the canvas bar. The matcher can be: * `'first'` or `'last'` - matches the first or last component * A number - matches the component at that index * A component ID string * A partial object describing the component to match * A function that receives the component and index, returning true if it matches The location can be: * `'before'` - Insert before the matched component * `'after'` - Insert after the matched component (default) * `'replace'` - Replace the matched component * `'asChild'` - Insert as a child of the matched component Returns the updated canvas bar order array. ``` // Add a custom action after the settings buttoncesdk.ui.insertCanvasBarOrderComponent( 'ly.img.settings.canvasBar', 'my-custom-action-component', 'bottom',); // Add a separator before the add page button for better organizationcesdk.ui.insertCanvasBarOrderComponent( 'ly.img.page.add.canvasBar', 'ly.img.separator', 'bottom', 'before',); // Replace the default settings button with a custom onecesdk.ui.insertCanvasBarOrderComponent( 'ly.img.settings.canvasBar', 'my-custom-settings-component', 'top', 'replace',); ``` ## Canvas Bar Components[#](#canvas-bar-components) The following lists the default Canvas Bar components available within CE.SDK. ### Layout Helpers[#](#layout-helpers) | Component ID | Description | | --- | --- | | `ly.img.separator` | Adds a vertical separator (`
` element) in the Canvas Bar. Separators follow some special layouting rules: \- If 2 or more separators end up next to each other (e.g. due to other components not rendering), **only 1** separator will be rendered. \- Separators that end up being the first or last element in the Canvas Bar will **not** be rendered. \- Separators directly adjacent _to the left side_ of a spacer (see below) will **not** be rendered. | | `ly.img.spacer` | Adds horizontal spacing in the Canvas Bar. Spacers will try to fill all available whitespace, by distributing the available space between all spacers found in the Canvas Bar. | ### Common Controls[#](#common-controls) | Component ID | Description | | --- | --- | | `ly.img.settings.canvasBar` | Customize Editor button: Opens the Settings Panel when pressed. | | `ly.img.page.add.canvasBar` | Add Page button: Adds a new page to the end of the document when pressed. | ## Default Order[#](#default-order) The default order of the Canvas Bar is the following: ``` [ 'ly.img.settings.canvasBar', 'ly.img.spacer', 'ly.img.page.add.canvasBar', 'ly.img.spacer',]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/ai-integration/proxy-server-61f901) # Proxy Server For security reasons, you should never include your AI service API keys directly in client-side code. Instead, you should set up proxy services that securely forward requests to AI providers while keeping your API keys secure on the server side. Each AI provider configuration requires a `proxyUrl` parameter, which should point to your server-side endpoint that handles authentication and forwards requests to the AI service: ``` text2image: FalAiImage.RecraftV3({ proxyUrl: 'http://your-proxy-server.com/api/proxy'}); // Or use Recraft20b with icon style support:// text2image: FalAiImage.Recraft20b({// proxyUrl: 'http://your-proxy-server.com/api/proxy'// }); ``` ## Proxy Implementation Requirements[#](#proxy-implementation-requirements) Your proxy should implement specific requirements for each AI service: ### 1\. Anthropic Proxy[#](#1-anthropic-proxy) * **Target URL**: `https://api.anthropic.com/` * **Authentication Header**: Add `X-Api-Key` header with your Anthropic API key * **Request Handling**: Forward request body as-is to Anthropic API * **Response Handling**: Remove `content-encoding` headers to handle compressed responses correctly ### 2\. fal.ai Proxy[#](#2-falai-proxy) * **Dynamic URL**: Use a special header called `x-fal-target-url` to determine the actual endpoint * **Authentication Header**: Add `Authorization: Key YOUR_FAL_KEY` header * **Request Forwarding**: Preserve the complete request body and query parameters * For more information on the requirements, refer to fal.ai’s [documentation](https://docs.fal.ai/model-endpoints/server-side/#the-proxy-formula). ### 3\. ElevenLabs Proxy[#](#3-elevenlabs-proxy) * **Target URL**: `https://api.elevenlabs.io/` * **Authentication Header**: Add `xi-api-key` header with your ElevenLabs API key * **Headers**: Add an `Accept: audio/mpeg` header for audio requests. * **Response Handling**: Remove `content-encoding` headers to handle compressed responses correctly ### 4\. OpenAI Proxy[#](#4-openai-proxy) * **Target URL**: `https://api.openai.com/v1/` * **Authentication Header**: Add `Authorization: Bearer YOUR_OPENAI_API_KEY` header * **Response Handling**: Remove `content-encoding` headers to handle compressed responses correctly * **Rate Limiting**: Implement rate limiting based on your OpenAI plan tier (recommended) * For more information on the requirements, refer to OpenAI’s [documentation](https://platform.openai.com/docs/api-reference/debugging-requests) ## Important Information for All Proxies[#](#important-information-for-all-proxies) **Response Streaming** To handle large responses efficiently, response streaming should be enabled for all proxies. Common approaches include: * **Axios**: `responseType: 'stream'` * **Fetch API**: Access `response.body` as a `ReadableStream` * **Node.js native HTTP clients**: Use stream-based responses * **Other HTTP clients**: Check documentation for streaming support ## General Proxy Design[#](#general-proxy-design) A well-designed proxy service should: 1. **Route requests** to the appropriate AI service based on the endpoint path 2. **Add authentication** headers containing your API keys 3. **Forward the request body** to maintain payload integrity 4. **Handle response streaming** for services that support it (like Anthropic) 5. **Implement proper CORS headers** to allow browser requests 6. **Add appropriate error handling** and logging 7. **Consider rate limiting** to protect your API keys from overuse ## Security Considerations[#](#security-considerations) When implementing your proxy: * Store API keys securely as environment variables * Implement request validation to prevent abuse * Consider adding user authentication to your proxy endpoints * Monitor usage to detect unusual patterns * Implement proper error handling without leaking sensitive information This approach ensures your API keys remain secure while still allowing your application to utilize AI services. For a complete example of a proxy implementation, you can find various proxy templates online that can be adapted for your specific needs. --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/ai-integration/integrate-8e906c) # Integrate AI Into CE.SDK This tutorial will guide you through integrating AI-powered generation capabilities into your CreativeEditor SDK application using the `@imgly/plugin-ai-apps-web` package. You’ll learn how to set up various AI providers for generating images, videos, audio, and text. ## Prerequisites[#](#prerequisites) * Basic knowledge of JavaScript/TypeScript and React * Familiarity with CreativeEditor SDK * API keys for AI services (Anthropic, fal.ai, ElevenLabs, etc.) ## 1\. Project Setup[#](#1-project-setup) First, set up your project and install the necessary packages: Terminal window ``` # Initialize a new project or use an existing onenpm install @cesdk/cesdk-jsnpm install @imgly/plugin-ai-apps-web # Install individual AI generation packages as needednpm install @imgly/plugin-ai-image-generation-webnpm install @imgly/plugin-ai-video-generation-webnpm install @imgly/plugin-ai-audio-generation-webnpm install @imgly/plugin-ai-text-generation-web ``` ## 2\. Full Integration Example[#](#2-full-integration-example) Here’s a comprehensive example demonstrating how to integrate all AI capabilities with CreativeEditor SDK: ``` import React, { useRef } from 'react';import CreativeEditorSDK from '@cesdk/cesdk-js';import AiApps from '@imgly/plugin-ai-apps-web'; // Import providers from individual AI generation packagesimport Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic';import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai';import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai';import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai';import Elevenlabs from '@imgly/plugin-ai-audio-generation-web/elevenlabs'; // Import middleware utilitiesimport { uploadMiddleware } from '@imgly/plugin-ai-generation-web'; function App() { const cesdk = useRef(); return (
{ if (domElement != null) { CreativeEditorSDK.create(domElement, { license: 'your-license-key' }).then(async (instance) => { cesdk.current = instance; // Add navigation bar actions instance.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.importScene.navigationBar', 'ly.img.exportImage.navigationBar' ] }); // Add asset sources await Promise.all([ instance.addDefaultAssetSources(), instance.addDemoAssetSources({ sceneMode: 'Video', withUploadAssetSources: true }) ]); // Configure AI Apps dock position instance.ui.setDockOrder([ 'ly.img.ai.apps.dock', ...instance.ui.getDockOrder() ]); // Add AI options to canvas menu instance.ui.setCanvasMenuOrder([ 'ly.img.ai.text.canvasMenu', 'ly.img.ai.image.canvasMenu', ...instance.ui.getCanvasMenuOrder() ]); // Create a video scene to utilize all capabilities await instance.createVideoScene(); // Add the AI Apps plugin with all providers instance.addPlugin( AiApps({ providers: { // Text generation and transformation text2text: Anthropic.AnthropicProvider({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Optional: Configure default property values properties: { temperature: { default: 0.7 }, max_tokens: { default: 500 } } }), // Image generation - Multiple providers with selection UI text2image: [ FalAiImage.RecraftV3({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Add upload middleware to store generated images on your server middleware: [ uploadMiddleware(async (output) => { // Upload the generated image to your server const response = await fetch('https://your-server.com/api/store-image', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ imageUrl: output.url, metadata: { source: 'ai-generation' } }) }); const result = await response.json(); // Return the output with your server's URL return { ...output, url: result.permanentUrl }; }) ] }), // Alternative with icon style support FalAiImage.Recraft20b({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Configure dynamic defaults based on style type properties: { style: { default: 'broken_line' }, image_size: { default: 'square_hd' } } }), // Additional image provider for user selection OpenAiImage.GptImage1.Text2Image({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-api-key': 'your-key', 'x-request-source': 'cesdk-tutorial' } }) ], // Image-to-image transformation image2image: FalAiImage.GeminiFlashEdit({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), // Video generation - Multiple providers text2video: [ FalAiVideo.MinimaxVideo01Live({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), FalAiVideo.PixverseV35TextToVideo({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }) ], image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo( { proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } } ), // Audio generation text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl: 'https://your-server.com/api/elevenlabs-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), text2sound: Elevenlabs.ElevenSoundEffects({ proxyUrl: 'https://your-server.com/api/elevenlabs-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }) } }) ); }); } else if (cesdk.current != null) { cesdk.current.dispose(); } }} >
);} export default App; ``` ## 3\. AI Provider Configuration[#](#3-ai-provider-configuration) Each AI provider type serves a specific purpose and creates different types of content: ### Text Generation (Anthropic)[#](#text-generation-anthropic) ``` text2text: AnthropicProvider({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }}); ``` The text provider enables capabilities like: * Improving writing quality * Fixing spelling and grammar * Making text shorter or longer * Changing tone (professional, casual, friendly) * Translating to different languages * Custom text transformations ### Image Generation[#](#image-generation) #### Multiple Providers Configuration[#](#multiple-providers-configuration) ``` // Text-to-image generation with multiple providers for user selectiontext2image: [ FalAiImage.RecraftV3({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), // Alternative with icon style support FalAiImage.Recraft20b({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), OpenAiImage.GptImage1.Text2Image({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-api-key': 'your-key', 'x-request-source': 'cesdk-tutorial' } })], // Image-to-image transformationimage2image: FalAiImage.GeminiFlashEdit({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }}) ``` When multiple providers are configured, users will see a selection box to choose between them. Image generation features include: * Creating images from text descriptions * Multiple style options (realistic, illustration, vector) * Various size presets and custom dimensions * Transforming existing images based on text prompts ### Video Generation[#](#video-generation) #### Multiple Providers Configuration[#](#multiple-providers-configuration-1) ``` // Text-to-video generation with multiple providers for user selectiontext2video: [ FalAiVideo.MinimaxVideo01Live({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), FalAiVideo.PixverseV35TextToVideo({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } })], // Image-to-video transformationimage2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }}) ``` Video generation capabilities include: * Creating videos from text descriptions * Transforming still images into videos * Fixed output dimensions (typically 1280×720) * 5-second video duration ### Audio Generation (ElevenLabs)[#](#audio-generation-elevenlabs) ``` // Text-to-speech generationtext2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }}), // Sound effect generationtext2sound: Elevenlabs.ElevenSoundEffects({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }}) ``` Audio generation features include: * Text-to-speech with multiple voices * Multilingual support * Adjustable speaking speed * Sound effect generation from text descriptions * Creating ambient sounds and effects ## 4\. UI Integration[#](#4-ui-integration) The AI Apps plugin registers several UI components to CreativeEditor SDK: ### AI Dock Button[#](#ai-dock-button) The main entry point for AI features is the AI dock button, which you can position in the dock: ``` // Add the AI dock component to the beginning of the dockcesdk.ui.setDockOrder(['ly.img.ai.apps.dock', ...cesdk.ui.getDockOrder()]); // Or add it at a specific positionconst currentOrder = cesdk.ui.getDockOrder();currentOrder.splice(2, 0, 'ly.img.ai.apps.dock');cesdk.ui.setDockOrder(currentOrder); ``` ### Canvas Menu Options[#](#canvas-menu-options) AI text and image transformations are available in the canvas context menu: ``` cesdk.ui.setCanvasMenuOrder([ 'ly.img.ai.text.canvasMenu', 'ly.img.ai.image.canvasMenu', ...cesdk.ui.getCanvasMenuOrder()]); ``` ### AI Apps Menu[#](#ai-apps-menu) In video mode, clicking the AI dock button shows cards for all available AI generation types. This menu automatically adjusts based on the available providers you’ve configured. ## 5\. Using Middleware[#](#5-using-middleware) The AI generation framework supports middleware that can enhance or modify the generation process. Middleware functions are executed in sequence and can perform operations before generation, after generation, or both. ### Common Middleware Types[#](#common-middleware-types) #### Upload Middleware[#](#upload-middleware) The `uploadMiddleware` is useful when you need to store generated content on your server before it’s used: ``` import { uploadMiddleware } from '@imgly/plugin-ai-generation-web'; // In your provider configurationmiddleware: [ uploadMiddleware(async (output) => { // Upload the output to your server const response = await fetch('https://your-server.com/api/upload', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: output.url }) }); const result = await response.json(); // Return updated output with your server's URL return { ...output, url: result.permanentUrl }; })] ``` Use cases for upload middleware: * Storing generated assets in your own cloud storage * Adding watermarks or processing assets before use * Tracking/logging generated content * Implementing licensing or rights management #### Rate Limiting Middleware[#](#rate-limiting-middleware) To prevent abuse of AI services, you can implement rate limiting: ``` import { rateLimitMiddleware } from '@imgly/plugin-ai-generation-web'; // In your provider configurationmiddleware: [ rateLimitMiddleware({ maxRequests: 10, timeWindowMs: 60 * 60 * 1000, // 1 hour onRateLimitExceeded: (input, options, info) => { // Show a notice to the user console.log(`Rate limit reached: ${info.currentCount}/${info.maxRequests}`); return false; // Reject the request } })] ``` #### Custom Error Handling Middleware[#](#custom-error-handling-middleware) You can create custom middleware for error handling: ``` const errorMiddleware = async (input, options, next) => { try { return await next(input, options); } catch (error) { // Handle error (show UI notification, log, etc.) console.error('Generation failed:', error); // You can rethrow or return a fallback throw error; }}; ``` ### Middleware Order[#](#middleware-order) The order of middleware is important - they’re executed in the sequence provided: ``` middleware: [ // Executes first rateLimitMiddleware({ maxRequests: 10, timeWindowMs: 3600000 }), // Executes second (only if rate limit wasn't exceeded) loggingMiddleware(), // Executes third (after generation completes) uploadMiddleware(async (output) => { /* ... */ })] ``` ## 6\. Controlling Features with Feature API[#](#6-controlling-features-with-feature-api) You can control which AI features are available to users using CE.SDK’s Feature API. This is useful for: * Creating different feature tiers for different user groups * Simplifying the UI by hiding unused features * Temporarily disabling features during maintenance ### Basic Feature Control[#](#basic-feature-control) ``` // Disable specific quick actionscesdk.feature.enable('ly.img.plugin-ai-image-generation-web.quickAction.editImage', false);cesdk.feature.enable('ly.img.plugin-ai-text-generation-web.quickAction.translate', false); // Control input types for image/video generationcesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fromText', true);cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fromImage', false); // Hide provider selection dropdownscesdk.feature.enable('ly.img.plugin-ai-image-generation-web.providerSelect', false); // Control style groups for specific providers (e.g., RecraftV3, Recraft20b)cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.style.vector', false);cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fal-ai/recraft/v2/text-to-image.style.icon', false); ``` For more details on available feature flags, see the [@imgly/plugin-ai-generation-web documentation](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-generation-web#available-feature-flags). ## 7\. Proxy Server Configuration[#](#7-proxy-server-configuration) For security reasons, you should never include your AI service API keys directly in client-side code. Instead, you should set up proxy services that securely forward requests to AI providers while keeping your API keys secure on the server side. Each AI provider configuration requires a `proxyUrl` parameter, which should point to your server-side endpoint that handles authentication and forwards requests to the AI service: ``` text2image: FalAiImage.RecraftV3({ proxyUrl: 'http://your-proxy-server.com/api/proxy'}); // Or use Recraft20b with icon style support:// text2image: FalAiImage.Recraft20b({// proxyUrl: 'http://your-proxy-server.com/api/proxy'// }); ``` Your proxy server should handle authentication, forward requests to the appropriate AI service providers, and manage response streaming for optimal performance. ## Conclusion[#](#conclusion) By following this tutorial, you’ve learned how to integrate powerful AI generation capabilities into your CreativeEditor SDK application. You now know how to: 1. Set up various AI providers for different content types 2. Configure the AI Apps plugin with all necessary providers 3. Integrate AI features into the editor UI 4. Protect your API keys with proxy services This integration enables your users to create impressive content with AI assistance directly within your application, enhancing their creative workflow and the overall value of your product. For more details about each AI provider, refer to the individual package documentation: * [@imgly/plugin-ai-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-generation-web) * [@imgly/plugin-ai-image-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-image-generation-web) * [@imgly/plugin-ai-video-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-video-generation-web) * [@imgly/plugin-ai-audio-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-audio-generation-web) * [@imgly/plugin-ai-text-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-text-generation-web) --- [Source](https:/img.ly/docs/cesdk/angular/user-interface/ai-integration/custom-provider-16e851) # Custom AI Provider This tutorial will guide you through creating a custom AI-powered image generation provider for CreativeEditor SDK (CE.SDK) using the `@imgly/plugin-ai-generation-web` package. You’ll learn how to implement an AI provider from scratch using the schema-based approach and how to seamlessly integrate sophisticated AI image generation capabilities with CE.SDK. ## Prerequisites[#](#prerequisites) * Basic knowledge of TypeScript and React * Familiarity with CreativeEditor SDK * An image generation API to integrate with ## 1\. Project Setup[#](#1-project-setup) First, set up your project and install the necessary packages: Terminal window ``` # Create a new project or use an existing onemkdir my-image-providercd my-image-provider # Initialize package.jsonnpm init -y # Install required dependenciesnpm install @imgly/plugin-ai-generation-web @cesdk/cesdk-js typescript ``` ## 2\. Understanding the Provider Interface[#](#2-understanding-the-provider-interface) The core of the AI generation system is the `Provider` interface. For image generation, we implement this interface with `kind: 'image'`. Key components of an image provider: * **id**: Unique identifier for your provider * **kind**: Always ‘image’ for image generation * **initialize**: Setup function for any necessary configuration * **input**: Configuration for the input UI panel and parameters * **output**: Configuration for generation behavior and result handling ## 3\. Creating an OpenAPI Schema[#](#3-creating-an-openapi-schema) For schema-based input, you need an OpenAPI schema that defines your input parameters. Create a file called `myApiSchema.json`: ``` { "openapi": "3.0.0", "info": { "title": "My Image Generator API", "version": "1.0.0" }, "components": { "schemas": { "GenerationInput": { "type": "object", "required": ["prompt"], "properties": { "prompt": { "type": "string", "title": "Description", "description": "Describe the image you want to generate", "x-imgly-builder": { "component": "TextArea" } }, "width": { "type": "integer", "title": "Width", "default": 512, "enum": [256, 512, 768, 1024], "x-imgly-builder": { "component": "Select" } }, "height": { "type": "integer", "title": "Height", "default": 512, "enum": [256, 512, 768, 1024], "x-imgly-builder": { "component": "Select" } }, "style": { "type": "string", "title": "Style", "default": "photorealistic", "enum": [ "photorealistic", "cartoon", "sketch", "painting" ], "x-imgly-builder": { "component": "Select" } } }, "x-order-properties": ["prompt", "width", "height", "style"] } } }} ``` ## 4\. Understanding CommonProviderConfiguration[#](#4-understanding-commonproviderconfiguration) Before creating your provider, it’s important to understand the `CommonProviderConfiguration` interface. This interface provides standardized configuration options that all providers should extend: ``` interface CommonProviderConfiguration { // The proxy URL to use for the provider proxyUrl: string; // Enable debug mode for additional logging debug?: boolean; // Middleware for request/response processing middleware?: Middleware[]; // Custom headers to include in all API requests headers?: Record; // Override provider's default history asset source history?: false | '@imgly/local' | '@imgly/indexedDB' | (string & {}); // Configure supported quick actions supportedQuickActions?: { [quickActionId: string]: Partial> | false | null; }; // Configure default property values properties?: PropertiesConfiguration;} ``` ### Extended Configuration Options[#](#extended-configuration-options) #### Headers Configuration[#](#headers-configuration) The `headers` property is particularly useful for: * Adding custom client identification headers * Including version information * Passing through metadata required by your API * Adding correlation IDs for request tracing #### History Configuration[#](#history-configuration) The `history` property allows you to override the provider’s default history storage behavior: * `false`: Disable history storage entirely * `'@imgly/local'`: Use temporary local storage (not persistent across sessions) * `'@imgly/indexedDB'`: Use browser IndexedDB storage (persistent across sessions) * `string`: Use your own custom asset source ID #### Quick Actions Configuration[#](#quick-actions-configuration) The `supportedQuickActions` property allows you to customize which quick actions are supported and how they behave: * `false` or `null`: Remove the quick action entirely * `true`: Keep the provider’s default implementation * Object with `mapInput`: Override the quick action with custom input mapping * Object with other properties: Override with custom configuration #### Property Configuration[#](#property-configuration) The `properties` property allows you to define default values for any provider property: * Static values: Simple default values that apply to all users * Dynamic functions: Return values based on context (engine, cesdk, locale) * Context includes `engine`, `cesdk`, and `locale` for making informed decisions ## 5\. Creating a Schema-Based Image Provider[#](#5-creating-a-schema-based-image-provider) **Important Note**: The tutorial below shows the legacy quick action structure using `actions` array. The current architecture uses the `supported` object with quick action IDs. The example has been updated to reflect the new structure. Let’s create a simple provider that generates images by calling your API. Create a file called `MyImageProvider.ts`: ``` import { Provider, ImageOutput, loggingMiddleware, uploadMiddleware, CommonProviderConfiguration} from '@imgly/plugin-ai-generation-web';import type CreativeEditorSDK from '@cesdk/cesdk-js';import apiSchema from './myApiSchema.json'; // Define your input type based on your schemainterface MyProviderInput { prompt: string; width: number; height: number; style: string; image_url?: string; // For image-to-image operations} // Define provider configuration interface extending CommonProviderConfigurationinterface MyProviderConfiguration extends CommonProviderConfiguration { // Add any provider-specific configuration here customApiKey?: string;} // Create a function that returns your providerexport function MyImageProvider(config: MyProviderConfiguration): (context: { cesdk: CreativeEditorSDK;}) => Promise> { // Return a function that returns the provider return async ({ cesdk }) => { // Create and return the provider const provider: Provider<'image', MyProviderInput, ImageOutput> = { // Unique identifier for your provider id: 'my-image-provider', // Define output type as 'image' kind: 'image', // Initialize your provider initialize: async ({ engine, cesdk }) => { console.log('Initializing my image provider'); // Any setup needed (e.g., API client initialization) }, // Define input panel and UI using schema input: { panel: { type: 'schema', document: apiSchema, // Your OpenAPI schema inputReference: '#/components/schemas/GenerationInput', // Reference to your input schema userFlow: 'placeholder', // Creates a block first, then updates it with the generated content orderExtensionKeyword: 'x-order-properties', // Used to control property display order // Convert API input to block parameters getBlockInput: async (input) => ({ image: { width: input.width || 512, height: input.height || 512, label: `AI: ${input.prompt?.substring(0, 20)}...` } }) }, // Add quick actions for canvas menu quickActions: { supported: { // Map quick action IDs to provider input transformations 'ly.img.editImage': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.prompt, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) }, 'ly.img.swapBackground': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.prompt, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) }, 'ly.img.createVariant': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.prompt, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) }, 'ly.img.styleTransfer': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.style, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) } } } }, // Define output generation behavior output: { // Allow cancellation of generation abortable: true, // Store generated assets in browser's IndexedDB history: '@imgly/indexedDB', // Add middleware for logging and uploading middleware: [ loggingMiddleware(), // Example of upload middleware that stores generated images on your server uploadMiddleware(async (output) => { // Upload the image to your server const response = await fetch('https://your-server.com/api/upload', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: output.url, type: 'ai-generated-image' }) }); const result = await response.json(); // Return the output with the updated URL from your server return { ...output, url: result.storedImageUrl }; }), // Example: Custom error handling middleware async (input, options, next) => { try { return await next(input, options); } catch (error) { // Prevent default error notification options.preventDefault(); // Show custom error notification options.cesdk?.ui.showNotification({ type: 'error', message: `Image generation failed: ${error.message}`, action: { label: 'Try Again', onClick: () => {/* handle retry */} } }); throw error; } } ], // Configure success/error notifications notification: { success: { show: true, message: 'Image generated successfully!' }, error: { show: true, message: (context) => `Generation failed: ${context.error}` } }, // The core generation function generate: async (input, { abortSignal }) => { try { const requestBody: any = { prompt: input.prompt, width: input.width, height: input.height, style: input.style }; // If we have an image_url, this is an image-to-image operation if (input.image_url) { requestBody.image_url = input.image_url; } // Call your API to generate an image const response = await fetch(config.proxyUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', ...config.headers // Include custom headers }, body: JSON.stringify(requestBody), signal: abortSignal }); if (!response.ok) { throw new Error( `API error: ${response.statusText}` ); } const data = await response.json(); // Return the image URL return { kind: 'image', url: data.imageUrl // Replace with the actual property from your API response }; } catch (error) { console.error('Image generation failed:', error); throw error; } } } }; return provider; };} ``` ## 6\. Integrating with CE.SDK[#](#6-integrating-with-cesdk) Now let’s integrate your provider with CE.SDK using the `@imgly/plugin-ai-image-generation-web` package. Create an `index.ts` file: ``` import CreativeEditorSDK from '@cesdk/cesdk-js';import ImageGeneration from '@imgly/plugin-ai-image-generation-web';import { MyImageProvider } from './MyImageProvider'; // Initialize the editorasync function initializeEditor(container: HTMLElement) { const cesdk = await CreativeEditorSDK.create(container, { license: 'your-cesdk-license-key' }); // Add default asset sources await cesdk.addDefaultAssetSources(); // Add your image generation provider cesdk.addPlugin( ImageGeneration({ text2image: MyImageProvider({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial', 'x-api-key': 'your-api-key' }, customApiKey: 'your-custom-key' }), debug: true }) ); // Create a design scene await cesdk.createDesignScene(); // Add the dock component to open the AI image generation panel cesdk.ui.setDockOrder([ 'ly.img.ai.image-generation.dock', ...cesdk.ui.getDockOrder() ]); return cesdk;} // Start the editor when the DOM is loadeddocument.addEventListener('DOMContentLoaded', () => { const container = document.getElementById('cesdk-container'); if (container) { initializeEditor(container); }}); ``` ## 7\. Create an HTML Page[#](#7-create-an-html-page) Create an `index.html` file to host your editor: ``` AI Image Generation with CE.SDK
``` ## 8\. Build and Run the Example[#](#8-build-and-run-the-example) Let’s set up a complete build and run process using esbuild. Note that you’re free to use whatever build setup you’re most comfortable with (webpack, Vite, Parcel, etc.) - the following is just an example to get you started quickly. ### Setting up TypeScript[#](#setting-up-typescript) Create a basic TypeScript configuration: Terminal window ``` # Create a tsconfig.json filenpx tsc --init ``` Edit the generated `tsconfig.json` to include these recommended settings: ``` { "compilerOptions": { "target": "ES2020", "module": "ESNext", "moduleResolution": "node", "esModuleInterop": true, "strict": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "outDir": "./dist", "jsx": "react" }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"]} ``` ### Setting up esbuild[#](#setting-up-esbuild) Install esbuild as a development dependency: Terminal window ``` npm install --save-dev esbuild ``` Create a build script in your `package.json`: ``` { "name": "my-image-provider", "version": "1.0.0", "scripts": { "build": "esbuild index.ts --bundle --outfile=dist/index.js --platform=browser", "dev": "esbuild index.ts --bundle --outfile=dist/index.js --platform=browser --watch --servedir=." }, "dependencies": { "@cesdk/cesdk-js": "^1.48.0", "@imgly/plugin-ai-generation-web": "^0.1.0", "@imgly/plugin-ai-image-generation-web": "^0.1.0" }, "devDependencies": { "esbuild": "^0.19.0", "typescript": "^5.0.0" }} ``` ### Project Structure[#](#project-structure) Make sure your files are organized as follows: ``` my-image-provider/├── index.html├── index.ts├── MyImageProvider.ts├── myApiSchema.json├── package.json└── tsconfig.json ``` ### Running the Example[#](#running-the-example) Now you can build and run your example: Terminal window ``` # For production buildnpm run build # For development with live reloadnpm run dev ``` If you use `npm run dev`, esbuild will start a development server and you can view your project at [http://localhost:8000](http://localhost:8000). Alternatively, you can use any static file server after building: Terminal window ``` # Using serve (you might need to install it first with: npm install -g serve)serve # Or with Python's built-in HTTP serverpython -m http.server # Or with PHP's built-in serverphp -S localhost:8000 ``` ### Troubleshooting[#](#troubleshooting) If you encounter issues: 1. Check browser console for errors 2. Verify that your API endpoint is correctly configured 3. Make sure the CE.SDK license key is valid 4. Check that all dependencies are installed correctly Remember that this build setup is just an example - feel free to adapt it to your existing workflow or preferred build tools. The key components are: 1. TypeScript compilation 2. Bundling your code 3. Serving the HTML and bundled JavaScript ## Conclusion[#](#conclusion) You’ve now created a custom image generation provider for CE.SDK using the schema-based approach! Your provider integrates with the AI image generation plugin and provides a seamless user experience for generating images. The schema-based approach offers several advantages: * Automatic UI generation based on your schema * Built-in validation of input parameters * Consistent UI experience that matches the CE.SDK style * Easy ordering of properties using the `x-order-properties` extension ### Updated Architecture Features[#](#updated-architecture-features) The new architecture includes: * **Quick Action Registry**: Uses `supported` object with action IDs instead of action arrays * **Custom Headers**: All providers support headers configuration for API requests * **Enhanced Type Safety**: Improved TypeScript support with better provider interfaces * **Cross-plugin Support**: Actions can work across different AI generation plugins ### Custom Error Handling with preventDefault()[#](#custom-error-handling-with-preventdefault) Middleware can suppress default UI feedback behaviors using `options.preventDefault()`. This is useful when you want complete control over how errors and successes are presented to users: **What gets prevented:** * Error/success notifications (toast messages) * Block error state (error icon) * Console error logging **What is NOT prevented:** * Pending → Ready transition (loading spinner always stops) **Example: Error-specific handling:** ``` const smartErrorMiddleware = async (input, options, next) => { try { return await next(input, options); } catch (error) { options.preventDefault(); // Handle different error types with custom UI if (error.message?.includes('rate limit')) { options.cesdk?.ui.showDialog({ type: 'warning', content: 'Rate limit reached. Please upgrade for more generations.', actions: { label: 'Upgrade', onClick: () => window.open('/pricing') } }); } else if (error.message?.includes('network')) { options.cesdk?.ui.showNotification({ type: 'error', message: 'Network error. Please check your connection.' }); } else { options.cesdk?.ui.showNotification({ type: 'error', message: `Generation failed: ${error.message}` }); } throw error; }}; ``` ### Controlling Features with Feature API[#](#controlling-features-with-feature-api) You can control which UI elements and features are available to users using CE.SDK’s Feature API: ``` // Disable provider selection dropdown if you only want one provider visiblecesdk.feature.enable('ly.img.plugin-ai-image-generation-web.providerSelect', false); // Control input type visibility (for providers that support both text and image input)cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fromText', true);cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fromImage', false); // Provider-specific style controls (e.g., for RecraftV3 or Recraft20b)cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.style.vector', false); ``` Next steps: 1. Explore more quick action IDs from the available list (editImage, swapBackground, createVariant, styleTransfer, etc.) 2. Implement multiple providers with selection UI using provider arrays 3. Add custom middleware for request/response processing 4. Implement proper error handling and retry logic 5. Add custom asset sources for generated images 6. Use Feature API to customize the UI experience for different user groups ## Additional Resources[#](#additional-resources) * [CreativeEditor SDK Documentation](https://docs.img.ly/cesdk) * [`@imgly/plugin-ai-generation-web` Documentation](https://www.npmjs.com/package/@imgly/plugin-ai-generation-web) * [OpenAPI Specification](https://spec.openapis.org/oas/v3.0.3) --- [Source](https:/img.ly/docs/cesdk/angular/stickers-and-shapes/create-edit/edit-shapes-d67cfb) # Edit Shapes ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); engine.editor.setSetting('page/dimOutOfPageAreas', false); const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(graphic, imageFill); engine.block.setWidth(graphic, 100); engine.block.setHeight(graphic, 100); engine.block.appendChild(scene, graphic); engine.scene.zoomToBlock(graphic, 40, 40, 40, 40); engine.block.supportsShape(graphic); // Returns true const text = engine.block.create('text'); engine.block.supportsShape(text); // Returns false const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); const shape = engine.block.getShape(graphic); const shapeType = engine.block.getType(shape); const starShape = engine.block.createShape('star'); engine.block.destroy(engine.block.getShape(graphic)); engine.block.setShape(graphic, starShape); /* The following line would also destroy the currently attached starShape */ // engine.block.destroy(graphic); const allShapeProperties = engine.block.findAllProperties(starShape); engine.block.setInt(starShape, 'shape/star/points', 6);}); ``` ```
``` The `graphic` [design block](angular/concepts/blocks-90241e/) in CE.SDK allows you to modify and replace its shape. CreativeEditor SDK supports many different types of shapes, such as rectangles, lines, ellipses, polygons and custom vector paths. Similarly to blocks, each shape object has a numeric id which can be used to query and [modify its properties](angular/concepts/blocks-90241e/) . ## Accessing Shapes[#](#accessing-shapes) In order to query whether a block supports shapes, you should call the `supportsShape(id: number): boolean` API. Currently, only the `graphic` design block supports shape objects. ``` engine.block.supportsShape(graphic); // Returns trueconst text = engine.block.create('text');engine.block.supportsShape(text); // Returns false ``` To query the shape id of a design block, call the `getShape(id: number): number` API. You can now pass this id into other APIs in order to query more information about the shape, e.g. its type via the `getType(id: number): string` API. ``` const shape = engine.block.getShape(graphic);const shapeType = engine.block.getType(shape); ``` When replacing the shape of a design block, remember to destroy the previous shape object if you don’t intend to use it any further. Shape objects that are not attached to a design block will never be automatically destroyed. Destroying a design block will also destroy its attached shape block. ``` const starShape = engine.block.createShape('star');engine.block.destroy(engine.block.getShape(graphic));engine.block.setShape(graphic, starShape);/* The following line would also destroy the currently attached starShape */// engine.block.destroy(graphic); ``` ## Shape Properties[#](#shape-properties) Just like design blocks, shapes with different types have different properties that you can query and modify via the API. Use `findAllProperties(id: number): string[]` in order to get a list of all properties of a given shape. For the star shape in this example, the call would return `['name', 'shape/star/innerDiameter', 'shape/star/points', 'type', 'uuid']`. Please refer to the [API docs](angular/stickers-and-shapes/create-edit/edit-shapes-d67cfb/) for a complete list of all available properties for each type of shape. ``` const allShapeProperties = engine.block.findAllProperties(starShape); ``` Once we know the property keys of a shape, we can use the same APIs as for design blocks in order to modify those properties. For example, we can use `setInt(id: number, property: string, value: number): void` in order to change the number of points of the star to six. ``` engine.block.setInt(starShape, 'shape/star/points', 6); ``` ## Ellipse Type[#](#ellipse-type) A shape block representing an ellipse. This section describes the properties available for the **Ellipse Type** (`//ly.img.ubq/shape/ellipse`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | _(no specific properties)_ | | | | ## Line Type[#](#line-type) A shape block representing a line. This section describes the properties available for the **Line Type** (`//ly.img.ubq/shape/line`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | _(no specific properties)_ | | | | ## Polygon Type[#](#polygon-type) A shape block representing a polygon. This section describes the properties available for the **Polygon Type** (`//ly.img.ubq/shape/polygon`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `shape/polygon/cornerRadius` | `Float` | `0` | The radius for rounding the corners of the shape. | | `shape/polygon/sides` | `Int` | `5` | The number of sides the polygon is supposed to have. | ## Rect Type[#](#rect-type) A shape block representing a rectangle. This section describes the properties available for the **Rect Type** (`//ly.img.ubq/shape/rect`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `shape/rect/cornerRadiusBL` | `Float` | `0` | The bottom-left radius for rounding the corners of the shape. | | `shape/rect/cornerRadiusBR` | `Float` | `0` | The bottom-right radius for rounding the corners of the shape. | | `shape/rect/cornerRadiusTL` | `Float` | `0` | The top-left radius for rounding the corners of the shape. | | `shape/rect/cornerRadiusTR` | `Float` | `0` | The top-right radius for rounding the corners of the shape. | ## Star Type[#](#star-type) A shape block representing a star. This section describes the properties available for the **Star Type** (`//ly.img.ubq/shape/star`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `shape/star/innerDiameter` | `Float` | `0.5` | The inner diameter of the star. | | `shape/star/points` | `Int` | `5` | The number of tips the star is supposed to have. | ## Vector Path Type[#](#vector-path-type) A shape block representing a custom vector path. This section describes the properties available for the **Vector Path Type** (`//ly.img.ubq/shape/vector_path`) block type. | Property | Type | Default Value | Description | | --- | --- | --- | --- | | `shape/vector_path/height` | `Float` | `100` | The coordinate bounds in y direction. | | `shape/vector_path/path` | `String` | `""` | The path string, accepts a subset of svg path strings. | | `shape/vector_path/width` | `Float` | `100` | The coordinate bounds in x direction. | ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); engine.editor.setSetting('page/dimOutOfPageAreas', false); const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(graphic, imageFill); engine.block.setWidth(graphic, 100); engine.block.setHeight(graphic, 100); engine.block.appendChild(scene, graphic); engine.scene.zoomToBlock(graphic, 40, 40, 40, 40); engine.block.supportsShape(graphic); // Returns true const text = engine.block.create('text'); engine.block.supportsShape(text); // Returns false const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); const shape = engine.block.getShape(graphic); const shapeType = engine.block.getType(shape); const starShape = engine.block.createShape('star'); engine.block.destroy(engine.block.getShape(graphic)); engine.block.setShape(graphic, starShape); /* The following line would also destroy the currently attached starShape */ // engine.block.destroy(graphic); const allShapeProperties = engine.block.findAllProperties(starShape); engine.block.setInt(starShape, 'shape/star/points', 6);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/stickers-and-shapes/create-edit/create-stickers-cc46e5) # Create Stickers Create stickers from images for use in your designs, perfect for adding icons, logos, emoji, and detailed multi-color graphics that preserve their original appearance. ![Create stickers from images with two different methods](/docs/cesdk/_astro/browser.hero.Biw32ZjH_Z1LWiq2.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-stickers-and-shapes-create-stickers-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-stickers-and-shapes-create-stickers-browser) Stickers are graphic blocks with image fills that cannot be recolored. They work well for icons, brand logos, emoji, and complex multi-color graphics. Unlike shapes (which use solid or gradient fills and can be recolored), stickers preserve the original colors and details of the source image. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page dimensions engine.block.setWidth(page, 450); engine.block.setHeight(page, 250); // ===== Section 1: Using Convenience API ===== // Create sticker using the convenient addImage() method const sticker = await engine.block.addImage( 'https://cdn.img.ly/assets/v4/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_grin.svg' ); // Set size and position (preserve aspect ratio) const naturalWidth = engine.block.getWidth(sticker); const naturalHeight = engine.block.getHeight(sticker); const scale = 80 / Math.max(naturalWidth, naturalHeight); engine.block.setWidth(sticker, naturalWidth * scale); engine.block.setHeight(sticker, naturalHeight * scale); engine.block.setPositionX(sticker, 95); engine.block.setPositionY(sticker, 85); // Prevent cropping and mark as sticker if (engine.block.supportsContentFillMode(sticker)) { engine.block.setContentFillMode(sticker, 'Contain'); } engine.block.setKind(sticker, 'Sticker'); // Add to scene engine.block.appendChild(page, sticker); // ===== Section 2: Manual Construction ===== // Create sticker manually for fine-grained control const manualSticker = engine.block.create('graphic'); // Set a shape (required for graphic blocks to be visible) engine.block.setShape(manualSticker, engine.block.createShape('rect')); // Create and apply image fill const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://cdn.img.ly/assets/v4/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_blush.svg' ); engine.block.setFill(manualSticker, imageFill); // Set size and position (preserve aspect ratio) const manualWidth = engine.block.getWidth(manualSticker) || 100; const manualHeight = engine.block.getHeight(manualSticker) || 100; const manualScale = 80 / Math.max(manualWidth, manualHeight); engine.block.setWidth(manualSticker, manualWidth * manualScale); engine.block.setHeight(manualSticker, manualHeight * manualScale); engine.block.setPositionX(manualSticker, 275); engine.block.setPositionY(manualSticker, 85); // Prevent cropping and mark as sticker if (engine.block.supportsContentFillMode(manualSticker)) { engine.block.setContentFillMode(manualSticker, 'Contain'); } engine.block.setKind(manualSticker, 'Sticker'); // Add to scene engine.block.appendChild(page, manualSticker); }} export default Example; ``` ## Creating Stickers from Images[#](#creating-stickers-from-images) We use `engine.block.addImage()` to create stickers quickly. This method creates the graphic block and image fill in one call. After creation, we read the natural dimensions, calculate a scale factor to preserve aspect ratio, and apply the scaled size. We also set the position, content fill mode, and mark it as ‘Sticker’ for proper editor behavior. ``` // Create sticker using the convenient addImage() methodconst sticker = await engine.block.addImage( 'https://cdn.img.ly/assets/v4/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_grin.svg'); // Set size and position (preserve aspect ratio)const naturalWidth = engine.block.getWidth(sticker);const naturalHeight = engine.block.getHeight(sticker);const scale = 80 / Math.max(naturalWidth, naturalHeight);engine.block.setWidth(sticker, naturalWidth * scale);engine.block.setHeight(sticker, naturalHeight * scale);engine.block.setPositionX(sticker, 95);engine.block.setPositionY(sticker, 85); // Prevent cropping and mark as stickerif (engine.block.supportsContentFillMode(sticker)) { engine.block.setContentFillMode(sticker, 'Contain');}engine.block.setKind(sticker, 'Sticker'); // Add to sceneengine.block.appendChild(page, sticker); ``` We preserve aspect ratio by scaling the natural dimensions proportionally. The ‘Contain’ fill mode ensures the entire image displays without cropping. Setting the kind to ‘Sticker’ prevents recoloring and provides appropriate editor controls. ## Manual Construction[#](#manual-construction) For fine-grained control, we build stickers step by step using separate API calls. We create the graphic block, set a shape (required for visibility), create an image fill, and apply it to the block. We preserve aspect ratio by reading natural dimensions and scaling proportionally. ``` // Create sticker manually for fine-grained controlconst manualSticker = engine.block.create('graphic'); // Set a shape (required for graphic blocks to be visible)engine.block.setShape(manualSticker, engine.block.createShape('rect')); // Create and apply image fillconst imageFill = engine.block.createFill('image');engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://cdn.img.ly/assets/v4/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_blush.svg');engine.block.setFill(manualSticker, imageFill); // Set size and position (preserve aspect ratio)const manualWidth = engine.block.getWidth(manualSticker) || 100;const manualHeight = engine.block.getHeight(manualSticker) || 100;const manualScale = 80 / Math.max(manualWidth, manualHeight);engine.block.setWidth(manualSticker, manualWidth * manualScale);engine.block.setHeight(manualSticker, manualHeight * manualScale);engine.block.setPositionX(manualSticker, 275);engine.block.setPositionY(manualSticker, 85); // Prevent cropping and mark as stickerif (engine.block.supportsContentFillMode(manualSticker)) { engine.block.setContentFillMode(manualSticker, 'Contain');}engine.block.setKind(manualSticker, 'Sticker'); // Add to sceneengine.block.appendChild(page, manualSticker); ``` This approach works well when we need to configure multiple properties or reuse fills across blocks. ## Sticker vs Shape Decision[#](#sticker-vs-shape-decision) Choose between stickers and shapes based on your requirements: | Requirement | Use Stickers | Use Shapes | | --- | --- | --- | | Multi-color graphics | ✓ Yes | ✗ No (single fill) | | Recolorable | ✗ No | ✓ Yes | | Preserve original artwork | ✓ Yes | ✗ N/A | | Boolean operations | ✗ No | ✓ Yes | | Complex paths/gradients | ✓ Yes | ✗ Limited | | Icons, logos, emoji | ✓ Preferred | \- | ## Troubleshooting[#](#troubleshooting) ### Sticker Not Appearing[#](#sticker-not-appearing) Verify the image URL returns a valid image. Check that the sticker is added to the current page. Ensure dimensions are non-zero. Confirm the image format is supported (SVG, PNG, JPG). ### Manually Created Sticker Is Blank[#](#manually-created-sticker-is-blank) When creating graphic blocks manually, you must set a shape before the fill becomes visible. Call `engine.block.setShape(graphic, engine.block.createShape('rect'))` after creating the block. The `addImage()` convenience API handles this automatically. ### Sticker Appears Blurry[#](#sticker-appears-blurry) For raster stickers, ensure source image resolution matches or exceeds display size. Use SVG stickers for scalable graphics that remain sharp at any size. ### Sticker Appears Cropped[#](#sticker-appears-cropped) Stickers may appear cropped if the content fill mode defaults to ‘Cover’. Set the mode to ‘Contain’ to display the full image: `engine.block.setContentFillMode(sticker, 'Contain')`. Always check support first with `supportsContentFillMode()`. ### Sticker Cannot Be Recolored[#](#sticker-cannot-be-recolored) This is expected behavior—stickers preserve original colors. For recolorable graphics, create shapes with vector paths instead. For simple single-color graphics, consider using a vector path shape. ### Wrong Editor Behavior[#](#wrong-editor-behavior) Ensure `engine.block.setKind(id, 'Sticker')` was called. The ‘Sticker’ kind designation controls editor interactions and UI panels. ## API Reference[#](#api-reference) Quick reference for sticker creation methods: | Method | Category | Purpose | | --- | --- | --- | | `engine.block.addImage(url, options)` | Creation | Convenient sticker creation from URL | | `engine.block.create('graphic')` | Creation | Create graphic block manually | | `engine.block.createShape('rect')` | Shapes | Create shape (required for manual blocks) | | `engine.block.setShape(graphic, shape)` | Shapes | Apply shape to graphic block | | `engine.block.createFill('image')` | Fills | Create image fill | | `engine.block.setFill(graphic, fill)` | Fills | Apply fill to graphic block | | `engine.block.setString(fill, prop, uri)` | Fills | Set image URI on fill | | `engine.block.supportsContentFillMode(id)` | Content | Check if block supports fill mode | | `engine.block.setContentFillMode(id, mode)` | Content | Set fill mode (‘Contain’ or ‘Cover’) | | `engine.block.setKind(id, 'Sticker')` | Configuration | Mark block as sticker | | `engine.block.setPositionX/Y(id, val)` | Transform | Set position | | `engine.block.setWidth/Height(id, val)` | Transform | Set dimensions | | `engine.block.getWidth/Height(id)` | Transform | Get current dimensions | | `engine.block.appendChild(parent, child)` | Hierarchy | Add to scene | | `engine.scene.getCurrentPage()` | Scene | Get current page | --- [Source](https:/img.ly/docs/cesdk/angular/stickers-and-shapes/create-edit/create-shapes-64acc0) # Create Shapes ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); engine.editor.setSetting('page/dimOutOfPageAreas', false); const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(graphic, imageFill); engine.block.setWidth(graphic, 100); engine.block.setHeight(graphic, 100); engine.block.appendChild(scene, graphic); engine.scene.zoomToBlock(graphic, 40, 40, 40, 40); engine.block.supportsShape(graphic); // Returns true const text = engine.block.create('text'); engine.block.supportsShape(text); // Returns false const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); const shape = engine.block.getShape(graphic); const shapeType = engine.block.getType(shape); const starShape = engine.block.createShape('star'); engine.block.destroy(engine.block.getShape(graphic)); engine.block.setShape(graphic, starShape); /* The following line would also destroy the currently attached starShape */ // engine.block.destroy(graphic); const allShapeProperties = engine.block.findAllProperties(starShape); engine.block.setInt(starShape, 'shape/star/points', 6);}); ``` ```
``` The CE.SDK provides a flexible way to create and customize shapes, including rectangles, circles, lines, and polygons. ## Supported Shapes[#](#supported-shapes) The following shapes are supported in CE.SDK: * `'//ly.img.ubq/shape/rect'` * `'//ly.img.ubq/shape/line'` * `'//ly.img.ubq/shape/ellipse'` * `'//ly.img.ubq/shape/polygon'` * `'//ly.img.ubq/shape/star'` * `'//ly.img.ubq/shape/vector_path'` Note: short types are also accepted, e.g. ‘rect’ instead of ‘//ly.img.ubq/shape/rect’. ## Creating Shapes[#](#creating-shapes) `graphic` blocks don’t have any shape after you create them, which leaves them invisible by default. In order to make them visible, we need to assign both a shape and a fill to the `graphic` block. You can find more information on fills [here](angular/fills-402ddc/) . In this example we have created and attached an image fill. In order to create a new shape, we must call the `createShape(type: string): number` API. ``` const rectShape = engine.block.createShape('rect'); ``` In order to assign this shape to the `graphic` block, call the `setShape(id: number, shape: number): void` API. ``` engine.block.setShape(graphic, rectShape); ``` Just like design blocks, shapes with different types have different properties that you can set via the API. Please refer to the [API docs](angular/stickers-and-shapes/create-edit/edit-shapes-d67cfb/) for a complete list of all available properties for each type of shape. ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); engine.editor.setSetting('page/dimOutOfPageAreas', false); const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg', ); engine.block.setFill(graphic, imageFill); engine.block.setWidth(graphic, 100); engine.block.setHeight(graphic, 100); engine.block.appendChild(scene, graphic); engine.scene.zoomToBlock(graphic, 40, 40, 40, 40); engine.block.supportsShape(graphic); // Returns true engine.block.supportsShape(text); // Returns false}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/import-media/from-remote-source/unsplash-8f31f0) # From A Custom Source ``` import CreativeEngine from '@cesdk/engine'; import * as unsplash from './vendor/unsplash-js.esm.js'; const unsplashApi = unsplash.createApi({ apiUrl: '...'}); const EMPTY_RESULT = { assets: [], total: 0, currentPage: 0, nextPage: undefined}; const findUnsplashAssets = async (queryData) => { /* Unsplash page indices are 1-based. */ const unsplashPage = queryData.page + 1; if (queryData.query) { const response = await unsplashApi.search.getPhotos({ query: queryData.query, page: unsplashPage, perPage: queryData.perPage }); if (response.type === 'success') { const { results, total, total_pages } = response.response; return { assets: await Promise.all(results.map(translateToAssetResult)), total, currentPage: queryData.page, nextPage: queryData.page + 1 < total_pages ? queryData.page + 1 : undefined }; } else if (response.type === 'error') { throw new Error(response.errors.join('. ')); } else { return Promise.resolve(EMPTY_RESULT); } } else { const response = await unsplashApi.photos.list({ orderBy: 'popular', page: unsplashPage, perPage: queryData.perPage }); if (response.type === 'success') { const { results, total } = response.response; const totalFetched = queryData.page * queryData.perPage + results.length; const nextPage = totalFetched < total ? queryData.page + 1 : undefined; return { assets: await Promise.all(results.map(translateToAssetResult)), total, currentPage: queryData.page, nextPage }; } else if (response.type === 'error') { throw new Error(response.errors.join('. ')); } else { return Promise.resolve(EMPTY_RESULT); } }}; const getUnsplashUrl = async (unsplashResult) => { const trackDownloadResponse = await unsplashApi.photos.trackDownload({ downloadLocation: unsplashResult.links.download_location }); if (trackDownloadResponse.type === 'error') { throw new Error(trackDownloadResponse.errors.join('. ')); } return trackDownloadResponse.response?.url;}; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page); const customSource = { id: 'unsplash', findAssets: findUnsplashAssets, credits: { name: 'Unsplash', url: 'https://unsplash.com/' }, license: { name: 'Unsplash license (free)', url: 'https://unsplash.com/license' } }; engine.asset.addSource(customSource); const result = await engine.asset.findAssets(customSource.id, { page: 0, perPage: 3 }); const asset = result.assets[0]; await engine.asset.apply(customSource.id, asset); const localSourceId = 'background-videos'; engine.asset.addLocalSource(localSourceId); engine.asset.addAssetToSource(localSourceId, { id: 'ocean-waves-1', label: { en: 'relaxing ocean waves', es: 'olas del mar relajantes' }, tags: { en: ['ocean', 'waves', 'soothing', 'slow'], es: ['mar', 'olas', 'calmante', 'lento'] }, meta: { uri: `https://example.com/ocean-waves-1.mp4`, thumbUri: `https://example.com/thumbnails/ocean-waves-1.jpg`, mimeType: 'video/mp4', width: 1920, height: 1080 }, credits: { name: 'John Doe', url: 'https://example.com/johndoe' } });}); async function translateToAssetResult(image) { const artistName = image?.user?.name; const artistUrl = image?.user?.links?.html; return { id: image.id, locale: 'en', // label: image.description ?? image.alt_description ?? undefined, tags: image.tags ? image.tags.map((tag) => tag.title) : undefined, meta: { uri: await getUnsplashUrl(image), thumbUri: image.urls.thumb, blockType: '//ly.img.ubq/graphic', fillType: '//ly.img.ubq/fill/image', shapeType: '//ly.img.ubq/shape/rect', kind: 'image', width: image.width, height: image.height }, context: { sourceId: 'unsplash' }, credits: artistName ? { name: artistName, url: artistUrl } : undefined, utm: { source: 'CE.SDK Demo', medium: 'referral' } };} ``` ```
``` In this example, we will show you how to integrate your custom asset sources into [CE.SDK](https://img.ly/products/creative-sdk). With CE.SDK you can directly add external image providers like Unsplash or your own backend. A third option we will explore in this guide is using the engine’s Asset API directly. Follow along with this example while we are going to add the Unsplash library. Adding an asset source is done creating an asset source definition and adding it using `asset.addSource(source: AssetSource)`. The asset source needs a unique identifier as part of an object implementing the interface of the source. All Asset API methods require the asset source’s unique identifier. ``` const customSource = { id: 'unsplash', findAssets: findUnsplashAssets, credits: { name: 'Unsplash', url: 'https://unsplash.com/' }, license: { name: 'Unsplash license (free)', url: 'https://unsplash.com/license' }}; ``` The most important function to implement is `findAssets(query: AssetQueryData): AssetQueryResult`. With this function alone you can define the complete asset source. It receives the asset query as an argument and returns a promise with the results. * The argument is the `queryData` and describes the slice of data the engine wants to use. This includes a query string and pagination information. * The result of this query is a promise that, besides the actual asset data, returns information like the current page, the next page and the total number of assets available for this specific query. Returning a promise gives us great flexibility since we are completely agnostic of how we want to get the assets. We can use `fetch`, `XMLHttpRequest` or import a library to return a result. ``` const findUnsplashAssets = async (queryData) => { ``` Let us implement an Unsplash asset source. Please note that this is just for demonstration purposes only and may not be ideal if you want to integrate Unsplash in your production environment. We will use the official `unsplash-js` library to query the Unsplash API ([Link to Github page](https://github.com/unsplash/unsplash-js)). According to their documentation and guidelines, we have to create an access key and use a proxy to query the API, but this is out of scope for this example. Take a look at Unsplash’s documentation for further details. ``` const unsplashApi = unsplash.createApi({ apiUrl: '...'}); ``` Unsplash has different API endpoints for different use cases. If we want to search we need to call a different endpoint as if we just want to display images without any search term. Therefore we need to check if the query data contains a `query` string. If `findAssets` was called with a non-empty `query` we can call the asynchronous method `search.getPhotos`. As we can see in the example, we are passing the query arguments to this method. * `queryData.query`: The current search string from the search bar in the asset library. * `queryData.page`: For Unsplash specifically the requested page number starts with 1. We do not query all assets at once but by pages. As the user scrolls down more pages will be requested by calls to the `findAssets` method. * `queryData.perPage`: Determines how many assets we want to have included per page. This might change between calls. For instance, `perPage` can be called with a small number to display a small preview, but with a higher number e.g. if we want to show more assets in a grid view. ``` const response = await unsplashApi.search.getPhotos({ query: queryData.query, page: unsplashPage, perPage: queryData.perPage}); ``` Once we receive the response and check for success we need to map Unsplash’s result to what the asset source API needs as a result. The CE.SDK expects an object with the following properties: * `assets`: An array of assets for the current query. We will take a look at what these have to look like in the next paragraph. * `total`: The total number of assets available for the current query. If we search for “Cat” with `perPage` set to 30, we will get 30 assets, but `total` likely will be a much higher number. * `currentPage`: Return the current page that was requested. * `nextPage`: This is the next page that can be requested after the current one. Should be `undefined` if there is no other page (no more assets). In this case we stop querying for more even if the user has scrolled to the bottom. ``` const { results, total, total_pages } = response.response; return { assets: await Promise.all(results.map(translateToAssetResult)), total, currentPage: queryData.page, nextPage: queryData.page + 1 < total_pages ? queryData.page + 1 : undefined}; ``` Every image we get as a result of Unsplash needs to be translated into an object that is expected by the asset source API. We will describe every mandatory and optional property in the following paragraphs. ``` async function translateToAssetResult(image) { ``` `id`: The id of the asset (mandatory). This has to be unique for this source configuration. ``` id: image.id, ``` `locale` (optional): The language locale for this asset is used in `label` and `tags`. ``` locale: 'en', ``` `label` (optional): The label of this asset. It could be displayed in the tooltip as well as in the credits of the asset. ``` label: image.description ?? image.alt_description ?? undefined, ``` `tags` (optional): The tags of this asset. It could be displayed in the credits of the asset. ``` tags: image.tags ? image.tags.map((tag) => tag.title) : undefined, ``` `meta`: The meta object stores asset properties that depend on the specific asset type. ``` meta: { ``` `uri`: For an image asset this is the URL to the image file that will be used to add the image to the scene. Note that we have to use the Unsplash API to obtain a usable URL at first. ``` uri: await getUnsplashUrl(image), ``` `thumbUri`: The URI of the asset’s thumbnail. It could be used in an asset library. ``` thumbUri: image.urls.thumb, ``` `blockType`: The type id of the design block that should be created when this asset is applied to the scene. If omitted, CE.SDK will try to infer the block type from an optionally provided `mimeType` property (e.g. `image/jpeg`) or by loading the asset data behind `uri` and parsing the mime type from that. However, this will cause a delay before the asset can be added to the scene, which is why it is always recommended to specify the `blockType` upfront. ``` blockType: '//ly.img.ubq/graphic', ``` `fillType`: The type id of the fill that should be attached to the block when this asset is applied to the scene. If omitted, CE.SDK will default to a solid color fill `//ly.img.ubq/fill/color`. ``` fillType: '//ly.img.ubq/fill/image', ``` `shapeType`: The type id of the shape that should be attached to the block when this asset is applied to the scene. If omitted, CE.SDK will default to a rect shape `//ly.img.ubq/shape/rect`. ``` shapeType: '//ly.img.ubq/shape/rect', ``` `kind`: The kind that should be set to the block when this asset is applied to the scene. If omitted, CE.SDK will default to an empty string. ``` kind: 'image', ``` `width`: The original width of the image. `height`: The original height of the image. ``` width: image.width,height: image.height ``` `looping`: Determines whether the asset allows looping (applicable only to Video and GIF). When set to `true`, the asset can extend beyond its original length by looping for the specified duration. Default is set to `false`. `context`: Adds contextual information to the asset. Right now, this only includes the source id of the source configuration. ``` context: { sourceId: 'unsplash'}, ``` `credits` (optional): Some image providers require to display credits to the asset’s artist. If set, it has to be an object with the artist’s `name` and a `url` to the artist page. ``` credits: artistName ? { name: artistName, url: artistUrl } : undefined, ``` `utm` (optional): Some image providers require to add UTM parameters to all links to the source or the artist. If set, it contains a string to the `source` (added as `utm_source`) and the `medium` (added as `utm_medium`) ``` utm: { source: 'CE.SDK Demo', medium: 'referral'} ``` After translating the asset to match the interface from the asset source API, the array of assets for the current page can be returned. In case, we’ve encountered an error, we need to reject the promise. Since we use the async/await language feature this means throwing a new error. ``` throw new Error(response.errors.join('. ')); ``` An empty result can be returned instead of the result object if for some reason it does not make sense to throw an error but just show an empty result. ``` return Promise.resolve(EMPTY_RESULT); ``` Going further with our Unsplash integration we need to handle the case when no query was provided. Unsplash requires us to call a different API endpoint (`photos.list`) with slightly different parameters but the basics are the same. We need to check for success, calculate `total` and `nextPage` and translate the assets. ``` const response = await unsplashApi.photos.list({ orderBy: 'popular', page: unsplashPage, perPage: queryData.perPage}); if (response.type === 'success') { const { results, total } = response.response; const totalFetched = queryData.page * queryData.perPage + results.length; const nextPage = totalFetched < total ? queryData.page + 1 : undefined; return { assets: await Promise.all(results.map(translateToAssetResult)), total, currentPage: queryData.page, nextPage };} else if (response.type === 'error') { throw new Error(response.errors.join('. '));} else { return Promise.resolve(EMPTY_RESULT);} ``` We have already seen that an asset can define credits for the artist. Depending on the image provider you might need to add credits and the license for the source. In case of Unsplash, this includes a link as well as the license of all assets from this source. ``` credits: { name: 'Unsplash', url: 'https://unsplash.com/'},license: { name: 'Unsplash license (free)', url: 'https://unsplash.com/license'} ``` ## Local Asset Sources[#](#local-asset-sources) In many cases, you already have various finite sets of assets that you want to make available via asset sources. In order to save you the effort of having to implement custom asset query callbacks for each of these asset sources, CE.SDK also allows you to create “local” asset sources, which are managed by the engine and provide search and pagination functionalities. In order to add such a local asset source, simply call the `addLocalSource` API and choose a unique id with which you can later access the asset source. ``` const localSourceId = 'background-videos';engine.asset.addLocalSource(localSourceId); ``` The `addAssetToSource(sourceId: string, asset: AssetDefinition): void` API allows you to add new asset instances to your local asset source. The local asset source then keeps track of these assets and returns matching items as the result of asset queries. Asset queries return the assets in the same order in which they were inserted into the local asset source. Note that the `AssetDefinition` type that we pass to the `addAssetToSource` API is slightly different than the `AssetResult` type which is returned by asset queries. The `AssetDefinition` for example contains all localizations of the labels and tags of the same asset whereas the `AssetResult` is specific to the locale property of the query. ``` engine.asset.addAssetToSource(localSourceId, { id: 'ocean-waves-1', label: { en: 'relaxing ocean waves', es: 'olas del mar relajantes' }, tags: { en: ['ocean', 'waves', 'soothing', 'slow'], es: ['mar', 'olas', 'calmante', 'lento'] }, meta: { uri: `https://example.com/ocean-waves-1.mp4`, thumbUri: `https://example.com/thumbnails/ocean-waves-1.jpg`, mimeType: 'video/mp4', width: 1920, height: 1080 }, credits: { name: 'John Doe', url: 'https://example.com/johndoe' }}); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; import * as unsplash from './vendor/unsplash-js.esm.js'; const unsplashApi = unsplash.createApi({ apiUrl: '...',}); const EMPTY_RESULT = { assets: [], total: 0, currentPage: 0, nextPage: undefined,}; const findUnsplashAssets = async queryData => { /* Unsplash page indices are 1-based. */ const unsplashPage = queryData.page + 1; if (queryData.query) { const response = await unsplashApi.search.getPhotos({ query: queryData.query, page: unsplashPage, perPage: queryData.perPage, }); if (response.type === 'success') { const { results, total, total_pages } = response.response; return { assets: await Promise.all(results.map(translateToAssetResult)), total, currentPage: queryData.page, nextPage: queryData.page + 1 < total_pages ? queryData.page + 1 : undefined, }; } else if (response.type === 'error') { throw new Error(response.errors.join('. ')); } else { return Promise.resolve(EMPTY_RESULT); } } else { const response = await unsplashApi.photos.list({ orderBy: 'popular', page: unsplashPage, perPage: queryData.perPage, }); if (response.type === 'success') { const { results, total } = response.response; const totalFetched = queryData.page * queryData.perPage + results.length; const nextPage = totalFetched < total ? queryData.page + 1 : undefined; return { assets: await Promise.all(results.map(translateToAssetResult)), total, currentPage: queryData.page, nextPage, }; } else if (response.type === 'error') { throw new Error(response.errors.join('. ')); } else { return Promise.resolve(EMPTY_RESULT); } }}; const getUnsplashUrl = async unsplashResult => { const trackDownloadResponse = await unsplashApi.photos.trackDownload({ downloadLocation: unsplashResult.links.download_location, }); if (trackDownloadResponse.type === 'error') { throw new Error(trackDownloadResponse.errors.join('. ')); } return trackDownloadResponse.response?.url;}; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page); const customSource = { id: 'unsplash', findAssets: findUnsplashAssets, credits: { name: 'Unsplash', url: 'https://unsplash.com/', }, license: { name: 'Unsplash license (free)', url: 'https://unsplash.com/license', }, }; engine.asset.addSource(customSource); const result = await engine.asset.findAssets(customSource.id, { page: 0, perPage: 3, }); const asset = result.assets[0]; await engine.asset.apply(customSource.id, asset); const localSourceId = 'background-videos'; engine.asset.addLocalSource(localSourceId); engine.asset.addAssetToSource(localSourceId, { id: 'ocean-waves-1', label: { en: 'relaxing ocean waves', es: 'olas del mar relajantes', }, tags: { en: ['ocean', 'waves', 'soothing', 'slow'], es: ['mar', 'olas', 'calmante', 'lento'], }, meta: { uri: `https://example.com/ocean-waves-1.mp4`, thumbUri: `https://example.com/thumbnails/ocean-waves-1.jpg`, mimeType: 'video/mp4', width: 1920, height: 1080, }, credits: { name: 'John Doe', url: 'https://example.com/johndoe', }, });}); async function translateToAssetResult(image) { const artistName = image?.user?.name; const artistUrl = image?.user?.links?.html; return { id: image.id, locale: 'en', // label: image.description ?? image.alt_description ?? undefined, tags: image.tags ? image.tags.map(tag => tag.title) : undefined, meta: { uri: await getUnsplashUrl(image), thumbUri: image.urls.thumb, blockType: '//ly.img.ubq/graphic', fillType: '//ly.img.ubq/fill/image', shapeType: '//ly.img.ubq/shape/rect', kind: 'image', width: image.width, height: image.height, }, context: { sourceId: 'unsplash', }, credits: artistName ? { name: artistName, url: artistUrl, } : undefined, utm: { source: 'CE.SDK Demo', medium: 'referral', }, };} ``` --- [Source](https:/img.ly/docs/cesdk/angular/import-media/from-remote-source/soundstripe-9a42a9) # From Soundstripe # IMG.LY CE.SDK Plugin Soundstripe[#](#imgly-cesdk-plugin-soundstripe) This plugin provides integration with Soundstripe’s audio library, allowing you to search and use Soundstripe audio tracks directly within CE.SDK. ## Features[#](#features) * 🎵 Search and browse Soundstripe’s audio library directly in CE.SDK * 🔄 Automatic refresh of expired audio URIs * 📦 Seamless integration with CE.SDK’s asset management system * 🎨 Artist credits and metadata support ## Installation[#](#installation) You can install the plugin via npm or a compatible package manager. Use the following commands to install the package: Terminal window ``` pnpm add @imgly/plugin-soundstripe-web# oryarn add @imgly/plugin-soundstripe-web# ornpm install @imgly/plugin-soundstripe-web ``` ## Prerequisites[#](#prerequisites) ### 1\. Soundstripe API Key[#](#1-soundstripe-api-key) You’ll need a valid Soundstripe API key. You can obtain one from [Soundstripe](https://soundstripe.com/). ### 2\. Proxy Server Setup (Required)[#](#2-proxy-server-setup-required) **⚠️ Important:** Soundstripe’s API requires server-side proxy implementation for production use. Direct browser access to Soundstripe’s API is intended for development only. You must set up a proxy server as described in [Soundstripe’s integration guide](https://docs.soundstripe.com/docs/integrating-soundstripes-content-into-your-application). This proxy will: * Handle authentication securely * Prevent exposing your API key in client-side code * Ensure CORS compliance * Maintain stable API access ## Usage[#](#usage) ### Basic Setup[#](#basic-setup) ``` import CreativeEditorSDK from '@cesdk/cesdk-js';import SoundstripePlugin from '@imgly/plugin-soundstripe-web'; const config = { // license: 'your-license-here',}; const cesdk = await CreativeEditorSDK.create(container, config);await cesdk.addDefaultAssetSources();await cesdk.addDemoAssetSources({ sceneMode: 'Design' }); // Add the Soundstripe pluginawait cesdk.addPlugin( SoundstripePlugin({ apiKey: 'your-soundstripe-api-key' })); // Verify the asset source is availableconsole.log( `Available asset sources: ${cesdk.engine.asset.findAllSources().join(', ')}`); await cesdk.createDesignScene(); ``` ### Adding Soundstripe to Audio Asset Library[#](#adding-soundstripe-to-audio-asset-library) To make Soundstripe appear in the Audio asset library panel, update the audio entry to include the Soundstripe source: ``` // After adding the Soundstripe pluginawait cesdk.addPlugin( SoundstripePlugin({ apiKey: 'your-soundstripe-api-key' })); // Add Soundstripe to the audio sourcescesdk.ui.updateAssetLibraryEntry('ly.img.audio', { sourceIds: ({ currentIds }) => [...currentIds, 'ly.img.audio.soundstripe']}); // Now Soundstripe will appear in the Audio asset panel ``` ### Automatic URI Refresh[#](#automatic-uri-refresh) Soundstripe MP3 file URIs expire after a certain time period. This plugin automatically handles URI refresh to ensure your audio tracks continue to play without interruption. The refresh happens: * When a scene is loaded * When the block selection changes You can also manually trigger a refresh using the exported utility function: ``` import { refreshSoundstripeAudioURIs } from '@imgly/plugin-soundstripe-web'; // Manually refresh all Soundstripe audio URIs in the current sceneawait refreshSoundstripeAudioURIs(cesdk.engine, { apiKey }); // Or when using a proxy serverawait refreshSoundstripeAudioURIs(cesdk.engine, { baseUrl: 'https://your-proxy.com'}); ``` ## Configuration[#](#configuration) ### Plugin Configuration[#](#plugin-configuration) The plugin can be configured in two ways depending on your setup: #### Option 1: Direct API Access (Development)[#](#option-1-direct-api-access-development) ``` import SoundstripePlugin from '@imgly/plugin-soundstripe-web'; await cesdk.addPlugin( SoundstripePlugin({ apiKey: 'your-soundstripe-api-key' // Your Soundstripe API key })); ``` #### Option 2: Proxy Server (Production - Recommended)[#](#option-2-proxy-server-production---recommended) ``` import SoundstripePlugin from '@imgly/plugin-soundstripe-web'; await cesdk.addPlugin( SoundstripePlugin({ baseUrl: 'https://your-proxy-server.com' // Your proxy server URL })); ``` #### Configuration Parameters[#](#configuration-parameters) | Parameter | Type | Required | Description | | --- | --- | --- | --- | | `apiKey` | `string` | Conditional | Your Soundstripe API key. Required when using direct API access (Option 1). | | `baseUrl` | `string` | Conditional | Your proxy server base URL. Required when using proxy server (Option 2). | **Note:** Either `apiKey` or `baseUrl` must be provided. You cannot omit both parameters. ## API Reference[#](#api-reference) ### `SoundstripePlugin(configuration)`[#](#soundstripepluginconfiguration) Creates a new Soundstripe plugin instance. #### Parameters[#](#parameters) * `configuration.apiKey` (string, optional): Your Soundstripe API key. Required when using direct API access. * `configuration.baseUrl` (string, optional): Your proxy server base URL. Required when using proxy server. **Note:** Either `apiKey` or `baseUrl` must be provided. #### Returns[#](#returns) A plugin object compatible with CE.SDK’s plugin system ### `refreshSoundstripeAudioURIs(engine, config)`[#](#refreshsoundstripeaudiourisengine-config) Manually refreshes all Soundstripe audio URIs in the current scene. #### Parameters[#](#parameters-1) * `engine` (CreativeEngine, required): The CE.SDK engine instance * `config` (object, optional): Configuration object with the following properties: * `apiKey` (string, optional): Your Soundstripe API key. Optional when using proxy server. * `baseUrl` (string, optional): Your proxy server base URL #### Returns[#](#returns-1) `Promise` ## How It Works[#](#how-it-works) 1. **Asset Discovery**: The plugin registers as an asset source (`ly.img.audio.soundstripe`) in CE.SDK 2. **Search Integration**: Users can search Soundstripe’s library through CE.SDK’s asset panel 3. **Metadata Storage**: When an audio track is added, the plugin stores the Soundstripe song ID as metadata 4. **Automatic Refresh**: The plugin monitors for expired URIs and automatically fetches fresh ones using the stored song IDs 5. **Seamless Playback**: Users experience uninterrupted audio playback even when URIs expire --- [Source](https:/img.ly/docs/cesdk/angular/import-media/from-remote-source/imgly-premium-assets-eb1688) # From IMG.LY Premium Assets This guide explains how to integrate and serve [premium templates from IMG.LY](https://img.ly/templates) in your application using the provided asset archive. The premium template package contains the following structure: 1. **`content.json`**: An index file listing all the template assets that can be loaded into CE.SDK. 2. Directories for each template containing the following: 1. **`asset.json`**: A manifest file containing metadata about the template. 2. **`thumbnail.jpg`**: A preview image of the template. 3. **`design.zip`**: A CE.SDK archive file also containing all associated assets. Here’s a step-by-step tutorial to set up and use these templates. ## Prerequisites[#](#prerequisites) 1. Ensure you have a self-hosted server to host the asset files. 2. Have a working CE.SDK instance integrated into your application. ## Steps to Serve Premium Templates[#](#steps-to-serve-premium-templates) ### Organize and Host Assets[#](#organize-and-host-assets) Unzip the provided archive and upload the folders (`ecommerce-retro-story-n99`, etc.) to your hosting server. Ensure the following files are hosted: * `asset.json` * `thumbnail.jpg` * `design.zip` A manifest file listing all templates and their meta data: * `content.json` These files should be accessible via URLs (e.g., `https://yourdomain.com/assets/ecommerce-retro-story-n99/`). ### Configure CE.SDK[#](#configure-cesdk) Update your CE.SDK configuration to serve templates from your hosted assets. Example Configuration: ``` const config = { baseURL: 'https://yourdomain.com/assets', // Your hosting URL base path}; let contentJSON = await fetch( 'https://yourdomain.com/assets/templates/content.json',).then(res => res.json()); CreativeEngine.init(config).then(engine => { loadAssetSourceFromContentJSON( engine, contentJSON, 'https://yourdomain.com/assets/templates', );}); ``` This configuration tells CE.SDK to fetch templates and resources from your server. ### Load Templates from `content.json`[#](#load-templates-from-contentjson) Use the `content.json` file to load templates into CE.SDK: ``` import { AssetDefinition, AssetResult, CreativeEngine } from '@cesdk/cesdk-js'; async function loadAssetSourceFromContentJSON( engine: CreativeEngine, content: ContentJSON, baseURL = '', applyAsset?: ((asset: AssetResult) => Promise) | undefined) { const { assets, id: sourceId } = content; engine.asset.addLocalSource(sourceId, undefined, applyAsset); assets.forEach((asset) => { if (asset.meta) { Object.entries(asset.meta).forEach(([key, value]: [any, any]) => { const stringValue: string = value.toString(); if (stringValue.includes('{{base_url}}')) { const updated = stringValue.replace('{{base_url}}', baseURL); if (asset.meta) { asset.meta[key] = updated; } } }); } if (asset.payload?.sourceSet) { asset.payload.sourceSet.forEach((sourceSet) => { sourceSet.uri = sourceSet.uri.replace('{{base_url}}', baseURL); }); } engine.asset.addAssetToSource(sourceId, asset); });}export type ContentJSON = { version: string, id: string, assets: AssetDefinition[]}; export default loadAssetSourceFromContentJSON; ``` ### Test and Verify[#](#test-and-verify) 1. Load your application. 2. Ensure that the template thumbnails appear in the library. 3. Select a template to verify it loads correctly into the editor. ## Additional Tips[#](#additional-tips) * **Cache templates**: Use CDN or caching mechanisms for faster load times. * **Secure your assets**: If assets are meant for authenticated users only, ensure they are protected with proper access controls. This guide should get you started with integrating and serving IMG.LY premium templates in your application. If you encounter issues or have questions, refer to the CE.SDK [Customize The Asset Library](angular/serve-assets-b0827c/) or [contact support](https://img.ly/support). --- [Source](https:/img.ly/docs/cesdk/angular/import-media/from-local-source/user-upload-c6c7d9) # Upload Images and Photos Giving your users the option to use their own images within their creations will boost their creative output to new levels. CE.SDK provides a built-in upload handler that stores files locally in memory. For production use cases where files need to persist across sessions, you can register a custom upload handler. ![](/docs/cesdk/_astro/add_file.BKOc8CsX_ZbaO3s.webp) ## Local Uploads[#](#local-uploads) CE.SDK includes a default local upload handler that allows uploading images locally. The “Add file” button appears in the image library without any configuration. ``` // Local upload is the default behaviorconst cesdk = await CreativeEditorSDK.create(container, config); ``` Local uploads only store files in memory. They won’t be available when opening the same scene in a different environment or after a page reload. For production use, implement a custom upload handler. ## Adding Upload Demo Asset Sources[#](#adding-upload-demo-asset-sources) To enable upload functionality in demo asset sources, you must explicitly pass the `withUploadAssetSources` option when calling `addDemoAssetSources()`: ``` const cesdk = await CreativeEditorSDK.create(container, config); // Enable upload demo asset sourcescesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true,}); ``` Without this option, demo asset sources will not include upload functionality. ## Remote Uploads[#](#remote-uploads) To persist uploads across sessions, register a custom upload handler using the Callbacks API after SDK initialization: ``` const cesdk = await CreativeEditorSDK.create(container, config); // Register custom upload handlercesdk.actions.register('uploadFile', async (file, onProgress, context) => { // Upload file to your CDN or storage service const formData = new FormData(); formData.append('file', file); const response = await fetch('/api/upload', { method: 'POST', body: formData, }); const { url, thumbnailUrl } = await response.json(); // Return asset definition return { id: `asset-${Date.now()}`, label: { en: file.name, }, meta: { uri: url, thumbUri: thumbnailUrl, kind: 'image', }, };}); ``` ### Accessing the Default Local Upload[#](#accessing-the-default-local-upload) The default local upload handler can be accessed through the Utils API: ``` cesdk.actions.register('uploadFile', async (file, onProgress, context) => { // Conditionally use different upload strategies if (shouldUseLocalStorage(file)) { // Use the utils API for local upload return await cesdk.utils.localUpload(file, context); } // Otherwise use your custom upload logic return await uploadToStorage(file, onProgress, context);}); ``` This pattern allows you to conditionally choose between local storage and remote storage based on your application’s requirements. --- [Source](https:/img.ly/docs/cesdk/angular/import-media/capture-from-camera/record-video-47819b) # Record Video ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); engine.scene.createVideo(); const stack = engine.block.findByType('stack')[0]; const page = engine.block.create('page'); engine.block.appendChild(stack, page); const pixelStreamFill = engine.block.createFill('pixelStream'); engine.block.setFill(page, pixelStreamFill); engine.block.appendEffect(page, engine.block.createEffect('half_tone')); // Horizontal mirroring engine.block.setEnum( pixelStreamFill, 'fill/pixelStream/orientation', 'UpMirrored' ); navigator.mediaDevices.getUserMedia({ video: true }).then( (stream) => { const video = document.createElement('video'); video.autoplay = true; video.srcObject = stream; video.addEventListener('loadedmetadata', () => { engine.block.setWidth(page, video.videoWidth); engine.block.setHeight(page, video.videoHeight); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const onVideoFrame = () => { engine.block.setNativePixelBuffer(pixelStreamFill, video); video.requestVideoFrameCallback(onVideoFrame); }; video.requestVideoFrameCallback(onVideoFrame); }); }, (err) => { console.error(err); } );}); ``` ```
``` Other than having pre-recorded [video](angular/create-video-c41a08/) in your scene you can also have a live preview from a camera in the engine. This allows you to make full use of the engine’s capabilities such as [effects](angular/filters-and-effects-6f88ac/) , [strokes](angular/outlines/strokes-c2e621/) and [drop shadows](angular/outlines/shadows-and-glows-6610fa/) , while the preview integrates with the composition of your scene. Simply swap out the `VideoFill` of a block with a `PixelStreamFill`. This guide shows you how the `PixelStreamFill` can be used in combination with a camera. We create a video scene with a single page. Then we create a `PixelStreamFill` and assign it to the page. To demonstrate the live preview capabilities of the engine we also apply an effect to the page. ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); engine.scene.createVideo(); const stack = engine.block.findByType('stack')[0]; const page = engine.block.create('page'); engine.block.appendChild(stack, page); const pixelStreamFill = engine.block.createFill('pixelStream'); engine.block.setFill(page, pixelStreamFill); engine.block.appendEffect(page, engine.block.createEffect('half_tone')); ``` ## Orientation[#](#orientation) To not waste expensive compute time by transforming the pixel data of the buffer itself, it’s often beneficial to apply a transformation during rendering and let the GPU handle this work much more efficiently. For this purpose the `PixelStreamFill` has an `orientation` property. You can use it to mirror the image or rotate it in 90° steps. This property lets you easily mirror an image from a front facing camera or rotate the image by 90° when the user holds a device sideways. ``` // Horizontal mirroringengine.block.setEnum( pixelStreamFill, 'fill/pixelStream/orientation', 'UpMirrored'); ``` ## Camera[#](#camera) We use the `MediaDevices.getUserMedia()` API to prompt the user for permission to use a media input video device. This can be a camera, video recording device, or a screen sharing service. To access frames of the `MediaStream` we create an HTML video element. Once the video meta data is available we adjust the page size to the match the video resolution and zoom the camera to include the entire page. ``` navigator.mediaDevices.getUserMedia({ video: true }).then( (stream) => { const video = document.createElement('video'); video.autoplay = true; video.srcObject = stream; video.addEventListener('loadedmetadata', () => { engine.block.setWidth(page, video.videoWidth); engine.block.setHeight(page, video.videoHeight); engine.scene.zoomToBlock(page, 40, 40, 40, 40); ``` ## Updating the Fill[#](#updating-the-fill) We use the video’s `requestVideoFrameCallback` to update the contents of the `PixelStreamFill`. The callback is fired whenever a new video frame is available. We use the engine’s `setNativePixelBuffer` method to update the fill with the new video frame. This method is optimized to avoid unnecessary copies of the pixel data. The method accepts either an `HTMLVideoElement` or an `HTMLCanvasElement` as input. ``` const onVideoFrame = () => { engine.block.setNativePixelBuffer(pixelStreamFill, video); video.requestVideoFrameCallback(onVideoFrame);};video.requestVideoFrameCallback(onVideoFrame); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); engine.scene.createVideo(); const stack = engine.block.findByType('stack')[0]; const page = engine.block.create('page'); engine.block.appendChild(stack, page); const pixelStreamFill = engine.block.createFill('pixelStream'); engine.block.setFill(page, pixelStreamFill); engine.block.appendEffect(page, engine.block.createEffect('half_tone')); // Horizontal mirroring engine.block.setEnum( pixelStreamFill, 'fill/pixelStream/orientation', 'UpMirrored', ); navigator.mediaDevices.getUserMedia({ video: true }).then( stream => { const video = document.createElement('video'); video.autoplay = true; video.srcObject = stream; video.addEventListener('loadedmetadata', () => { engine.block.setWidth(page, video.videoWidth); engine.block.setHeight(page, video.videoHeight); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const onVideoFrame = () => { engine.block.setNativePixelBuffer(pixelStreamFill, video); video.requestVideoFrameCallback(onVideoFrame); }; video.requestVideoFrameCallback(onVideoFrame); }); }, err => { console.error(err); }, );}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/import-media/asset-panel/thumbnails-c23949) # Thumbnails Learn how to configure thumbnail images for assets in CE.SDK’s asset library. ![Asset Library Thumbnails](/docs/cesdk/_astro/browser.hero.B_kWhovM_N8mAn.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-import-media-asset-library-thumbnails-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-import-media-asset-library-thumbnails-browser) Thumbnails provide visual previews of assets in the asset library, improving the user experience when browsing images, videos, audio files, and other media. We recommend using **512px width for thumbUri** to ensure quality across platforms. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Video', withUploadAssetSources: false }); await cesdk.createVideoScene(); const engine = cesdk.engine; // ===== Section 1: Basic Thumbnails ===== // Add a local asset source with basic thumbnails engine.asset.addLocalSource('custom-images'); // Add an image with 512px width thumbnail (recommended size) engine.asset.addAssetToSource('custom-images', { id: 'sample-1', label: { en: 'Landscape Photo' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', // 512px recommended blockType: '//ly.img.ubq/graphic' } }); // Additional images for the asset library (not shown in highlight) engine.asset.addAssetToSource('custom-images', { id: 'sample-2', label: { en: 'Portrait Photo' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_2.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg', blockType: '//ly.img.ubq/graphic' } }); engine.asset.addAssetToSource('custom-images', { id: 'sample-3', label: { en: 'Nature Scene' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_3.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg', blockType: '//ly.img.ubq/graphic' } }); // ===== Section 2: Preview URIs for Audio ===== // Add audio assets with preview URIs for playback in the asset library engine.asset.addLocalSource('custom-audio'); // Audio with full URIs and preview clips engine.asset.addAssetToSource('custom-audio', { id: 'dance-harder', label: { en: 'Dance Harder' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/dance_harder.m4a', // Full audio file thumbUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/thumbnails/dance_harder.jpg', // Waveform visualization (image, UI-only) previewUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/dance_harder.m4a', // Preview clip - set as block property on canvas mimeType: 'audio/x-m4a', // Required for audio preview to work blockType: '//ly.img.ubq/audio', duration: '212.531995' } }); engine.asset.addAssetToSource('custom-audio', { id: 'far-from-home', label: { en: 'Far From Home' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/far_from_home.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/thumbnails/audio-wave.png', previewUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/far_from_home.m4a', mimeType: 'audio/x-m4a', blockType: '//ly.img.ubq/audio', duration: '98.716009' } }); engine.asset.addAssetToSource('custom-audio', { id: 'elsewhere', label: { en: 'Elsewhere' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/elsewhere.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/thumbnails/elsewhere.jpg', previewUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/elsewhere.m4a', mimeType: 'audio/x-m4a', blockType: '//ly.img.ubq/audio', duration: '121.2' } }); // ===== Section 3: Custom Asset Source with Thumbnail Mapping ===== // Create a custom asset source that maps external API responses to CE.SDK format // This example mimics how Unsplash thumbnails would be mapped engine.asset.addSource({ id: 'custom-api-source', async findAssets(queryData) { // Simulate external API response (e.g., from Unsplash) const mockApiResponse = { results: [ { id: 'photo-1', urls: { full: 'https://img.ly/static/ubq_samples/sample_4.jpg', // High-res small: 'https://img.ly/static/ubq_samples/sample_4.jpg' // 512px thumbnail }, alt_description: 'Mountain landscape' }, { id: 'photo-2', urls: { full: 'https://img.ly/static/ubq_samples/sample_5.jpg', small: 'https://img.ly/static/ubq_samples/sample_5.jpg' }, alt_description: 'Ocean waves' }, { id: 'photo-3', urls: { full: 'https://img.ly/static/ubq_samples/sample_6.jpg', small: 'https://img.ly/static/ubq_samples/sample_6.jpg' }, alt_description: 'Forest path' } ], total: 3 }; // Map external API format to CE.SDK AssetResult format return { assets: mockApiResponse.results.map((photo) => ({ id: photo.id, label: photo.alt_description, meta: { uri: photo.urls.full, // High-res image for canvas thumbUri: photo.urls.small, // Thumbnail for asset library (512px recommended) blockType: '//ly.img.ubq/graphic' } })), total: mockApiResponse.total, currentPage: queryData.page, nextPage: mockApiResponse.total > (queryData.page + 1) * queryData.perPage ? queryData.page + 1 : undefined }; } }); // ===== Section 4: Display Customization - Background Types ===== // Configure how thumbnails scale in the asset library cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ['custom-images', 'custom-api-source'], gridBackgroundType: 'cover', // Crop to fill card previewBackgroundType: 'contain' // Fit entire image in preview }); // Audio thumbnails with contain to show full waveform // Note: Audio assets automatically show a play button overlay for previewing cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { sourceIds: ['custom-audio'], gridBackgroundType: 'contain', // Show full waveform previewBackgroundType: 'contain', cardBorder: true // Add border to make cards more visible }); // ===== Section 5: Display Customization - Grid Layout ===== // Configure grid columns and item height cesdk.ui.updateAssetLibraryEntry('ly.img.image', { gridColumns: 3, // 3 columns in grid view gridItemHeight: 'square' // Square aspect ratio for all cards }); cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { gridColumns: 2, // 2 columns for audio gridItemHeight: 'auto' // Auto height based on content }); // ===== Section 6: Display Customization - Card Background Preferences ===== // Configure fallback order for card backgrounds // Try vector path first, then thumbnail image cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { cardBackgroundPreferences: [ { path: 'meta.vectorPath', type: 'svgVectorPath' }, // Try SVG first { path: 'meta.thumbUri', type: 'image' } // Fallback to thumbnail ] }); // For images, prioritize thumbnail cesdk.ui.updateAssetLibraryEntry('ly.img.image', { cardBackgroundPreferences: [ { path: 'meta.thumbUri', type: 'image' } // Use thumbnail as primary background ] }); // Open the asset library to the audio and image panels to demonstrate thumbnails // Audio assets are previewable - hover over them to see a play button // Click the play button to hear the previewUri audio clip cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.audio', 'ly.img.image'] } }); }} export default Example; ``` This guide covers configuring basic thumbnails, preview URIs for audio playback, custom thumbnail mapping for external APIs, and UI customization options. ## Understanding thumbUri vs previewUri[#](#understanding-thumburi-vs-previewuri) Three URI properties control how assets are displayed and used in CE.SDK: | Property | Purpose | Used For | Media Type | Set On Block | | --- | --- | --- | --- | --- | | `thumbUri` | Visual thumbnail (UI-only) | Asset library grid display | **Image only** | No | | `previewUri` | Preview content | Audio playback in library & set as block property on canvas | **Any media type** | Yes | | `uri` | Full asset | Final content on canvas | Any | Yes | **Key distinctions**: * **`thumbUri`** is UI-only and must be an image. It displays in the asset library but is never set on the block itself. * **`previewUri`** is set as a property on the block when the asset is applied to the canvas. It can be any media type (audio, video, etc.) and serves both for library preview playback and as the block’s preview content. **For images and video**: Only `thumbUri` and `uri` are needed. The `thumbUri` provides the visual preview in the asset library. **For audio**: Use all three properties. The `thumbUri` shows a waveform visualization in the asset library (image only, UI-only). The `previewUri` is **set as block property** when asset is applied; it plays a short preview clip when users click play in the asset library and serves as the block’s preview content on canvas. The `uri` loads the full audio file for final export. The `previewUri` is a performance optimization for large audio files. Without it, the engine loads the full `uri` for preview playback, which can be slow for multi-minute files. ## Thumbnail Configuration[#](#thumbnail-configuration) ### Basic Thumbnails[#](#basic-thumbnails) Add thumbnails using the `thumbUri` property in asset metadata. We can register assets using `engine.asset.addSource()` for custom sources or `engine.asset.addAssetToSource()` for local sources. ``` // Add a local asset source with basic thumbnailsengine.asset.addLocalSource('custom-images'); // Add an image with 512px width thumbnail (recommended size)engine.asset.addAssetToSource('custom-images', { id: 'sample-1', label: { en: 'Landscape Photo' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', // 512px recommended blockType: '//ly.img.ubq/graphic' }}); ``` The `thumbUri` should point to a 512px width image for optimal quality across platforms. The engine displays this thumbnail in the asset library grid and preview panels. ### Preview URIs for Audio[#](#preview-uris-for-audio) For audio assets, use `previewUri` to provide lightweight preview clips. The engine uses `previewUri` in two scenarios: 1. **Asset library playback** — The play button in audio asset cards loads `previewUri` instead of the full file 2. **Canvas insertion** — When adding an audio asset to the canvas, `previewUri` is **set as a block property** and serves as the block’s content for preview playback Without `previewUri`, the engine falls back to `uri`, which can cause slow loading for large audio files. Use shorter preview clips (30 seconds recommended) to improve performance. ``` // Add audio assets with preview URIs for playback in the asset libraryengine.asset.addLocalSource('custom-audio'); // Audio with full URIs and preview clipsengine.asset.addAssetToSource('custom-audio', { id: 'dance-harder', label: { en: 'Dance Harder' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/dance_harder.m4a', // Full audio file thumbUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/thumbnails/dance_harder.jpg', // Waveform visualization (image, UI-only) previewUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/dance_harder.m4a', // Preview clip - set as block property on canvas mimeType: 'audio/x-m4a', // Required for audio preview to work blockType: '//ly.img.ubq/audio', duration: '212.531995' }}); engine.asset.addAssetToSource('custom-audio', { id: 'far-from-home', label: { en: 'Far From Home' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/far_from_home.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/thumbnails/audio-wave.png', previewUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/far_from_home.m4a', mimeType: 'audio/x-m4a', blockType: '//ly.img.ubq/audio', duration: '98.716009' }}); engine.asset.addAssetToSource('custom-audio', { id: 'elsewhere', label: { en: 'Elsewhere' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/elsewhere.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/thumbnails/elsewhere.jpg', previewUri: 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/elsewhere.m4a', mimeType: 'audio/x-m4a', blockType: '//ly.img.ubq/audio', duration: '121.2' }}); ``` The `thumbUri` displays a waveform visualization in the asset library, while `previewUri` provides the audio content for playback preview. ### Custom Asset Source Thumbnails[#](#custom-asset-source-thumbnails) We can map external API responses to CE.SDK format with thumbnails in the `findAssets` method. This example shows how to transform API responses (like Unsplash) that use different thumbnail field names into CE.SDK’s `meta.thumbUri` format. ``` // Create a custom asset source that maps external API responses to CE.SDK format// This example mimics how Unsplash thumbnails would be mappedengine.asset.addSource({ id: 'custom-api-source', async findAssets(queryData) { // Simulate external API response (e.g., from Unsplash) const mockApiResponse = { results: [ { id: 'photo-1', urls: { full: 'https://img.ly/static/ubq_samples/sample_4.jpg', // High-res small: 'https://img.ly/static/ubq_samples/sample_4.jpg' // 512px thumbnail }, alt_description: 'Mountain landscape' }, { id: 'photo-2', urls: { full: 'https://img.ly/static/ubq_samples/sample_5.jpg', small: 'https://img.ly/static/ubq_samples/sample_5.jpg' }, alt_description: 'Ocean waves' }, { id: 'photo-3', urls: { full: 'https://img.ly/static/ubq_samples/sample_6.jpg', small: 'https://img.ly/static/ubq_samples/sample_6.jpg' }, alt_description: 'Forest path' } ], total: 3 }; // Map external API format to CE.SDK AssetResult format return { assets: mockApiResponse.results.map((photo) => ({ id: photo.id, label: photo.alt_description, meta: { uri: photo.urls.full, // High-res image for canvas thumbUri: photo.urls.small, // Thumbnail for asset library (512px recommended) blockType: '//ly.img.ubq/graphic' } })), total: mockApiResponse.total, currentPage: queryData.page, nextPage: mockApiResponse.total > (queryData.page + 1) * queryData.perPage ? queryData.page + 1 : undefined }; }}); ``` The custom source maps `photo.urls.full` to `meta.uri` for the high-resolution canvas image and `photo.urls.small` to `meta.thumbUri` for the 512px asset library thumbnail. ## Display Customization[#](#display-customization) ### Background Types[#](#background-types) We can configure how thumbnails scale in the asset library using `gridBackgroundType` and `previewBackgroundType`: * **cover** — Crops the thumbnail to fill the entire card * **contain** — Fits the entire thumbnail within the card, may leave empty space ``` // Configure how thumbnails scale in the asset librarycesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ['custom-images', 'custom-api-source'], gridBackgroundType: 'cover', // Crop to fill card previewBackgroundType: 'contain' // Fit entire image in preview}); // Audio thumbnails with contain to show full waveform// Note: Audio assets automatically show a play button overlay for previewingcesdk.ui.updateAssetLibraryEntry('ly.img.audio', { sourceIds: ['custom-audio'], gridBackgroundType: 'contain', // Show full waveform previewBackgroundType: 'contain', cardBorder: true // Add border to make cards more visible}); ``` Use `cover` for thumbnails that should fill cards completely (cropping if needed). Use `contain` to show the complete thumbnail without cropping, which is useful for waveforms or icons. ### Grid Layout[#](#grid-layout) Configure the number of columns and item aspect ratio in the asset library grid: ``` // Configure grid columns and item heightcesdk.ui.updateAssetLibraryEntry('ly.img.image', { gridColumns: 3, // 3 columns in grid view gridItemHeight: 'square' // Square aspect ratio for all cards}); cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { gridColumns: 2, // 2 columns for audio gridItemHeight: 'auto' // Auto height based on content}); ``` The `gridColumns` property controls how many thumbnails appear per row. The `gridItemHeight` can be `square` for uniform sizing or `auto` for dynamic height based on content. ### Card Background Preferences[#](#card-background-preferences) Configure the fallback order for card backgrounds when thumbnails are missing. The engine checks preferences in array order and uses the first available value. ``` // Configure fallback order for card backgrounds// Try vector path first, then thumbnail imagecesdk.ui.updateAssetLibraryEntry('ly.img.audio', { cardBackgroundPreferences: [ { path: 'meta.vectorPath', type: 'svgVectorPath' }, // Try SVG first { path: 'meta.thumbUri', type: 'image' } // Fallback to thumbnail ]}); // For images, prioritize thumbnailcesdk.ui.updateAssetLibraryEntry('ly.img.image', { cardBackgroundPreferences: [ { path: 'meta.thumbUri', type: 'image' } // Use thumbnail as primary background ]}); ``` The `path` property uses dot notation to access asset properties (e.g., `meta.thumbUri` accesses `asset.meta.thumbUri`). The `type` determines rendering: * **svgVectorPath** — Renders SVG vector paths with theme-adaptive colors * **image** — Displays images using CSS background We can also provide a function that returns custom backgrounds per asset, allowing dynamic behavior based on asset properties. ## Best Practices[#](#best-practices) * **Size**: Use 512px width for `thumbUri` to ensure quality across platforms * **Format**: Use JPEG for photos and PNG for graphics with transparency * **When to use previewUri**: * Audio: Provide shorter preview clip (30 seconds instead of 3 minutes). **Important**: Audio assets require `mimeType` (e.g., `'audio/x-m4a'`) for preview buttons to appear in the asset library * Video: Not supported (use `thumbUri` + `uri`, no `previewUri`) * Images: Not needed (`thumbUri` is sufficient) * **Media type constraints**: `thumbUri` must be an image, while `previewUri` can be any media type (currently used for audio, future support for video previews planned) * **Block property**: Unlike `thumbUri` (UI-only), `previewUri` is set as a property on the block itself when the asset is applied to canvas * **Performance**: Optimize thumbnail file sizes and use CDN with proper cache headers * **Caching**: Implement long cache TTLs for static thumbnails * **Memory**: Enable the `clampThumbnailTextureSizes` setting for large asset libraries * **Fallbacks**: Configure `cardBackgroundPreferences` for missing thumbnail handling ## Troubleshooting[#](#troubleshooting) **Thumbnails not displaying**: Check CORS configuration, URL validity, and browser network tab for 404 or CORS errors. Ensure thumbnail URLs are accessible from the browser. **Slow loading**: Optimize file sizes (512px max width recommended), use a CDN, and enable compression. For audio, ensure `previewUri` points to short preview clips instead of full files. **Distorted appearance**: Choose the correct `backgroundType` setting. Use `cover` when thumbnails should fill cards (allowing crop) or `contain` when the entire thumbnail must be visible. **Missing fallback**: Configure `cardBackgroundPreferences` to define fallback order. For example, try `meta.vectorPath` first, then fall back to `meta.thumbUri` for graceful degradation. **Audio preview not working**: Ensure audio assets include the `mimeType` property (e.g., `'audio/x-m4a'` or `'audio/mpeg'`). The asset library requires this property to display the play button overlay on audio thumbnails. Also verify `previewUri` or `uri` points to a valid audio file. ## API Reference[#](#api-reference) | Method/Property | Category | Purpose | | --- | --- | --- | | `meta.thumbUri` | Asset Metadata | Thumbnail for grid display (512px recommended) | | `meta.previewUri` | Asset Metadata | Preview for audio playback and canvas insertion | | `meta.mimeType` | Asset Metadata | MIME type for audio assets (required for preview buttons) | | `engine.asset.addSource()` | Asset API | Register custom source with thumbnails | | `engine.asset.addAssetToSource()` | Asset API | Add asset with thumbnail to source | | `cesdk.ui.updateAssetLibraryEntry()` | UI API | Configure thumbnail display | | `gridBackgroundType` | Entry Config | Thumbnail scaling in grid (cover/contain) | | `previewBackgroundType` | Entry Config | Thumbnail scaling in preview | | `cardBackgroundPreferences` | Entry Config | Background rendering priority and fallbacks | | `gridColumns` | Entry Config | Grid columns affecting thumbnail size | | `gridItemHeight` | Entry Config | Grid item aspect ratio (auto/square) | ## Next Steps[#](#next-steps) * [Customize Asset Library](angular/import-media/asset-panel/customize-c9a4de/) — UI customization options * [Asset Concepts](angular/import-media/concepts-5e6197/) — Asset sources and metadata * [Unsplash Integration](angular/import-media/from-remote-source/unsplash-8f31f0/) — Thumbnail mapping example * [Source Sets](angular/import-media/source-sets-5679c8/) — Responsive asset rendering (not thumbnails) --- [Source](https:/img.ly/docs/cesdk/angular/import-media/asset-panel/customize-c9a4de) # Customize ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => { instance.i18n.setTranslations({ en: { 'libraries.empty-custom-asset-source.label': 'Empty' } }); // Do something with the instance of CreativeEditor SDK, for example: // Populate the asset library with default / demo asset sources. instance.addDefaultAssetSources(); instance.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); instance.engine.asset.addSource({ id: 'emptySource', findAssets: () => { return Promise.resolve({ assets: [], total: 0, currentPage: 1, nextPage: undefined }); } }); instance.ui.addAssetLibraryEntry({ id: 'empty-custom-asset-source', sourceIds: ['emptySource'], previewLength: 3, gridColumns: 3, gridItemHeight: 'square', previewBackgroundType: 'contain', gridBackgroundType: 'contain', icon: ({ theme, iconSize }) => { if (theme === 'dark') { if (iconSize === 'normal') { return 'https://img.ly/static/cesdk/guides/icon-normal-dark.svg'; } else { return 'https://img.ly/static/cesdk/guides/icon-large-dark.svg'; } } if (iconSize === 'normal') { return 'https://img.ly/static/cesdk/guides/icon-normal-light.svg'; } else { return 'https://img.ly/static/cesdk/guides/icon-large-light.svg'; } } }); instance.ui.addAssetLibraryEntry({ id: 'empty-custom-asset-source-for-replace', sourceIds: ['emptySource'], previewLength: 3, gridColumns: 3, gridItemHeight: 'square' }); instance.ui.addAssetLibraryEntry({ id: 'custom-images', sourceIds: ['ly.img.image'], previewLength: 5, gridColumns: 5, icon: 'https://img.ly/static/cesdk/guides/icon-normal-dark.svg' }); instance.ui.updateAssetLibraryEntry('ly.img.image', ({ entry }) => ({ ...entry, gridColumns: 4 })); instance.ui.setReplaceAssetLibraryEntries( ({ defaultEntryIds, selectedBlocks }) => { if (selectedBlocks.length !== 1) { return []; } const [selectedBlock] = selectedBlocks; if (selectedBlock.blockType === '//ly.img.ubq/graphic') { return [...defaultEntryIds, 'empty-custom-asset-source-for-replace']; } return []; } ); instance.ui.setDockOrder([ ...instance.ui.getDockOrder(), { id: 'ly.img.assetLibrary.dock', key: 'empty-custom-asset-source', icon: '@imgly/CustomLibrary', label: 'libraries.empty-custom-asset-source.label', entries: ['empty-custom-asset-source'] }, { id: 'ly.img.assetLibrary.dock', key: 'custom-images', icon: '@imgly/CustomLibrary', label: 'libraries.custom-images.label', entries: ['custom-images'] } ]); await instance.createDesignScene();}); ``` ```
``` In this example, we will show you how to customize the asset library in [CreativeEditor SDK](https://img.ly/products/creative-sdk). The asset library is used to find assets to insert them into a scene or replace a currently selected asset. By default, we have already added a configuration of entries shown in the dock panel for images, text, stickers, shapes, and more. You can add and remove every entry or change the appearance of any entry. Every entry has a couple of configuration options to determine what and how assets will be displayed. See the documentation on the [Asset Library Entry](angular/import-media/asset-panel/basics-f29078/) for more information. ``` instance.ui.addAssetLibraryEntry({ id: 'empty-custom-asset-source', sourceIds: ['emptySource'], previewLength: 3, gridColumns: 3, gridItemHeight: 'square', previewBackgroundType: 'contain', gridBackgroundType: 'contain', icon: ({ theme, iconSize }) => { if (theme === 'dark') { if (iconSize === 'normal') { return 'https://img.ly/static/cesdk/guides/icon-normal-dark.svg'; } else { return 'https://img.ly/static/cesdk/guides/icon-large-dark.svg'; } } if (iconSize === 'normal') { return 'https://img.ly/static/cesdk/guides/icon-normal-light.svg'; } else { return 'https://img.ly/static/cesdk/guides/icon-large-light.svg'; } }}); instance.ui.addAssetLibraryEntry({ id: 'empty-custom-asset-source-for-replace', sourceIds: ['emptySource'], previewLength: 3, gridColumns: 3, gridItemHeight: 'square'}); instance.ui.addAssetLibraryEntry({ id: 'custom-images', sourceIds: ['ly.img.image'], previewLength: 5, gridColumns: 5, icon: 'https://img.ly/static/cesdk/guides/icon-normal-dark.svg'}); ``` Adding, changing, or removing entries is done using the [Asset Library Entries API](angular/import-media/asset-panel/basics-f29078/) . You can for example use `cesdk.ui.updateAssetLibraryEntry` to change the number of grid columns in the images library. ``` instance.ui.updateAssetLibraryEntry('ly.img.image', ({ entry }) => ({ ...entry, gridColumns: 4})); ``` The basics of customizing the entries for replacement are the same as for insertion. The main difference is that these entries might vary depending on what block is currently selected and that the returned entries will determine if a replace action is shown on a selected block. Most of the time it makes sense to provide a custom function to return different entries based on the type or fill of a block. If no replacement should be available for the current block, an empty array has to be returned. The UI will not show a replace button in that case. As an argument to the callback, you will get the current context in the editor, mainly what blocks are selected, their block type as well as fills. This makes it more convenient to quickly decide what to return, but of course, you can also use the API for further checks as well. ``` instance.ui.setReplaceAssetLibraryEntries( ({ defaultEntryIds, selectedBlocks }) => { if (selectedBlocks.length !== 1) { return []; } const [selectedBlock] = selectedBlocks; if (selectedBlock.blockType === '//ly.img.ubq/graphic') { return [...defaultEntryIds, 'empty-custom-asset-source-for-replace']; } return []; }); ``` If you do not use a custom `title` function for an entry, you need a translation provided with the following keys in the `i18n` configuration: * `libraries..label` The label used in the dock panel * `libraries..label` The label for groups for a given entry. * `libraries...label` The label for a source in the source overview of a given entry * `libraries....label` The label for a given group in the group overview for a given entry. * `libraries..label` The label used for a source in all entries * `libraries..label` The label for groups for source in all entries. ``` instance.i18n.setTranslations({ en: { 'libraries.empty-custom-asset-source.label': 'Empty' }}); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`,}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { cesdk.i18n.setTranslations({ en: { 'libraries.empty-custom-asset-source.label': 'Empty', }, }); // Do something with the instance of CreativeEditor SDK, for example: // Populate the asset library with default / demo asset sources. cesdk.addDefaultAssetSources(); cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true, }); cesdk.engine.asset.addSource({ id: 'emptySource', findAssets: () => { return Promise.resolve({ assets: [], total: 0, currentPage: 1, nextPage: undefined, }); }, }); cesdk.ui.addAssetLibraryEntry({ id: 'empty-custom-asset-source', sourceIds: ['emptySource'], previewLength: 3, gridColumns: 3, gridItemHeight: 'square', previewBackgroundType: 'contain', gridBackgroundType: 'contain', icon: ({ theme, iconSize }) => { if (theme === 'dark') { if (iconSize === 'normal') { return 'https://img.ly/static/cesdk/guides/icon-normal-dark.svg'; } else { return 'https://img.ly/static/cesdk/guides/icon-large-dark.svg'; } } if (iconSize === 'normal') { return 'https://img.ly/static/cesdk/guides/icon-normal-light.svg'; } else { return 'https://img.ly/static/cesdk/guides/icon-large-light.svg'; } }, }); cesdk.ui.addAssetLibraryEntry({ id: 'empty-custom-asset-source-for-replace', sourceIds: ['emptySource'], previewLength: 3, gridColumns: 3, gridItemHeight: 'square', }); cesdk.ui.addAssetLibraryEntry({ id: 'custom-images', sourceIds: ['ly.img.image'], previewLength: 5, gridColumns: 5, icon: 'https://img.ly/static/cesdk/guides/icon-normal-dark.svg', }); cesdk.ui.updateAssetLibraryEntry('ly.img.image', (entry) => ({ ...entry, gridColumns: 4, })); cesdk.ui.setReplaceAssetLibraryEntries( ({ defaultEntryIds, selectedBlocks }) => { if (selectedBlocks.length !== 1) { return []; } const [selectedBlock] = selectedBlocks; if (selectedBlock.blockType === '//ly.img.ubq/graphic') { return [...defaultEntryIds, 'empty-custom-asset-source-for-replace']; } return []; }, ); cesdk.ui.setDockOrder([ ...cesdk.ui.getDockOrder(), { id: 'ly.img.assetLibrary.dock', key: 'empty-custom-asset-source', icon: '@imgly/CustomLibrary', label: 'libraries.empty-custom-asset-source.label', entries: ['empty-custom-asset-source'], }, { id: 'ly.img.assetLibrary.dock', key: 'custom-images', icon: '@imgly/CustomLibrary', label: 'libraries.custom-images.label', entries: ['custom-images'], }, ]); await cesdk.createDesignScene();}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/import-media/asset-panel/basics-f29078) # Basics An Asset Source is defined within the engine and can be seen as some sort of database of assets, it does not define how these assets are presented to the user. The web editor provides a versatile asset library that will display the assets in a user-friendly way inside a panel. However since an asset source does not provide any presentational information, the web editor needs to be told how to display the assets. This connection is made with an `Asset Library Entry`. When you open the asset library, either by calling `openPanel` or adding a `ly.img.assetLibrary.dock` component to the dock, you must provide asset library entries. Only with these entries, the asset library will know what and how to display assets. ## Managing Asset Library Entries[#](#managing-asset-library-entries) The CE.SDK web editor has an internal store of asset library entries that are referenced by asset libraries. You can find, add, remove, and update entries in this store. ``` CreativeEditorSDK.create('#cesdk', config).then(async (cesdk) => { await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ withUploadAssetSources: true }); await cesdk.createDesignScene(); // Find all asset library entries const entryIds = cesdk.ui.findAllAssetLibraryEntries(); if (entryIds.includes('ly.img.image')) { // Add a new source id to the default image entry cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ({ currentIds }) => [...currentIds, 'my.own.image.source'], }); } // Add a new custom asset library entry cesdk.ui.addAssetLibraryEntry({ id: 'my.own.image.entry', sourceIds: ['my.own.image.source'], sceneMode: 'Design', previewLength: 5, previewBackgroundType: 'cover', gridBackgroundType: 'cover', gridColumns: 2 }); // Remove a default entry for stickers. cesdk.ui.removeAssetLibraryEntry('ly.img.sticker'); ``` | Method | Description | | --- | --- | | `findAllAssetLibraryEntries()` | Returns all available asset library entries by their id. | | `addAssetLibraryEntry(entry)` | Adds a new asset library entry to the store. | | `getAssetLibraryEntry(id)` | Returns the asset library entry for the given id if present and `undefined` otherwise. | | `updateAssetLibraryEntry(id, entry)` | Updates the asset library entry for the given id with the provided entry object. It does not replace the entry but is merged with a present entry. | | `removeAssetLibraryEntry(id)` | Removes the asset library entry for the given id. | ## Using Asset Library Entries[#](#using-asset-library-entries) Asset library entries are used by an asset library. How the library gets the entries depends on the context. The main use case for a library is the dock. This is described in the [Dock API](angular/user-interface/customization/dock-cb916c/) documentation. We will describe further use cases here. ### Replace Asset Library[#](#replace-asset-library) The fill of a block can be replaced with another asset. What assets are applicable is different for each block. The web editor provides a function `setReplaceAssetLibraryEntries`. It gets a function that is used to define what block should be replaced with what asset. It will get the current context (most importantly the selected block) and will return ids to asset library entries that shall be used by the replace asset library. ``` cesdk.ui.setReplaceAssetLibraryEntries(context => { const { selectedBlocks, defaultEntryIds } = context; // Most of the time replace makes only sense if one block is selected. if (selectedBlocks.length !== 1) { // If no entry ids are returned, a replace button will not be shown. return []; } // id, block and fill type are provided for the selected block. const { id, blockType, fillType } = selectedBlocks[0]; if (fillType === '//ly.img.ubq/fill/image') { return ['my.own.image.entry']; } return [];}); ``` ### Background Tracks Asset Library[#](#background-tracks-asset-library) In the video timeline, the background track allows only certain type of assets. With `setBackgroundTrackAssetLibraryEntries` you can define what asset library entries are allowed for the background track when the user clicks on the “Add to Background Track” button. ``` // Only the image and video entries are allowed for the background track.cesdk.ui.setBackgroundTrackAssetLibraryEntries([ 'ly.img.image', 'ly.img.video',]); ``` ## Asset Library Entry Definition[#](#asset-library-entry-definition) ### Define What to Display[#](#define-what-to-display) The following properties tell the asset library what data should be queried and displayed. | Property | Type | Description | | --- | --- | --- | | `id` | `string` | The unique id of this entry that is referenced by other APIs and passed to the asset library. | | `sourceIds` | `string[]` | Defines what asset sources should be queried by the asset library. | | `excludeGroups` | `string[]` | If the asset sources support groups, these will be excluded and not displayed. | | `includeGroups` | `string[]` | If the asset sources support groups, only these will be displayed and all other groups will be ignored. | | `sceneMode` | `'Design'` or `'Video'` or `'All'` or (context) => `'Design'` or `'Video'` or `'All'` | If set, the asset library will use this entry exclusively in the respective scene mode. | ### Define How to Display[#](#define-how-to-display) Besides properties that define what data should be displayed, there are also properties that specify how the data should be displayed to meet specific use case requirements. #### Preview and Grid[#](#preview-and-grid) Some settings are for the preview and some for the grid view. If multiple asset sources or groups within a source are used, the asset library will show short sections with only a few assets shown. This is what we call the preview. The grid view is the main view where all assets are shown. | Property | Type | Description | | --- | --- | --- | | `title` | `string` or `((options: { group?: string; sourceId?: string }) => string` | Use for custom translation in the overviews for a group or a source. If undefined is returned by the function it will be handled like there wasn’t a title function set at all. | | `canAdd` | `boolean'` or `'(sourceId: string) => boolean'` | If `true` an upload button will be shown and the uploaded file will be added to the source. Please note that the asset source needs to support `addAsset` as well. | | `canRemove` | `boolean'` or `'(sourceId: string) => boolean'` | If `true` a remove button will be shown which will remove the asset from the source. Please note that the asset source needs to support `removeAsset` as well. | | `promptBeforeApply` | `boolean` or `{ show: boolean, sourceIds?: string[] }` | If `true` a prompt will be shown before applying the asset to the block. If an object is provided, the prompt will only be shown for the specified sources. | | `previewLength` | `number` | Defines how many assets will be shown in a preview section of a source or group. | | `previewBackgroundType` | `cover` or `contain` | If the thumbUri is set as a background that will be contained or covered by the card in the preview view. | | `gridBackgroundType` | `cover` or `contain` | If the thumbUri is set as a background that will be contained or covered by the card in the grid view. | | `gridColumns` | `number` | Number of columns in the grid view. | | `gridItemHeight` | `auto` or `square` | The height of an item in the grid view: \- `auto` automatically determines height yielding a masonry-like grid view. \- `square` every card will have the same square size. | | `cardBorder` | `boolean` | Draws a border around the card if set to true. | | `cardLabel` | `(assetResult: AssetResult) => string` | Overwrites the label of a card for a specific asset result | | `cardLabelPosition` | `(assetResult: AssetResult) => 'inside' or 'below'` | Position of the label `inside` or `below` the card. | | `cardLabelTruncateLines` | `(assetResult: AssetResult) => 'single' or 'multi'` | Controls label truncation to occur at end of first line (`single`), or at end of second line (`multi`). | | `cardBackground` | `CardBackground[]` | Determines what will be used as the card background from the asset and in which priorities. The first preference for which the `path` returns a value will be used to decide what and how the background will be rendered. E.g. a path of `meta.thumbUri` will look inside the asset for a value `asset.meta.thumbUri`. This non-null value will be used. The type of preference decides how the card will render the background. `svgVectorPath` creates a `` element with the given vector path. Adapts the color depending on the theme. `image` uses a CSS background image | | `sortBy` | The value can be one of the following: * `"None" ｜"Ascending" ｜"Descending"` * `{ sortingOrder?: "None" ｜ "Ascending" ｜ "Descending", sortKey?: string }` * `{ sourceId: string, sortingOrder?: "None" ｜"Ascending" ｜"Descending", sortKey?: string }[]` | Controls the sorting of asset source entries inside the asset library. This can be one of three possible values: 1. `"None" ｜"Ascending" ｜"Descending"` applies the sorting direction for all sources. 2. An object which defines the sort order via its `sortingOrder` key and an additional `sortKey` controlling the context of the sorting. This `sortKey` can be either any key which has been saved to the [Asset Source](angular/import-media/from-remote-source/unsplash-8f31f0/) or the special `id` value which uses the asset ids as a sorting context. 3. An array which contains multiple of the above mentioned objects including a `sourceId` key defining to with asset source this configuration applies to. | --- [Source](https:/img.ly/docs/cesdk/angular/import-media/asset-panel/refresh-assets-382060) # Refresh Assets In this example, we explain how to use the [`assetSourceContentsChanged` API](angular/import-media/concepts-5e6197/) to notify the engine that asset content has been updated after a specific action has been taken. By default, the CreativeEditorSDK takes care of refreshing the asset library entries in most cases. For example, when uploading or deleting elements. In other cases, however, we might need to refresh the asset library on demand. An example would be a custom asset source that can be updated from outside the CreativeEditorSDK. ## API Signature[#](#api-signature) The `assetSourceContentsChanged` API will notify the engine about the asset source update which in turn will update the asset library panel with the new items accordingly. It can be used like the following: ``` // To refetch a specific asset source, you can pass the ID of the asset source as a parametercesdk.engine.asset.assetSourceContentsChanged('ly.img.audio.upload'); ``` ## Prerequisites[#](#prerequisites) * [Get the latest stable version of **Node.js & NPM**](https://www.npmjs.com/get-npm) * (Optional): [Get the latest stable version of **Yarn**](https://yarnpkg.com/getting-started) ## 1\. Add the CreativeEditorSDK to Your Project[#](#1-add-the-creativeeditorsdk-to-your-project) Terminal window ``` npm install @cesdk/cesdk-js# oryarn add @cesdk/cesdk-js ``` Terminal window ``` npm install @cesdk/cesdk-js# oryarn add @cesdk/cesdk-js ``` ## 2\. Configure a custom asset source[#](#2-configure-a-custom-asset-source) We will take Cloudinary as an example by adding a custom asset source to the configuration. Check out the [Customize The Asset Library](angular/import-media/asset-panel/customize-c9a4de/) guide for detailed information about adding customizing the asset library. ``` const config = { /* ...configuration options */ assetSources: { 'cloudinary-images': { findAssets: () => { /* fetch the images from Cloudinary to display in the asset panel */ }, }, }, ui: { elements: { libraries: { insert: { /* append the Cloudinary asset source to the image asset library entry */ }, }, }, },}; ``` ## 3\. Refresh the asset source when a new image is uploaded[#](#3-refresh-the-asset-source-when-a-new-image-is-uploaded) Let’s consider that an image can be uploaded to Cloudinary from our application outside of the context of the CreativeEditorSDK. In this case, we can use the `assetSourceContentsChanged` API to refresh the `cloudinary-images` asset source and update the asset panel with the new items. ``` CreativeEditorSDK.create(config).then(async cesdk => { await cesdk.createDesignScene(); // create a Cloudinary upload widget const myWidget = cloudinary.createUploadWidget( { cloudName: 'my-cloud-name', }, (error, result) => { if (!error && result && result.event === 'success') { // refresh the asset panel after the image has been successfully uploaded cesdk.engine.asset.assetSourceContentsChanged('cloudinary-images'); } }, ); // attach the widget to the upload button document.getElementById('upload_widget').addEventListener('click', () => { myWidget.open(); });}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/get-started/angular/without-ui-c1234j) # Angular Without UI Learn how to integrate the CreativeEditor SDK (CE.SDK) Engine into an Angular application in **headless mode** - without the default user interface. Use the powerful CE.SDK Engine directly to programmatically create and edit designs. ## What’s CreativeEditor SDK?[#](#whats-creativeeditor-sdk) CreativeEditor SDK (CE.SDK) lets you integrate a customizable image and video editor into your web app. It includes filters, text overlays, and other media editing tools, and adapts easily to your use case. CreativeEditor SDK is a commercial product. To use it, you need a valid license key. If you don’t have one yet, you can get a free trial or purchase a license. [Free Trial](https://img.ly/forms/free-trial)[ Purchase License ](https://img.ly/pricing) ## Who is This Guide For?[#](#who-is-this-guide-for) This guide is for developers who: * Want to _build a custom UI_ instead of using CE.SDK’s default interface. * Need to use CE.SDK in _automation workflows_, without displaying a user-facing editor. * Have already followed one of the [Getting Started with CE.SDK in Angular](angular/get-started/angular/new-project-z9890f/) tutorials and want to extend their integration. ## What You’ll Achieve[#](#what-youll-achieve) * Initialize CE.SDK’s headless engine inside an Angular component. * Programmatically create and manipulate a scene. * (Optionally) attach the CE.SDK canvas for rendering visuals while using your own controls. ## Prerequisites[#](#prerequisites) * An existing Angular project set up with CE.SDK. * Having completed the [Angular getting started guide](angular/get-started/angular/new-project-z9890f/). * A valid **CE.SDK license key**. ## Step 1: Install the `cesdk/engine` package[#](#step-1-install-the-cesdkengine-package) In order to interact with CE.SDK in headless mode you need to include the _Creative Engine_ install it via your package manager: [ npm ](#tab-panel-16)[ yarn ](#tab-panel-17)[ pnpm ](#tab-panel-18) `shell npm install @cesdk/cesdk-js` `shell yarn add @cesdk/cesdk-js` `shell pnpm add @cesdk/cesdk-js` ## Step 2: Setup a CE.SDK Canvas Container[#](#step-2-setup-a-cesdk-canvas-container) We are going to create a small application consisting of a button which reduces the opacity of an image by half on click. In your Angular component’s HTML (for example, `custom-editor.component.html`): custom-editor.component.html ```
``` ## Step 3: Initialize CE.SDK Engine Programmatically[#](#step-3-initialize-cesdk-engine-programmatically) After initializing the Creative Engine, you have access to the scene which allows you to create elements and manipulate their properties, in this example we are adding a sample image to the scene. The `changeOpacity` click handler simply retrieves this block by id and uses the block API to change its opacity. In your component TypeScript file (for example, `custom-editor.component.ts`): **Important**: You must replace `'YOUR_LICENSE_KEY'` with your actual CE.SDK license key. The script will fail with initialization errors without a valid license key. [Get a free trial license key](https://img.ly/forms/free-trial). custom-editor.component.ts ``` import { AfterViewInit, Component, ElementRef, ViewChild, OnDestroy,} from '@angular/core';import CreativeEngine from '@cesdk/engine'; @Component({ selector: 'app-custom-editor', templateUrl: './custom-editor.component.html', standalone: true, imports: [],})export class CustomEditorComponent implements AfterViewInit { @ViewChild('cesdkCanvas') canvasContainer!: ElementRef; private cesdk: CreativeEngine | null = null; private engine: any; private imageBlockId: number | undefined; ngAfterViewInit(): void { const config = { // license: 'YOUR_CESDK_LICENSE_KEY', // ⚠️ REPLACE WITH YOUR ACTUAL LICENSE KEY }; CreativeEngine.init(config).then((engine: any) => { this.engine = engine; this.canvasContainer.nativeElement.append(engine.element); // Get the current scene or create a new one let scene = engine.scene.get(); if (!scene) { scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); } // Get the first page block const [page] = engine.block.findByType('page'); // Append a block to show an image on the page const imageBlockId = engine.block.create('graphic'); this.imageBlockId = imageBlockId; engine.block.setShape(imageBlockId, engine.block.createShape('rect')); // Fill the block with an image from a public source const imageFill = engine.block.createFill('image'); engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [ { uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg', width: 1024, height: 683, }, ]); engine.block.setFill(imageBlockId, imageFill); engine.block.appendChild(page, imageBlockId); // Zoom to fit the page in the editor view engine.scene.zoomToBlock(page); }); } changeOpacity(): void { if (this.imageBlockId !== undefined) { const currentOpacity = this.engine.block.getOpacity(this.imageBlockId); this.engine.block.setOpacity(this.imageBlockId, currentOpacity * 0.8); } } ngOnDestroy(): void { if (this.cesdk) { this.cesdk.dispose(); } }} ``` ## Step 4: Use the Custom Editor Component[#](#step-4-use-the-custom-editor-component) Import `CustomEditorComponent` in the parent component file (for example, `app.component.ts`): app.component.ts ``` // other imports...import { CustomEditorComponent } from './custom-editor.component'; @Component({ // other component metadata... imports: [CustomEditorComponent],}) ``` And use it in your `app.component.html`: app.component.html ```
<~-- other content... --~>
``` ## Step 5: Serve the Angular Project Locally[#](#step-5-serve-the-angular-project-locally) Run the project locally via your **package manager**, using the following command: [ npm ](#tab-panel-19)[ yarn ](#tab-panel-20)[ pnpm ](#tab-panel-21) `shell npm run dev` `shell yarn dev` `shell pnpm run dev` Or run it using the **Angular CLI**: Terminal window ``` ng serve ``` By default, the Angular app runs on your localhost at `http://localhost:4200/`. ## Step 6: Test the Integration[#](#step-6-test-the-integration) 1. Open `http://localhost:4200/` in your browser. 2. You should see: * A canvas showing the programmatically created image * A ”Reduce Opacity” button in the top-left corner (your custom UI) * No default editor interface or toolbars (this is headless mode) 3. Click the ”Reduce Opacity” button to test programmatic manipulation. ## Use Cases[#](#use-cases) Congratulations, you have taken the first step to be able to: * Build _custom UIs_ using Angular templates and CE.SDK’s canvas. * Automate generation of graphics or marketing assets in-browser. * Integrate CE.SDK into _multi-step creative workflows_ with programmatic logic. ## Troubleshooting & Common Errors[#](#troubleshooting--common-errors) **❌ Error**: `Cannot read property 'nativeElement' of undefined.` * Ensure the `@ViewChild` selector matches your `#cesdkCanvas` reference. **❌ Error**: `Invalid license key` * Make sure your trial or production license key is correct and up to date. **❌ CE.SDK canvas doesn’t render.** * Make sure you are appending `engine.element` to a valid DOM container inside `ngAfterViewInit`. ## Next Steps[#](#next-steps) This guide sets the stage for: * [Creating a full custom UI with Angular](angular/get-started/overview-e18f40/) * [Exporting scenes programmatically](angular/export-save-publish/export/overview-9ed3a8/) * [ Batch processing graphics or templated content ](angular/automation-715209/) --- [Source](https:/img.ly/docs/cesdk/angular/get-started/angular/new-project-z9890f) # New Angular Project Follow this guide to set up a **new Angular project** with **npm**, and build a reusable component to integrate the CreativeEditor SDK (CE.SDK). The result is an Angular app with a complete image and video editor, ready for further customization. ## What’s CreativeEditor SDK?[#](#whats-creativeeditor-sdk) CreativeEditor SDK (CE.SDK) lets you integrate a customizable image and video editor into your web app. It includes filters, text overlays, and other media editing tools, and adapts easily to your use case. CreativeEditor SDK is a commercial product. To use it, you need a valid license key. If you don’t have one yet, you can get a free trial or purchase a license. [Free Trial](https://img.ly/forms/free-trial)[ Purchase License ](https://img.ly/pricing) ## Who is This Guide For?[#](#who-is-this-guide-for) This guide is for developers who: * Are building or maintaining an **Angular app**. * Want to integrate CE.SDK using **TypeScript and Angular component’s lifecycle**. * Prefer installing the SDK via a package manager (npm, pnpm, yarn) and serving the UI inside a reusable Angular component. ## What You’ll Achieve:[#](#what-youll-achieve) * Set up a new Angular project. * Install and configure **CE.SDK** using npm. * Embed the editor in your component and launch it with configuration options. ## Prerequisites[#](#prerequisites) Before getting started, ensure you have: * **Node.js** (v20 or later) and **npm** installed. * A valid **CE.SDK license key**. * Angular CLI installed globally: Terminal window ``` npm install -g @angular/cli ``` ## Step 1: Create a New Angular Project[#](#step-1-create-a-new-angular-project) Create a new Angular app (skip routing, Server Side Rendering, and use CSS or SCSS as preferred): Terminal window ``` ng new cesdk-angular-appcd cesdk-angular-app ``` ## Step 2: Install CE.SDK via NPM[#](#step-2-install-cesdk-via-npm) Install the SDK package: Terminal window ``` npm install @cesdk/cesdk-js ``` ### Step 3: Start the Angular Development Server[#](#step-3-start-the-angular-development-server) Run your app locally: Terminal window ``` ng serve ``` Navigate to `http://localhost:4200/` and the starter Angular home page should appear. ## Step 4: Embed CE.SDK in a Component[#](#step-4-embed-cesdk-in-a-component) ### 1\. Add Container Element[#](#1-add-container-element) **📁 Which files to edit?** * [Angular 20+](https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301): `app.html` and `app.ts` * **Angular 19** or below: `app.component.html` and `app.component.ts` This guide uses Angular 20 and above, adjust the component names and paths in the code as needed. In your IDE or from your terminal, open `src/app/app.html` and replace the contents with: app.html ```
``` This provides a full-screen container for the editor. ### 2\. Initialize the Editor in TypeScript[#](#2-initialize-the-editor-in-typescript) Open `src/app/app.ts` and replace the content with: app.ts ``` // Import Angular core features and CreativeEditor SDKimport { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';import CreativeEditorSDK, { Configuration } from '@cesdk/cesdk-js'; // Define this class as an Angular component and sets seletor and styles@Component({ selector: 'app-root', templateUrl: './app.html', // Adjust based on your Angular version styleUrls: ['./app.css'], // Adjust based on your Angular version}) // Run code after the component's vue is initializedexport class App implements AfterViewInit { // Replace App by AppComponent if using Angular 19 or below @ViewChild('cesdk_container') containerRef!: ElementRef; title = 'Integrate CreativeEditor SDK with Angular'; // Initializes the CreativeEditor SDK after the view is ready ngAfterViewInit(): void { // Set CreativeEditor SDK configuration const config: Configuration = { // license: 'YOUR_CESDK_LICENSE_KEY', // Replace with your actual CE.SDK license key baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, callbacks: { onUpload: 'local', }, }; // Create the editor inside the DOM element CreativeEditorSDK.create(this.containerRef.nativeElement, config).then( async (instance: any) => { // Add default and demo asset sources await instance.addDefaultAssetSources(); await instance.addDemoAssetSources({ sceneMode: 'Design' }); // Create a new design scene in the editor await instance.createDesignScene(); }, ); }} ``` Replace `YOUR_LICENSE_KEY` with your actual CE.SDK license key. ### Components Paths[#](#components-paths) If you decide to generate [Angular components](https://v17.angular.io/guide/component-overview), update the file paths and imports accordingly. For convenience, the SDK loads all **assets** (for example, images, stickers, fonts etc.) from the CDN by default. For **production use**, we recommend [serving assets from your own servers](angular/serve-assets-b0827c/) . ## Step 4: Check the Editor[#](#step-4-check-the-editor) Navigate to `http://localhost:4200/` and in place of the previous demo home page, the CE.SDK editor should appear fullscreen inside your Angular app. ## Troubleshooting & Common Errors[#](#troubleshooting--common-errors) **❌ Error: `Cannot read property 'nativeElement' of undefined`** * Ensure `@ViewChild('cesdk_container')` matches the `#cesdk_container` element in your template. **❌ Error: `license key is invalid`** * Make sure your trial or production license key is correct and up to date. **❌ CE.SDK assets not loading** * Check network requests. Ensure you allow access to `cdn.img.ly`. ## Next Steps[#](#next-steps) You’ve successfully integrated **CE.SDK into Angular**. Now explore: * [Customize the Editor UI](angular/user-interface/overview-41101a/) * [Serve assets from your own servers](angular/serve-assets-b0827c/) * [Use Callbacks and Events](angular/actions-6ch24x/) * [ Customize interface labels and translations ](angular/user-interface/localization-508e20/) * [Theme the Editor](angular/user-interface/appearance/theming-4b0938/) --- [Source](https:/img.ly/docs/cesdk/angular/get-started/angular/clone-github-project-b1012h) # Clone GitHub Angular Project Download and run a **pre-built** CreativeEditor SDK (CE.SDK) Angular project from GitHub. It’s the quickest way to get started with CE.SDK **without having to build anything from scratch**. 10 mins estimated time [ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples)[ GitHub](https://github.com/imgly/cesdk-web-examples) ## What’s CreativeEditor SDK?[#](#whats-creativeeditor-sdk) CreativeEditor SDK (CE.SDK) lets you integrate a customizable image and video editor into your web app. It includes filters, text overlays, and other media editing tools, and adapts easily to your use case. CreativeEditor SDK is a commercial product. To use it, you need a valid license key. If you don’t have one yet, you can get a free trial or purchase a license. [Free Trial](https://img.ly/forms/free-trial)[ Purchase License ](https://img.ly/pricing) ## Who Is This Guide For?[#](#who-is-this-guide-for) This guide is intended for developers who: * Want to explore CE.SDK without setting up a custom environment. * Prefer starting with a **pre-configured Angular sample project**. * Are comfortable with **Git** and **Node.js** in local development. ## What You’ll Achieve[#](#what-youll-achieve) By following this tutorial, you will: * Clone the CE.SDK Angular integration project from **GitHub**. * Install the necessary dependencies and run the project locally. * Launch a fully functional image and video editor directly in your browser. ## Prerequisites[#](#prerequisites) Before you get started, ensure you have the following: * A **cloning** method (Git, GitHub CLI, or `npx`). * **The latest LTS version of Node.js and npm**: Necessary for installing dependencies and running the local server. [Download Node.js](https://nodejs.org/). * A valid **CE.SDK license key**. ## Step 1: Clone the GitHub Repository[#](#step-1-clone-the-github-repository) First, clone the CE.SDK examples repository from GitHub: Since this is a large repository, the cloning process can be slow depending on your network. The following steps include alternative methods to clone faster. [ Git ](#tab-panel-6)[ GitHub CLI ](#tab-panel-7)[ npx ](#tab-panel-8) Terminal window ``` git clone https://github.com/imgly/cesdk-web-examples.git ``` Clone taking too long? Try a shallow clone instead: Terminal window ``` git clone --depth=1 --branch main --single-branch https://github.com/imgly/cesdk-web-examples.git ``` Then navigate to the Angular integration folder: Terminal window ``` cd cesdk-web-examples/integrate-with-angular ``` Terminal window ``` gh repo clone imgly/cesdk-web-examples ``` Clone taking too long? Try a shallow clone instead: Terminal window ``` gh repo clone imgly/cesdk-web-examples -- --depth=1 --branch main --single-branch imgly/cesdk-web-examples ``` Then navigate to the Angular integration folder: Terminal window ``` cd cesdk-web-examples/integrate-with-angular ``` Use `npx degit` to clone only the Angular integration example: Terminal window ``` npx degit https://github.com/imgly/cesdk-web-examples/integrate-with-angular ``` ## Step 2: Install the Dependencies[#](#step-2-install-the-dependencies) Install the project’s dependencies using npm: Terminal window ``` npm install ``` This command downloads and installs all the packages listed in the `package.json` file. ## Step 3: Set Your CE.SDK License Key[#](#step-3-set-your-cesdk-license-key) Open the `src/app/app.component.ts` file and replace the placeholder license key with your **valid CE.SDK license**: app.component.ts ``` const config: Configuration = { // license: ', // Replace with your CE.SDK license key // ...}; ``` ## Step 4: Run the Project[#](#step-4-run-the-project) Start the local Angular development server with: Terminal window ``` npm run start ``` By default, the Angular application runs locally at `http://localhost:4200/`. Open this URL in your browser to see the creative editor in action. ## Troubleshooting & Common Issues[#](#troubleshooting--common-issues) **❌ Error**: `Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.` * Double-check that you ran `npm install` before executing `npm run start`. **❌ Error**: `Editor engine could not be loaded: The License Key (API Key) you are using to access CE.SDK is invalid` * Verify that your CE.SDK license key is valid, hasn’t expired, and has been correctly assigned to the `CreativeEditor` component’s props. **❌ Issue**: The editor doesn’t load * Check the browser console for any error messages that may provide more details. ## Next Steps[#](#next-steps) Congratulations! You’ve successfully integrated CE.SDK with Angular. Now, feel free to explore the SDK and proceed to the next steps: * [Configure the Creative Editor](angular/configuration-2c1c3d/) * [Serve assets from your own servers](angular/serve-assets-b0827c/) * [ Customize interface labels and translations ](angular/user-interface/localization-508e20/) * [Edit colors and appearance with themes](angular/user-interface/appearance/theming-4b0938/) --- [Source](https:/img.ly/docs/cesdk/angular/get-started/angular/existing-project-a0901g) # Existing Angular Project Follow the steps to integrate the CreativeEditor SDK (CE.SDK) into an **existing Angular app**. Learn how to create an editor component that correctly initializes and disposes of CE.SDK resources. ## What’s CreativeEditor SDK?[#](#whats-creativeeditor-sdk) CreativeEditor SDK (CE.SDK) lets you integrate a customizable image and video editor into your web app. It includes filters, text overlays, and other media editing tools, and adapts easily to your use case. CreativeEditor SDK is a commercial product. To use it, you need a valid license key. If you don’t have one yet, you can get a free trial or purchase a license. [Free Trial](https://img.ly/forms/free-trial)[ Purchase License ](https://img.ly/pricing) ## Who is This Guide For?[#](#who-is-this-guide-for) This guide is for developers who: * Already work on an **existing Angular codebase**. * Want to add CE.SDK for design or media editing capabilities. * Want to integrate the Creative Editor within a reusable Angular component. ## What You’ll Achieve[#](#what-youll-achieve) * Add CE.SDK to an existing Angular project. * Embed the editor within a component. * Load the editor with a default configuration and run it locally. ## Prerequisites[#](#prerequisites) Before you begin, make sure your project has: * Angular (v12 or later). * Node.js (v20 or later). * A valid **CE.SDK license key**. ## Step 1: Install CE.SDK[#](#step-1-install-cesdk) From your Angular project root, install CE.SDK with your preferred package manager: [ npm ](#tab-panel-9)[ yarn ](#tab-panel-10)[ pnpm ](#tab-panel-11) `shell npm install @cesdk/cesdk-js` `shell yarn add @cesdk/cesdk-js` `shell pnpm add @cesdk/cesdk-js` ## Step 2: Add a CE.SDK Container to Your Component[#](#step-2-add-a-cesdk-container-to-your-component) Choose the component where you want to integrate CE.SDK (for example, `app.component` or any feature component). ### Style the editor:[#](#style-the-editor) Choose where to integrate CE.SDK: * In a `.component.html` * In `a .component.ts` file if you’re using [Angular inline template](https://angular.dev/guide/templates): [ .component.html ](#tab-panel-12)[ .component.ts ](#tab-panel-13) .component.html ```
``` Add the following imports and properties at the top of your file: app.component.ts ``` import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';import CreativeEditorSDK, { Configuration } from '@cesdk/cesdk-js'; @Component({ selector: 'app-editor', // Adjust as needed template: `
`, styleUrls: ['./editor.component.css'], // Adjust as needed standalone: true,}) ``` This sets up a full-viewport container for the editor. ## Step 3: Initialize CE.SDK in the Component Logic[#](#step-3-initialize-cesdk-in-the-component-logic) ### In the TypeScript file `.component.ts`:[#](#in-the-typescript-file-componentts) [ Not using Angular inline templates ](#tab-panel-14)[ Using Angular inline templates ](#tab-panel-15) If you separate HTML from the component logic, add this to your `.component.ts`: app.component.ts ``` import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';import CreativeEditorSDK, { Configuration } from '@cesdk/cesdk-js'; @Component({ selector: 'app-editor', // Adjust as needed templateUrl: './app.component.html', styleUrls: ['./styles.css'], // Adjust as needed})export class EditorComponent implements AfterViewInit { @ViewChild('cesdk_container') containerRef!: ElementRef; ngAfterViewInit(): void { const config: Configuration = { // license: 'YOUR_CESDK_LICENSE_KEY', // Replace with your actual CE.SDK license key baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, callbacks: { onUpload: 'local', }, }; CreativeEditorSDK.create(this.containerRef.nativeElement, config).then( async (instance: any) => { instance.addDefaultAssetSources(); instance.addDemoAssetSources({ sceneMode: 'Design' }); await instance.createDesignScene(); }, ); }} ``` **Remember to:** * Replace `YOUR_LICENSE_KEY` with your **actual CE.SDK license key** * Adjust the `styleUrls` property to match your project’s structure * Adjust the `selector` property to match your component’s name After adding the properties in Step 2, add this to your `.component.ts`: app.component.ts ``` // imports// properties export class EditorComponent implements AfterViewInit { @ViewChild('cesdk_container') containerRef!: ElementRef; ngAfterViewInit(): void { const config: Configuration = { // license: 'YOUR_CESDK_LICENSE_KEY', // Replace with your actual CE.SDK license key baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, callbacks: { onUpload: 'local', }, }; CreativeEditorSDK.create(this.containerRef.nativeElement, config).then( async (instance: any) => { instance.addDefaultAssetSources(); instance.addDemoAssetSources({ sceneMode: 'Design' }); await instance.createDesignScene(); }, ); }} ``` Your final file should look like this: app.component.ts ``` import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';import CreativeEditorSDK, { Configuration } from '@cesdk/cesdk-js'; @Component({ selector: 'app-editor', // Adjust as needed template: `
`, styleUrls: ['./styles.css'], // Adjust as needed standalone: true, // Adjust as needed})export class EditorComponent implements AfterViewInit { @ViewChild('cesdk_container') containerRef!: ElementRef; ngAfterViewInit(): void { const config: Configuration = { // license: 'YOUR_CESDK_LICENSE_KEY', // Replace with your actual CE.SDK license key baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, callbacks: { onUpload: 'local', }, }; CreativeEditorSDK.create(this.containerRef.nativeElement, config).then( async (instance: any) => { instance.addDefaultAssetSources(); instance.addDemoAssetSources({ sceneMode: 'Design' }); await instance.createDesignScene(); }, ); }} ``` **Remember to:** * Replace `YOUR_LICENSE_KEY` with your actual CE.SDK license key * Adjust the `styleUrls` property to match your project’s structure * Adjust the `selector` property to match your component’s name * Set standalone: `true` if you want to use this component as a standalone component, or `false` if you want to use it as part of a module. ### Setup Notice[#](#setup-notice) For convenience, the SDK loads all **assets** (for example, images, stickers, fonts etc.) from the CDN by default. For **production use**, we recommend [serving assets from your own servers](angular/serve-assets-b0827c/) . ## Step 4: Serve the Project[#](#step-4-serve-the-project) Start your Angular app as usual: Terminal window ``` ng serve ``` Then navigate to `http://localhost:4200/` and you should see CE.SDK loaded in your chosen component. ## Troubleshooting & Common Errors[#](#troubleshooting--common-errors) **❌ Error: `Cannot read property 'nativeElement' of undefined`** * Ensure `@ViewChild('cesdk_container')` matches the `#cesdk_container` element in your template. **❌ Error: `license key is invalid`** * Make sure your trial or production license key is correct and up to date. **❌ CE.SDK assets not loading** * Check network requests. Ensure you allow access to `cdn.img.ly`. ## Next Steps[#](#next-steps) You’ve successfully integrated **CE.SDK into your existing Angular project**! Here’s what you can do next: * [Customize the UI](angular/user-interface-5a089a/) * [Add Localization Support](angular/user-interface/localization-508e20/) * [Use Theming and Styling](angular/user-interface/appearance/theming-4b0938/) * [Configure Callbacks & Asset Libraries](angular/actions-6ch24x/) --- [Source](https:/img.ly/docs/cesdk/angular/export-save-publish/export/with-color-mask-4f868f) # Export with a Color Mask Remove specific colors from exported images and generate alpha masks using CE.SDK’s color mask export API for print workflows, transparency creation, and compositing pipelines. ![Export with Color Mask example showing color removal and alpha mask generation](/docs/cesdk/_astro/browser.hero.DJM1CJhq_Z1CuC8.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples)[ GitHub](https://github.com/imgly/cesdk-web-examples) When exporting, CE.SDK can remove specific RGB colors by replacing matching pixels with transparency. The export generates two files: the masked image with transparent areas and an alpha mask showing removed pixels. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page dimensions engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Create a single image with registration marks const imageBlock = await engine.block.addImage(imageUri, { size: { width: pageWidth * 0.8, height: pageHeight * 0.8 } }); engine.block.appendChild(page, imageBlock); // Center the image on the page const imageWidth = engine.block.getWidth(imageBlock); const imageHeight = engine.block.getHeight(imageBlock); engine.block.setPositionX(imageBlock, (pageWidth - imageWidth) / 2); engine.block.setPositionY(imageBlock, (pageHeight - imageHeight) / 2); // Add registration marks at the corners (pure red for demonstration) const markSize = 30; const imageX = engine.block.getPositionX(imageBlock); const imageY = engine.block.getPositionY(imageBlock); const markPositions = [ { x: imageX - markSize - 10, y: imageY - markSize - 10 }, // Top-left { x: imageX + imageWidth + 10, y: imageY - markSize - 10 }, // Top-right { x: imageX - markSize - 10, y: imageY + imageHeight + 10 }, // Bottom-left { x: imageX + imageWidth + 10, y: imageY + imageHeight + 10 } // Bottom-right ]; markPositions.forEach((pos) => { const mark = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( mark, engine.block.createShape('//ly.img.ubq/shape/rect') ); const redFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(redFill, 'fill/color/value', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setFill(mark, redFill); engine.block.setWidth(mark, markSize); engine.block.setHeight(mark, markSize); engine.block.setPositionX(mark, pos.x); engine.block.setPositionY(mark, pos.y); engine.block.appendChild(page, mark); }); // Override the default image export action to use color mask export cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage(); if (!currentPage) return; // Export with color mask - removes pure red pixels (registration marks) const [maskedImage, alphaMask] = await engine.block.exportWithColorMask( currentPage, 1.0, // Red component 0.0, // Green component 0.0, // Blue component (RGB: pure red) { mimeType: 'image/png' } ); // Download masked image using CE.SDK utils await cesdk.utils.downloadFile(maskedImage, 'image/png'); // Download alpha mask await cesdk.utils.downloadFile(alphaMask, 'image/png'); console.log('Color mask export completed:', { maskedSize: maskedImage.size, maskSize: alphaMask.size }); }); // Add export button to navigation bar cesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: ['ly.img.exportImage.navigationBar'] }); // Log completion console.log('Export with Color Mask example loaded successfully'); console.log( 'Click the export button in the navigation bar to export with color mask' ); }} export default Example; ``` Color mask exports work through exact RGB color matching—pixels that precisely match your specified color values (0.0-1.0 range) are removed. This is useful for print workflows (removing registration marks), transparency creation (removing background colors), or generating alpha masks for compositing tools. ## Exporting with Color Masks[#](#exporting-with-color-masks) We export blocks with color masking using the `exportWithColorMask` method. This method removes specific RGB colors from the rendered output and generates both a masked image and an alpha mask. ``` // Export with color mask - removes pure red pixels (registration marks)const [maskedImage, alphaMask] = await engine.block.exportWithColorMask( currentPage, 1.0, // Red component 0.0, // Green component 0.0, // Blue component (RGB: pure red) { mimeType: 'image/png' }); ``` The method accepts the block to export, three RGB color components (0.0-1.0 range), and optional export options like MIME type. This example uses pure red `(1.0, 0.0, 0.0)` to identify and remove registration marks from the design. The export operation returns a Promise that resolves to an array containing two Blobs. The first Blob is the masked image with transparency applied where the specified color was found. The second Blob is the alpha mask—a black and white image showing which pixels were removed (black) and which remained (white). We then download both files using `cesdk.utils.downloadFile()`, which triggers browser downloads with appropriate file naming. ### Specifying RGB Color Values[#](#specifying-rgb-color-values) RGB color components in CE.SDK use floating-point values from 0.0 to 1.0, not the 0-255 integer values common in design tools: * Pure red: `(1.0, 0.0, 0.0)` - Common for registration marks * Pure magenta: `(1.0, 0.0, 1.0)` - Distinctive marker color * Pure cyan: `(0.0, 1.0, 1.0)` - Alternative marker color * Pure yellow: `(1.0, 1.0, 0.0)` - Useful for exclusion zones When converting from standard 0-255 RGB values, divide each component by 255. For example, RGB(255, 128, 0) becomes `(1.0, 0.502, 0.0)`. ## How to Export with Color Masks[#](#how-to-export-with-color-masks) We override the default export action to apply color masking when users click the export button. This integrates color mask functionality into your editor’s workflow without requiring additional UI. ``` // Override the default image export action to use color mask exportcesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage(); if (!currentPage) return; // Export with color mask - removes pure red pixels (registration marks) const [maskedImage, alphaMask] = await engine.block.exportWithColorMask( currentPage, 1.0, // Red component 0.0, // Green component 0.0, // Blue component (RGB: pure red) { mimeType: 'image/png' } ); // Download masked image using CE.SDK utils await cesdk.utils.downloadFile(maskedImage, 'image/png'); // Download alpha mask await cesdk.utils.downloadFile(alphaMask, 'image/png'); console.log('Color mask export completed:', { maskedSize: maskedImage.size, maskSize: alphaMask.size });}); ``` The custom action registers as `'exportDesign'`, replacing the default export behavior. When triggered, it exports the current page with pure red `(1.0, 0.0, 0.0)` as the mask color, then downloads both the masked image and alpha mask files using `cesdk.utils.downloadFile()`. ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | [`cesdk.actions.register()`](/js/api/cesdk/classes/CreativeEditorSDK#actions) | Registers a custom action that can be triggered by UI elements | | [`cesdk.ui.insertNavigationBarOrderComponent()`](/js/api/cesdk/classes/CreativeEditorSDK#ui) | Adds UI components to the editor’s navigation bar | | [`cesdk.utils.downloadFile()`](/js/api/cesdk/classes/CreativeEditorSDK#utils) | Triggers a browser download for a file blob | | [`engine.scene.getCurrentPage()`](/js/api/engine/classes/CreativeEngine#scene) | Gets the currently active page in the scene | | [`engine.block.exportWithColorMask()`](/js/api/engine/classes/CreativeEngine#block) | Exports a block with specific RGB color removed, generating masked image and alpha mask | | [`engine.block.addImage()`](/js/api/engine/classes/CreativeEngine#block) | Adds an image block to the scene | | [`engine.block.create()`](/js/api/engine/classes/CreativeEngine#block) | Creates a new block of the specified type | | [`engine.block.setShape()`](/js/api/engine/classes/CreativeEngine#block) | Sets the shape for a graphic block | | [`engine.block.createShape()`](/js/api/engine/classes/CreativeEngine#block) | Creates a shape definition for graphic blocks | | [`engine.block.createFill()`](/js/api/engine/classes/CreativeEngine#block) | Creates a fill definition for blocks | | [`engine.block.setColor()`](/js/api/engine/classes/CreativeEngine#block) | Sets the color value for a fill | | [`engine.block.setFill()`](/js/api/engine/classes/CreativeEngine#block) | Applies a fill to a block | | [`engine.block.appendChild()`](/js/api/engine/classes/CreativeEngine#block) | Adds a block as a child of another block | --- [Source](https:/img.ly/docs/cesdk/angular/export-save-publish/export/to-raw-data-abd7da) # Export to Raw Data Exporting designs to raw pixel data gives you direct access to uncompressed RGBA bytes, enabling custom image processing, GPU texture uploads, and integration with advanced graphics pipelines. Unlike compressed formats like PNG or JPEG, raw data export provides the pixel buffer without encoding overhead, making it ideal for performance-critical applications and scenarios where you need to manipulate individual pixels programmatically. ![Export to Raw Data example showing grayscale image processing with export button](/docs/cesdk/_astro/browser.hero.BCaMUJp5_NP3Ty.webp) 15 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples)[ GitHub](https://github.com/imgly/cesdk-web-examples) ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from '../package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Load assets and create scene await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set explicit page dimensions engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Create a single image block to demonstrate raw data export const imageBlock = await engine.block.addImage(imageUri, { size: { width: 800, height: 600 } }); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 0); engine.block.setPositionY(imageBlock, 0); // Add export button to navigation bar cesdk.ui.insertNavigationBarOrderComponent('last', { id: 'ly.img.actions.navigationBar', children: ['ly.img.exportImage.navigationBar'] }); // Override the built-in exportDesign action cesdk.actions.register('exportDesign', async () => { // Export to raw pixel data const width = Math.floor(engine.block.getWidth(imageBlock)); const height = Math.floor(engine.block.getHeight(imageBlock)); const blob = await engine.block.export(imageBlock, { mimeType: 'application/octet-stream', targetWidth: width, targetHeight: height }); // Convert blob to raw pixel array const arrayBuffer = await blob.arrayBuffer(); const pixelData = new Uint8Array(arrayBuffer); // Apply grayscale processing const processedData = this.toGrayscale(pixelData, width, height); // Download processed image await this.downloadProcessedImage(processedData, width, height); }); } /** * Convert image to grayscale by averaging RGB channels */ private toGrayscale( pixelData: Uint8Array, _width: number, _height: number ): Uint8Array { const result = new Uint8Array(pixelData); for (let i = 0; i < result.length; i += 4) { const avg = Math.round((result[i] + result[i + 1] + result[i + 2]) / 3); result[i] = avg; // R result[i + 1] = avg; // G result[i + 2] = avg; // B // Keep alpha unchanged: result[i + 3] } return result; } /** * Convert processed pixel data to PNG and trigger download */ private async downloadProcessedImage( pixelData: Uint8Array, width: number, height: number ): Promise { // Create canvas and render pixel data const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); if (!ctx) { throw new Error('Failed to get canvas context'); } // Create ImageData from pixel array const imageData = new ImageData( new Uint8ClampedArray(pixelData), width, height ); ctx.putImageData(imageData, 0, 0); // Convert canvas to blob const blob = await new Promise((resolve, reject) => { canvas.toBlob( blob => { if (blob) { resolve(blob); } else { reject(new Error('Failed to convert canvas to blob')); } }, 'image/png', 1.0 ); }); // Trigger download const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'processed-image.png'; link.click(); // Clean up URL.revokeObjectURL(url); }} export default Example; ``` ## When to Use Raw Data Export[#](#when-to-use-raw-data-export) Raw pixel data export provides direct access to uncompressed RGBA bytes from CE.SDK, giving you complete control over individual pixels for custom processing workflows. Use raw data export when you need pixel-level access to exported designs for custom algorithms or integrations. For standard image delivery, use PNG or JPEG exports instead, as they provide compression and are ready to use without additional processing. ## Understanding Raw Data Format[#](#understanding-raw-data-format) When you export with `mimeType: 'application/octet-stream'`, CE.SDK returns a Blob containing uncompressed RGBA pixel data. The format is straightforward: * **4 bytes per pixel** representing Red, Green, Blue, and Alpha channels * **Values from 0-255** for each channel (8-bit unsigned integers) * **Row-major order** with pixels arranged left-to-right, top-to-bottom * **Total size** equals width × height × 4 bytes ## How to Export Raw Data[#](#how-to-export-raw-data) To export a block as raw pixel data, use the `engine.block.export()` method with `mimeType: 'application/octet-stream'`: ``` const blob = await engine.block.export(imageBlock, { mimeType: 'application/octet-stream', targetWidth: width, targetHeight: height}); ``` This returns a Blob containing uncompressed RGBA pixel data that you can process with custom algorithms. ## Download Exported Data[#](#download-exported-data) The example overrides the built-in `exportDesign` action to implement a custom workflow that exports to raw data, processes the pixels, and downloads the result: ``` // Export to raw pixel dataconst width = Math.floor(engine.block.getWidth(imageBlock));const height = Math.floor(engine.block.getHeight(imageBlock)); const blob = await engine.block.export(imageBlock, { mimeType: 'application/octet-stream', targetWidth: width, targetHeight: height}); // Convert blob to raw pixel arrayconst arrayBuffer = await blob.arrayBuffer();const pixelData = new Uint8Array(arrayBuffer); // Apply grayscale processingconst processedData = this.toGrayscale(pixelData, width, height); // Download processed imageawait this.downloadProcessedImage(processedData, width, height); ``` This complete workflow demonstrates exporting to raw pixel data, applying grayscale processing, and downloading the processed image as PNG. ## Performance Considerations[#](#performance-considerations) Raw data export involves trade-offs between flexibility and efficiency: **Memory Usage**: Raw RGBA data requires 4 bytes per pixel. A 1920×1080 CE.SDK export uses approximately 8.3 MB uncompressed, compared to 1-3 MB for PNG. Reduce memory usage with the `targetWidth` and `targetHeight` export options: ``` const blob = await engine.block.export(blockId, { mimeType: 'application/octet-stream', targetWidth: 960, targetHeight: 540}); ``` **Processing Speed**: Operating directly on pixel data from CE.SDK exports is fast because there’s no encoding/decoding overhead. However, processing millions of pixels can be time-consuming for complex algorithms. Consider using Web Workers for heavy processing to avoid blocking the main thread. **When to Use Raw vs. Compressed for CE.SDK Exports**: * Use raw data when you need custom post-processing before final delivery * Use PNG or JPEG for direct downloads from CE.SDK * Use raw data for intermediate processing steps in multi-stage pipelines * Use compressed formats for final output or network transfer ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | [`engine.block.export()`](/js/api/engine/classes/CreativeEngine#block) | Exports a block with `mimeType: 'application/octet-stream'` for raw RGBA data | | [`engine.block.getWidth()`](/js/api/engine/classes/CreativeEngine#block) | Returns the width of a block in pixels | | [`engine.block.getHeight()`](/js/api/engine/classes/CreativeEngine#block) | Returns the height of a block in pixels | | [`Blob.arrayBuffer()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/arrayBuffer) | Converts the blob to an ArrayBuffer for raw data access | | [`ImageData()`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData) | Creates an ImageData object from a Uint8ClampedArray | | [`CanvasRenderingContext2D.putImageData()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData) | Paints pixel data onto a canvas | --- [Source](https:/img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b) # To PDF ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('star')); engine.block.setPositionX(block, 350); engine.block.setPositionY(block, 400); engine.block.setWidth(block, 100); engine.block.setHeight(block, 100); const fill = engine.block.createFill('color'); engine.block.setFill(block, fill); const rgbaBlue = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }; engine.block.setColor(fill, `fill/color/value`, rgbaBlue); engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); await block .export(page, { mimeType: 'application/pdf', exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', underlayerOffset: -2.0 }) .then((blob) => { const element = document.createElement('a'); element.setAttribute('href', window.URL.createObjectURL(blob)); element.setAttribute('download', 'underlayer_example.pdf'); element.style.display = 'none'; element.click(); element.remove(); });}); ``` ```
``` When printing on a non-white medium or on a special medium like fabric or glass, printing your design over an underlayer helps achieve the desired result. An underlayer will typically be printed using a special ink and be of the exact shape of your design. When exporting to PDF, you can specify that an underlayer be automatically generated in the [ExportOptions](angular/export-save-publish/export/overview-9ed3a8/) . An underlayer will be generated by detecting the contour of all elements on a page and inserting a new block with the shape of the detected contour. This new block will be positioned behind all existing block. After exporting, the new block will be removed. The result will be a PDF file containing an additional shape of the same shape as your design and sitting behind it. The ink to be used by the printer is specified in the [ExportOptions](angular/export-save-publish/export/overview-9ed3a8/) with a [spot color](angular/colors-a9b79c/) . You can also adjust the scale of the underlayer shape with a negative or positive offset, in design units. **Warning** Do not flatten the resulting PDF file or you will lose the underlayer shape which sits behind your design. ## Setup the scene[#](#setup-the-scene) We first create a new scene with a graphic block that has a color fill. ``` document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page');engine.block.setWidth(page, 800);engine.block.setHeight(page, 600);engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const block = engine.block.create('graphic');engine.block.setShape(block, engine.block.createShape('star'));engine.block.setPositionX(block, 350);engine.block.setPositionY(block, 400);engine.block.setWidth(block, 100);engine.block.setHeight(block, 100); const fill = engine.block.createFill('color');engine.block.setFill(block, fill);const rgbaBlue = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 };engine.block.setColor(fill, `fill/color/value`, rgbaBlue); ``` ## Add the underlayer’s spot color[#](#add-the-underlayers-spot-color) Here we instantiate a spot color with the known name of the ink the printer should use for the underlayer. The visual color approximation is not so important, so long as the name matches what the printer expects. ``` engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); ``` ## Exporting with an underlayer[#](#exporting-with-an-underlayer) We enable the automatic generation of an underlayer on export with the option `exportPdfWithUnderlayer = true`. We specify the ink to use with `underlayerSpotColorName = 'RDG_WHITE'`. In this instance, we make the underlayer a bit smaller than our design so we specify an offset of 2 design units (e.g. millimeters) with `underlayerOffset = -2.0`. ``` await block .export(page, { mimeType: 'application/pdf', exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', underlayerOffset: -2.0 }) .then((blob) => { const element = document.createElement('a'); element.setAttribute('href', window.URL.createObjectURL(blob)); element.setAttribute('download', 'underlayer_example.pdf'); element.style.display = 'none'; element.click(); element.remove(); }); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page, 40, 40, 40, 40); const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('star')); engine.block.setPositionX(block, 350); engine.block.setPositionY(block, 400); engine.block.setWidth(block, 100); engine.block.setHeight(block, 100); const fill = engine.block.createFill('color'); engine.block.setFill(block, fill); const rgbaBlue = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }; engine.block.setColor(fill, `fill/color/value`, rgbaBlue); engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); await block .export(page, { mimeType: 'application/pdf', exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', underlayerOffset: -2.0, }) .then(blob => { const element = document.createElement('a'); element.setAttribute('href', window.URL.createObjectURL(blob)); element.setAttribute('download', 'underlayer_example.pdf'); element.style.display = 'none'; element.click(); element.remove(); });}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695) # Size Limits CreativeEditor SDK (CE.SDK) supports exporting high-resolution image, video, and audio content, but there are practical limits to consider based on the user’s device capabilities. ## Image Resolution Limits[#](#image-resolution-limits) | Constraint | Recommendation / Limit | | --- | --- | | **Input Resolution** | Maximum input resolution is **4096×4096 pixels**. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the `maxImageSize` setting. | | **Output Resolution** | There is no enforced output resolution limit. Theoretically, the editor supports output sizes up to **16,384×16,384 pixels**. However, practical limits depend on the device’s GPU capabilities and available memory. | All image processing in CE.SDK is handled client-side, so these values depend on the **maximum texture size** supported by the user’s hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded. To ensure consistent results across devices, it’s best to test higher output sizes on your target hardware and set conservative defaults in production. ## Video Resolution & Duration Limits[#](#video-resolution--duration-limits) | Constraint | Recommendation / Limit | | --- | --- | | **Resolution** | Up to **4K UHD** is supported for **playback** and **export**, depending on the user’s hardware and available GPU resources. For **import**, CE.SDK does not impose artificial limits, but maximum video size is bounded by the **32-bit address space of WebAssembly (wasm32)** and the **browser tab’s memory cap (~2 GB)**. | | **Frame Rate** | 30 FPS at 1080p is broadly supported; 60 FPS and high-res exports benefit from hardware acceleration | | **Duration** | Stories and reels of up to **2 minutes** are fully supported. Longer videos are also supported, but we generally found a maximum duration of **10 minutes** to be a good balance for a smooth editing experience and a pleasant export duration of around one minute on modern hardware. | Performance scales with client hardware. For best results with high-resolution or high-frame-rate video, modern CPUs/GPUs with hardware acceleration are recommended. --- [Source](https:/img.ly/docs/cesdk/angular/export-save-publish/export/partial-export-89aaf6) # Partial Export Export individual design elements, grouped blocks, or specific pages from your scene instead of exporting everything at once using CE.SDK’s flexible export API. ![Partial Export example showing multiple blocks and groups being exported individually](/docs/cesdk/_astro/browser.hero.DrV_2izb_1Fgymz.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples)[ GitHub](https://github.com/imgly/cesdk-web-examples) Understanding how to export specific parts of your scene gives you fine-grained control over output generation. Instead of exporting an entire scene, you can export individual images, text blocks, shapes, grouped elements, or specific pages. This is essential for creating asset libraries, implementing “export selection” features, or generating multiple outputs from a single design. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json';import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Partial Export Guide * * This example demonstrates: * - Exporting individual design blocks * - Exporting grouped elements * - Exporting with different formats and options * - Understanding block hierarchy in exports */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Create a design scene using CE.SDK cesdk method await cesdk.createDesignScene(); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page dimensions for demo (smaller for reasonable export sizes) engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); // Set page background to light gray const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // Calculate responsive grid layout based on page dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Sample image URI for demonstrations const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Create design elements for demonstration // Create first image block const imageBlock1 = await engine.block.addImage(imageUri, { size: { width: blockWidth, height: blockHeight } }); engine.block.appendChild(page, imageBlock1); // Create second image block with different styling const imageBlock2 = await engine.block.addImage(imageUri, { size: { width: blockWidth, height: blockHeight }, cornerRadius: 20 }); engine.block.appendChild(page, imageBlock2); // Create a shape block const shapeBlock = engine.block.create('//ly.img.ubq/graphic'); const shape = engine.block.createShape('star'); engine.block.setShape(shapeBlock, shape); engine.block.setWidth(shapeBlock, blockWidth); engine.block.setHeight(shapeBlock, blockHeight); // Add a color fill to the shape const shapeFill = engine.block.createFill('color'); engine.block.setFill(shapeBlock, shapeFill); engine.block.setColor(shapeFill, 'fill/color/value', { r: 1.0, g: 0.7, b: 0.0, a: 1.0 }); engine.block.appendChild(page, shapeBlock); // Create two shapes for grouping demonstration const groupShape1 = engine.block.create('//ly.img.ubq/graphic'); const rect = engine.block.createShape('rect'); engine.block.setShape(groupShape1, rect); engine.block.setWidth(groupShape1, blockWidth * 0.4); engine.block.setHeight(groupShape1, blockHeight * 0.4); const groupFill1 = engine.block.createFill('color'); engine.block.setFill(groupShape1, groupFill1); engine.block.setColor(groupFill1, 'fill/color/value', { r: 0.3, g: 0.6, b: 0.9, a: 1.0 }); engine.block.appendChild(page, groupShape1); const groupShape2 = engine.block.create('//ly.img.ubq/graphic'); const ellipse = engine.block.createShape('ellipse'); engine.block.setShape(groupShape2, ellipse); engine.block.setWidth(groupShape2, blockWidth * 0.4); engine.block.setHeight(groupShape2, blockHeight * 0.4); const groupFill2 = engine.block.createFill('color'); engine.block.setFill(groupShape2, groupFill2); engine.block.setColor(groupFill2, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.5, a: 1.0 }); engine.block.appendChild(page, groupShape2); // Group the two shapes together const group = engine.block.group([groupShape1, groupShape2]); // Position all blocks in grid layout for visualization const allBlocks = [ imageBlock1, imageBlock2, shapeBlock, group, groupShape1 // Note: groupShape1 is inside group, positioning group will position children ]; allBlocks.forEach((block, index) => { if (index < 6) { // Only position first 6 blocks (group contains 2) const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); } }); // Position grouped shapes relative to group const groupPos = getPosition(4); engine.block.setPositionX(group, groupPos.x); engine.block.setPositionY(group, groupPos.y); engine.block.setPositionX(groupShape1, 10); engine.block.setPositionY(groupShape1, 10); engine.block.setPositionX(groupShape2, 60); engine.block.setPositionY(groupShape2, 60); // Helper function: Download blob and show notification const downloadWithNotification = async ( blob: Blob, filename: string, mimeType: string, exportType: string ) => { await cesdk.utils.downloadFile(blob, mimeType as any); // Show notification after successful download cesdk.ui.showNotification({ message: `Export "${exportType}" completed`, type: 'info', duration: 'infinite' }); }; // Override exportDesign action to export selected block or page cesdk.actions.register('exportDesign', async () => { // eslint-disable-next-line no-console console.log('🚀 Export action triggered'); const selectedBlocks = engine.block.findAllSelected(); // eslint-disable-next-line no-console console.log(`📦 Selected blocks: ${selectedBlocks.length}`); let blockToExport: number; if (selectedBlocks.length > 0) { // Export first selected block (or group them if multiple) blockToExport = selectedBlocks.length === 1 ? selectedBlocks[0] : engine.block.group(selectedBlocks); // eslint-disable-next-line no-console console.log( `✅ Exporting selected block(s): ${selectedBlocks.length === 1 ? 'single block' : 'grouped blocks'}` ); } else { // No selection - export current page const pages = engine.block.findByType('page'); blockToExport = pages[0]; // eslint-disable-next-line no-console console.log('📄 No selection - exporting current page'); } // eslint-disable-next-line no-console console.log(`📸 Exporting block ID: ${blockToExport}`); // Export the block with high compression const blob = await engine.block.export(blockToExport, { mimeType: 'image/png', pngCompressionLevel: 9 // Maximum compression for smaller file size }); // eslint-disable-next-line no-console console.log( `✨ Export complete - size: ${(blob.size / 1024).toFixed(2)} KB` ); // Download the blob await downloadWithNotification(blob, 'export.png', 'image/png', 'Design'); // eslint-disable-next-line no-console console.log('💾 Download complete'); }); // Helper function: Export individual block const exportIndividualBlock = async () => { // eslint-disable-next-line no-console console.log('🚀 Starting individual block export...'); // Show loading dialog before export const exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Block', message: 'Processing export...', progress: 'indeterminate' }); // Find a specific block to export const blockToExport = imageBlock1; // Export the block as PNG with high compression and target size const individualBlob = await engine.block.export(blockToExport, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600 }); // eslint-disable-next-line no-console console.log( `✅ Individual block exported - size: ${(individualBlob.size / 1024).toFixed(2)} KB` ); // Close the export dialog exportDialog.close(); // Download the exported block await downloadWithNotification( individualBlob, 'block-export.png', 'image/png', 'Block' ); }; // Helper function: Create and export a group const exportGroupExample = async () => { // eslint-disable-next-line no-console console.log('🚀 Starting group export...'); // Show loading dialog before export const exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Group', message: 'Processing export...', progress: 'indeterminate' }); // Group the blocks together (shapes already created above) const exportGroup = engine.block.group([groupShape1, groupShape2]); // Export the group (includes all children) with high compression and target size const groupBlob = await engine.block.export(exportGroup, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600 }); // eslint-disable-next-line no-console console.log( `✅ Group exported - size: ${(groupBlob.size / 1024).toFixed(2)} KB` ); // Close the export dialog exportDialog.close(); // Download the exported group await downloadWithNotification( groupBlob, 'group-export.png', 'image/png', 'Group' ); }; // Helper function: Export current page const exportCurrentPage = async () => { // Check export limits before exporting const maxExportSize = engine.editor.getMaxExportSize(); const availableMemory = engine.editor.getAvailableMemory(); // eslint-disable-next-line no-console console.log('🚀 Starting page export...'); // eslint-disable-next-line no-console console.log( `📊 Export limits - Max size: ${maxExportSize}px, Available memory: ${availableMemory} bytes` ); // Show loading dialog before export const exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Page', message: 'Processing export...', progress: 'indeterminate' }); // Export the entire page with high compression and target size const pageBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600 }); // eslint-disable-next-line no-console console.log( `✅ Page exported - size: ${(pageBlob.size / 1024).toFixed(2)} KB` ); // Close the export dialog exportDialog.close(); // Download the exported page await downloadWithNotification( pageBlob, 'page-export.png', 'image/png', 'Page' ); }; // Configure navigation bar layout cesdk.ui.setNavigationBarOrder([ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', { id: 'ly.img.action.navigationBar', onClick: async () => await exportCurrentPage(), key: 'export-page', label: 'Export Page', icon: '@imgly/Save', variant: 'plain', color: 'accent' }, { id: 'ly.img.action.navigationBar', onClick: async () => await exportGroupExample(), key: 'export-group', label: 'Export Group', icon: '@imgly/Group', color: 'accent' }, { id: 'ly.img.action.navigationBar', onClick: async () => await exportIndividualBlock(), key: 'export-block', label: 'Export Block', icon: '@imgly/Image', variant: 'plain', color: 'accent' } ]); // Show notification to guide users cesdk.ui.showNotification({ message: 'Use the export buttons on the right to try different export options (Export Page, Export Group, Export Block)', type: 'info', duration: 'infinite' }); // eslint-disable-next-line no-console console.log('Partial export examples initialized successfully'); }} export default Example; ``` This guide covers how to export individual blocks, grouped elements, and pages programmatically using the Block API. ## Understanding Block Hierarchy and Export[#](#understanding-block-hierarchy-and-export) ### How Block Hierarchy Affects Exports[#](#how-block-hierarchy-affects-exports) CE.SDK organizes content in a tree structure: Scene → Pages → Groups → Individual Blocks. When you export a block, the export automatically includes all child elements in the hierarchy. Exporting a page exports every element on that page. Exporting a group exports all blocks within that group. Exporting an individual block (like an image or text) exports only that specific element. This hierarchical behavior is powerful because you can control export scope by choosing which level of the hierarchy to target. Want just one image? Export the image block. Want a complete layout section? Export the parent group. ### Export Behavior[#](#export-behavior) The export API applies several transformations to ensure consistent output. If the exported block itself is rotated, it will be exported without that rotation—the content appears upright in the output file. Any margin set on the block is included in the export bounds. Outside strokes are included for most block types, though pages handle strokes differently. Only blocks that belong to the scene hierarchy can be exported. Orphaned blocks (created but not added to the page) cannot be exported until they’re attached to the scene tree. ## Exporting Individual Blocks[#](#exporting-individual-blocks) ### Finding Blocks to Export[#](#finding-blocks-to-export) Before exporting, we need to identify which block to export. We can find blocks by type using `findByType`, by name if you’ve assigned custom names, or by ID if you already have a reference. Once we have a block reference, exporting is straightforward. Pass the block ID to `engine.block.export()` along with export options like format and quality settings. ### Basic Block Export[#](#basic-block-export) Here we export a single image block as PNG with compression settings. The export returns a Blob containing the image data. ``` // eslint-disable-next-line no-consoleconsole.log('🚀 Starting individual block export...'); // Show loading dialog before exportconst exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Block', message: 'Processing export...', progress: 'indeterminate'}); // Find a specific block to exportconst blockToExport = imageBlock1; // Export the block as PNG with high compression and target sizeconst individualBlob = await engine.block.export(blockToExport, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600}); // eslint-disable-next-line no-consoleconsole.log( `✅ Individual block exported - size: ${(individualBlob.size / 1024).toFixed(2)} KB`); // Close the export dialogexportDialog.close(); ``` The `mimeType` determines the output format. CE.SDK supports PNG, JPEG, WEBP, and PDF for static exports. Each format has specific options—PNG uses `pngCompressionLevel`, JPEG uses `jpegQuality`, and WEBP uses `webpQuality`. Different formats serve different purposes. PNG is ideal for graphics requiring transparency, such as UI elements, logos, or illustrations with alpha channels. JPEG works well for photographs where file size matters and transparency isn’t needed. WEBP provides better compression than PNG or JPEG for web delivery. PDF preserves vector information and is suited for print workflows. JPEG exports drop transparency and replace it with a solid background, which may produce unexpected results if your design relies on transparency. Always consider whether your content needs an alpha channel when choosing export formats. ## Exporting Grouped Elements[#](#exporting-grouped-elements) ### Creating and Exporting Groups[#](#creating-and-exporting-groups) Groups let you export multiple elements together as a single output. This is useful for composite graphics like logos with multiple components, complex illustrations made from many shapes, or layout sections that should be exported as a unit. ``` // eslint-disable-next-line no-consoleconsole.log('🚀 Starting group export...'); // Show loading dialog before exportconst exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Group', message: 'Processing export...', progress: 'indeterminate'}); // Group the blocks together (shapes already created above)const exportGroup = engine.block.group([groupShape1, groupShape2]); // Export the group (includes all children) with high compression and target sizeconst groupBlob = await engine.block.export(exportGroup, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600}); // eslint-disable-next-line no-consoleconsole.log( `✅ Group exported - size: ${(groupBlob.size / 1024).toFixed(2)} KB`); // Close the export dialogexportDialog.close(); ``` When you export a group, CE.SDK renders all children together into a single image. The group’s bounding box determines the export dimensions, and relative positioning between children is preserved exactly as designed. ### Exporting Selected Elements[#](#exporting-selected-elements) A common workflow is allowing users to select elements and export their selection. Use `findAllSelected()` to get selected blocks, group them temporarily, and export the group. ``` // Get currently selected blocksconst selectedBlocks = engine.block.findAllSelected(); if (selectedBlocks.length === 0) { console.log('No blocks selected');} else if (selectedBlocks.length === 1) { // Export single block directly const blob = await engine.block.export(selectedBlocks[0], { mimeType: 'image/png' });} else { // Group and export multiple selected blocks const group = engine.block.group(selectedBlocks); const blob = await engine.block.export(group, { mimeType: 'image/png' });} ``` This pattern enables “Export Selection” functionality in design tools, letting users export precisely what they’ve chosen without exporting the entire canvas. ## Exporting Pages[#](#exporting-pages) When working with multi-page documents, you often want to export pages individually rather than as a complete scene. Exporting the page block directly gives you output for that specific page. ``` // Check export limits before exportingconst maxExportSize = engine.editor.getMaxExportSize();const availableMemory = engine.editor.getAvailableMemory(); // eslint-disable-next-line no-consoleconsole.log('🚀 Starting page export...');// eslint-disable-next-line no-consoleconsole.log( `📊 Export limits - Max size: ${maxExportSize}px, Available memory: ${availableMemory} bytes`); // Show loading dialog before exportconst exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Page', message: 'Processing export...', progress: 'indeterminate'}); // Export the entire page with high compression and target sizeconst pageBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600}); // eslint-disable-next-line no-consoleconsole.log( `✅ Page exported - size: ${(pageBlob.size / 1024).toFixed(2)} KB`); // Close the export dialogexportDialog.close(); ``` Page exports include everything on the page—the background, all content blocks, and any page-level effects. The page dimensions determine the output size unless you specify `targetWidth` and `targetHeight` to override the dimensions. ## Export Options and Configuration[#](#export-options-and-configuration) ### Target Size Control[#](#target-size-control) Sometimes you need exports at specific dimensions regardless of the block’s actual size. The `targetWidth` and `targetHeight` options render the block large enough to fill the target size while maintaining aspect ratio. If you specify a target size that doesn’t match the block’s aspect ratio, CE.SDK ensures the block fills the target dimensions completely. The output may extend beyond the target size on one axis to preserve the correct proportions—no stretching or distortion occurs. ### Quality and Compression[#](#quality-and-compression) Each export format offers quality controls that balance output size against visual fidelity. For PNG, `pngCompressionLevel` ranges from 0 (no compression, fastest) to 9 (maximum compression, slowest). Higher compression takes longer but produces smaller files without affecting image quality—PNG is lossless. JPEG `jpegQuality` ranges from 0 (lowest quality) to 1 (highest quality). Lower values create smaller files but introduce visible artifacts. Values above 0.9 provide excellent quality for most use cases. WEBP `webpQuality` also ranges from 0 to 1. A value of 1.0 triggers a special lossless mode that often produces smaller files than equivalent PNG exports. ### Export Size Limits[#](#export-size-limits) Before exporting large blocks or requesting high target dimensions, check the platform’s export capabilities. `getMaxExportSize()` returns the maximum width or height in pixels that can be exported. Both the width and height of your export must be below or equal to this limit. However, memory constraints may prevent exports that technically fit within size limits—use `getAvailableMemory()` to assess available memory before attempting large exports. ## Export Limitations and Considerations[#](#export-limitations-and-considerations) ### Format-Specific Constraints[#](#format-specific-constraints) JPEG drops transparency from the final image, replacing transparent pixels with a solid background (usually white or black depending on implementation). This can cause unexpected results when exporting designs that rely on alpha channels. Always use PNG or WEBP if transparency is required. PDF export behavior depends on the `exportPdfWithHighCompatibility` option. When set to `true`, images and effects are rasterized according to the scene’s DPI setting for broader viewer compatibility. When `false`, PDFs export faster by embedding images directly, but gradients with transparency may not render correctly in Safari or macOS Preview. See the [PDF export guide](../to-pdf+95e04b/) for detailed performance guidance. ### Performance Considerations[#](#performance-considerations) Exporting is a synchronous operation that blocks the main thread while rendering. For large exports or multiple sequential exports, provide user feedback like progress indicators to prevent the interface from appearing frozen. Batch exports can be optimized by processing blocks in parallel where possible, though be mindful of memory constraints. Exporting dozens of high-resolution images simultaneously may exhaust available memory. Consider batching in smaller groups with delays between batches. ### Hierarchy Requirements[#](#hierarchy-requirements) Only blocks attached to the scene hierarchy can be exported. If you create a block but don’t append it to a page, export will fail. Always ensure blocks are children of the page (or nested within groups that are children of the page) before attempting export. ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | [`engine.block.export()`](/js/api/engine/classes/CreativeEngine#block) | Export a block with specified format and quality options | | [`engine.block.findByType()`](/js/api/engine/classes/CreativeEngine#block) | Find blocks by type identifier | | [`engine.block.group()`](/js/api/engine/classes/CreativeEngine#block) | Group multiple blocks into a single logical unit | | [`engine.scene.getPages()`](/js/api/engine/classes/CreativeEngine#scene) | Get all pages in the current scene | | [`engine.editor.getMaxExportSize()`](/js/api/engine/classes/CreativeEngine#editor) | Get maximum export dimension in pixels | | [`engine.editor.getAvailableMemory()`](/js/api/engine/classes/CreativeEngine#editor) | Get available engine memory in bytes | --- [Source](https:/img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8) # Options Exporting via the `block.export` endpoint allows fine-grained control of the target format. CE.SDK currently supports exporting scenes, pages, groups, or individual blocks in the MP4, PNG, TGA, JPEG, WEBP, BINARY and PDF formats. To specify the desired type, just pass in the corresponding `mimeType`. Pass additional options in a mime-type specific object. ## Static Design Export Options[#](#static-design-export-options) | Format | MimeType | Options (Default) | | --- | --- | --- | | PNG | `image/png` | `pngCompressionLevel (5)` - The compression level is a trade-off between file size and encoding/decoding speed, but doesn’t affect quality. Valid values are `[0-9]` ranging from no to maximum compression. | | JPEG | `image/jpeg` | `jpegQuality (0.9)` - Directly influences the resulting files visual quality. Smaller = worse quality, but lower file size. Valid values are `(0-1]` | | WEBP | `image/webp` | `webpQuality (1.0)` - Controls the desired output quality. 1.0 results in a special lossless encoding that usually produces smaller file sizes than PNG. Valid values are (0-1\], higher means better quality. | | BINARY | `application/octet-stream` | No additional options. This type returns the raw image data in RGBA8888 order in a blob. | | PDF | `application/pdf` | `exportPdfWithHighCompatibility (true)` - Increase compatibility with different PDF viewers. Images and effects will be rasterized with regard to the scene’s DPI value instead of simply being embedded. | | PDF | `application/pdf` | `exportPdfWithUnderlayer (false)` - An underlayer is generated by adding a graphics block behind the existing elements of the shape of the elements on the page. | | PDF | `application/pdf` | `underlayerSpotColorName ("")` - The name of the spot color to be used for the underlayer’s fill. | | PDF | `application/pdf` | `underlayerOffset (0.0)` - The adjustment in size of the shape of the underlayer. | Certain formats allow additional configuration, e.g., `options.jpegQuality` controls the output quality level when exporting to JPEG. These format-specific options are ignored when exporting to other formats. You can choose which part of the scene to export by passing in the respective block as the first parameter. For all formats, an optional `targetWidth` and `targetHeight` in pixels can be specified. If used, the block will be rendered large enough, that it fills the target size entirely while maintaining its aspect ratio. The supported export size limit can be queried with `editor.getMaxExportSize()`, the width and height should not exceed this value. ### PDF Export Performance[#](#pdf-export-performance) The `exportPdfWithHighCompatibility` option controls how images and gradients are embedded in PDFs. When set to `false`, PDF exports can be **6-15x faster** for high-DPI content by embedding images directly instead of rasterizing them. However, this may cause rendering issues in Safari and macOS Preview with gradients that use transparency. See the [PDF conversion guide](angular/conversion/to-pdf-eb937f/) for detailed performance optimization guidance and testing recommendations. ## Video Export Options[#](#video-export-options) * `mimeType` * `h264Profile` * `h264Level` * `videoBitrate` * `audioBitrate` * `timeOffset` * `duration` * `framerate` * `targetWidth` * `targetHeight` * `abortSignal` ## Audio Export Options[#](#audio-export-options) * `mimeType` * `sampleRate` * `numberOfChannels` * `timeOffset` * `duration` * `skipEncoding` * `abortSignal` ## Export a Static Design[#](#export-a-static-design) Export a design block element, e.g., a scene, a page, a group, or a single block, as a file of the given mime type. ``` export(handle: DesignBlockId, options?: ExportOptions): Promise ``` Exports a design block element as a file of the given mime type. Performs an internal update to resolve the final layout for the blocks. * `handle`: The design block element to export. * `options`: The options for exporting the block type * Returns A promise that resolves with the exported image or is rejected with an error. Export details: * Exporting automatically performs an internal update to resolve the final layout for all blocks. * Only blocks that belong to the scene hierarchy can be exported. * The export will include the block and all child elements in the block hierarchy. * If the exported block itself is rotated it will be exported without rotation. * If a margin is set on the block it will be included. * If an outside stroke is set on the block it will be included except for pages. * Exporting a scene with more than one page may result in transparent areas between the pages, it is recommended to export the individual pages instead. * Exporting as JPEG drops any transparency on the final image and may lead to unexpected results. ## Export with a Color Mask[#](#export-with-a-color-mask) ``` exportWithColorMask(handle: DesignBlockId, maskColorR: number, maskColorG: number, maskColorB: number, options?: ExportOptions): Promise ``` Exports a design block element as a file of the given mime type. Performs an internal update to resolve the final layout for the blocks. * `handle`: The design block element to export. * `maskColorR`: The red component of the special color mask color. * `maskColorG`: The green component of the special color mask color. * `maskColorB`: The blue component of the special color mask color. * `options`: The options for exporting the block type * Returns A promise that resolves with an array of the exported image and mask or is rejected with an error. Export details: * Removes all pixels that exactly match the given RGB color and replaces them with transparency. * The output includes two files: the masked image and the mask itself. ## Export a Video[#](#export-a-video) Export a page as a video file of the given mime type. ``` exportVideo(handle: DesignBlockId, options?: VideoExportOptions): Promise ``` Exports a design block as a video file of the given mime type. Note: The export will run across multiple iterations of the update loop. In each iteration a frame is scheduled for encoding. * `handle`: The design block element to export. Currently, only page blocks are supported. * `options`: The options for exporting the video. * Returns A promise that resolves with a video blob or is rejected with an error. ``` type VideoExportOptions = { mimeType?: VideoMimeType; onProgress?: ( numberOfRenderedFrames: number, numberOfEncodedFrames: number, totalNumberOfFrames: number, ) => void; h264Profile?: number; h264Level?: number; videoBitrate?: number; audioBitrate?: number; timeOffset?: number; duration?: number; framerate?: number; targetWidth?: number; targetHeight?: number; abortSignal?: AbortSignal;}; ``` Video export details: * Exporting automatically performs an internal update to resolve the final layout for all blocks and waits until all pending assets have been loaded. * Only blocks that belong to the scene hierarchy can be exported. * The given block determines the size, camera position, and rotation in the same manner as the static design export. * The given block does not influence the time offset and duration of the video. This can be controlled using the `timeOffset` and `duration` options. * The video resolution is determined by the largest page width and the largest page height. This can be overridden using the `targetWidth` and `targetHeight` options. * When using H.264, transparency info is lost and the video will be exported with a black background. ## Export Audio[#](#export-audio) Export a page, audio block, video block, or track as an audio file of the given mime type. ``` exportAudio(handle: DesignBlockId, options?: AudioExportOptions): Promise ``` Exports a design block as an audio file of the given mime type. Note: The export runs in a background worker and will run across multiple iterations of the update loop. * `handle`: The design block element to export. Currently supports page blocks, audio blocks, video blocks, and track blocks. * `options`: The options for exporting the audio. * Returns A promise that resolves with an audio blob or is rejected with an error. ``` type AudioExportOptions = { mimeType?: AudioMimeType; onProgress?: ( numberOfRenderedFrames: number, numberOfEncodedFrames: number, totalNumberOfFrames: number ) => void; sampleRate?: number; numberOfChannels?: number; timeOffset?: number; duration?: number; skipEncoding?: boolean; abortSignal?: AbortSignal;}; ``` Audio export details: * Exporting automatically performs an internal update to resolve the final layout for all blocks and waits until all pending assets have been loaded. * Only blocks that belong to the scene hierarchy can be exported. * **Supported block types**: Pages (`//ly.img.ubq/page`), audio blocks (`//ly.img.ubq/audio`), video fills (`//ly.img.ubq/fill/video`), and tracks (`//ly.img.ubq/track`). * When exporting a page, all audio from audio blocks, video fills, and other audio sources on the page will be mixed together. * When exporting an audio block, only that audio block’s audio will be exported, respecting its trim and duration settings. * When exporting a video block with audio, only the audio track from that video will be exported, respecting its trim and duration settings. * When exporting a track, all audio from blocks within that track will be mixed together. * The `timeOffset` option allows you to start the audio export from a specific time in seconds (default: 0). * The `duration` option allows you to specify the length of the exported audio in seconds. If not specified, the duration of the block is used. * The `sampleRate` option controls the sample rate of the exported audio in Hz (default: 48000). * The `numberOfChannels` option controls the number of audio channels (default: 2 for stereo). * The `skipEncoding` option allows exporting audio data directly without encoding (default: false). * Supported mime types: `audio/wav` for WAV format and `audio/mp4` for M4A/AAC format. ## Export Information[#](#export-information) Before exporting, the maximum export size and available memory can be queried. ``` getMaxExportSize(): number ``` Get the export size limit in pixels on the current device. An export is only possible when both the width and height of the output are below or equal this limit. However, this is only an upper limit as the export might also not be possible due to other reasons, e.g., memory constraints. * Returns The upper export size limit in pixels or an unlimited size, i.e, the maximum signed 32-bit integer value, if the limit is unknown. ``` getAvailableMemory(): number ``` Get the currently available memory in bytes. * Returns The currently available memory in bytes. ## Exporting via the Export button[#](#exporting-via-the-export-button) When a user triggers an export by clicking the corresponding button in the navigation bar, the editor will call the `exportDesign` callback. By default, this exports the current page and downloads it to the user’s device. You can customize this behavior by registering your own callback implementation. ``` // Register custom export handlercesdk.actions.register('exportDesign', async options => { // Use the utils API to perform the export const { blobs, options: exportOptions } = await cesdk.utils.export(options); // Custom handling - e.g., upload to CDN instead of download await uploadToYourCDN(blobs);}); ``` To enable the export button in the navigation bar, see the configuration of elements for further information. ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; const exportButton = document.getElementById('export_button'); const scene = engine.scene.get();const page = engine.scene.getCurrentPage(); const sceneBlob = await engine.block.export(scene, { mimeType: 'application/pdf',}); const pageBlob = await engine.block.export(page, { mimeType: 'image/png' }); const [image, mask] = await engine.block.exportWithColorMask( page, 0.5, 0.5, 0.5, { mimeType: 'image/png', },); if (groupable) { const group = engine.block.group([member1, member2]); const groupBlob = await engine.block.export(group, { mimeType: 'image/png' });} const blockBlob = await engine.block.export(block, { /** * The mime type of the output file. * * Supported values are: * - `image/png` * - `image/jpeg` * - `image/webp` * - `image/x-tga` * - `application/octet-stream` * - `application/pdf` */ mimeType: 'image/jpeg', /** * The JPEG quality to use when encoding to JPEG. * * Valid values are (0-1], higher means better quality. * Ignored for other encodings. * * @defaultValue 0.9 */ jpegQuality: 0.9, /** * The PNG compression level to use, when exporting to PNG. * * Valid values are 0 to 9, higher means smaller, but slower. * Quality is not affected. * Ignored for other encodings. * @defaultValue 5. */ pngCompressionLevel: 5, /** * An optional target width used in conjunction with target height. * If used, the block will be rendered large enough, that it fills the target * size entirely while maintaining its aspect ratio. */ targetWidth: null, /** * An optional target height used in conjunction with target width. * If used, the block will be rendered large enough, that it fills the target * size entirely while maintaining its aspect ratio. */ targetHeight: null,}); // Video Exportconst videoOptions = { /** * The mime type of the output file. * * Supported values are: * - `video/mp4` * - `video/quicktime` */ mimeType: 'video/mp4', /** * A callback which reports on the progress of the export. * It informs the receiver of the current frame index, which * currently gets exported and the total frame count. */ onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames, ); }, /** * Determines the encoder feature set and in turn the quality, size and speed of the encoding process. * * @defaultValue 77 (Main) */ h264Profile: 77, /** * Controls the H.264 encoding level. This relates to parameters used by the encoder such as bit rate, * timings and motion vectors. Defined by the spec are levels 1.0 up to 6.2. To arrive at an integer value, * the level is multiplied by ten. E.g. to get level 5.2, pass a value of 52. * * @defaultValue 52 */ h264Level: 52, /** * The video bitrate in bits per second. The maximum bitrate is determined by h264Profile and h264Level. * If the value is 0, the bitrate is automatically determined by the engine. */ videoBitrate: 0, /** * The audio bitrate in bits per second. If the value is 0, the bitrate is automatically determined by the engine (128kbps for stereo AAC stream). */ audioBitrate: 0, /** * The time offset in seconds of the scene's timeline from which the video will start. * * @defaultValue 0 */ timeOffset: 0, /** * The duration in seconds of the final video. * * @defaultValue The duration of the given page. */ duration: 10, /** * The target framerate of the exported video in Hz. * * @defaultValue 30 */ framerate: 30, /** * An optional target width used in conjunction with target height. * If used, the block will be rendered large enough, that it fills the target * size entirely while maintaining its aspect ratio. */ targetWidth: 1280, /** * An optional target height used in conjunction with target width. * If used, the block will be rendered large enough, that it fills the target * size entirely while maintaining its aspect ratio. */ targetHeight: 720,};const videoBlob = await engine.block.exportVideo(page, videoOptions); // Audio Exportconst audioOptions = { /** * The mime type of the output file. * * Supported values are: * - `audio/wav` * - `audio/mp4` */ mimeType: 'audio/mp4', /** * A callback which reports on the progress of the export. * It informs the receiver of the number of rendered frames, * the number of encoded frames, and the total frame count. */ onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames, ); }, /** * The time offset in seconds from which the audio will start. * * @defaultValue 0 */ timeOffset: 0, /** * The duration in seconds of the final audio. * * @defaultValue The duration of the given block. */ duration: 10, /** * The sample rate of the exported audio in Hz. * * @defaultValue 48000 */ sampleRate: 48000, /** * The number of audio channels. 1 for mono, 2 for stereo. * * @defaultValue 2 */ numberOfChannels: 2, /** * Export audio data from in-memory buffers without re-encoding. * * @defaultValue false */ skipEncoding: false,};const audioBlob = await engine.block.exportAudio( page, audioOptions,); const maxExportSizeInPixels = engine.editor.getMaxExportSize(); const availableMemoryInBytes = engine.editor.getAvailableMemory(); CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); await engine.addDefaultAssetSources(); await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene', ); exportButton.removeAttribute('disabled'); exportButton.onclick = async () => { /* Export scene as PNG image. */ const scene = engine.scene.get(); /* Optionally, the maximum supported export size can be checked before exporting. */ const maxExportSizeInPixels = engine.editor.getMaxExportSize(); /* Optionally, the compression level and the target size can be specified. */ const options = { mimeType: 'image/png', pngCompressionLevel: 9, targetWidth: null, targetHeight: null, }; const blob = await engine.block.export(scene, options); /* Download blob. */ const anchor = document.createElement('a'); anchor.href = URL.createObjectURL(blob); anchor.download = 'export.png'; anchor.click(); };}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/edit-video/transform/scale-f75c8a) # Scale Videos in Web Apps The CreativeEditor provides a scaling feature to edit videos in your web app, to render an intended composition. Explore the different scaling options within CE.SDK, and learn how to embed it both from the UI and the API. ## What You’ll Learn[#](#what-youll-learn) * Scale videos through **JavaScript**. * Scale **proportionally** or non-uniformly. * **Group** elements to scale them together. * Apply or lock scaling **constraints** in templates. ## When to Use[#](#when-to-use) Use scaling to: * **Emphasize** or de-emphasize a clip in a composition. * **Fit** footage to a free-form layout without cropping. * Drive zoom gestures or **responsive** designs ## How Scaling Works[#](#how-scaling-works) Scaling uses the `scale(block, scale:number, anchorX, anchorY)` function, with the following **parameters**: | Parameter | Description | Values | | --- | --- | --- | | `block` | Handle (ID) of the block to scale. | `string` | | `scale` | Scale factor to apply. | **1.0** keeps the original size. **\>1.0** enlarges the block. **< 1.0** shrinks it. | | `anchorX` `anchorY` | Origin point of scale along the width Origin point of scale along the height | **Top** = 0 **Center** = 0.5 **Bottom** = 1 **Defaults** =`0` | For example: * A value of `1.0` sets the original block’s size. * A value of `2.0` makes the block twice as large. ## Scale a Video Uniformly[#](#scale-a-video-uniformly) To change the clip size without distorting its proportions, use uniform scaling. Uniform scaling multiplies both width and height by the **same factor** to keep the frame’s aspect ratio intact. Scaling a video uniformly allows you to: * Enlarge or shrink footage without altering the content. * Maintain per-pixel sharpness. * Align with layout constraints. CE.SDK lets you use the same high-level API on all graphic blocks, videos included. To scale any block, use: ``` engine.block.scale(blockId, scaleFactorNumber); ``` For example, to scale a video block to 150%, add this in your code: ``` engine.block.scale(blockId, 1.5); ``` The preceding code: * Scales the video to 150% of its original size. * Doesn’t change the origin anchor point. As a result, the video expands down and to the right. ### Anchor Point[#](#anchor-point) The anchor point is the point around which a layer scales. All changes happen around the anchor’s point position. By default, any block’s anchor point is **the top left**. To **change the anchor point**, the scale function has two optional parameters: * `x` to move the anchor point along the width. * `y` to move the anchor point along the height. Both can have values between 0.0 and 1.0. For example: ``` engine.block.scale(blockId, 1.5, 0.5, 0.5) ``` This function: 1. Scales the video to **150%** of its original size, with the value `1.5`. 2. Sets the origin anchor point at the center with `0.5, 0.5`. This way, the video expands from the center. ## Scale Videos Non-Uniformly[#](#scale-videos-non-uniformly) You might need to stretch a video only horizontally or vertically. To stretch or compress only one axis, thus distorting a video, use the **width** or **height** function. For example, to scale a video horizontally, you can use: ### 1\. Let the Engine Handle Scaling[#](#1-let-the-engine-handle-scaling) ``` engine.block.setWidthMode(blockId, 'Absolute');const width = engine.block.getWidth(blockId) * 1.5;engine.block.setWidth(blockId, width, true ); ``` The preceding code: 1. Sets the width as `'Absolute'` to edit the video using a fixed pixel value instead of a relative layout mode. 2. Reads the current width. 3. Multiplies it by 1.5 to compute a new width that’s 150% of the original. 4. Writes the new width back to the block. 5. Keeps height in proportion when available. As a result, it stretches the element horizontally by the calculated factor: Use this to: * Create panoramic crops. * Compensate for aspect ratios during automation. ### 2\. Combine Crop-Scale with a Size Change[#](#2-combine-crop-scale-with-a-size-change) Use `setCropScale` to explicitly crop the video vertically or horizontally. For example, to create a panoramic video: ``` await engine.block.setCropScaleX(blockId, 1.5);await engine.block.setWidthMode(blockId, 'Absolute');const newWidth = (await engine.block.getWidth(blockId)) * 1.5;await engine.block.setWidth(blockId, newWidth); ``` The preceding code: 1. Expands the **crop** horizontally: the video content stretches by 150% along the X axis. 2. Switches the block to **absolute** sizing: width updates use a concrete pixel value, not a responsive one. 3. **Reads** the block’s current width. 4. **Multiplies** it by 1.5 to compute the target width after the stretch. 5. **Writes** the new width back to the block. After this operation: * The block’s frame matches the stretched content. * The stretch has distorted the content. ### 3\. Respect the Existing Crop[#](#3-respect-the-existing-crop) The crop defines which part of the clip stays visible. Stretching the block without preserving its crop might: * Reveal unwanted areas. * Cut off the focal point. Respecting the existing crop changes the scale while keeping the creative intent intact. For example: ``` await engine.block.scale(videoBlockId, 1.5);await engine.block.setWidthMode(videoBlockId, 'Absolute');const newWidth = engine.block.getWidth(videoBlockId) * 1.5;await engine.block.setWidth(videoBlockId, newWidth, true); ``` In the preceding code, the `true` value activates `maintainCrop`. This: * Keeps the visible region intact. * Avoids distortion. Consider using `maintainCrop` if a **template** already uses cropping to: * Frame a subject. * Hide a watermark. ## Scale Clips Together[#](#scale-clips-together) Grouping blocks is a useful way of scaling them proportionally: ``` const groupId = engine.block.group([blockId, textId]);engine.block.scale(groupId, 1.75, 0.75, 0.5) ``` The preceding code scales the entire group to 75%. Call `engine.block.findAllProperties(groupId)` if you are unsure whether a block **exposes width/height**. You can’t group `page` with other blocks. Group elements: * On the **top** of the page. * **Not** with the page. ## Lock Scaling in Templates[#](#lock-scaling-in-templates) To preserve a template’s layout, consider locking the scaling option. This is useful for: * Brand assets * Campaign creatives * Collaboration workflows * Fixed dimensions swapping editors Disable the `layer/resize` scope when working with templates, to **prevent users from scaling** blocks. For this, use the `setScopeEnabled` function: ``` // Prevent scaling/resizing of a blockengine.block.setScopeEnabled(blockId, 'layer/resize', false); ``` ### Lock All Transformations[#](#lock-all-transformations) These are the available block’s transformations with CE.SDK: * Move * Resize * Rotate To **lock** all transformations, activate the `setTransformLocked` setting: ``` // Lock all transformsengine.block.setTransformLocked(blockId, true); ``` To check if scaling is currently allowed, log the output if `isScopeEnabled`: ``` // Check if resize is enabledconst canResize = engine.block.isScopeEnabled(blockId, 'layer/resize');console.log('layer/resize scope enabled?', canResize); ``` In the scenario where: * Your app uses template-based constraints. * You need to prevent the layer from overriding template constraints. Call [`setGlobalScope`](angular/create-templates/lock-131489/) to enforce the template’s constraints. ## Recap[#](#recap) | Usage | How To | | --- | --- | | Uniform scaling | `engine.block.scale(blockId, scaleFactorNumber);` + optional anchor | | Stretching along an axis | Combine crop scale ( `setCropScaleX/Y` ) with frame resize | | Group scaling | 1\. group with `engine.block.group([blockId_1, blockId_2]);` 2\. Scale the group | | Constraints | Adjust scopes or lock transforms to protect templates | ## API References in this Guide[#](#api-references-in-this-guide) | API | Usage | | --- | --- | | `block.scale` | Performs uniform or anchored scaling on blocks and groups. | | `block.setWidthMode` | Enables absolute sizing before changing a single axis. | | `block.getWidth` | Reads the current width before non-uniform scaling. | | `block.setWidth` | Writes the adjusted width after single-axis scaling. | | `block.setCropScaleX` | Pairs directional scaling with crop adjustments. | | `block.group` | Group blocks so they scale together. | | `block.findAllProperties` | Discovers available properties before scaling unfamiliar blocks. | | `block.setScopeEnabled` | Toggles the `layer/resize` scope to lock scaling in templates. | | `block.setTransformLocked` | Locks all transform scopes when templates must stay fixed. | | `block.isScopeEnabled` | Checks whether scaling is currently permitted on a block. | | `engine.editor.setGlobalScope` | Prevents layers from overriding template constraints. | --- [Source](https:/img.ly/docs/cesdk/angular/edit-video/transform/resize-b1ce14) # Resize Videos Video resizing in CreativeEditor SDK (CE.SDK) allows you to change the dimensions of video elements to match specific layout requirements. Unlike scaling, resizing allows independent control of width and height dimensions, making it ideal for fitting videos into predefined spaces or responsive layouts. You can resize videos both through the built-in user interface and programmatically using the SDK’s APIs, providing flexibility for different workflow requirements. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Resize Methods[#](#resize-methods) CE.SDK supports several approaches to video resizing: * **Absolute Dimensions**: Set specific pixel dimensions for precise control * **Percentage-based Resizing**: Size relative to parent container for responsive designs * **UI Resize Handles**: Interactive resize controls in the editor interface * **Aspect Ratio Constraints**: Maintain or ignore aspect ratios during resize operations ## Applying Resizing[#](#applying-resizing) ### UI-Based Resizing[#](#ui-based-resizing) You can resize videos directly in the CE.SDK user interface using resize handles. Users can drag edge and corner handles to adjust dimensions independently or proportionally, making it easy to fit videos into specific layouts visually. ### Programmatic Resizing[#](#programmatic-resizing) Developers can apply resizing programmatically, using the SDK’s API. This allows for precise dimension control, automated layout adjustments, and integration with responsive design systems or template constraints. ## Combining with Other Transforms[#](#combining-with-other-transforms) Video resizing works seamlessly with other transformation operations like rotation, cropping, and positioning. You can chain multiple transformations to create complex layouts while maintaining video quality and performance. ## Guides[#](#guides) --- [Source](https:/img.ly/docs/cesdk/angular/edit-video/transform/rotate-eaf662) # Rotate Videos Learn how to rotate videos with **CreativeEditor SDK (CE.SDK)** in your web app, both through the default UI and programmatically with JavaScript. ## Requirements[#](#requirements) * CE.SDK package installed in your app: * To use the default UI: `npm install @cesdk/cesdk-js` * To rotate programmatically: `npm install @cesdk/engine` * A valid CE.SDK license key ## What You’ll Learn[#](#what-youll-learn) * Rotate a video from the UI with the control gizmo. * Rotate a video block to a defined **angle** using code. * **Lock rotation** globally or per block in template workflows. * Rotate a **group of clips** together. * Rotate **live camera previews** that use `PixelStreamFill`. ## Rotate a Video With the UI[#](#rotate-a-video-with-the-ui) When you select a video block in the UI, the control gizmo shows three handles: * The **resize** handles * The **crop** handles * The **rotation** handle When you insert a video, the rotation handle appears at the bottom of the block: ![Selected video ](/docs/cesdk/_astro/browser-rotation-handles.CZ9iZqNj_Z1GO9BU.png) Drag the rotation handle to free‑form‑rotate the clip. Snap guides appear at the following degrees: * 0° * 90° * 180° ![Demo video rotated at 45°](/docs/cesdk/_astro/browser-rotate-example.C9d9PPUw_Pa1rf.png) 💡 **Tip:** To try the CreativeEditor SDK UI with sample videos, use [the video mode scene](angular/create-video/overview-b06512/) . ## Rotate a Video with JavaScript[#](#rotate-a-video-with-javascript) CE.SDK provides an API that you can leverage to automate rotations in a custom UI or workflows. 1. Install the `@cesdk/engine` package. 2. Call the `BlockAPI`. Any design block, videos included, can use the same API calls. ### How Rotation Works[#](#how-rotation-works) To rotate any video in JavaScript, call `block.setRotation` with the target angle in **radians**: ``` // Rotate the clip by 90°engine.block.setRotation(blockId, Math.PI / 2); ``` * `Math.PI / 2` sets a 90° rotation angle (`Math.PI` = 180°). * Use negative values for **clockwise** rotations. * Use positive values for **counterclockwise** rotations. ![Demo video rotated at 90°](/docs/cesdk/_astro/server-rotate-90.CH0N0NYU_Z18vMEC.png) `setRotation` applies the rotation to the **entire block**. To rotate only the media inside a frame, combine **rotation with cropping**. ### Convert Degrees and Radians[#](#convert-degrees-and-radians) Since the CE.SDK API expects **radians**, converting between the two lets you: * Accept human-friendly degrees. * Pass the correct radian values to `setRotation`. * Turn the engine’s radian results back into degrees when you log or display them. Conversion operations can be helpful in: * UX controls * Brand guidelines * Orientation metadata Helpers keep scripts readable when you start from degree-based inputs: ``` const toRadians = (degrees) => (degrees * Math.PI) / 180;const toDegrees = (radians) => (radians * 180) / Math.PI; const targetRadians = toRadians(45); // 0.785398...engine.block.setRotation(blockId, targetRadians); console.log('Video rotation is', toDegrees(targetRadians), '°'); ``` The preceding code: 1. Defines degree↔radian helpers. 2. Converts 45° to radians. 3. Applies that rotation to the block. 4. Logs the resulting angle back in degrees. ![Demo video rotated at 45°](/docs/cesdk/_astro/server-rotate-45.C0-eSGhZ_FwW8F.png) ### Read the Rotation Values[#](#read-the-rotation-values) Read the current rotation if you need it in further operations: ``` const currentRotation = engine.block.getRotation(blockId); ``` For a 90° rotation, `currentRotation` logs the rotation in radians (`1.5707963705062866`, the value of pi/2). `setRotation` moves the **entire block**. Use crop adjustments if you only want to rotate the media within a frame. ## Pixel-Stream Previews (Live Camera)[#](#pixel-stream-previews-live-camera) If the video comes from a live camera feed, your code likely uses a `PixelStreamFill`. While you can rotate a live camera stream using block transforms, this approach may lead to performance issues such as dropped frames. To ensure smoother playback, **apply the rotation upstream**—before the video stream reaches the editor. Instead of calling `setRotation`: 1. Call `setEnum`. 2. Change the fill’s `orientation`. This can be handy when the stream arrives rotated. For example, for a 90° rotation: ``` engine.block.setEnum(pixelStreamFill, 'fill/pixelStream/orientation', 'Left') ``` The preceding code: 1. Tells CE.SDK to set the pixel stream fill’s orientation to `Left`. 2. Flips the incoming camera/WebRTC feed. 3. What should point upward now appears along the left side.. This setup tells the engine to **realign the incoming stream** so the video displays upright again. ## Lock Rotation[#](#lock-rotation) CE.SDK provides ways to turn off rotations on different scopes. ### Hide Rotation Handles[#](#hide-rotation-handles) Use the `'controlGizmo/showRotateHandles'` setting key: ``` instance.engine?.editor?.setSettingBool('controlGizmo/showRotateHandles', false); ``` This code makes the rotation handles disappear in the UI for all blocks. ![CreativeEditor default UI without rotation handles](/docs/cesdk/_astro/browser-no-rotation-handles.B5gsAPRu_1cWh8W.png) ### Lock a Single Clip[#](#lock-a-single-clip) CE.SDK allows turning off rotation only for a block. For this, use `setScopeEnabled` with the block ID: ``` // Disable rotation for a single blockengine.block.setScopeEnabled(blockId, 'layer/rotate', false); ``` ## Rotate Clips Together[#](#rotate-clips-together) To avoid redoing the offsets on different blocks: * **Group** the blocks. * Rotate the **parent** group. This keeps their layout intact. For example: ``` const groupId = engine.block.group([titleText, blockId]);engine.block.setRotation(groupId, Math.PI / 8); ``` Every child block inherits the rotation, so clips rotate with the parent, along with: * Titles * Overlays * Different shots ## Troubleshooting[#](#troubleshooting) | Issue | Resolution | | --- | --- | | Clip looks skewed | Ensure the pivot is centered (default) or intentionally offset, and avoid mixing in unexpected scaling. | | Rotation has no effect | Confirm the block is part of the scene before calling `setRotation`. | | Handle missing | Check `controlGizmo/showRotateHandles` and confirm the block isn’t transform-locked when using the Editor UI. | ## API References in this Guide[#](#api-references-in-this-guide) | API | Usage | | --- | --- | | `block.setRotation` | Rotates video blocks or groups by a specified radian value. | | `block.getRotation` | Reads the current rotation to drive incremental updates. | | `block.group` | Creates a parent block to rotate clips together. | | `block.setEnum` | Updates pixel-stream fill orientation without rotating the block. | | `block.setScopeEnabled` | Disables the `layer/rotate` scope to lock rotation in templates. | | `block.setTransformLocked` | Locks all transforms when a block needs to remain fixed. | | `block.isScopeEnabled` | Checks whether rotation is currently allowed on a block. | --- [Source](https:/img.ly/docs/cesdk/angular/edit-video/transform/move-aa9d89) # Move Videos Video positioning in CreativeEditor SDK (CE.SDK) allows you to precisely control where video elements appear on the canvas. You can move videos using absolute pixel coordinates or percentage-based positioning for responsive layouts, making it essential for creating precise video layouts and dynamic compositions. You can position videos both through the built-in user interface and programmatically using the SDK’s APIs, providing flexibility for different workflow requirements. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Positioning Methods[#](#positioning-methods) CE.SDK supports several approaches to video positioning: * **Absolute Positioning**: Use precise pixel coordinates for exact placement * **Percentage Positioning**: Position relative to parent container for responsive designs * **UI Drag & Drop**: Interactive positioning through direct manipulation * **Group Movement**: Move multiple video elements together while maintaining alignment ## Applying Positioning[#](#applying-positioning) ### UI-Based Positioning[#](#ui-based-positioning) You can move videos directly in the CE.SDK user interface by dragging them to new positions. Users can drag and drop video elements anywhere on the canvas, making it easy to adjust video layouts visually and interactively. ### Programmatic Positioning[#](#programmatic-positioning) Developers can position videos programmatically, using the SDK’s API. This allows for precise coordinate control, animated video movements, and integration with layout systems or template constraints. ## Combining with Other Transforms[#](#combining-with-other-transforms) Video positioning works seamlessly with other transformation operations like rotation, scaling, and cropping. You can chain multiple transformations to create complex video layouts while maintaining precise control over element placement. ## Guides[#](#guides) --- [Source](https:/img.ly/docs/cesdk/angular/edit-video/transform/flip-a603b0) # Flip Use **CE.SDK** to **mirror video clips** horizontally or vertically in your web app. Flip videos to create mirror effects and symmetrical designs using the same API calls the image-flipping workflow uses. ## What You’ll Learn[#](#what-youll-learn) * Flip a video clip **horizontally or vertically**. * Use flipping in template or timeline **workflows**. * **Reset** or toggle a flip using JavaScript. ## When to Use[#](#when-to-use) Flipping is useful when you need to: * Create: * **Symmetrical** video layouts * Animated **collages** * Align **eyelines** when switching between front and rear cameras. * Keep **branded elements** facing inward on split-screen layouts. ## How to Flip Videos[#](#how-to-flip-videos) The CreativeEditor represents each video clip as a **graphic** block with: * Size * Transforms * Grouping * A fill set to a _video_ asset Use the Engine BlockAPI boolean helpers, common to videos and images. ### Flip Horizontally or Vertically[#](#flip-horizontally-or-vertically) To flip a video: 1. Call the BlockAPI with `engine.block.SetFip`. 2. Specify the **block ID** to flip. 3. Set the boolean to `true`. ``` engine.block.setFlipHorizontal(videoBlock, true);engine.block.setFlipVertical(videoBlock, true); ``` ![Video flipped horizontally](/docs/cesdk/_astro/browser-flip-horizontal.50oKXNpU_Z13Aiu9.png) ### Query the Flip Status[#](#query-the-flip-status) To know if a video has already been flipped: 1. Declare a variable for each direction. 2. Call `engine.block.getFlip`. 3. Specify the block ID. ``` const flippedH = engine.block.getFlipHorizontal(videoBlock);const flippedV = engine.block.getFlipVertical(videoBlock); ``` The response is a boolean stating whether this specific block has already been flipped or not. Flipping only affects the **visual track**. Audio (either embedded or separate) isn’t reversed, so **lip-sync and sound design stay intact**. ### Flip Clips Together[#](#flip-clips-together) To simplify the process of rotating multiple blocks, instead of rotating each block individually, you can select and rotate a cluster of blocks simultaneously. 1. Declare a variable for the group of clips using `engine.block.group`. 2. Specify each clip to include in the group by its block ID. 3. Apply the flip to the group variable. For example, to flip three clips together: ``` const groupId = await engine.block.group([clipId1, clipId2, clipId3]);engine.block.setFlipVertical(groupId, true); ``` ![Grouped video flipped horizontally](/docs/cesdk/_astro/browser-flip-group.CKeviqiY_DsgUm.png) When you flip the group: * The flip mirrors everything at once. * Each clip keeps the same **spacing and order** inside the group. ## Restore or Manage Flip States[#](#restore-or-manage-flip-states) The CE.SDK provides ways to reset or toggle a flip. You can either: * **Reset:** when you want to restore a clip to its original orientation. * **Code a toggle:** when you need a quick way to switch the current flip state on and off. ### Reset a Flip[#](#reset-a-flip) To reset a clip to its default orientation: 1. Call `setFlip`. 2. Specify the clip’s block ID. 3. Set the boolean to `false`. For example, to reset a horizontal flip, use the following code: ``` engine.block.setFlipHorizontal(videoBlock, false); ``` ### Switch Flip On or Off[#](#switch-flip-on-or-off) Calling the same flip twice: * **Doesn’t** revert to the original orientation. * Issues two flips in the same direction. * Leaves the clip mirrored. To “toggle” the flip in your code: 1. Check if a specific clip is flipped. 2. Store the value in a variable (for example, `isFlipped`). 3. Set the opposite of that value in a new `setFlip`function. For example: ``` const isFlipped = await engine.block.getFlipHorizontal(videoBlock);engine.block.setFlipHorizontal(videoBlock, !isFlipped); ``` In the preceding code, two actions are possible depending on the value stored in `isFlipped`: * `true`: `!isFlipped` sets the horizontal flip to `false`. * `false`: `!isFlipped` sets the horizontal flip to `true`. You can add a toggle button to your custom UI to let users **quickly test flipping a video horizontally**. ## Lock or Constrain Flipping[#](#lock-or-constrain-flipping) CE.SDK provides a way to prevent editors from flipping a video. This can be useful to: * Avoid accidentally mirroring text. * Protect UI mock-ups or frames that must stay in a fixed position. * Keep templates brand-locked. To deactivate flipping, use `setScopeEnabled` with: * The `"layer/flip"` key * The boolean set to `false` ``` engine.block.setScopeEnabled(videoBlock, "layer/flip", false); ``` ## Troubleshooting[#](#troubleshooting) | Issue | Solution | | --- | --- | | ❌ Clip appears flipped, but playback is blank | ✅ Make sure the video file has finished loading before applying the flip | | ❌ Flip seems ignored | ✅ Check whether the parent group is already flipped (flips are relative) | | ❌ Users can still flip in UI | ✅ Turn off the `"layer/flip"` scope or lock transforms in the template | ## API Reference Summary[#](#api-reference-summary) | BlockAPI `engine.block.<>` | Purpose | | --- | --- | | `setFlipHorizontal(blockId, boolean)` | Mirror a block left/right or restore the default orientation. | | `setFlipVertical(blockId, boolean)` | Mirror a block top/bottom or restore the default orientation. | | `getFlipHorizontal(blockId)` | Check whether the block is currently flipped horizontally. | | `getFlipVertical(blockId)` | Check whether the block is currently flipped vertically. | | `group(blockIds[])` | Group blocks so they can be flipped together. | | `setScopeEnabled(blockId, "layer/flip", boolean)` | Activate or deactivate flip controls to lock orientation. | --- [Source](https:/img.ly/docs/cesdk/angular/edit-video/transform/crop-8b1741) # Crop Videos Video cropping in CreativeEditor SDK (CE.SDK) allows you to trim video content to focus on specific areas, remove unwanted elements, or adjust aspect ratios for different platforms. This transformation is essential for optimizing videos for social media, removing distracting elements, or creating custom framing effects. You can crop videos both through the built-in user interface and programmatically using the SDK’s APIs, providing flexibility for different workflow requirements. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Cropping Methods[#](#cropping-methods) CE.SDK supports several approaches to video cropping: * **Interactive Cropping**: Visual crop area selection with real-time preview * **Aspect Ratio Presets**: Quick crop to common social media and platform formats * **Programmatic Cropping**: Precise crop control through scale, translation, and rotation * **Group Cropping**: Apply consistent crop settings across multiple video elements ## Applying Crops[#](#applying-crops) ### UI-Based Cropping[#](#ui-based-cropping) You can crop videos directly in the CE.SDK user interface using interactive crop controls. Users can drag crop boundaries, select preset aspect ratios, and see real-time previews, making it easy to frame content perfectly for any platform. ### Programmatic Cropping[#](#programmatic-cropping) Developers can apply cropping programmatically, using the SDK’s API. This allows for automated cropping based on content analysis, batch processing, and integration with custom workflows or template systems. ## Combining with Other Transforms[#](#combining-with-other-transforms) Video cropping works seamlessly with other transformation operations like rotation, scaling, and positioning. You can chain multiple transformations to create complex effects while maintaining video quality and performance. ## Guides[#](#guides) --- [Source](https:/img.ly/docs/cesdk/angular/edit-image/transform/move-818dd9) # Move Images Image positioning in CreativeEditor SDK (CE.SDK) allows you to precisely control where images appear on the canvas. You can move images using absolute pixel coordinates or percentage-based positioning for responsive layouts, making it essential for creating precise layouts and dynamic compositions. You can position images both through the built-in user interface and programmatically using the SDK’s APIs, providing flexibility for different workflow requirements. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](angular/get-started/overview-e18f40/) ## Positioning Methods[#](#positioning-methods) CE.SDK supports several approaches to image positioning: * **Absolute Positioning**: Use precise pixel coordinates for exact placement * **Percentage Positioning**: Position relative to parent container for responsive designs * **UI Drag & Drop**: Interactive positioning through direct manipulation * **Group Movement**: Move multiple elements together while maintaining alignment ## Applying Positioning[#](#applying-positioning) ### UI-Based Positioning[#](#ui-based-positioning) You can move images directly in the CE.SDK user interface by dragging them to new positions. Users can drag and drop elements anywhere on the canvas, making it easy to adjust layouts visually and interactively. ### Programmatic Positioning[#](#programmatic-positioning) Developers can position images programmatically, using the SDK’s API. This allows for precise coordinate control, animated movements, and integration with layout systems or template constraints. ## Combining with Other Transforms[#](#combining-with-other-transforms) Image positioning works seamlessly with other transformation operations like rotation, scaling, and cropping. You can chain multiple transformations to create complex layouts while maintaining precise control over element placement. ## Guides[#](#guides) --- [Source](https:/img.ly/docs/cesdk/angular/edit-image/transform/crop-f67a47) # Crop Images You can crop images with the CreativeEditor SDK (CE.SDK) for web apps, an apply rules to fit predefined brand or social media grids. Learn in this guide how crop images via the **interface** or the **engine API**. When you crop an image, you select a region inside it, and discard everything outside that frame. Cropping images is a fundamental editing operation that allows you to: * **Frame** your subject. * **Remove** unwanted elements. * **Prepare** visuals for specific formats. You can crop images either using: * The built-in user interface. * The engine API and JavaScript. ## Crop Via the Built-In UI[#](#crop-via-the-built-in-ui) CE.SDK provides a user-friendly cropping tool in its default UI. Users can interactively: * Adjust crop areas. * Select preset aspect ratios. * Apply changes with real-time feedback. This eases support for **social media presets** or maintain brand consistency. ### User interaction workflow[#](#user-interaction-workflow) 1. **Select the image** you want to crop. ![Image selected in CE.SDK default UI](/docs/cesdk/_astro/browser-select.DB73bHRw_Zx4QSv.png) You can start cropping freely on the image, or select a pre-defined layout. 2. **Click the crop icon** in the editor toolbar. 3. **Adjust the crop area** by dragging the corners or edges. 4. **Choose a preset aspect ratio** if available. ![Crop handles with different ratios](/docs/cesdk/_astro/browser-crop-handles.tQVk6HMu_Z2kBThE.png) 5. **Click “Done”** to set the crop. ![Done button](/docs/cesdk/_astro/browser-done.eEFAAlu1_Z1eCzDK.png) The cropped image appears in your project, but the **underlying original image** preserves its values, even when you rotate or resize the cropped image. ### Activate and Configure Crop Tool in Custom UI[#](#activate-and-configure-crop-tool-in-custom-ui) The default UI allows cropping. When you are creating your own UI or custom toolbars you can configure editing behavior. To ensure the crop tool is available in the UI, make sure you **include it in your dock configuration** or quick actions. ``` await engine.editor.setSettingBool('doubleClickToCropEnabled', true);await engine.editor.setSettingBool('controlGizmo/showCropHandles', true);await engine.editor.setSettingBool('controlGizmo/showCropScaleHandles', true); ``` The preceding code does the following: 1. It enables double-click cropping. 2. It makes sure the crop handle appear on the control gizmo (the on-screen UI overlay). 3. It turns on the scale handles to resize the crop. #### Define Ratios[#](#define-ratios) You can also define available aspect ratios to guide user choices. To provide preset aspect ratios for cropping. ``` const aspectRatios = [ 'Free', // Unconstrained '1:1', // Square '4:5', // Instagram Portrait '16:9', // Widescreen 'Custom:3:2', // Optional custom ratios];await engine.editor.setSettingString('ui/crop/aspectRatios', aspectRatios.join(',')); ``` This code: 1. Builds a list of crop aspect-ratio presets. 2. Tells CE.SDK to use that list as the options in your custom crop UI. 💡 **Tip:** You can also **hide the aspect ratio selector** entirely by setting `ui/crop/allowAspectRatioSelection` to `false`. ## Programmatic Cropping[#](#programmatic-cropping) Programmatic cropping gives you **complete control** over: * Image boundaries * Dimensions * Integration with other transformations like rotation or flipping This is **useful for**: * Automation * Predefined layouts * Server-synced workflows ### How it Works[#](#how-it-works) In a programmatic cropping workflow, you initially create a fill to insert an image into a block. The engine then: 1. Centers the image in the block. 2. Crops any dimension that doesn’t match. ### Crop to Fixed Dimensions[#](#crop-to-fixed-dimensions) The following snippet crops an image to a 300×300 px square using: * Coordinates: the image’s position along the X (horizontal) and Y (vertical) axes. * Dimensions: the image’s width and height. ``` // Get the first image block in the sceneconst block = engine.block.findByKind('image')[0]; // Define a rectangular crop areaconst cropRect = { x: 100, y: 50, width: 300, height: 300 }; // Set each value individuallyengine.block.setFloat(block, 'crop/x', cropRect.x);engine.block.setFloat(block, 'crop/y', cropRect.y);engine.block.setFloat(block, 'crop/width', cropRect.width);engine.block.setFloat(block, 'crop/height', cropRect.height); ``` The resulting image now: * Measures 300×300 points. * Is cropped to a square area starting at (100, 50). ![Original image next to 300×300 cropped image ](/docs/cesdk/_astro/browser-crop-300x300.BRmrZTfJ_rKf6R.png) ### Crop to Aspect Ratio[#](#crop-to-aspect-ratio) When cropping to a set aspect ratio, you trim the image to fit a **fixed width-to-height proportion**. You still choose the framing, but the crop box always keeps that specific shape. The benefit is consistency: the image matches whatever layout or channel expects that ratio, without stretching or black bars. This enables pre-sets for: * Instagram portrait posts * Print templates * Responsive slots * Etc. To crop the image while preserving a specific aspect ratio (for example, 4:5), calculate dimensions based on the image size:. ``` const imageWidth = 800;const targetRatio = 4 / 5;const newWidth = imageWidth;const newHeight = imageWidth / targetRatio; engine.block.setFloat(block, 'crop/x', 0);engine.block.setFloat(block, 'crop/y', 0);engine.block.setFloat(block, 'crop/width', newWidth);engine.block.setFloat(block, 'crop/height', newHeight); ``` ![Original image next to new image at a 4:5 ratio](/docs/cesdk/_astro/browser-crop-4-5.T1OSgSsI_1Iw844.png) ### Chaining Crop With Other Actions[#](#chaining-crop-with-other-actions) Your can automate other image transformations with your crop function. For example, to rotate and flip an image: 1. Use the constant `Math.PI` (=180°) to work with **radians**. 2. Apply mathematical operations to this constant to **define the degree of rotation**. For example, to **rotate** an image to 90°, you can use: ``` const block = engine.block.findByKind('image')[0]; // Cropfunctions//...// Rotation by 90°engine.block.setFloat( block, 'rotation', (engine.block.getFloat(block, 'rotation') || 0) + Math.PI / 2); ``` The preceding code divides `Math.PI` by 2 to rotate the image by 90°. 4. Turn the crop box together with the image, so it still frames the same pixels after the rotation: ``` // Keep the crop aligned with the bitmapengine.block.setFloat( block, 'crop/rotation', (engine.block.getFloat(block, 'crop/rotation') || 0) + Math.PI / 2); ``` 3. To **flip** the image, call the `setBool` function. 4. Define the `flip` action. 5. Apply the flip direction (`vertical` or `horizontal`). 6. Set `setBool` to true: ``` engine.block.setBool(block, 'flip/horizontal', true); ``` In this case, after cropping and rotating the image, the code flips it horizontally. ![Original image next to new image at a 4:5 ratio](/docs/cesdk/_astro/browser-rotate.QmiM-qji_Z1vodLL.png) The code crops the image to a 200×200 area, rotates it at 90°, and then flips it horizontally. See Full Code ``` const block = engine.block.findByKind('image')[0]; // Cropengine.block.setFloat(block, 'crop/x', 50);engine.block.setFloat(block, 'crop/y', 50);engine.block.setFloat(block, 'crop/width', 200);engine.block.setFloat(block, 'crop/height', 200); // Rotate (CreativeEngine uses radians, so add 90° in-place)engine.block.setFloat( block, 'rotation', (engine.block.getFloat(block, 'rotation') || 0) + Math.PI / 2); // Flip horizontallyengine.block.setBool(block, 'flip/horizontal', true); ``` --- [Source](https:/img.ly/docs/cesdk/angular/create-video/audio/buffers-9c565b) # Buffers ``` // Create an audio block and append it to the pageconst audioBlock = engine.block.create('audio');engine.block.appendChild(page, audioBlock); // Create a bufferconst audioBuffer = engine.editor.createBuffer(); // Reference the audio buffer resource from the audio blockengine.block.setString(audioBlock, 'audio/fileURI', audioBuffer); // Generate 10 seconds of stereo 48 kHz audio dataconst samples = new Float32Array(10 * 2 * 48000);for (let i = 0; i < samples.length; i += 2) { samples[i] = samples[i + 1] = Math.sin((440 * i * Math.PI) / 48000);} // Assign the audio data to the bufferengine.editor.setBufferData(audioBuffer, 0, new Uint8Array(samples.buffer)); // We can get subranges of the buffer dataconst chunk = engine.editor.getBufferData(audioBuffer, 0, 4096); // Get current length of the buffer in bytesconst length = engine.editor.getBufferLength(audioBuffer); // Reduce the buffer to half its length, leading to 5 seconds worth of audioengine.editor.setBufferLength(audioBuffer, length / 2); // Free dataengine.editor.destroyBuffer(audioBuffer); ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to create buffers through the `editor` API. Buffers can hold arbitrary data. **Limitations** Buffers are intended for temporary data only. * Buffer data is not part of the [scene serialization](angular/concepts/scenes-e8596d/) * Changes to buffers can’t be undone using the [history system](angular/concepts/undo-and-history-99479d/) ``` createBuffer(): string ``` Create a resizable buffer that can hold arbitrary data. * Returns A URI to identify the buffer. ``` destroyBuffer(uri: string): void ``` Destroy a buffer and free its resources. * `uri`: The URI of the buffer to destroy. ``` setBufferData(uri: string, offset: number, data: Uint8Array): void ``` Set the data of a buffer at a given offset. * `uri`: The URI of the buffer to update. * `offset`: The offset in bytes at which to start writing. * `data`: The data to write. ``` getBufferData(uri: string, offset: number, length: number): Uint8Array ``` Get the data of a buffer at a given offset. * `uri`: The URI of the buffer to query. * `offset`: The offset in bytes at which to start reading. * `length`: The number of bytes to read. * Returns The data at the given offset. ``` setBufferLength(uri: string, length: number): void ``` Set the length of a buffer. * `uri`: The URI of the buffer to update. * `length`: The new length of the buffer in bytes. ``` getBufferLength(uri: string): number ``` Get the length of a buffer. * `uri`: The URI of the buffer to query. * Returns The length of the buffer in bytes. ## Full Code[#](#full-code) Here’s the full code: ``` // Create an audio block and append it to the pageconst audioBlock = engine.block.create('audio');engine.block.appendChild(page, audioBlock); // Create a bufferconst audioBuffer = engine.editor.createBuffer(); // Reference the audio buffer resource from the audio blockengine.block.setString(audioBlock, 'audio/fileURI', audioBuffer); // Generate 10 seconds of stereo 48 kHz audio dataconst samples = new Float32Array(10 * 2 * 48000);for (let i = 0; i < samples.length; i += 2) { samples[i] = samples[i + 1] = Math.sin((440 * i * Math.PI) / 48000);} // Assign the audio data to the bufferengine.editor.setBufferData(audioBuffer, 0, new Uint8Array(samples.buffer)); // We can get subranges of the buffer dataconst chunk = engine.editor.getBufferData(audioBuffer, 0, 4096); // Get current length of the buffer in bytesconst length = engine.editor.getBufferLength(audioBuffer); // Reduce the buffer to half its length, leading to 5 seconds worth of audioengine.editor.setBufferLength(audioBuffer, length / 2); // Free dataengine.editor.destroyBuffer(audioBuffer); ``` --- [Source](https:/img.ly/docs/cesdk/angular/create-templates/import/from-scene-file-52a01e) # Import Templates from Scene Files CE.SDK lets you load complete design templates from scene files to start projects from pre-designed templates, implement template galleries, and build template management systems. ![Import Templates from Scene Files example showing CE.SDK interface with loaded template](/docs/cesdk/_astro/browser.hero.C0fFNNlc_1piBaU.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-create-templates-import-from-scene-file-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-create-templates-import-from-scene-file-browser) Scene files are portable design templates that preserve the entire design structure including blocks, assets, styles, and layout. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; /** * CE.SDK Plugin: Import Templates from Scene Files * * This example demonstrates: * - Loading scenes from .scene file URLs * - Loading scenes from .archive (ZIP) URLs * - Applying templates while preserving page dimensions * - Understanding the difference between loading and applying templates */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // ===== Example: Load Scene from Archive URL ===== // This is the recommended approach for loading complete templates // with all their assets embedded in a ZIP file // Load a complete template from an archive (ZIP) file // This loads both the scene structure and all embedded assets await engine.scene.loadFromArchiveURL( 'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip' ); // Alternative: Load scene from URL (.scene file) // This loads only the scene structure - assets must be accessible via URLs // Uncomment to try: // await engine.scene.loadFromURL( // 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene' // ); // Alternative: Apply template while preserving current page dimensions // This is useful when you want to load template content into an existing scene // with specific dimensions // Uncomment to try: // // First create a scene with specific dimensions // await cesdk.createDesignScene(); // const page = engine.block.findByType('page')[0]; // engine.block.setWidth(page, 1920); // engine.block.setHeight(page, 1080); // // // Now apply template - content will be adjusted to fit // await engine.scene.applyTemplateFromURL( // 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_instagram_photo_1.scene' // ); // Get the loaded scene const scene = engine.scene.get(); if (scene) { // eslint-disable-next-line no-console console.log('Scene loaded successfully:', scene); // Get information about the loaded scene const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log(`Scene has ${pages.length} page(s)`); // Get scene mode const sceneMode = engine.scene.getMode(); // eslint-disable-next-line no-console console.log('Scene mode:', sceneMode); // Get design unit const designUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Design unit:', designUnit); } // Zoom to fit the loaded content if (scene) { await engine.scene.zoomToBlock(scene, { padding: 40 }); } }} export default Example; ``` This guide covers loading scenes from archives, loading from URLs, applying templates while preserving dimensions, and understanding scene file formats. ## Scene File Formats[#](#scene-file-formats) CE.SDK supports two scene file formats for importing templates: ### Scene Format (.scene)[#](#scene-format-scene) Scene files are JSON-based representations of design structures. They reference external assets via URLs, making them lightweight and suitable for database storage. However, the referenced assets must remain accessible at their URLs. **When to use:** * Templates stored in databases * Templates with hosted assets * Lightweight transmission ### Archive Format (.archive or .zip)[#](#archive-format-archive-or-zip) Archive files are self-contained packages that bundle the scene structure with all referenced assets in a ZIP file. This makes them portable and suitable for offline use. **When to use:** * Template distribution * Offline-capable templates * Complete portability * **Recommended for most use cases** ## Load Scene from Archive[#](#load-scene-from-archive) The most common way to load templates is from archive URLs. This method loads both the scene structure and all embedded assets: ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; /** * CE.SDK Plugin: Import Templates from Scene Files * * This example demonstrates: * - Loading scenes from .scene file URLs * - Loading scenes from .archive (ZIP) URLs * - Applying templates while preserving page dimensions * - Understanding the difference between loading and applying templates */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // ===== Example: Load Scene from Archive URL ===== // This is the recommended approach for loading complete templates // with all their assets embedded in a ZIP file // Load a complete template from an archive (ZIP) file // This loads both the scene structure and all embedded assets await engine.scene.loadFromArchiveURL( 'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip' ); // Alternative: Load scene from URL (.scene file) // This loads only the scene structure - assets must be accessible via URLs // Uncomment to try: // await engine.scene.loadFromURL( // 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene' // ); // Alternative: Apply template while preserving current page dimensions // This is useful when you want to load template content into an existing scene // with specific dimensions // Uncomment to try: // // First create a scene with specific dimensions // await cesdk.createDesignScene(); // const page = engine.block.findByType('page')[0]; // engine.block.setWidth(page, 1920); // engine.block.setHeight(page, 1080); // // // Now apply template - content will be adjusted to fit // await engine.scene.applyTemplateFromURL( // 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_instagram_photo_1.scene' // ); // Get the loaded scene const scene = engine.scene.get(); if (scene) { // eslint-disable-next-line no-console console.log('Scene loaded successfully:', scene); // Get information about the loaded scene const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log(`Scene has ${pages.length} page(s)`); // Get scene mode const sceneMode = engine.scene.getMode(); // eslint-disable-next-line no-console console.log('Scene mode:', sceneMode); // Get design unit const designUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Design unit:', designUnit); } // Zoom to fit the loaded content if (scene) { await engine.scene.zoomToBlock(scene, { padding: 40 }); } }} export default Example; ``` ``` // Load a complete template from an archive (ZIP) file// This loads both the scene structure and all embedded assetsawait engine.scene.loadFromArchiveURL( 'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip'); ``` When you load from an archive: * The ZIP file is fetched and extracted * All assets are registered with CE.SDK * The scene structure is loaded * Asset paths are automatically resolved ## Load Scene from URL[#](#load-scene-from-url) You can also load scenes directly from .scene file URLs. This approach requires that all referenced assets remain accessible at their original URLs: ``` // await engine.scene.loadFromURL(// 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'// ); ``` **Important:** With this method, if asset URLs become unavailable (404 errors, CORS issues, etc.), those assets won’t load and your template may appear incomplete. ## Apply Template vs Load Scene[#](#apply-template-vs-load-scene) CE.SDK provides two approaches for working with templates, each serving different purposes: ### Load Scene[#](#load-scene) When you use `loadFromURL()` or `loadFromArchiveURL()`, CE.SDK: * Replaces the entire current scene * Adopts the template’s page dimensions * Loads all content as-is This is appropriate when starting a new project from a template. ### Apply Template[#](#apply-template) When you use `applyTemplateFromURL()` or `applyTemplateFromString()`, CE.SDK: * Keeps your current page dimensions * Adjusts template content to fit * Preserves your scene structure This is useful when you want to load template content into an existing scene with specific dimensions: ``` // // First create a scene with specific dimensions// await cesdk.createDesignScene();// const page = engine.block.findByType('page')[0];// engine.block.setWidth(page, 1920);// engine.block.setHeight(page, 1080);//// // Now apply template - content will be adjusted to fit// await engine.scene.applyTemplateFromURL(// 'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_instagram_photo_1.scene'// ); ``` ## Error Handling[#](#error-handling) When loading templates, several issues can occur: ### Network Errors[#](#network-errors) Template URLs might be unreachable: ``` try { await engine.scene.loadFromArchiveURL(templateUrl);} catch (error) { console.error('Failed to load template:', error); // Show error message to user // Fall back to default template or empty scene} ``` ### Invalid Scene Format[#](#invalid-scene-format) The file might not be a valid scene: ``` try { await engine.scene.loadFromURL(sceneUrl);} catch (error) { if (error.message.includes('parse')) { console.error('Invalid scene file format'); }} ``` ### Missing Assets[#](#missing-assets) For .scene files, referenced assets might be unavailable. The scene loads but assets appear missing. Consider using archives to avoid this issue. ## Performance Considerations[#](#performance-considerations) ### Loading Time[#](#loading-time) Archive size directly impacts loading time: * Small archives (< 1MB): Nearly instant * Medium archives (1-5MB): 1-2 seconds * Large archives (> 5MB): Several seconds Show loading indicators for better user experience. ## CORS Considerations[#](#cors-considerations) When loading templates from external URLs, ensure proper CORS headers are set on the server hosting the files. Archives must be accessible with appropriate CORS policies. ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | [`engine.scene.loadFromArchiveURL()`](/js/api/engine/classes/SceneAPI#loadfromarchiveurl) | Loads a complete scene from an archive (ZIP) file | | [`engine.scene.loadFromURL()`](/js/api/engine/classes/SceneAPI#loadfromurl) | Loads a scene from a .scene file URL | | [`engine.scene.applyTemplateFromURL()`](/js/api/engine/classes/SceneAPI#applytemplatefromurl) | Applies a template while preserving page dimensions | | [`engine.scene.get()`](/js/api/engine/classes/SceneAPI#get) | Returns the current scene block ID | | [`engine.scene.getPages()`](/js/api/engine/classes/SceneAPI#getpages) | Returns all page IDs in the scene | | [`engine.scene.getMode()`](/js/api/engine/classes/SceneAPI#getmode) | Returns the scene mode (Design or Video) | | [`engine.scene.getDesignUnit()`](/js/api/engine/classes/SceneAPI#getdesignunit) | Returns the measurement unit | | [`engine.scene.zoomToBlock()`](/js/api/engine/classes/SceneAPI#zoomtoblock) | Zooms the viewport to fit a specific block | --- [Source](https:/img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/set-editing-constraints-c892c0) # Set Editing Constraints Control what users can edit in templates by setting fine-grained permissions on individual blocks or globally across your scene using CE.SDK’s Scope system. ![Set Editing Constraints example showing constraint patterns](/docs/cesdk/_astro/browser.hero.BU90LFFa_Z2eo0Vp.webp) 15 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-create-templates-dynamic-content-set-editing-constraints-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-create-templates-dynamic-content-set-editing-constraints-browser) Editing constraints in CE.SDK allow you to lock specific properties of design elements while keeping others editable. The Scope system provides granular control over 20+ editing capabilities including movement, resizing, rotation, fill changes, text editing, and lifecycle operations. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; /** * CE.SDK Plugin: Set Editing Constraints Guide * * This example demonstrates: * - Setting global scopes to respect block-level settings * - Disabling move scope to lock position * - Disabling lifecycle scopes to prevent deletion */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Create a design scene await cesdk.createDesignScene(); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page dimensions for 4 examples engine.block.setWidth(page, 1200); engine.block.setHeight(page, 600); // Set page background color const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // ===== Configure Global Scopes ===== // Set global scopes to 'Defer' to respect block-level scope settings // Without this, global 'Allow' settings might override block-level restrictions engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('layer/resize', 'Defer'); engine.editor.setGlobalScope('lifecycle/destroy', 'Defer'); engine.editor.setGlobalScope('lifecycle/duplicate', 'Defer'); // Global scope modes: // - 'Allow': Always allow (overrides block-level settings) // - 'Deny': Always deny (overrides block-level settings) // - 'Defer': Use block-level settings (respects setScopeEnabled) // Calculate layout for 4 examples (2x2 grid) const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const margin = 40; const spacing = 20; const blockWidth = (pageWidth - margin * 2 - spacing) / 2; const blockHeight = (pageHeight - margin * 2 - spacing) / 2; const getPosition = (index: number) => { const col = index % 2; const row = Math.floor(index / 2); return { x: margin + col * (blockWidth + spacing), y: margin + row * (blockHeight + spacing) }; }; // Helper function to create a labeled example block const createExampleBlock = ( labelText: string, backgroundColor: { r: number; g: number; b: number }, applyScopesCallback?: (blockId: number) => void ): number => { // Create container block const block = engine.block.create('graphic'); const shape = engine.block.createShape('rect'); engine.block.setShape(block, shape); engine.block.setWidth(block, blockWidth); engine.block.setHeight(block, blockHeight); // Set background color const fill = engine.block.createFill('color'); engine.block.setFill(block, fill); engine.block.setColor(fill, 'fill/color/value', { ...backgroundColor, a: 1.0 }); // Add label text const textBlock = engine.block.create('text'); engine.block.setWidth(textBlock, blockWidth * 0.85); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setString(textBlock, 'text/text', labelText); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setFloat(textBlock, 'text/fontSize', 36); // Append text to get dimensions engine.block.appendChild(block, textBlock); // Center text in container const textWidth = engine.block.getWidth(textBlock); const textHeight = engine.block.getHeight(textBlock); engine.block.setPositionX(textBlock, (blockWidth - textWidth) / 2); engine.block.setPositionY(textBlock, (blockHeight - textHeight) / 2); // Set text color to white const textFill = engine.block.createFill('color'); engine.block.setFill(textBlock, textFill); engine.block.setColor(textFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Apply scope configuration to both blocks if (applyScopesCallback) { applyScopesCallback(block); applyScopesCallback(textBlock); } // Append container to page engine.block.appendChild(page, block); return block; }; // ===== Example 1: Lock Position (Disable Move Scope) ===== const disableMoveScope = (block: number) => { // Disable move scope engine.block.setScopeEnabled(block, 'layer/move', false); // Explicitly enable other transform scopes engine.block.setScopeEnabled(block, 'layer/resize', true); engine.block.setScopeEnabled(block, 'layer/rotate', true); engine.block.setScopeEnabled(block, 'layer/flip', true); // Explicitly enable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', true); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', true); }; const moveLockedBlock = createExampleBlock( 'Locked\nposition', { r: 0.5, g: 0.75, b: 0.9 }, disableMoveScope ); // Block position is locked - users cannot move or reposition it // Other scopes are explicitly enabled: resizing, rotation, flipping, deletion, duplication // ===== Example 2: Prevent Deletion (Disable Lifecycle Scopes) ===== const disableLifecycleScopes = (block: number) => { // Disable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', false); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', false); // Explicitly enable transform scopes engine.block.setScopeEnabled(block, 'layer/move', true); engine.block.setScopeEnabled(block, 'layer/resize', true); engine.block.setScopeEnabled(block, 'layer/rotate', true); engine.block.setScopeEnabled(block, 'layer/flip', true); }; const lifecycleLockedBlock = createExampleBlock( 'Cannot\ndelete', { r: 0.75, g: 0.75, b: 0.75 }, disableLifecycleScopes ); // Block cannot be deleted or duplicated // Other scopes are explicitly enabled: moving, resizing, rotation, flipping // ===== Example 3: All Scopes Enabled ===== const enableAllScopes = (block: number) => { // Explicitly enable all transform scopes engine.block.setScopeEnabled(block, 'layer/move', true); engine.block.setScopeEnabled(block, 'layer/resize', true); engine.block.setScopeEnabled(block, 'layer/rotate', true); engine.block.setScopeEnabled(block, 'layer/flip', true); // Explicitly enable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', true); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', true); // Explicitly enable fill scopes engine.block.setScopeEnabled(block, 'fill/change', true); engine.block.setScopeEnabled(block, 'fill/changeType', true); // Explicitly enable text scopes engine.block.setScopeEnabled(block, 'text/edit', true); engine.block.setScopeEnabled(block, 'text/character', true); }; const fullyEditableBlock = createExampleBlock( 'Fully\neditable', { r: 0.5, g: 0.85, b: 0.5 }, enableAllScopes ); // All scopes are explicitly enabled - users have full editing capabilities // This is the default behavior, but explicitly enabling shows clear intent // ===== Example 4: All Scopes Disabled ===== const disableAllScopes = (block: number) => { // Disable all transform scopes engine.block.setScopeEnabled(block, 'layer/move', false); engine.block.setScopeEnabled(block, 'layer/resize', false); engine.block.setScopeEnabled(block, 'layer/rotate', false); engine.block.setScopeEnabled(block, 'layer/flip', false); engine.block.setScopeEnabled(block, 'layer/crop', false); // Disable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', false); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', false); // Disable fill scopes engine.block.setScopeEnabled(block, 'fill/change', false); engine.block.setScopeEnabled(block, 'fill/changeType', false); engine.block.setScopeEnabled(block, 'stroke/change', false); // Disable text scopes engine.block.setScopeEnabled(block, 'text/edit', false); engine.block.setScopeEnabled(block, 'text/character', false); // Disable shape scopes engine.block.setScopeEnabled(block, 'shape/change', false); // Disable editor scopes engine.block.setScopeEnabled(block, 'editor/select', false); // Disable appearance scopes engine.block.setScopeEnabled(block, 'layer/opacity', false); engine.block.setScopeEnabled(block, 'layer/blendMode', false); engine.block.setScopeEnabled(block, 'layer/visibility', false); }; const fullyLockedBlock = createExampleBlock( 'Fully\nlocked', { r: 0.9, g: 0.5, b: 0.5 }, disableAllScopes ); // All scopes are disabled - block is completely locked and cannot be edited // Useful for watermarks, logos, or legal disclaimers // ===== Block-Level Scope Setting Example ===== // Check if a scope is enabled for a specific block const canMove = engine.block.isScopeEnabled(moveLockedBlock, 'layer/move'); const canDelete = engine.block.isScopeEnabled( lifecycleLockedBlock, 'lifecycle/destroy' ); const canEditFully = engine.block.isScopeEnabled( fullyEditableBlock, 'layer/move' ); const canEditLocked = engine.block.isScopeEnabled( fullyLockedBlock, 'layer/move' ); // eslint-disable-next-line no-console console.log('Move-locked block - layer/move enabled:', canMove); // false // eslint-disable-next-line no-console console.log( 'Lifecycle-locked block - lifecycle/destroy enabled:', canDelete ); // false // eslint-disable-next-line no-console console.log('Fully editable block - layer/move enabled:', canEditFully); // true // eslint-disable-next-line no-console console.log('Fully locked block - layer/move enabled:', canEditLocked); // false // Position blocks in 2x2 grid const blocks = [ fullyEditableBlock, moveLockedBlock, lifecycleLockedBlock, fullyLockedBlock ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Deselect all blocks engine.block.findAllSelected().forEach((block) => { engine.block.setSelected(block, false); }); // Zoom to fit content await engine.scene.zoomToBlock(page, { padding: 50, animate: false }); // Log instructions // eslint-disable-next-line no-console console.log(`=== Editing Constraints Demo === Try interacting with the 4 examples (arranged in 2x2 grid): Top row:1. "Fully editable" (green): All scopes enabled - complete editing freedom2. "Locked position" (light blue): Cannot move, but can resize/edit/delete Bottom row:3. "Cannot delete" (light grey): Cannot delete/duplicate, but can move/resize/edit4. "Fully locked" (red): All scopes disabled - completely locked Note: Global scopes are set to 'Defer' to respect block-level settings. `); }} export default Example; ``` This guide demonstrates how to apply editing constraints to create brand templates, guided editing experiences, and form-based workflows. ## Understanding Scopes[#](#understanding-scopes) ### What are Scopes?[#](#what-are-scopes) A scope is a permission key that controls a specific editing capability in CE.SDK. Each scope represents a distinct action users can perform, such as moving blocks (`'layer/move'`), changing fills (`'fill/change'`), or editing text content (`'text/edit'`). By enabling or disabling scopes, you control exactly what users can and cannot do with each design element. Scopes exist at two levels: * **Block-level scopes**: Per-block permissions set using `setScopeEnabled()` * **Global scopes**: Default behavior for all blocks set using `setGlobalScope()` ### Available Scope Categories[#](#available-scope-categories) CE.SDK provides scopes organized into logical categories: | Category | Purpose | Example Scopes | | --- | --- | --- | | **Text Editing** | Control text content and formatting | `text/edit`, `text/character` | | **Fill & Stroke** | Manage colors and gradients | `fill/change`, `fill/changeType`, `stroke/change` | | **Shape** | Modify shape properties | `shape/change` | | **Layer Transform** | Control position and dimensions | `layer/move`, `layer/resize`, `layer/rotate`, `layer/flip`, `layer/crop` | | **Layer Appearance** | Manage visual properties | `layer/opacity`, `layer/blendMode`, `layer/visibility` | | **Effects & Filters** | Apply visual effects | `appearance/adjustments`, `appearance/filter`, `appearance/effect`, `appearance/blur`, `appearance/shadow` | | **Lifecycle** | Control creation and deletion | `lifecycle/destroy`, `lifecycle/duplicate` | | **Editor** | Manage scene-level actions | `editor/add`, `editor/select` | ## Scope Configuration[#](#scope-configuration) ### Global Scope Modes[#](#global-scope-modes) Global scopes set the default behavior for all blocks in the scene. They have three modes: * **Allow**: Always allow the action, overriding block-level settings * **Deny**: Always deny the action, overriding block-level settings * **Defer**: Use block-level settings (default mode) To ensure block-level scope settings are respected, set relevant global scopes to ‘Defer’: ``` // Set global scopes to 'Defer' to respect block-level scope settings// Without this, global 'Allow' settings might override block-level restrictionsengine.editor.setGlobalScope('layer/move', 'Defer');engine.editor.setGlobalScope('layer/resize', 'Defer');engine.editor.setGlobalScope('lifecycle/destroy', 'Defer');engine.editor.setGlobalScope('lifecycle/duplicate', 'Defer'); // Global scope modes:// - 'Allow': Always allow (overrides block-level settings)// - 'Deny': Always deny (overrides block-level settings)// - 'Defer': Use block-level settings (respects setScopeEnabled) ``` Without setting global scopes to ‘Defer’, default ‘Allow’ settings might override your block-level restrictions. This is essential when applying fine-grained constraints. ### Scope Resolution Priority[#](#scope-resolution-priority) When both global and block-level scopes are set, they resolve in this order: 1. **Global Deny** takes highest priority (action always denied) 2. **Global Allow** takes second priority (action always allowed) 3. **Global Defer** defers to block-level settings (default behavior) ## Setting Block-Level Constraints[#](#setting-block-level-constraints) ### Locking Position[#](#locking-position) Prevent users from moving or repositioning a block while allowing other edits: ``` const disableMoveScope = (block: number) => { // Disable move scope engine.block.setScopeEnabled(block, 'layer/move', false); // Explicitly enable other transform scopes engine.block.setScopeEnabled(block, 'layer/resize', true); engine.block.setScopeEnabled(block, 'layer/rotate', true); engine.block.setScopeEnabled(block, 'layer/flip', true); // Explicitly enable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', true); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', true);}; const moveLockedBlock = createExampleBlock( 'Locked\nposition', { r: 0.5, g: 0.75, b: 0.9 }, disableMoveScope);// Block position is locked - users cannot move or reposition it// Other scopes are explicitly enabled: resizing, rotation, flipping, deletion, duplication ``` The block position is locked—users cannot move or reposition it. Other scopes remain enabled, allowing resizing, editing, and deletion. This pattern maintains layout integrity while allowing content updates. ### Preventing Deletion[#](#preventing-deletion) Protect blocks from being deleted or duplicated: ``` const disableLifecycleScopes = (block: number) => { // Disable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', false); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', false); // Explicitly enable transform scopes engine.block.setScopeEnabled(block, 'layer/move', true); engine.block.setScopeEnabled(block, 'layer/resize', true); engine.block.setScopeEnabled(block, 'layer/rotate', true); engine.block.setScopeEnabled(block, 'layer/flip', true);}; const lifecycleLockedBlock = createExampleBlock( 'Cannot\ndelete', { r: 0.75, g: 0.75, b: 0.75 }, disableLifecycleScopes);// Block cannot be deleted or duplicated// Other scopes are explicitly enabled: moving, resizing, rotation, flipping ``` Users cannot delete or duplicate the block but can still move, resize, and edit it. Use this for essential template elements that must remain present. ### Checking Scope State[#](#checking-scope-state) Query the current state of any scope for a block: ``` // Check if a scope is enabled for a specific blockconst canMove = engine.block.isScopeEnabled(moveLockedBlock, 'layer/move');const canDelete = engine.block.isScopeEnabled( lifecycleLockedBlock, 'lifecycle/destroy');const canEditFully = engine.block.isScopeEnabled( fullyEditableBlock, 'layer/move');const canEditLocked = engine.block.isScopeEnabled( fullyLockedBlock, 'layer/move'); // eslint-disable-next-line no-consoleconsole.log('Move-locked block - layer/move enabled:', canMove); // false// eslint-disable-next-line no-consoleconsole.log( 'Lifecycle-locked block - lifecycle/destroy enabled:', canDelete); // false// eslint-disable-next-line no-consoleconsole.log('Fully editable block - layer/move enabled:', canEditFully); // true// eslint-disable-next-line no-consoleconsole.log('Fully locked block - layer/move enabled:', canEditLocked); // false ``` Use `isScopeEnabled()` to check the block-level setting. This returns whether the scope is enabled at the block level, but doesn’t consider global scope settings. ### Checking Effective Permissions[#](#checking-effective-permissions) Check the effective permission considering both block and global settings: ``` // Check if scope is allowed (considers global + block settings)const moveAllowed = engine.block.isAllowedByScope(block, 'layer/move'); ``` `isAllowedByScope()` returns the final permission after resolving block-level and global scope settings. Use this when you need to know if an action is actually permitted. ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | `engine.block.setScopeEnabled()` | Enable or disable a scope for a specific block | | `engine.block.isScopeEnabled()` | Check if a scope is enabled at the block level | | `engine.block.isAllowedByScope()` | Check if a scope is allowed considering both block and global settings | | `engine.editor.setGlobalScope()` | Set global scope policy (`'Allow'`, `'Deny'`, or `'Defer'`) | | `engine.editor.findAllScopes()` | List all available scope keys | --- [Source](https:/img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/text-variables-7ecb50) # Text Variables Text variables enable data-driven template personalization in CE.SDK. Insert placeholder tokens like `{{firstName}}` into text blocks, then populate them with actual values programmatically. This separates design from content, enabling automated document generation, batch processing, and mass personalization workflows. ![Text Variables example showing personalized text with dynamic data](/docs/cesdk/_astro/browser.hero.XpZwp4B9_2jn2Pq.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-create-templates-dynamic-content-text-variables-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-create-templates-dynamic-content-text-variables-browser) ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; /** * CE.SDK Plugin: Text Variables Guide * * Demonstrates text variable management in CE.SDK with a single comprehensive example: * - Discovering variables with findAll() * - Creating and updating variables with setString() * - Reading variable values with getString() * - Binding variables to text blocks with {{variable}} tokens * - Detecting variable references with referencesAnyVariables() * - Removing variables with remove() * - Localizing variable labels */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Initialize CE.SDK with Design mode and load asset sources await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }); await cesdk.createDesignScene(); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page dimensions for consistent layout engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Localize variable labels that appear in the Variables panel UI cesdk.i18n.setTranslations({ en: { 'variables.firstName.label': 'First Name', 'variables.lastName.label': 'Last Name', 'variables.email.label': 'Email Address', 'variables.company.label': 'Company Name', 'variables.title.label': 'Job Title' } }); // Pattern 1: Discover all existing variables in the scene // This is useful when loading templates to see what variables need values const existingVariables = engine.variable.findAll(); // eslint-disable-next-line no-console console.log('Existing variables:', existingVariables); // [] // Pattern 2: Create and update text variables // If a variable doesn't exist, setString() creates it // If it already exists, setString() updates its value engine.variable.setString('firstName', 'Alex'); engine.variable.setString('lastName', 'Smith'); engine.variable.setString('email', 'alex.smith@example.com'); engine.variable.setString('company', 'IMG.LY'); engine.variable.setString('title', 'Creative Developer'); // Pattern 3: Read variable values at runtime const firstName = engine.variable.getString('firstName'); // eslint-disable-next-line no-console console.log('First name variable:', firstName); // 'Alex' // Create a single comprehensive text block demonstrating all variable patterns const textBlock = engine.block.create('text'); // Multi-line text combining: // - Single variable ({{firstName}}) // - Multiple variables ({{firstName}} {{lastName}}) // - Variables in context (Email: {{email}}) const textContent = `Hello, {{firstName}}! Full Name: {{firstName}} {{lastName}}Email: {{email}}Position: {{title}}Company: {{company}}`; engine.block.replaceText(textBlock, textContent); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setFloat(textBlock, 'text/fontSize', 52); engine.block.appendChild(page, textBlock); // Center the text block on the page (after font size is set) // Get the actual frame dimensions of the block (including its bounds) const frameX = engine.block.getFrameX(textBlock); const frameY = engine.block.getFrameY(textBlock); const frameWidth = engine.block.getFrameWidth(textBlock); const frameHeight = engine.block.getFrameHeight(textBlock); // Calculate centered position accounting for frame offset engine.block.setPositionX(textBlock, (pageWidth - frameWidth) / 2 - frameX); engine.block.setPositionY( textBlock, (pageHeight - frameHeight) / 2 - frameY ); // Check if the block contains variable references const hasVariables = engine.block.referencesAnyVariables(textBlock); // eslint-disable-next-line no-console console.log('Text block has variables:', hasVariables); // true // Create and then remove a temporary variable to demonstrate removal engine.variable.setString('tempVariable', 'Temporary Value'); // eslint-disable-next-line no-console console.log('Variables before removal:', engine.variable.findAll()); // Remove the temporary variable engine.variable.remove('tempVariable'); // eslint-disable-next-line no-console console.log('Variables after removal:', engine.variable.findAll()); // Select the text block to show the Variables panel engine.block.setSelected(textBlock, true); // Final check: List all variables in the scene const finalVariables = engine.variable.findAll(); // eslint-disable-next-line no-console console.log('Final variables in scene:', finalVariables); // Expected: ['firstName', 'lastName', 'email', 'company', 'title'] }} export default Example; ``` This guide covers how to discover, create, update, and manage text variables both through the UI and programmatically using the Variables API. ## Introduction[#](#introduction) Text variables allow you to design templates once and personalize them with different content for each use. At render time, CE.SDK replaces variable tokens with actual values provided through the Variables API. This approach is ideal for: * **Automated document generation** - Certificates, invoices, reports * **Mass personalization** - Marketing materials with recipient data * **Data-driven design** - Templates populated from JSON, CSV, or APIs * **Form-based editing** - Expose variables through custom interfaces ## Using the Built-in Variables UI[#](#using-the-built-in-variables-ui) CE.SDK includes a Variables panel where template authors can create and manage variables visually. To access this panel, ensure you’re using CE.SDK (not engine-only) and that the Variables feature is enabled. The Variables panel allows you to: * **Create new variables** with descriptive names * **Insert tokens** into text blocks using `{{variableName}}` syntax * **Preview** how the final design looks with different values * **Manage** all variables defined in the current scene Variables appear in the inspector panel with localized labels when you configure translations through the i18n API. ## Discovering Variables[#](#discovering-variables) When working with templates that already contain variables, discover what variables exist before populating them with values. ``` // Pattern 1: Discover all existing variables in the scene// This is useful when loading templates to see what variables need valuesconst existingVariables = engine.variable.findAll();// eslint-disable-next-line no-consoleconsole.log('Existing variables:', existingVariables); // [] ``` The `findAll()` method returns an array of all variable keys defined in the scene. This is essential when loading templates to understand what data needs to be provided. ## Creating and Updating Variables[#](#creating-and-updating-variables) Create or update variables using `setString()`. If the variable doesn’t exist, it will be created. If it already exists, its value will be updated. ``` // Pattern 2: Create and update text variables// If a variable doesn't exist, setString() creates it// If it already exists, setString() updates its valueengine.variable.setString('firstName', 'Alex');engine.variable.setString('lastName', 'Smith');engine.variable.setString('email', 'alex.smith@example.com');engine.variable.setString('company', 'IMG.LY');engine.variable.setString('title', 'Creative Developer'); ``` Variable keys are case-sensitive. `{{Name}}` and `{{name}}` are different variables. ## Reading Variable Values[#](#reading-variable-values) Retrieve the current value of a variable at runtime using `getString()`. This is useful for validation or displaying current values in custom UI. ``` // Pattern 3: Read variable values at runtimeconst firstName = engine.variable.getString('firstName');// eslint-disable-next-line no-consoleconsole.log('First name variable:', firstName); // 'Alex' ``` ## Binding Variables to Text Blocks[#](#binding-variables-to-text-blocks) Insert variable tokens directly into text block content using the `{{variableName}}` syntax. CE.SDK automatically detects and resolves these tokens at render time. ### Single Variable[#](#single-variable) ``` // Create a single comprehensive text block demonstrating all variable patterns const textBlock = engine.block.create('text'); // Multi-line text combining: // - Single variable ({{firstName}}) // - Multiple variables ({{firstName}} {{lastName}}) // - Variables in context (Email: {{email}}) const textContent = `Hello, {{firstName}}! Full Name: {{firstName}} {{lastName}}Email: {{email}}Position: {{title}}Company: {{company}}`; engine.block.replaceText(textBlock, textContent); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setFloat(textBlock, 'text/fontSize', 52); engine.block.appendChild(page, textBlock); ``` ### Multiple Variables[#](#multiple-variables) Combine multiple variables in a single text block: ``` // Create a single comprehensive text block demonstrating all variable patterns const textBlock = engine.block.create('text'); // Multi-line text combining: // - Single variable ({{firstName}}) // - Multiple variables ({{firstName}} {{lastName}}) // - Variables in context (Email: {{email}}) const textContent = `Hello, {{firstName}}! Full Name: {{firstName}} {{lastName}}Email: {{email}}Position: {{title}}Company: {{company}}`; engine.block.replaceText(textBlock, textContent); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setFloat(textBlock, 'text/fontSize', 52); engine.block.appendChild(page, textBlock); ``` The variables resolve in place, maintaining the surrounding text and formatting. ## Detecting Variable References[#](#detecting-variable-references) Check if a block contains variable references using `referencesAnyVariables()`. This returns `true` if the block’s text contains any `{{variable}}` tokens. ``` // Check if the block contains variable referencesconst hasVariables = engine.block.referencesAnyVariables(textBlock);// eslint-disable-next-line no-consoleconsole.log('Text block has variables:', hasVariables); // true ``` This is useful for identifying which blocks need variable values before export or for implementing validation logic. ## Removing Variables[#](#removing-variables) Remove unused variables from the scene with `remove()`. This cleans up the variable store when certain variables are no longer needed. ``` // Create and then remove a temporary variable to demonstrate removalengine.variable.setString('tempVariable', 'Temporary Value');// eslint-disable-next-line no-consoleconsole.log('Variables before removal:', engine.variable.findAll()); // Remove the temporary variableengine.variable.remove('tempVariable');// eslint-disable-next-line no-consoleconsole.log('Variables after removal:', engine.variable.findAll()); ``` After removal, the variable no longer exists in the scene. Text blocks that reference removed variables will display the token literally (e.g., `{{removedVar}}`). ## Localizing Variable Labels[#](#localizing-variable-labels) In CE.SDK (with UI), display friendly labels for variables in the inspector panel using i18n translations. Map variable keys to human-readable names that appear in the UI. ``` // Localize variable labels that appear in the Variables panel UIcesdk.i18n.setTranslations({ en: { 'variables.firstName.label': 'First Name', 'variables.lastName.label': 'Last Name', 'variables.email.label': 'Email Address', 'variables.company.label': 'Company Name', 'variables.title.label': 'Job Title' }}); ``` Without localization, the Variables panel shows the technical variable key (e.g., `firstName`). With localization, it shows the friendly label (e.g., “First Name”). ## Combining with Other Features[#](#combining-with-other-features) Text variables work seamlessly with other CE.SDK template features: ### With Placeholders[#](#with-placeholders) Use **placeholders** for dynamic images and videos while **variables** personalize text content. This combination enables fully dynamic templates where both visuals and copy change per use case. ### With Editing Constraints[#](#with-editing-constraints) Lock layout elements while allowing only variable token editing. This ensures brand consistency while enabling content personalization. ### With Role-Based Editing[#](#with-role-based-editing) Show the Variables panel only to template authors (Creator role) and hide it from end users (Adopter role). This guides the editing experience based on user permissions. ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | `engine.variable.findAll()` | Get array of all variable keys in the scene | | `engine.variable.setString()` | Create or update a text variable | | `engine.variable.getString()` | Read the current value of a variable | | `engine.variable.remove()` | Delete a variable from the scene | | `engine.block.referencesAnyVariables()` | Check if a block contains variable tokens | | `engine.block.replaceText()` | Set text content (supports variable tokens) | | `cesdk.i18n.setTranslations()` | Set UI labels for variable names | --- [Source](https:/img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/placeholders-d9ba8a) # Placeholders Placeholders turn design blocks into drop-zones that users can swap content into while maintaining full control over layout and styling. ![Placeholders example showing various configurations of placeholder behavior, controls, and interaction modes](/docs/cesdk/_astro/browser.hero.CVIbe4rr_Z2iS8YA.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-create-templates-dynamic-content-placeholders-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-create-templates-dynamic-content-placeholders-browser) ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json'; /** * CE.SDK Plugin: Dynamic Content Placeholders * * This example demonstrates three different placeholder configurations: * 1. All placeholder controls enabled (all scopes + behavior + controls) * 2. Fill properties only (fill scopes + behavior + controls) * 3. No placeholder features (default state) */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addDemoAssetSources(); await cesdk.addDefaultAssetSources(); // Create a design scene using CE.SDK method await cesdk.createDesignScene(); const engine = cesdk.engine; engine.editor.setRole('Adopter'); // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page dimensions for horizontal layout const pageWidth = 1200; const pageHeight = 800; engine.block.setWidth(page, pageWidth); engine.block.setHeight(page, pageHeight); // Set page background to light gray const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // Layout configuration for 3 blocks horizontally const blockWidth = 300; const blockHeight = 300; const spacing = 50; const startX = (pageWidth - blockWidth * 3 - spacing * 2) / 2; const blockY = (pageHeight - blockHeight) / 2 + 40; // Offset for labels const labelY = blockY - 50; // Sample images const imageUri1 = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageUri2 = 'https://img.ly/static/ubq_samples/sample_2.jpg'; const imageUri3 = 'https://img.ly/static/ubq_samples/sample_3.jpg'; // Define ALL available scopes for reference const allScopes: Array< | 'text/edit' | 'text/character' | 'fill/change' | 'fill/changeType' | 'stroke/change' | 'shape/change' | 'layer/move' | 'layer/resize' | 'layer/rotate' | 'layer/flip' | 'layer/crop' | 'layer/opacity' | 'layer/blendMode' | 'layer/visibility' | 'layer/clipping' | 'appearance/adjustments' | 'appearance/filter' | 'appearance/effect' | 'appearance/blur' | 'appearance/shadow' | 'appearance/animation' | 'lifecycle/destroy' | 'lifecycle/duplicate' | 'editor/add' | 'editor/select' > = [ 'text/edit', 'text/character', 'fill/change', 'fill/changeType', 'stroke/change', 'shape/change', 'layer/move', 'layer/resize', 'layer/rotate', 'layer/flip', 'layer/crop', 'layer/opacity', 'layer/blendMode', 'layer/visibility', 'layer/clipping', 'appearance/adjustments', 'appearance/filter', 'appearance/effect', 'appearance/blur', 'appearance/shadow', 'appearance/animation', 'lifecycle/destroy', 'lifecycle/duplicate', 'editor/add', 'editor/select' ]; // Block 1: All Placeholder Controls Enabled const block1 = await engine.block.addImage(imageUri1, { size: { width: blockWidth, height: blockHeight } }); engine.block.appendChild(page, block1); engine.block.setPositionX(block1, startX); engine.block.setPositionY(block1, blockY); // Step 1: Explicitly disable ALL scopes first allScopes.forEach((scope) => { engine.block.setScopeEnabled(block1, scope, false); }); // Step 2: Enable specific scopes for full placeholder functionality // General/Layer options engine.block.setScopeEnabled(block1, 'layer/opacity', true); engine.block.setScopeEnabled(block1, 'layer/blendMode', true); engine.block.setScopeEnabled(block1, 'lifecycle/duplicate', true); engine.block.setScopeEnabled(block1, 'lifecycle/destroy', true); // Arrange scopes engine.block.setScopeEnabled(block1, 'layer/move', true); engine.block.setScopeEnabled(block1, 'layer/resize', true); engine.block.setScopeEnabled(block1, 'layer/rotate', true); engine.block.setScopeEnabled(block1, 'layer/flip', true); // Fill scopes (for image replacement and cropping) engine.block.setScopeEnabled(block1, 'fill/change', true); engine.block.setScopeEnabled(block1, 'fill/changeType', true); engine.block.setScopeEnabled(block1, 'layer/crop', true); // Appearance scopes engine.block.setScopeEnabled(block1, 'appearance/adjustments', true); engine.block.setScopeEnabled(block1, 'appearance/filter', true); engine.block.setScopeEnabled(block1, 'appearance/effect', true); engine.block.setScopeEnabled(block1, 'appearance/blur', true); engine.block.setScopeEnabled(block1, 'appearance/shadow', true); engine.block.setScopeEnabled(block1, 'appearance/animation', true); engine.block.setScopeEnabled(block1, 'editor/select', true); // Step 3: Enable placeholder behavior ("Act as a placeholder") // This makes the block interactive in Adopter mode engine.block.setPlaceholderEnabled(block1, true); // Step 4: Check if block/fill supports placeholder features const fill1 = engine.block.getFill(block1); const supportsBehavior = engine.block.supportsPlaceholderBehavior(fill1); const supportsControls = engine.block.supportsPlaceholderControls(block1); // Enable placeholder behavior on the fill (for graphic blocks) if (supportsBehavior) { engine.block.setPlaceholderBehaviorEnabled(fill1, true); } // Enable placeholder overlay pattern if (supportsControls) { engine.block.setPlaceholderControlsOverlayEnabled(block1, true); } // Enable placeholder button if (supportsControls) { engine.block.setPlaceholderControlsButtonEnabled(block1, true); } // Complete "Act as Placeholder" setup const fillForConfig = engine.block.getFill(block1); if (engine.block.supportsPlaceholderBehavior(fillForConfig)) { engine.block.setPlaceholderBehaviorEnabled(fillForConfig, true); } if (supportsControls) { engine.block.setPlaceholderControlsOverlayEnabled(block1, true); engine.block.setPlaceholderControlsButtonEnabled(block1, true); } // Block 2: Fill Properties Only const block2 = await engine.block.addImage(imageUri2, { size: { width: blockWidth, height: blockHeight } }); engine.block.appendChild(page, block2); engine.block.setPositionX(block2, startX + blockWidth + spacing); engine.block.setPositionY(block2, blockY); // Batch operation: Apply settings to multiple blocks const graphicBlocks = [block1, block2]; graphicBlocks.forEach((block) => { // Enable placeholder for each block engine.block.setPlaceholderEnabled(block, true); const fill = engine.block.getFill(block); if (engine.block.supportsPlaceholderBehavior(fill)) { engine.block.setPlaceholderBehaviorEnabled(fill, true); } }); // Step 1: Explicitly disable ALL scopes first allScopes.forEach((scope) => { engine.block.setScopeEnabled(block2, scope, false); }); // Step 2: Enable ONLY fill-related scopes engine.block.setScopeEnabled(block2, 'fill/change', true); engine.block.setScopeEnabled(block2, 'fill/changeType', true); engine.block.setScopeEnabled(block2, 'layer/crop', true); engine.block.setScopeEnabled(block2, 'editor/select', true); // Step 3: Enable placeholder behavior ("Act as a placeholder") engine.block.setPlaceholderEnabled(block2, true); // Step 4: Enable fill-based placeholder behavior and visual controls const fill2 = engine.block.getFill(block2); if (engine.block.supportsPlaceholderBehavior(fill2)) { engine.block.setPlaceholderBehaviorEnabled(fill2, true); } if (engine.block.supportsPlaceholderControls(block2)) { engine.block.setPlaceholderControlsOverlayEnabled(block2, true); engine.block.setPlaceholderControlsButtonEnabled(block2, true); } // Block 3: No Placeholder Features (Default State) const block3 = await engine.block.addImage(imageUri3, { size: { width: blockWidth, height: blockHeight } }); engine.block.appendChild(page, block3); engine.block.setPositionX(block3, startX + (blockWidth + spacing) * 2); engine.block.setPositionY(block3, blockY); // Explicitly disable ALL scopes to ensure default state allScopes.forEach((scope) => { engine.block.setScopeEnabled(block3, scope, false); }); // No placeholder behavior enabled - this block remains non-interactive // Add descriptive labels above each block const labelConfig = { height: 40, fontSize: 34, fontUri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Bold.ttf', fontFamily: 'Roboto' }; // Label for Block 1 const label1 = engine.block.create('text'); engine.block.appendChild(page, label1); engine.block.setPositionX(label1, startX); engine.block.setPositionY(label1, labelY); engine.block.setWidth(label1, blockWidth); engine.block.setHeight(label1, labelConfig.height); engine.block.replaceText(label1, 'All Controls'); engine.block.setTextColor(label1, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setFont(label1, labelConfig.fontUri, { name: labelConfig.fontFamily, fonts: [ { uri: labelConfig.fontUri, subFamily: 'Bold' } ] }); engine.block.setFloat(label1, 'text/fontSize', labelConfig.fontSize); engine.block.setEnum(label1, 'text/horizontalAlignment', 'Center'); // Label for Block 2 const label2 = engine.block.create('text'); engine.block.appendChild(page, label2); engine.block.setPositionX(label2, startX + blockWidth + spacing); engine.block.setPositionY(label2, labelY); engine.block.setWidth(label2, blockWidth); engine.block.setHeight(label2, labelConfig.height); engine.block.replaceText(label2, 'Fill Only'); engine.block.setTextColor(label2, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setFont(label2, labelConfig.fontUri, { name: labelConfig.fontFamily, fonts: [ { uri: labelConfig.fontUri, subFamily: 'Bold' } ] }); engine.block.setFloat(label2, 'text/fontSize', labelConfig.fontSize); engine.block.setEnum(label2, 'text/horizontalAlignment', 'Center'); // Label for Block 3 const label3 = engine.block.create('text'); engine.block.appendChild(page, label3); engine.block.setPositionX(label3, startX + (blockWidth + spacing) * 2); engine.block.setPositionY(label3, labelY); engine.block.setWidth(label3, blockWidth); engine.block.setHeight(label3, labelConfig.height); engine.block.replaceText(label3, 'Disabled'); engine.block.setTextColor(label3, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setFont(label3, labelConfig.fontUri, { name: labelConfig.fontFamily, fonts: [ { uri: labelConfig.fontUri, subFamily: 'Bold' } ] }); engine.block.setFloat(label3, 'text/fontSize', labelConfig.fontSize); engine.block.setEnum(label3, 'text/horizontalAlignment', 'Center'); // Verify configurations // eslint-disable-next-line no-console console.log('Block 1 - All Controls:'); // eslint-disable-next-line no-console console.log( ' Placeholder enabled:', engine.block.isPlaceholderEnabled(block1) ); // eslint-disable-next-line no-console console.log(' Scopes enabled:'); // eslint-disable-next-line no-console console.log( ' - layer/move:', engine.block.isScopeEnabled(block1, 'layer/move') ); // eslint-disable-next-line no-console console.log( ' - layer/resize:', engine.block.isScopeEnabled(block1, 'layer/resize') ); // eslint-disable-next-line no-console console.log( ' - fill/change:', engine.block.isScopeEnabled(block1, 'fill/change') ); // eslint-disable-next-line no-console console.log( ' - layer/crop:', engine.block.isScopeEnabled(block1, 'layer/crop') ); // eslint-disable-next-line no-console console.log( ' - appearance/adjustments:', engine.block.isScopeEnabled(block1, 'appearance/adjustments') ); // eslint-disable-next-line no-console console.log('\nBlock 2 - Fill Only:'); // eslint-disable-next-line no-console console.log( ' Placeholder enabled:', engine.block.isPlaceholderEnabled(block2) ); // eslint-disable-next-line no-console console.log(' Scopes enabled:'); // eslint-disable-next-line no-console console.log( ' - layer/move:', engine.block.isScopeEnabled(block2, 'layer/move') ); // eslint-disable-next-line no-console console.log( ' - fill/change:', engine.block.isScopeEnabled(block2, 'fill/change') ); // eslint-disable-next-line no-console console.log( ' - fill/changeType:', engine.block.isScopeEnabled(block2, 'fill/changeType') ); // eslint-disable-next-line no-console console.log( ' - layer/crop:', engine.block.isScopeEnabled(block2, 'layer/crop') ); // eslint-disable-next-line no-console console.log('\nBlock 3 - Disabled:'); // eslint-disable-next-line no-console console.log( ' Placeholder enabled:', engine.block.isPlaceholderEnabled(block3) ); // eslint-disable-next-line no-console console.log(' Scopes enabled:'); // eslint-disable-next-line no-console console.log( ' - layer/move:', engine.block.isScopeEnabled(block3, 'layer/move') ); // eslint-disable-next-line no-console console.log( ' - fill/change:', engine.block.isScopeEnabled(block3, 'fill/change') ); // eslint-disable-next-line no-console console.log('\nPlaceholder configurations initialized successfully'); }} export default Example; ``` This guide covers placeholder fundamentals, checking support, enabling behavior, and configuring visual controls for graphic and text blocks. ## Placeholder Fundamentals[#](#placeholder-fundamentals) Placeholders convert design blocks into interactive drop-zones where users can swap content while maintaining layout and styling control. ### Two Distinct Features[#](#two-distinct-features) **Placeholder behavior** enables drag-and-drop replacement and exposes scope checks for content validation. **Placeholder controls** provide visual affordances: an overlay pattern and a “Replace” button for guided interaction. ### Block-Level vs Fill-Level Behavior[#](#block-level-vs-fill-level-behavior) The key distinction in placeholder implementation depends on block type: **For graphic blocks** (images/videos): Placeholder behavior is enabled on the **fill**, while controls are enabled on the **block**. This pattern reflects how graphic blocks contain fills that can be replaced. **For text blocks**: Placeholder behavior and controls are both enabled directly on the **block**. We can check support with `supportsPlaceholderBehavior()` for both blocks and fills, and `supportsPlaceholderControls()` for blocks. ## Checking Placeholder Support[#](#checking-placeholder-support) Before enabling placeholder features, check if a block supports them: ``` // Step 4: Check if block/fill supports placeholder featuresconst fill1 = engine.block.getFill(block1);const supportsBehavior = engine.block.supportsPlaceholderBehavior(fill1);const supportsControls = engine.block.supportsPlaceholderControls(block1); ``` The `supportsPlaceholderBehavior()` method indicates whether a block can become a drop-zone. The `supportsPlaceholderControls()` method shows if visual controls (overlay and button) are available. ## Enabling Placeholder Behavior[#](#enabling-placeholder-behavior) To convert a block into a placeholder drop-zone, enable placeholder behavior. The approach differs based on block type. ### For Graphic Blocks (Images/Videos)[#](#for-graphic-blocks-imagesvideos) For graphic blocks, placeholder behavior must be enabled on the **fill**, not the block itself: ``` // Enable placeholder behavior on the fill (for graphic blocks)if (supportsBehavior) { engine.block.setPlaceholderBehaviorEnabled(fill1, true);} ``` This pattern is critical: `setPlaceholderBehaviorEnabled()` is called on the fill obtained from `block.getFill()`. This reflects the underlying architecture where graphic blocks contain replaceable fills. ### For Text Blocks[#](#for-text-blocks) For text blocks, placeholder behavior is enabled directly on the block, as text blocks don’t use fills in the same way. We can verify placeholder behavior state with `isPlaceholderBehaviorEnabled()` on the appropriate target (fill for graphics, block for text). ## Enabling Adopter Mode Interaction[#](#enabling-adopter-mode-interaction) Placeholder behavior alone isn’t enough - blocks must also be enabled for interaction in Adopter mode: ``` // Step 3: Enable placeholder behavior ("Act as a placeholder")// This makes the block interactive in Adopter modeengine.block.setPlaceholderEnabled(block1, true); ``` The `setPlaceholderEnabled()` method controls whether the placeholder is interactive for users in Adopter role. CE.SDK distinguishes Creator (full access) and Adopter (replace-only) roles. ### Automatic Management[#](#automatic-management) In practice, `setPlaceholderEnabled()` is typically managed automatically by the editor: when you enable relevant scopes (like `fill/change` for graphics or `text/edit` for text), the placeholder interaction is automatically enabled. When all scopes are disabled, placeholder interaction is automatically disabled. This automatic behavior simplifies template creation workflows. ## Configuring Visual Feedback[#](#configuring-visual-feedback) Placeholders can display visual indicators to guide users through the replacement workflow. ### Combined Setup: The “Act as Placeholder” Pattern[#](#combined-setup-the-act-as-placeholder-pattern) In the CE.SDK UI, the “Act as Placeholder” checkbox enables placeholder behavior and both visual controls simultaneously. This combined pattern is the recommended approach: ``` // Complete "Act as Placeholder" setupconst fillForConfig = engine.block.getFill(block1);if (engine.block.supportsPlaceholderBehavior(fillForConfig)) { engine.block.setPlaceholderBehaviorEnabled(fillForConfig, true);}if (supportsControls) { engine.block.setPlaceholderControlsOverlayEnabled(block1, true); engine.block.setPlaceholderControlsButtonEnabled(block1, true);} ``` This pattern ensures placeholder behavior is enabled on the appropriate target (fill for graphics, block for text) along with both visual controls on the block. ### Individual Control Options[#](#individual-control-options) Visual controls can also be managed independently if needed: **Overlay Pattern** - The overlay shows a dotted surface indicating a drop-zone: ``` // Enable placeholder overlay patternif (supportsControls) { engine.block.setPlaceholderControlsOverlayEnabled(block1, true);} ``` **Replace Button** - The button provides a single-tap entry point for touch devices: ``` // Enable placeholder buttonif (supportsControls) { engine.block.setPlaceholderControlsButtonEnabled(block1, true);} ``` Individual control is useful when you want specific visual feedback without the full placeholder workflow. ## Scope Requirements and Dependencies[#](#scope-requirements-and-dependencies) Placeholders depend on specific scopes being enabled to function correctly. Understanding these dependencies prevents common configuration errors. For graphic blocks (images/videos), the `fill/change` scope must be enabled before placeholder behavior will work. When you disable `fill/change`, the editor automatically disables placeholder behavior and controls to maintain consistency. For text blocks, the `text/edit` scope must be enabled before placeholder behavior can function. **Optional related scopes** that enhance placeholder functionality: * `fill/changeType` - Allows changing between image, video, and solid color fills * `layer/crop` - Enables cropping replacement images * `text/character` - Allows font and character formatting for text placeholders ## Working with Multiple Placeholders[#](#working-with-multiple-placeholders) When creating templates with multiple placeholders, apply settings systematically: ``` // Batch operation: Apply settings to multiple blocksconst graphicBlocks = [block1, block2];graphicBlocks.forEach((block) => { // Enable placeholder for each block engine.block.setPlaceholderEnabled(block, true); const fill = engine.block.getFill(block); if (engine.block.supportsPlaceholderBehavior(fill)) { engine.block.setPlaceholderBehaviorEnabled(fill, true); }}); ``` This pattern works well for collage templates, product showcases, or any layout requiring multiple content slots. ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | `engine.block.supportsPlaceholderBehavior()` | Checks whether the block supports placeholder behavior | | `engine.block.setPlaceholderBehaviorEnabled()` | Enables or disables placeholder behavior for a block | | `engine.block.isPlaceholderBehaviorEnabled()` | Queries whether placeholder behavior is enabled | | `engine.block.setPlaceholderEnabled()` | Enables or disables placeholder interaction in Adopter mode | | `engine.block.isPlaceholderEnabled()` | Queries whether placeholder interaction is enabled | | `engine.block.supportsPlaceholderControls()` | Checks whether the block supports placeholder controls | | `engine.block.setPlaceholderControlsOverlayEnabled()` | Enables or disables the placeholder overlay pattern | | `engine.block.isPlaceholderControlsOverlayEnabled()` | Queries whether the overlay pattern is shown | | `engine.block.setPlaceholderControlsButtonEnabled()` | Enables or disables the placeholder button | | `engine.block.isPlaceholderControlsButtonEnabled()` | Queries whether the placeholder button is shown | ## Next Steps[#](#next-steps) * [Lock the Template](angular/create-templates/lock-131489/) \- Restrict editing access to specific elements or properties to enforce design rules * [Text Variables](angular/create-templates/add-dynamic-content/text-variables-7ecb50/) \- Define dynamic text elements that can be populated with custom values --- [Source](https:/img.ly/docs/cesdk/angular/concepts/headless-mode/browser-24ab98) # Headless CreativeEditor SDK (CE.SDK) **Headless Mode** allows your web app to control the Engine API without loading the built-in user interface. Instead of starting the full editor with panels and toolbars, your browser code talks directly to the Engine. That keeps the experience within your own design system—ideal for automation running on the client. ## Common Use Cases[#](#common-use-cases) * **Automating workflows:** Merge data into templates or generate variations with no user input. * **Automated exports:** Render custom images or videos in the browser and hand them off to storage or your backend. * **Custom interfaces:** Embed the Engine beneath your own UI components. * **Background actions:** Run batch jobs or event-driven edits without overlaying the default UI. ### When to Use Headless Mode[#](#when-to-use-headless-mode) | Scenario | Headless Mode | UI-Based Mode | | --- | --- | --- | | Automate design generation from a script | ✅ | ❌ | | Export scenes without user interaction | ✅ | ❌ | | Let users visually edit a design | ❌ | ✅ | | Build a custom editor interface | ✅ | Requires custom UI | ## How Headless Mode Works[#](#how-headless-mode-works) The standard editor wires UI events (button clicks, drag interactions) to the Engine under the hood. In headless mode, you call the same Engine APIs yourself. ### Features Available in Headless Mode[#](#features-available-in-headless-mode) In headless mode, you keep access to the CE.SDK features while staying entirely within your app’s DOM lifecycle, such as: * Scene management * Asset manipulation * Rendering and export * Templates and dynamic content ### Requirements to Run the CreativeEngine in the Client[#](#requirements-to-run-the-creativeengine-in-the-client) CE.SDK’s Engine needs a **WebGL-capable environment**. When you ship a headless build in the browser: * Point the `baseURL` in your config at a publicly reachable asset directory (CDN or self-hosted) so the browser can load fonts and other Engine files—even when you install the npm package. * Only start the Engine **after the DOM is available** (for example, inside `useEffect`, `mounted`, or `DOMContentLoaded`). * **Dispose** of the Engine during tear down with `engine.dispose()` to release WebGL resources. * Ensure iframes or workers that boot the Engine expose `document` and a WebGL context. ## Set Up Headless Mode in a Web App[#](#set-up-headless-mode-in-a-web-app) 1. Install the Engine package: Terminal window ``` npm install @cesdk/engine ``` 2. Configure your license and asset location. The global CDN works for prototypes; production apps commonly self-host the asset bundle for faster loads. ``` const config = { license: '', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/assets'}; ``` 3. Start the Engine from client-side code and reuse the instance across interactions. The CreativeEngine doesn’t attach a canvas automatically. If you want a live preview, append `engine.element` onto your own layout. ## Quick Start: Initialize the Engine Headlessly[#](#quick-start-initialize-the-engine-headlessly) When you import `@cesdk/engine`, you get the same runtime that powers the full editor. Using the CreativeEngine instead of the CreativeEditor allows you to expose the Engine interface while skipping all UI bootstrapping that comes with the editor. ``` import CreativeEngine from '@cesdk/engine'; const config = { license: '', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/assets'}; let engine; export async function getEngine() { if (!engine) { engine = await CreativeEngine.init(config); } return engine;} ``` Once started, you can trigger Engine operations inside your app logic from: * Buttons * Keyboard shortcuts * Background tasks ## Example: Build and Export a Scene on a Single Click[#](#example-build-and-export-a-scene-on-a-single-click) The workflow below wires the Engine to a button, so the user automatically downloads an edited PNG when clicking on a button: 1. Copy paste the following code (adjust to your stack as needed): ``` // Grab the button elementconst downloadButton = document.querySelector('#download-headless'); // Register an async click handlerdownloadButton?.addEventListener('click', async () => { // Wait for the Engine const engine = await getEngine(); // Build a fresh scene const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); // Attach the page to the scene engine.block.appendChild(scene, page); // Add an image layer const imageBlock = engine.block.create('graphic'); engine.block.setShape(imageBlock, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); // Load an image fill from the CDN engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); // Set position and dimensions engine.block.setPosition(imageBlock, 100, 100); engine.block.setWidth(imageBlock, 300); engine.block.setHeight(imageBlock, 300); // Append the image to the page engine.block.appendChild(page, imageBlock); // Add a text layer const textBlock = engine.block.create('text'); // Set the text content engine.block.setString(textBlock, 'text/text', 'Hello from Headless Mode!'); // Set position and dimensions engine.block.setPosition(textBlock, 100, 450); engine.block.setWidth(textBlock, 600); // Append the text to the page engine.block.appendChild(page, textBlock); // Export the page as a PNG const exportResult = await engine.block.export(page, 'image/png'); // Normalize the result to a blob const blob = exportResult instanceof Blob ? exportResult : new Blob([exportResult], { type: 'image/png' }); triggerDownload(blob, 'headless-output.png');}); function triggerDownload(blob, filename) { // Build a temporary object URL const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = filename; document.body.appendChild(link); // Start the download on click link.click(); // Revoke the link and URL to release resources document.body.removeChild(link); URL.revokeObjectURL(url);} ``` 2. Add a clickable element with the matching ID somewhere in your page’s markup. For example: [ Plain HTML ](#tab-panel-120)[ Component-based setup ](#tab-panel-121) ``` ``` If you’re in a component-based setup (React, Vue, Svelte, etc.), include the same button inside the component’s render/template: ``` return (); ``` Once that element is in the DOM, the snippet’s querySelector(‘#download-headless’) finds it and wires up the click handler that runs the export. See full module ``` import CreativeEngine from '@cesdk/engine'; const config = { license: '', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/assets'}; let engine; export async function getEngine() { if (!engine) { engine = await CreativeEngine.init(config); } return engine;} const downloadButton = document.querySelector('#download-headless'); downloadButton?.addEventListener('click', async () => { const engine = await getEngine(); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); const imageBlock = engine.block.create('graphic'); engine.block.setShape(imageBlock, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setPosition(imageBlock, 100, 100); engine.block.setWidth(imageBlock, 300); engine.block.setHeight(imageBlock, 300); engine.block.appendChild(page, imageBlock); const textBlock = engine.block.create('text'); engine.block.setString(textBlock, 'text/text', 'Hello from Headless Mode!'); engine.block.setPosition(textBlock, 100, 450); engine.block.setWidth(textBlock, 600); engine.block.appendChild(page, textBlock); const exportResult = await engine.block.export(page, 'image/png'); const blob = exportResult instanceof Blob ? exportResult : new Blob([exportResult], { type: 'image/png' }); triggerDownload(blob, 'headless-output.png');}); function triggerDownload(blob, filename) { const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url);} ``` After you add the script to your app and run the dev server: 1. Click the `#download-headless` button in your interface. 2. The Engine assembles the scene in memory and exports it as a PNG. 3. The PNG downloads locally (or you can upload it to your backend). ![Greeting Card with image and text](/docs/cesdk/_astro/headless-ios-1-161.BSWd6XpK_tkQCw.png) ## Go Further[#](#go-further) Once you’re comfortable creating scenes and exporting results with code, explore: * Framework-specific headless quick starts for [React](react/get-started/new-project-without-ui-h1f42n/), [Next.js](nextjs/get-started/new-project-without-ui-k4f45q/), [Vue](vue/get-started/new-project-without-ui-n7f18t/), and [Angular](angular/get-started/angular/without-ui-c1234j/). Need a hybrid approach? [Engine interface guides](js/engine-interface-6fb7cf/) show how to combine headless logic with the standard editor UI. --- [Source](https:/img.ly/docs/cesdk/angular/colors/for-print/spot-c3a150) # Spot Colors ``` // Create a spot color with an RGB color approximation.engine.editor.setSpotColorRGB('Red', 1.0, 0.0, 0.0); // Create a spot color with a CMYK color approximation.// Add a CMYK approximation to the already defined 'Red' spot color.engine.editor.setSpotColorCMYK('Yellow', 0.0, 0.0, 1.0, 0.0);engine.editor.setSpotColorCMYK('Red', 0.0, 1.0, 1.0, 0.0); // List all defined spot colors.engine.editor.findAllSpotColors(); // ['Red', 'Yellow'] // Retrieve the RGB color approximation for a defined color.// The alpha value will always be 1.0.const rgbaSpotRed = engine.editor.getSpotColorRGBA('Red'); // Retrieve the CMYK color approximation for a defined color.const cmykSpotRed = engine.editor.getSpotColorCMYK('Red'); // Retrieving the approximation of an undefined spot color returns magenta.const cmykSpotUnknown = engine.editor.getSpotColorCMYK('Unknown'); // Returns CMYK values for magenta. // Removes a spot color from the list of defined spot colors.engine.editor.removeSpotColor('Red'); ``` In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/creative-sdk)’s CreativeEngine to manage spot colors in the `editor` API. ## Functions[#](#functions) ``` findAllSpotColors(): string[] ``` Queries the names of currently set spot colors previously set with `setSpotColorRGB`. * Returns The names of set spot colors. ``` getSpotColorRGBA(name: string): RGBA ``` Queries the RGB representation set for a spot color. If the value of the queried spot color has not been set yet, returns the default RGB representation (of magenta). The alpha value is always 1.0. * `name`: The name of a spot color. * Returns A result holding a float array of the four color components. ``` getSpotColorCMYK(name: string): CMYK ``` Queries the CMYK representation set for a spot color. If the value of the queried spot color has not been set yet, returns the default CMYK representation (of magenta). * `name`: The name of a spot color. * Returns A result holding a float array of the four color components. ``` setSpotColorRGB(name: string, r: number, g: number, b: number): void ``` Sets the RGB representation of a spot color. Use this function to both create a new spot color or update an existing spot color. * `name`: The name of a spot color. * `r`: The red color component in the range of 0 to 1. * `g`: The green color component in the range of 0 to 1. * `b`: The blue color component in the range of 0 to 1. ``` setSpotColorCMYK(name: string, c: number, m: number, y: number, k: number): void ``` Sets the CMYK representation of a spot color. Use this function to both create a new spot color or update an existing spot color. * `name`: The name of a spot color. * `c`: The cyan color component in the range of 0 to 1. * `m`: The magenta color component in the range of 0 to 1. * `y`: The yellow color component in the range of 0 to 1. * `k`: The key color component in the range of 0 to 1. ``` removeSpotColor(name: string): void ``` Removes a spot color from the list of set spot colors. * `name`: The name of a spot color. * Returns An empty result on success, an error otherwise. ## Full Code[#](#full-code) Here’s the full code: ``` // Create a spot color with an RGB color approximation.engine.editor.setSpotColorRGB('Red', 1.0, 0.0, 0.0); // Create a spot color with a CMYK color approximation.// Add a CMYK approximation to the already defined 'Red' spot color.engine.editor.setSpotColorCMYK('Yellow', 0.0, 0.0, 1.0, 0.0);engine.editor.setSpotColorCMYK('Red', 0.0, 1.0, 1.0, 0.0); // List all defined spot colors.engine.editor.findAllSpotColors(); // ['Red', 'Yellow'] // Retrieve the RGB color approximation for a defined color.// The alpha value will always be 1.0.const rgbaSpotRed = engine.editor.getSpotColorRGBA('Red'); // Retrieve the CMYK color approximation for a defined color.const cmykSpotRed = engine.editor.getSpotColorCMYK('Red'); // Retrieving the approximation of an undefined spot color returns magenta.const cmykSpotUnknown = engine.editor.getSpotColorCMYK('Unknown'); // Returns CMYK values for magenta. // Removes a spot color from the list of defined spot colors.engine.editor.removeSpotColor('Red'); ``` --- [Source](https:/img.ly/docs/cesdk/angular/animation/create/text-d6f4aa) # Text Animations Create engaging text animations that reveal content line by line, word by word, or character by character with granular control over timing and overlap. ![Text animations demonstrating different writing styles and overlap configurations](/docs/cesdk/_astro/browser.hero.CZGwKlEI_GGXSO.webp) 10 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-animation-create-text-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-animation-create-text-browser) Text animations in CE.SDK allow you to animate text blocks with granular control over how the text appears. Unlike standard block animations, text animations support writing styles that determine whether animation applies to the entire text, line by line, word by word, or character by character. ``` import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import packageJson from './package.json';import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Text Animations Guide * * Demonstrates text-specific animation features in CE.SDK: * - Creating and applying animations to text blocks * - Text animation writing styles (line, word, character) * - Segment overlap configuration * - Combining with easing and duration properties */class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Enable video features for animation playback cesdk.feature.enable('ly.img.video'); cesdk.feature.enable('ly.img.timeline'); cesdk.feature.enable('ly.img.playback'); // Load assets and create a video scene (required for animations) await cesdk.addDefaultAssetSources(); await cesdk.addDemoAssetSources({ sceneMode: 'Video', withUploadAssetSources: true }); await cesdk.createVideoScene(); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Set page dimensions before calculating grid layout engine.block.setWidth(page, 1920); engine.block.setHeight(page, 1080); // Set white background color for the page // First check if page supports fill, if not or doesn't have one, create one if (!engine.block.supportsFill(page) || !engine.block.getFill(page)) { const fill = engine.block.createFill('color'); engine.block.setFill(page, fill); } engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Calculate responsive grid layout for demonstrations const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Create a text block and animation // Animations are created separately and then attached to blocks const text1 = engine.block.create('text'); engine.block.setWidth(text1, blockWidth); engine.block.setHeight(text1, blockHeight); engine.block.appendChild(page, text1); const pos1 = getPosition(0); engine.block.setPositionX(text1, pos1.x); engine.block.setPositionY(text1, pos1.y); engine.block.replaceText(text1, 'Creating\nText\nAnimations'); engine.block.setFloat(text1, 'text/fontSize', 48); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text1, 'text/verticalAlignment', 'Center'); // Create an animation instance with the 'baseline' type const animation1 = engine.block.createAnimation('baseline'); // Apply the animation to the text block's entrance engine.block.setInAnimation(text1, animation1); // Set basic animation properties engine.block.setDuration(animation1, 2.0); // Writing Style: Line-by-line animation // Text animates one line at a time from top to bottom const text2 = engine.block.create('text'); engine.block.setWidth(text2, blockWidth); engine.block.setHeight(text2, blockHeight); engine.block.appendChild(page, text2); const pos2 = getPosition(1); engine.block.setPositionX(text2, pos2.x); engine.block.setPositionY(text2, pos2.y); engine.block.replaceText(text2, 'Line by line\nanimation\nfor text'); engine.block.setFloat(text2, 'text/fontSize', 42); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text2, 'text/verticalAlignment', 'Center'); const animation2 = engine.block.createAnimation('baseline'); engine.block.setInAnimation(text2, animation2); engine.block.setDuration(animation2, 2.0); // Set writing style to 'Line' for line-by-line animation engine.block.setEnum(animation2, 'textAnimationWritingStyle', 'Line'); engine.block.setEnum(animation2, 'animationEasing', 'EaseOut'); // Writing Style: Word-by-word animation // Text animates one word at a time in reading order const text3 = engine.block.create('text'); engine.block.setWidth(text3, blockWidth); engine.block.setHeight(text3, blockHeight); engine.block.appendChild(page, text3); const pos3 = getPosition(2); engine.block.setPositionX(text3, pos3.x); engine.block.setPositionY(text3, pos3.y); engine.block.replaceText(text3, 'Animate word by word for emphasis'); engine.block.setFloat(text3, 'text/fontSize', 42); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text3, 'text/verticalAlignment', 'Center'); const animation3 = engine.block.createAnimation('baseline'); engine.block.setInAnimation(text3, animation3); engine.block.setDuration(animation3, 2.5); // Set writing style to 'Word' for word-by-word animation engine.block.setEnum(animation3, 'textAnimationWritingStyle', 'Word'); engine.block.setEnum(animation3, 'animationEasing', 'EaseOut'); // Writing Style: Character-by-character animation // Text animates one character at a time (typewriter effect) const text4 = engine.block.create('text'); engine.block.setWidth(text4, blockWidth); engine.block.setHeight(text4, blockHeight); engine.block.appendChild(page, text4); const pos4 = getPosition(3); engine.block.setPositionX(text4, pos4.x); engine.block.setPositionY(text4, pos4.y); engine.block.replaceText( text4, 'Character by character for typewriter effect' ); engine.block.setFloat(text4, 'text/fontSize', 38); engine.block.setEnum(text4, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text4, 'text/verticalAlignment', 'Center'); const animation4 = engine.block.createAnimation('baseline'); engine.block.setInAnimation(text4, animation4); engine.block.setDuration(animation4, 3.0); // Set writing style to 'Character' for character-by-character animation engine.block.setEnum(animation4, 'textAnimationWritingStyle', 'Character'); engine.block.setEnum(animation4, 'animationEasing', 'Linear'); // Segment Overlap: Sequential animation (overlap = 0) // Each segment completes before the next begins const text5 = engine.block.create('text'); engine.block.setWidth(text5, blockWidth); engine.block.setHeight(text5, blockHeight); engine.block.appendChild(page, text5); const pos5 = getPosition(4); engine.block.setPositionX(text5, pos5.x); engine.block.setPositionY(text5, pos5.y); engine.block.replaceText(text5, 'Sequential animation with zero overlap'); engine.block.setFloat(text5, 'text/fontSize', 40); engine.block.setEnum(text5, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text5, 'text/verticalAlignment', 'Center'); const animation5 = engine.block.createAnimation('pan'); engine.block.setInAnimation(text5, animation5); engine.block.setDuration(animation5, 2.0); engine.block.setEnum(animation5, 'textAnimationWritingStyle', 'Word'); // Set overlap to 0 for sequential animation engine.block.setFloat(animation5, 'textAnimationOverlap', 0.0); engine.block.setEnum(animation5, 'animationEasing', 'EaseOut'); // Segment Overlap: Cascading animation (overlap = 0.4) // Segments overlap partially for smooth flow const text6 = engine.block.create('text'); engine.block.setWidth(text6, blockWidth); engine.block.setHeight(text6, blockHeight); engine.block.appendChild(page, text6); const pos6 = getPosition(5); engine.block.setPositionX(text6, pos6.x); engine.block.setPositionY(text6, pos6.y); engine.block.replaceText(text6, 'Cascading animation with partial overlap'); engine.block.setFloat(text6, 'text/fontSize', 40); engine.block.setEnum(text6, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text6, 'text/verticalAlignment', 'Center'); const animation6 = engine.block.createAnimation('pan'); engine.block.setInAnimation(text6, animation6); engine.block.setDuration(animation6, 1.5); engine.block.setEnum(animation6, 'textAnimationWritingStyle', 'Word'); // Set overlap to 0.4 for cascading effect engine.block.setFloat(animation6, 'textAnimationOverlap', 0.4); engine.block.setEnum(animation6, 'animationEasing', 'EaseOut'); // Combining animation properties: Duration and Easing // Duration controls overall timing, easing controls acceleration // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); // Query available writing style options const writingStyleOptions = engine.block.getEnumValues( 'textAnimationWritingStyle' ); // eslint-disable-next-line no-console console.log('Available writing style options:', writingStyleOptions); // Start playback to see animations engine.block.setPlaying(page, true); engine.block.setLooping(page, true); }} export default Example; ``` This guide covers text-specific animation properties like writing styles and segment overlap, enabling dynamic and engaging text presentations in your designs. ## Text Animation Fundamentals[#](#text-animation-fundamentals) We create animations by first creating an animation instance, then attaching it to a text block. The animation block defines how the text will animate, while the text block contains the content and styling. ``` // Create an animation instance with the 'baseline' typeconst animation1 = engine.block.createAnimation('baseline'); // Apply the animation to the text block's entranceengine.block.setInAnimation(text1, animation1); // Set basic animation propertiesengine.block.setDuration(animation1, 2.0); ``` Animations are created separately using `engine.block.createAnimation()` with an animation type like ‘baseline’, ‘fade’, or ‘pan’. We then attach the animation to the text block’s entrance using `engine.block.setInAnimation()`. The animation duration is set with `engine.block.setDuration()`. ## Writing Style Control[#](#writing-style-control) Text animations support different granularity levels through the `textAnimationWritingStyle` property. This controls whether the animation applies to the entire text at once, or breaks it into segments (lines, words, or characters). We can query available options using `engine.block.getEnumValues('textAnimationWritingStyle')`. ### Line-by-Line Animation[#](#line-by-line-animation) The `Line` writing style animates text one line at a time from top to bottom. Each line appears sequentially, creating a structured reveal effect. ``` const animation2 = engine.block.createAnimation('baseline');engine.block.setInAnimation(text2, animation2);engine.block.setDuration(animation2, 2.0); // Set writing style to 'Line' for line-by-line animationengine.block.setEnum(animation2, 'textAnimationWritingStyle', 'Line');engine.block.setEnum(animation2, 'animationEasing', 'EaseOut'); ``` We use `engine.block.setEnum()` to set the writing style to `'Line'`. This is ideal for revealing multi-line text in a clear, organized manner. ### Word-by-Word Animation[#](#word-by-word-animation) The `Word` writing style animates text one word at a time in reading order. This creates emphasis and draws attention to individual words. ``` const animation3 = engine.block.createAnimation('baseline');engine.block.setInAnimation(text3, animation3);engine.block.setDuration(animation3, 2.5); // Set writing style to 'Word' for word-by-word animationengine.block.setEnum(animation3, 'textAnimationWritingStyle', 'Word');engine.block.setEnum(animation3, 'animationEasing', 'EaseOut'); ``` Setting the writing style to `'Word'` is perfect for creating dynamic, engaging text reveals that emphasize key phrases. ### Character-by-Character Animation[#](#character-by-character-animation) The `Character` writing style animates text one character at a time, creating a classic typewriter effect. This is the most granular animation option. ``` const animation4 = engine.block.createAnimation('baseline');engine.block.setInAnimation(text4, animation4);engine.block.setDuration(animation4, 3.0); // Set writing style to 'Character' for character-by-character animationengine.block.setEnum(animation4, 'textAnimationWritingStyle', 'Character');engine.block.setEnum(animation4, 'animationEasing', 'Linear'); ``` The `'Character'` writing style is ideal for typewriter effects and when you want maximum control over the animation timing. ## Segment Overlap Configuration[#](#segment-overlap-configuration) The `textAnimationOverlap` property controls timing between animation segments. A value of 0 means segments animate sequentially, while values between 0 and 1 create cascading effects where segments overlap partially. We use `engine.block.setFloat()` to set the overlap value. ### Sequential Animation (Overlap = 0)[#](#sequential-animation-overlap--0) When overlap is set to 0, each segment completes before the next begins, creating a clear, structured reveal effect. ``` // Set overlap to 0 for sequential animationengine.block.setFloat(animation5, 'textAnimationOverlap', 0.0);engine.block.setEnum(animation5, 'animationEasing', 'EaseOut'); ``` Sequential animation ensures each text segment fully appears before the next one starts, making it perfect for emphasis and readability. ### Cascading Animation (Overlap = 0.4)[#](#cascading-animation-overlap--04) When overlap is set to a value between 0 and 1, segments animate in a cascading pattern, creating a smooth, flowing effect as they blend together. ``` // Set overlap to 0.4 for cascading effectengine.block.setFloat(animation6, 'textAnimationOverlap', 0.4);engine.block.setEnum(animation6, 'animationEasing', 'EaseOut'); ``` Cascading animation with partial overlap creates dynamic, fluid text reveals that feel natural and engaging. ## Combining with Animation Properties[#](#combining-with-animation-properties) Text animations can be enhanced with standard animation properties like duration and easing. Duration controls the overall timing of the animation, while easing controls the acceleration curve. ``` // Combining animation properties: Duration and Easing// Duration controls overall timing, easing controls acceleration// Query available easing optionsconst easingOptions = engine.block.getEnumValues('animationEasing');// eslint-disable-next-line no-consoleconsole.log('Available easing options:', easingOptions); // Query available writing style optionsconst writingStyleOptions = engine.block.getEnumValues( 'textAnimationWritingStyle');// eslint-disable-next-line no-consoleconsole.log('Available writing style options:', writingStyleOptions); ``` We use `engine.block.setEnum()` to set the easing function (‘EaseIn’, ‘EaseOut’, ‘EaseInOut’, ‘Linear’). We can query available easing options using `engine.block.getEnumValues('animationEasing')`. Combining writing style, overlap, duration, and easing gives us complete control over how text animates. ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | `createAnimation(type)` | Create a new animation instance | | `setInAnimation(block, animation)` | Apply animation to block entrance | | `setLoopAnimation(block, animation)` | Apply looping animation to block | | `setOutAnimation(block, animation)` | Apply animation to block exit | | `getInAnimation(block)` | Get the entrance animation of a block | | `getLoopAnimation(block)` | Get the looping animation of a block | | `getOutAnimation(block)` | Get the exit animation of a block | | `setDuration(animation, seconds)` | Set animation duration in seconds | | `getDuration(animation)` | Get animation duration | | `setEnum(animation, property, value)` | Set enum property (writing style, easing) | | `getEnum(animation, property)` | Get enum property value | | `setFloat(animation, property, value)` | Set float property (overlap value) | | `getFloat(animation, property)` | Get float property value | | `getEnumValues(property)` | Get available enum options for a property | | `supportsAnimation(block)` | Check if block supports animations | | `replaceText(block, text)` | Set text content of a text block | | `setPlaying(block, enabled)` | Start or stop playback | | `setLooping(block, enabled)` | Enable or disable looping playback | ## Next Steps[#](#next-steps) * [Base Animations](angular/animation/create/base-0fc5c4/) — Create animations for non-text blocks * [Animation Overview](angular/animation/overview-6a2ef2/) — Understand animation concepts and capabilities --- [Source](https:/img.ly/docs/cesdk/angular/animation/create/base-0fc5c4) # Base Animations ``` import CreativeEngine from '@cesdk/engine'; const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: '/assets/' })}; CreativeEngine.init(config).then(async (engine) => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.createVideo(); const page = engine.block.create('page'); engine.block.setWidth(page, 1920); engine.block.setHeight(page, 1080); engine.block.appendChild(scene, page); engine.editor.setSetting('clearColor', { r: 0.2, g: 0.2, b: 0.2, a: 1 }); const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://cdn.img.ly/assets/v4/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_star.svg' ); engine.block.setFill(graphic, imageFill); engine.block.setShape(graphic, engine.block.createShape('rect')); engine.block.setWidth(graphic, 500); engine.block.setHeight(graphic, 500); engine.block.setPositionX(graphic, (1920 - 500) / 2); engine.block.setPositionY(graphic, (1080 - 500) / 2); engine.block.appendChild(page, graphic); engine.scene.zoomToBlock(page, 60, 60, 60, 60); if (!engine.block.supportsAnimation(graphic)) { return; } const slideInAnimation = engine.block.createAnimation('slide'); const breathingLoopAnimation = engine.block.createAnimation('breathing_loop'); const fadeOutAnimation = engine.block.createAnimation('fade'); engine.block.setInAnimation(graphic, slideInAnimation); engine.block.setLoopAnimation(graphic, breathingLoopAnimation); engine.block.setOutAnimation(graphic, fadeOutAnimation); const animation = engine.block.getLoopAnimation(graphic); const animationType = engine.block.getType(animation); const squeezeLoopAnimation = engine.block.createAnimation('squeeze_loop'); engine.block.destroy(engine.block.getLoopAnimation(graphic)); engine.block.setLoopAnimation(graphic, squeezeLoopAnimation); /* The following line would also destroy all currently attached animations */ // engine.block.destroy(graphic); const allAnimationProperties = engine.block.findAllProperties(slideInAnimation); engine.block.setFloat( slideInAnimation, 'animation/slide/direction', 0.5 * Math.PI ); engine.block.setDuration(slideInAnimation, 0.6); engine.block.setEnum(slideInAnimation, 'animationEasing', 'EaseOut'); console.log( 'Available easing options:', engine.block.getEnumValues('animationEasing') ); const text = engine.block.create('text'); const textAnimation = engine.block.createAnimation('baseline'); engine.block.setInAnimation(text, textAnimation); engine.block.appendChild(page, text); engine.block.setPositionX(text, 100); engine.block.setPositionY(text, 100); engine.block.setWidthMode(text, 'Auto'); engine.block.setHeightMode(text, 'Auto'); engine.block.replaceText( text, 'You can animate text\nline by line,\nword by word,\nor character by character\nwith CE.SDK' ); engine.block.setEnum(textAnimation, 'textAnimationWritingStyle', 'Word'); engine.block.setDuration(textAnimation, 2.0); engine.block.setEnum(textAnimation, 'animationEasing', 'EaseOut'); const text2 = engine.block.create('text'); const textAnimation2 = engine.block.createAnimation('pan'); engine.block.setInAnimation(text2, textAnimation2); engine.block.appendChild(page, text2); engine.block.setPositionX(text2, 100); engine.block.setPositionY(text2, 500); engine.block.setWidth(text2, 500); engine.block.setHeightMode(text2, 'Auto'); engine.block.replaceText( text2, 'You can use the textAnimationOverlap property to control the overlap between text animation segments.' ); engine.block.setFloat(textAnimation2, 'textAnimationOverlap', 0.4); engine.block.setDuration(textAnimation2, 1.0); engine.block.setEnum(textAnimation2, 'animationEasing', 'EaseOut'); engine.block.setPlaying(page, true); engine.block.setLooping(page, true);}); ``` ```
``` CreativeEditor SDK supports many different types of configurable animations for animating the appearance of design blocks in video scenes. Similarly to blocks, each animation object has a numeric id which can be used to query and [modify its properties](angular/concepts/blocks-90241e/) . ## Accessing Animation APIs[#](#accessing-animation-apis) In order to query whether a block supports animations, you should call the `supportsAnimation(id: number): boolean` API. ``` if (!engine.block.supportsAnimation(graphic)) { return;} ``` ``` const slideInAnimation = engine.block.createAnimation('slide');const breathingLoopAnimation = engine.block.createAnimation('breathing_loop');const fadeOutAnimation = engine.block.createAnimation('fade'); ``` ## Assigning Animations[#](#assigning-animations) In order to assign an _In_ animation to the block, call the `setInAnimation(id: number, animation: number): void` API. ``` engine.block.setInAnimation(graphic, slideInAnimation); ``` In order to assign a _Loop_ animation to the block, call the `setLoopAnimation(id: number, animation: number): void` API. ``` engine.block.setLoopAnimation(graphic, breathingLoopAnimation); ``` In order to assign an _Out_ animation to the block, call the `setOutAnimation(id: number, animation: number): void` API. ``` engine.block.setOutAnimation(graphic, fadeOutAnimation); ``` To query the current animation ids of a design block, call the `getInAnimation(id: number): number`, `getLoopAnimation(id: number): number` or `getOutAnimation(id: number): number` API. You can now pass this id into other APIs in order to query more information about the animation, e.g. its type via the `getType(id: number): string` API. ``` const animation = engine.block.getLoopAnimation(graphic);const animationType = engine.block.getType(animation); ``` When replacing the animation of a design block, remember to destroy the previous animation object if you don’t intend to use it any further. Animation objects that are not attached to a design block will never be automatically destroyed. Destroying a design block will also destroy all of its attached animations. ``` const squeezeLoopAnimation = engine.block.createAnimation('squeeze_loop');engine.block.destroy(engine.block.getLoopAnimation(graphic));engine.block.setLoopAnimation(graphic, squeezeLoopAnimation);/* The following line would also destroy all currently attached animations */// engine.block.destroy(graphic); ``` ## Animation Properties[#](#animation-properties) Just like design blocks, animations with different types have different properties that you can query and modify via the API. Use `findAllProperties(id: number): string[]` in order to get a list of all properties of a given animation. For the slide animation in this example, the call would return `['name', 'animation/slide/direction', 'animationEasing', 'includedInExport', 'playback/duration', 'type', 'uuid']`. Please refer to the [API docs](angular/animation/types-4e5f41/) for a complete list of all available properties for each type of animation. ``` const allAnimationProperties = engine.block.findAllProperties(slideInAnimation); ``` Once we know the property keys of an animation, we can use the same APIs as for design blocks in order to modify those properties. For example, we can use `setFloat(id: number, property: string, value: number): void` in order to change the direction of the slide animation to make our block slide in from the top. ``` engine.block.setFloat( slideInAnimation, 'animation/slide/direction', 0.5 * Math.PI); ``` All animations have a duration. For _In_ and _Out_ animations, the duration defines the total length of the animation as described above. For _Loop_ animations, the duration defines the length of each loop cycle. We can use the `setDuration(id: number, value: number): void` API in order to change the animation duration. Note that changing the duration of an _In_ animation will automatically adjust the duration of the _Out_ animation (and vice versa) in order to avoid overlaps between the two animations. ``` engine.block.setDuration(slideInAnimation, 0.6); ``` Some animations allow you to configure their easing behavior by choosing from a list of common easing curves. The easing controls the acceleration throughout the animation. We can use the `setEnum(id: number, value: number): void` API in order to change the easing curve. Call `engine.block.getEnumValues('animationEasing')` in order to get a list of currently supported easing options. In this example, we set the easing to `EaseOut` so that the animation starts fast and then slows down towards the end. An `EaseIn` easing would start slow and then speed up, while `EaseInOut` starts slow, speeds up towards the middle of the animation and then slows down towards the end again. ``` engine.block.setEnum(slideInAnimation, 'animationEasing', 'EaseOut');console.log( 'Available easing options:', engine.block.getEnumValues('animationEasing')); ``` ## Full Code[#](#full-code) Here’s the full code: ``` import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/index.js'; const config = { // license: 'YOUR_CESDK_LICENSE_KEY', userId: 'guides-user', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-engine/${CreativeEngine.version}/assets`,}; CreativeEngine.init(config).then(async engine => { document.getElementById('cesdk_container').append(engine.element); const scene = engine.scene.createVideo(); const page = engine.block.create('page'); engine.block.setWidth(page, 1920); engine.block.setHeight(page, 1080); engine.block.appendChild(scene, page); engine.editor.setSettingColor('clearColor', { r: 0.2, g: 0.2, b: 0.2, a: 1 }); const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://cdn.img.ly/assets/v4/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_star.svg', ); engine.block.setFill(graphic, imageFill); engine.block.setShape(graphic, engine.block.createShape('rect')); engine.block.setWidth(graphic, 500); engine.block.setHeight(graphic, 500); engine.block.setPositionX(graphic, (1920 - 500) / 2); engine.block.setPositionY(graphic, (1080 - 500) / 2); engine.block.appendChild(page, graphic); engine.scene.zoomToBlock(page, 60, 60, 60, 60); if (!engine.block.supportsAnimation(graphic)) { return; } const slideInAnimation = engine.block.createAnimation('slide'); const breathingLoopAnimation = engine.block.createAnimation('breathing_loop'); const fadeOutAnimation = engine.block.createAnimation('fade'); engine.block.setInAnimation(graphic, slideInAnimation); engine.block.setLoopAnimation(graphic, breathingLoopAnimation); engine.block.setOutAnimation(graphic, fadeOutAnimation); const animation = engine.block.getLoopAnimation(graphic); const animationType = engine.block.getType(animation); const squeezeLoopAnimation = engine.block.createAnimation('squeeze_loop'); engine.block.destroy(engine.block.getLoopAnimation(graphic)); engine.block.setLoopAnimation(graphic, squeezeLoopAnimation); /* The following line would also destroy all currently attached animations */ // engine.block.destroy(graphic); const allAnimationProperties = engine.block.findAllProperties(slideInAnimation); engine.block.setFloat( slideInAnimation, 'animation/slide/direction', 0.5 * Math.PI, ); engine.block.setDuration(slideInAnimation, 0.6); engine.block.setEnum(slideInAnimation, 'animationEasing', 'EaseOut'); console.log( 'Available easing options:', engine.block.getEnumValues('animationEasing'), ); engine.block.setPlaying(page, true); engine.block.setLooping(page, true);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/guides/export-save-publish/export/audio-68de25) # For Audio Processing Export audio from pages, video blocks, audio blocks, and tracks to WAV or MP4 format for external processing, transcription, or analysis. 8 mins estimated time Live Demo[ Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[ StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-export-audio-browser)[ GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-export-audio-browser) The `exportAudio` API allows you to extract audio from any block that contains audio content. This is particularly useful when integrating with external audio processing services like speech-to-text transcription, audio enhancement, or music analysis platforms. Audio can be exported from multiple block types: * **Page blocks** - Export the complete mixed audio timeline * **Video blocks** - Extract audio tracks from videos * **Audio blocks** - Export standalone audio content * **Track blocks** - Export audio from specific timeline tracks ## Export Audio[#](#export-audio) Export audio from any block using the `exportAudio` API: ``` const page = cesdk.engine.scene.getCurrentPage(); const audioBlob = await cesdk.engine.block.exportAudio(page, { mimeType: 'audio/wav', sampleRate: 48000, numberOfChannels: 2}); ``` ### Export Options[#](#export-options) Configure your audio export with these options: * **`mimeType`** - `'audio/wav'` (uncompressed) or `'audio/mp4'` (compressed AAC) * **`sampleRate`** - Audio quality in Hz (default: 48000) * **`numberOfChannels`** - 1 for mono or 2 for stereo * **`timeOffset`** - Start time in seconds (default: 0) * **`duration`** - Length to export in seconds (0 = entire duration) * **`onProgress`** - Callback function receiving `(rendered, encoded, total)` for progress tracking ## Find Audio Sources[#](#find-audio-sources) To find blocks with audio in your scene: ``` // Find audio blocksconst audioBlocks = cesdk.engine.block.findByType('audio'); // Find video blocks with audioconst videoFills = cesdk.engine.block.findByType('//ly.img.ubq/fill/video');const videosWithAudio = videoFills.filter(block => { try { return cesdk.engine.block.getAudioInfoFromVideo(block).length > 0; } catch { return false; }}); ``` ## Working with Multi-Track Video Audio[#](#working-with-multi-track-video-audio) Videos can contain multiple audio tracks (e.g., different languages). CE.SDK provides APIs to inspect and extract specific tracks. ### Check audio track count[#](#check-audio-track-count) ``` const videoFillId = cesdk.engine.block.findByType('//ly.img.ubq/fill/video')[0]; const trackCount = cesdk.engine.block.getAudioTrackCountFromVideo(videoFillId);console.log(`Video has ${trackCount} audio track(s)`); ``` ### Get track information[#](#get-track-information) ``` const audioTracks = cesdk.engine.block.getAudioInfoFromVideo(videoFillId); audioTracks.forEach((track, index) => { console.log(`Track ${index}:`, { channels: track.channels, // 1=mono, 2=stereo sampleRate: track.sampleRate, // Sample rate in Hz language: track.language, // e.g., "en", "es" label: track.label // Track description });}); ``` ### Extract a specific track[#](#extract-a-specific-track) ``` // Create audio block from track 0 (first track)const audioBlockId = cesdk.engine.block.createAudioFromVideo(videoFillId, 0); // Export just this track's audioconst trackAudioBlob = await cesdk.engine.block.exportAudio(audioBlockId, { mimeType: 'audio/wav'}); ``` ### Extract all tracks[#](#extract-all-tracks) ``` // Create audio blocks for all tracksconst audioBlockIds = cesdk.engine.block.createAudiosFromVideo(videoFillId); // Export each trackfor (let i = 0; i < audioBlockIds.length; i++) { const trackBlob = await cesdk.engine.block.exportAudio(audioBlockIds[i]); console.log(`Track ${i}: ${trackBlob.size} bytes`);} ``` ## Complete Workflow: Audio to Captions[#](#complete-workflow-audio-to-captions) A common workflow is to export audio, send it to a transcription service, and use the returned captions in your scene. ### Step 1: Export Audio[#](#step-1-export-audio) ``` const page = cesdk.engine.scene.getCurrentPage(); const audioBlob = await cesdk.engine.block.exportAudio(page, { mimeType: 'audio/wav', sampleRate: 48000, numberOfChannels: 2}); ``` ### Step 2: Send to Transcription Service[#](#step-2-send-to-transcription-service) Send the audio to a service that returns SubRip (SRT) format captions: ``` async function transcribeAudio(audioBlob) { const formData = new FormData(); formData.append('audio', audioBlob, 'audio.wav'); formData.append('format', 'srt'); const response = await fetch('https://api.transcription-service.com/transcribe', { method: 'POST', headers: { 'Authorization': 'Bearer YOUR_API_KEY' }, body: formData }); // Returns SRT format text return await response.text();} const srtContent = await transcribeAudio(audioBlob); ``` ### Step 3: Import Captions from SRT[#](#step-3-import-captions-from-srt) Use the built-in API to create caption blocks from the SRT response: ``` // Create a file from the SRT textconst srtFile = new File([srtContent], 'captions.srt', { type: 'application/x-subrip'}); // Create object URL and import captionsconst uri = URL.createObjectURL(srtFile);const captions = await cesdk.engine.block.createCaptionsFromURI(uri);URL.revokeObjectURL(uri); // Add captions to pageconst page = cesdk.engine.scene.getCurrentPage();const captionTrack = cesdk.engine.block.create('//ly.img.ubq/captionTrack'); captions.forEach(caption => { cesdk.engine.block.appendChild(captionTrack, caption);}); cesdk.engine.block.appendChild(page, captionTrack); // Center the first caption as a reference pointcesdk.engine.block.alignHorizontally([captions[0]], 'Center');cesdk.engine.block.alignVertically([captions[0]], 'Center'); ``` ### Other Processing Services[#](#other-processing-services) Audio export also supports these workflows: * **Audio enhancement** - Noise removal, normalization * **Music analysis** - Tempo, key, beat detection * **Language detection** - Identify spoken language * **Speaker diarization** - Identify who spoke when ## Next Steps[#](#next-steps) Now that you understand audio export, explore related audio and video features: * [Add Captions](angular/edit-video/add-captions-f67565/) - Learn how to create and sync caption blocks with audio content * [Control Audio and Video](angular/create-video/control-daba54/) - Master time offset, duration, and playback controls for audio blocks * [Trim Video Clips](angular/edit-video/trim-4f688b/) - Apply the same trim concepts to isolate audio segments --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/widthmodevalues) # Variable: WidthModeValues ``` const WidthModeValues: readonly ["Absolute", "Percent", "Auto"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/touchpinchactionvalues) # Variable: TouchPinchActionValues ``` const TouchPinchActionValues: readonly ["None", "Zoom", "Scale"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/touchrotateactionvalues) # Variable: TouchRotateActionValues ``` const TouchRotateActionValues: readonly ["None", "Rotate"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/texthorizontalalignmentvalues) # Variable: TextHorizontalAlignmentValues ``` const TextHorizontalAlignmentValues: readonly ["Left", "Right", "Center"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/textverticalalignmentvalues) # Variable: TextVerticalAlignmentValues ``` const TextVerticalAlignmentValues: readonly ["Top", "Bottom", "Center"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/textanimationwritingstylevalues) # Variable: TextAnimationWritingStyleValues ``` const TextAnimationWritingStyleValues: readonly ["Block", "Line", "Character", "Word"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/strokestylevalues) # Variable: StrokeStyleValues ``` const StrokeStyleValues: readonly ["Dashed", "DashedRound", "Dotted", "LongDashed", "LongDashedRound", "Solid"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/strokepositionvalues) # Variable: StrokePositionValues ``` const StrokePositionValues: readonly ["Center", "Inner", "Outer"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/strokecornergeometryvalues) # Variable: StrokeCornerGeometryValues ``` const StrokeCornerGeometryValues: readonly ["Bevel", "Miter", "Round"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/shape_types) # Variable: SHAPE\_TYPES ``` const SHAPE_TYPES: readonly ["rect", "line", "ellipse", "polygon", "star", "vector_path"]; ``` The shorthand block type IDs for the shape blocks. These are the IDs used to create new shapes using `cesdk.engine.block.createShape(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/scenemodevalues) # Variable: SceneModeValues ``` const SceneModeValues: readonly ["Design", "Video"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/scenelayoutvalues) # Variable: SceneLayoutValues ``` const SceneLayoutValues: readonly ["Free", "VerticalStack", "HorizontalStack", "DepthStack"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/scenedesignunitvalues) # Variable: SceneDesignUnitValues ``` const SceneDesignUnitValues: readonly ["Pixel", "Millimeter", "Inch"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/positionymodevalues) # Variable: PositionYModeValues ``` const PositionYModeValues: readonly ["Absolute", "Percent", "Auto"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/positionxmodevalues) # Variable: PositionXModeValues ``` const PositionXModeValues: readonly ["Absolute", "Percent", "Auto"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/loglevel) # Variable: LogLevel ``` LogLevel: object; ``` Provides a set of predefined log levels for the Creative Editor SDK. The `LogLevel` object contains constants representing different severity levels for logging messages. These levels can be used to categorize log messages based on their importance and urgency. ## Type declaration[#](#type-declaration) | Name | Type | | --- | --- | | `Info` | `"Info"` | | `Warning` | `"Warning"` | | `Error` | `"Error"` | ## Deprecated[#](#deprecated) Specifying log levels via `LogLevel.Info` has been deprecated. Please use the desired LogLevel string directly. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/heightmodevalues) # Variable: HeightModeValues ``` const HeightModeValues: readonly ["Absolute", "Percent", "Auto"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/mimetype) # Variable: MimeType ``` const MimeType: object; ``` Represents the MIME types used in the editor. ## Type declaration[#](#type-declaration) | Name | Type | | --- | --- | | `Png` | `"image/png"` | | `Jpeg` | `"image/jpeg"` | | `WebP` | `"image/webp"` | | `Tga` | `"image/x-tga"` | | `Wav` | `"audio/wav"` | | `Mp4Audio` | `"audio/mp4"` | | `Mp4` | `"video/mp4"` | | `QuickTime` | `"video/quicktime"` | | `Binary` | `"application/octet-stream"` | | `Pdf` | `"application/pdf"` | | `Zip` | `"application/zip"` | ## Deprecated[#](#deprecated) Use the `MimeType` string literal types instead. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/fillpixelstreamorientationvalues) # Variable: FillPixelStreamOrientationValues ``` const FillPixelStreamOrientationValues: readonly ["Up", "Down", "Left", "Right", "UpMirrored", "DownMirrored", "LeftMirrored", "RightMirrored"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/fill_types) # Variable: FILL\_TYPES ``` const FILL_TYPES: readonly ["color", "gradient/linear", "gradient/radial", "gradient/conical", "image", "video", "pixelStream"]; ``` The shorthand block type IDs for the fill blocks. These are the IDs used to create new fills using `cesdk.engine.block.createFill(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/effect_types) # Variable: EFFECT\_TYPES ``` const EFFECT_TYPES: readonly ["adjustments", "cross_cut", "dot_pattern", "duotone_filter", "extrude_blur", "glow", "green_screen", "half_tone", "linocut", "liquid", "lut_filter", "mirror", "outliner", "pixelize", "posterize", "radial_pixel", "recolor", "sharpie", "shifter", "tilt_shift", "tv_glitch", "vignette"]; ``` The shorthand block type IDs for the effect blocks. These are the IDs used to create new effects using `cesdk.engine.block.createEffect(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/doubleclickselectionmodevalues) # Variable: DoubleClickSelectionModeValues ``` const DoubleClickSelectionModeValues: readonly ["Direct", "Hierarchical"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/design_block_types) # Variable: DESIGN\_BLOCK\_TYPES ``` const DESIGN_BLOCK_TYPES: readonly ["scene", "stack", "camera", "page", "graphic", "audio", "text", "group", "cutout", "track", "caption", "captionTrack"]; ``` 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)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/cutouttypevalues) # Variable: CutoutTypeValues ``` const CutoutTypeValues: readonly ["Solid", "Dashed"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/contentfillmodevalues) # Variable: ContentFillModeValues ``` const ContentFillModeValues: readonly ["Crop", "Cover", "Contain"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/captionverticalalignmentvalues) # Variable: CaptionVerticalAlignmentValues ``` const CaptionVerticalAlignmentValues: readonly ["Top", "Bottom", "Center"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/captionhorizontalalignmentvalues) # Variable: CaptionHorizontalAlignmentValues ``` const CaptionHorizontalAlignmentValues: readonly ["Left", "Right", "Center"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/cameraclampingovershootmodevalues) # Variable: CameraClampingOvershootModeValues ``` const CameraClampingOvershootModeValues: readonly ["Center", "Reverse"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/blur_types) # Variable: BLUR\_TYPES ``` const BLUR_TYPES: readonly ["uniform", "linear", "mirrored", "radial"]; ``` The shorthand block type IDs for the blur blocks. These are the IDs used to create new blurs using `cesdk.engine.block.createBlur(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/blendmodevalues) # Variable: BlendModeValues ``` const BlendModeValues: readonly ["PassThrough", "Normal", "Darken", "Multiply", "ColorBurn", "LinearBurn", "DarkenColor", "Lighten", "Screen", "ColorDodge", "LinearDodge", "LightenColor", "Overlay", "SoftLight", "HardLight", "VividLight", "LinearLight", "PinLight", "HardMix", "Difference", "Exclusion", "Subtract", "Divide", "Hue", "Saturation", "Color", "Luminosity"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationwipedirectionvalues) # Variable: AnimationWipeDirectionValues ``` const AnimationWipeDirectionValues: readonly ["Up", "Right", "Down", "Left"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationtypewritertextwritingstylevalues) # Variable: AnimationTypewriterTextWritingStyleValues ``` const AnimationTypewriterTextWritingStyleValues: readonly ["Character", "Word"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationspinloopdirectionvalues) # Variable: AnimationSpinLoopDirectionValues ``` const AnimationSpinLoopDirectionValues: readonly ["Clockwise", "CounterClockwise"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationmergetextdirectionvalues) # Variable: AnimationMergeTextDirectionValues ``` const AnimationMergeTextDirectionValues: readonly ["Right", "Left"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationspindirectionvalues) # Variable: AnimationSpinDirectionValues ``` const AnimationSpinDirectionValues: readonly ["Clockwise", "CounterClockwise"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationkenburnsdirectionvalues) # Variable: AnimationKenBurnsDirectionValues ``` const AnimationKenBurnsDirectionValues: readonly ["Up", "Right", "Down", "Left"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationjumploopdirectionvalues) # Variable: AnimationJumpLoopDirectionValues ``` const AnimationJumpLoopDirectionValues: readonly ["Up", "Right", "Down", "Left"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationgrowdirectionvalues) # Variable: AnimationGrowDirectionValues ``` const AnimationGrowDirectionValues: readonly ["Horizontal", "Vertical", "All"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationeasingvalues) # Variable: AnimationEasingValues ``` const AnimationEasingValues: readonly ["Linear", "EaseIn", "EaseOut", "EaseInOut", "EaseInQuart", "EaseOutQuart", "EaseInOutQuart", "EaseInQuint", "EaseOutQuint", "EaseInOutQuint", "EaseInBack", "EaseOutBack", "EaseInOutBack", "EaseInSpring", "EaseOutSpring", "EaseInOutSpring"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationblockswipetextdirectionvalues) # Variable: AnimationBlockSwipeTextDirectionValues ``` const AnimationBlockSwipeTextDirectionValues: readonly ["Up", "Right", "Down", "Left"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animationbaselinedirectionvalues) # Variable: AnimationBaselineDirectionValues ``` const AnimationBaselineDirectionValues: readonly ["Up", "Right", "Down", "Left"]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/variables/animation_types) # Variable: ANIMATION\_TYPES ``` const ANIMATION_TYPES: readonly ["slide", "pan", "fade", "blur", "grow", "zoom", "pop", "wipe", "baseline", "crop_zoom", "spin", "spin_loop", "fade_loop", "blur_loop", "pulsating_loop", "breathing_loop", "jump_loop", "squeeze_loop", "sway_loop", "typewriter_text", "block_swipe_text", "spread_text", "merge_text", "ken_burns"]; ``` The shorthand block type IDs for the animation blocks. These are the IDs used to create new animations using `cesdk.engine.block.createAnimation(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/supportsvideoexport) # Function: supportsVideoExport ``` function supportsVideoExport(): Promise; ``` Checks if the current browser supports video exporting. ## Returns[#](#returns) `Promise`<`boolean`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/supportswasm) # Function: supportsWasm ``` function supportsWasm(): boolean; ``` Checks if the current browser supports web assembly ## Returns[#](#returns) `boolean` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/supportsbrowser) # Function: supportsBrowser ``` function supportsBrowser(): boolean; ``` Checks if the current browser supports necessary technologies to match our supported browsers ## Returns[#](#returns) `boolean` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/supportsvideo) # Function: supportsVideo ``` function supportsVideo(): boolean; ``` Checks if the current browser supports video editing. ## Returns[#](#returns) `boolean` false if the browser does not support the required APIs. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/mergesources) # Function: \_mergeSources ``` function _mergeSources(...sources): (listener) => _Unsubscribe; ``` Merges multiple event sources into a single source that emits when any source emits. This is useful for tracking properties that depend on multiple independent events. ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | …`sources` | (`listener`) => [`_Unsubscribe`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/)\[\] | Event source functions to merge | ## Returns[#](#returns) A merged source that emits when any source emits ``` (listener): _Unsubscribe; ``` ### Parameters[#](#parameters-1) | Parameter | Type | | --- | --- | | `listener` | [`_Listener`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/listener/)<`void`\> | ### Returns[#](#returns-1) [`_Unsubscribe`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/) ## Example[#](#example) ``` const zoomChanged = engine.scene.onZoomLevelChanged;const dpiChanged = engine.scene.onDpiChanged; const zoomOrDpiChanged = mergeSources(zoomChanged, dpiChanged); // Now use with createTrackedPropertyconst normalizedZoom = createTrackedProperty( () => engine.scene.getZoomLevel() / getDpi(), (value) => engine.scene.setZoomLevel(value * getDpi()), zoomOrDpiChanged); ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/makesource) # Function: \_makeSource ``` function _makeSource(): _Source; ``` Creates a simple event source that can emit values to subscribed listeners. This is the most basic building block - a pub/sub pattern without state management. ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | ## Returns[#](#returns) [`_Source`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/source-1/)<`T`\> A source function with an emit method ## Example[#](#example) ``` const onResize = makeSource<{ width: number; height: number }>(); // Subscribeconst unsubscribe = onResize((size) => { console.log('New size:', size);}); // EmitonResize.emit({ width: 800, height: 600 }); // Cleanupunsubscribe(); ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/isspotcolor) # Function: isSpotColor ``` function isSpotColor(color): color is SpotColor; ``` Type guard for [SpotColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/spotcolor/). ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | ## Returns[#](#returns) `color is SpotColor` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/isrgbacolor) # Function: isRGBAColor ``` function isRGBAColor(color): color is RGBAColor; ``` Type guard for [RGBAColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/rgbacolor/). ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | ## Returns[#](#returns) `color is RGBAColor` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/iscmykcolor) # Function: isCMYKColor ``` function isCMYKColor(color): color is CMYKColor; ``` Type guard for [CMYKColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cmykcolor/). ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | ## Returns[#](#returns) `color is CMYKColor` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/defaultlogger) # Function: defaultLogger ``` function defaultLogger(message, level?): void; ``` ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `message` | `string` | | `level?` | [`LogLevel`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/loglevel/) | ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/createtrackedproperty) # Function: \_createTrackedProperty ``` function _createTrackedProperty( getter, setter, source,options?): _ReactiveProperty; ``` Creates a reactive property that tracks a source and updates based on a getter/setter. This is useful for wrapping engine properties or complex state logic. ## Type Parameters[#](#type-parameters) | Type Parameter | Default type | | --- | --- | | `T` | \- | | `U` | `any` | ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `getter` | () => `T` | Function to get current value | | `setter` | (`value`) => `void` | Function to update value | | `source` | (`listener`) => [`_Unsubscribe`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/) | Source to track for updates | | `options?` | `Pick`<[`_ReactivePropertyOptions`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactivepropertyoptions/)<`T`\>, `"equals"`\> | Configuration options | ## Returns[#](#returns) [`_ReactiveProperty`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactiveproperty/)<`T`\> A reactive property ## Example[#](#example) ``` const settings = createTrackedProperty( // Getter () => { const camera = engine.block.findByType('camera')[0]; return { width: engine.block.getFloat(camera, 'camera/resolution/width'), height: engine.block.getFloat(camera, 'camera/resolution/height') }; }, // Setter ({ width, height }) => { const camera = engine.block.findByType('camera')[0]; engine.block.setFloat(camera, 'camera/resolution/width', width); engine.block.setFloat(camera, 'camera/resolution/height', height); }, // Source to track onCameraUpdated, // Options { equals: isEqual }); ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/createreactiveproperty) # Function: \_createReactiveProperty ``` function _createReactiveProperty(initialValue, options?): _ReactiveProperty; ``` Creates a reactive property with subscribe, value, and update methods. This is the main utility for managing state with change notifications. Values are memoized by default (only emit when value changes). ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `initialValue` | `T` | The initial value of the property | | `options?` | [`_ReactivePropertyOptions`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactivepropertyoptions/)<`T`\> | Configuration options | ## Returns[#](#returns) [`_ReactiveProperty`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactiveproperty/)<`T`\> A reactive property with subscribe, value, and update methods ## Example[#](#example) ``` // Simple valueconst zoom = createReactiveProperty(1.0);zoom.subscribe((value) => console.log('Zoom:', value));zoom.update(2.0); // Logs: "Zoom: 2.0" // With custom equality for objectsconst settings = createReactiveProperty( { width: 800, height: 600 }, { equals: isEqual }); // With initial value emissionconst formats = createReactiveProperty( defaultFormats, { emitOnSubscribe: true }); ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/createderivedproperty) # Function: \_createDerivedProperty ``` function _createDerivedProperty( sources, derive,options?): _ReadonlyReactiveProperty; ``` Creates a derived reactive property from one or more sources. The value is computed from source values using a derivation function. Updates are memoized (only emit when derived value changes). ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | | `S` _extends_ `any`\[\] | ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `sources` | { \[K in string | number | | `derive` | (…`values`) => `T` | Function that computes the derived value from source values | | `options?` | `Pick`<[`_ReactivePropertyOptions`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactivepropertyoptions/)<`T`\>, `"equals"`\> | Configuration options | ## Returns[#](#returns) [`_ReadonlyReactiveProperty`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/readonlyreactiveproperty/)<`T`\> A read-only reactive property ## Example[#](#example) ``` const width = createReactiveProperty(800);const height = createReactiveProperty(600); const area = createDerivedProperty( [width, height], (w, h) => w * h); area.subscribe((value) => console.log('Area:', value));width.update(1000); // Logs: "Area: 600000" ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/combineproperties) # Function: \_combineProperties ``` function _combineProperties(properties, options?): _ReadonlyReactiveProperty; ``` Combines multiple reactive properties into a single reactive property. Similar to `combineLatest` from RxJS but simpler. Emits whenever any source emits. ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` _extends_ `any`\[\] | ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `properties` | { \[K in string | number | | `options?` | `Pick`<[`_ReactivePropertyOptions`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactivepropertyoptions/)<`T`\>, `"equals"`\> | Configuration options | ## Returns[#](#returns) [`_ReadonlyReactiveProperty`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/readonlyreactiveproperty/)<`T`\> A reactive property containing an array of values ## Example[#](#example) ``` const x = createReactiveProperty(0);const y = createReactiveProperty(0); const position = combineProperties([x, y]); position.subscribe(([xVal, yVal]) => { console.log(`Position: (${xVal}, ${yVal})`);}); ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/checkvideosupport) # Function: checkVideoSupport ``` function checkVideoSupport(): void; ``` Throws an error if the current browser does not support video editing. ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/functions/checkvideoexportsupport) # Function: checkVideoExportSupport ``` function checkVideoExportSupport(): Promise; ``` Throws an error if the current browser does not support video exporting. ## Returns[#](#returns) `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/zoomoptions) # Type Alias: ZoomOptions ``` type ZoomOptions = object; ``` Options for zooming to a block with optional animation. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `padding?` | | `number` | | `animate?` | | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/zoomautofitaxis) # Type Alias: ZoomAutoFitAxis ``` type ZoomAutoFitAxis = "Horizontal" | "Vertical" | "Both"; ``` The axis(es) for which to auto-fit. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/xywh) # Type Alias: XYWH ``` type XYWH = [number, number, number, number]; ``` Describes a rectangle on the screen. The `XYWH` type is a tuple that contains four numbers representing the x and y coordinates of the top-left corner of the rectangle, as well as the width and height of the rectangle. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/widthmode) # Type Alias: WidthMode ``` type WidthMode = typeof WidthModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/videomimetype) # Type Alias: VideoMimeType ``` type VideoMimeType = Extract; ``` Represents the video MIME types used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/videoexportoptions) # Type Alias: VideoExportOptions ``` type VideoExportOptions = object; ``` Represents the options for exporting a video. Defines the possible options for exporting a video. * ‘mimeType’: The MIME type of the output video file. * ‘onProgress’: A callback which reports on the progress of the export. * ‘h264Profile’: Determines the encoder feature set and in turn the quality, size and speed of the encoding process. * ‘h264Level’: Controls the H.264 encoding level. * ‘videoBitrate’: The video bitrate in bits per second. * ‘audioBitrate’: The audio bitrate in bits per second. * ‘timeOffset’: The time offset in seconds of the scene’s timeline from which the video will start. * ‘duration’: The duration in seconds of the final video. * ‘framerate’: The target framerate of the exported video in Hz. * ‘targetWidth’: An optional target width used in conjunction with target height. * ‘targetHeight’: An optional target height used in conjunction with target width. * ‘abortSignal’: An abort signal that can be used to cancel the export. ## Properties[#](#properties) | Property | Type | Default value | Description | | --- | --- | --- | --- | | `mimeType?` | [`VideoMimeType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/videomimetype/) | `'video/mp4'` | The MIME type of the output video file. | | `onProgress?` | (`numberOfRenderedFrames`, `numberOfEncodedFrames`, `totalNumberOfFrames`) => `void` | `undefined` | A callback which reports on the progress of the export. | | `h264Profile?` | `number` | `77 (Main)` | Determines the encoder feature set and in turn the quality, size and speed of the encoding process. | | `h264Level?` | `number` | `52` | Controls the H.264 encoding level. This relates to parameters used by the encoder such as bit rate, timings and motion vectors. Defined by the spec are levels 1.0 up to 6.2. To arrive at an integer value, the level is multiplied by ten. E.g. to get level 5.2, pass a value of 52. | | `videoBitrate?` | `number` | `undefined` | The video bitrate in bits per second. Maximum bitrate is determined by h264Profile and h264Level. If the value is 0, the bitrate is automatically determined by the engine. | | `audioBitrate?` | `number` | `undefined` | The audio bitrate in bits per second. If the value is 0, the bitrate is automatically determined by the engine (128kbps for stereo AAC stream). | | `timeOffset?` | `number` | `0` | The time offset in seconds of the scene’s timeline from which the video will start. | | `duration?` | `number` | `The duration of the scene.` | The duration in seconds of the final video. | | `framerate?` | `number` | `30` | The target framerate of the exported video in Hz. | | `targetWidth?` | `number` | `undefined` | An optional target width used in conjunction with target height. If used, the block will be rendered large enough, that it fills the target size entirely while maintaining its aspect ratio. | | `targetHeight?` | `number` | `undefined` | An optional target height used in conjunction with target width. If used, the block will be rendered large enough, that it fills the target size entirely while maintaining its aspect ratio. | | `allowTextOverhang?` | `boolean` | `false` | If true, the export will include text bounding boxes that account for glyph overhangs. When enabled, text blocks with glyphs that extend beyond their frame (e.g., decorative fonts with swashes) will be exported with the full glyph bounds visible, preventing text clipping. | | `abortSignal?` | `AbortSignal` | `undefined` | An abortsignal that can be used to cancel the export. | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/verticalblockalignment) # Type Alias: VerticalBlockAlignment ``` type VerticalBlockAlignment = TextVerticalAlignment; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe) # Type Alias: \_Unsubscribe ``` type _Unsubscribe = () => void; ``` An unsubscribe function that removes a listener ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/typefacedefinition) # Type Alias: TypefaceDefinition ``` type TypefaceDefinition = object; ``` Represents a typeface definition used in the editor. ## Deprecated[#](#deprecated) This type definition is not used anymore and will be removed. Defines the structure of a typeface definition, including metadata, family name, and font details. * ‘meta’: Optional metadata for the typeface, including default status, library, and categories. * ‘family’: The name of the typeface family. * ‘fonts’: An array of font definitions, each containing a font URL, weight, and style. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`meta?`~ | `object` | **Deprecated** The meta field is not used anymore | | `meta.default?` | `boolean` | \- | | `meta.library?` | `string` | \- | | `meta.categories?` | `string`\[\] | \- | | ~`family`~ | `string` | \- | | ~`fonts`~ | `object`\[\] | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/touchrotateaction) # Type Alias: TouchRotateAction ``` type TouchRotateAction = typeof TouchRotateActionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/touchpinchaction) # Type Alias: TouchPinchAction ``` type TouchPinchAction = typeof TouchPinchActionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/textverticalalignment) # Type Alias: TextVerticalAlignment ``` type TextVerticalAlignment = typeof TextVerticalAlignmentValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/textcase) # Type Alias: TextCase ``` type TextCase = "Normal" | "Uppercase" | "Lowercase" | "Titlecase"; ``` Represents the text case of a text block. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/textanimationwritingstyle) # Type Alias: TextAnimationWritingStyle ``` type TextAnimationWritingStyle = typeof TextAnimationWritingStyleValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/subscription) # Type Alias: \_Subscription ``` type _Subscription = number; ``` Represents a subscription to an event. The `Subscription` type is a number that uniquely identifies a subscription to an event. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/strokeposition) # Type Alias: StrokePosition ``` type StrokePosition = typeof StrokePositionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/strokestyle) # Type Alias: StrokeStyle ``` type StrokeStyle = typeof StrokeStyleValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/stringpropertyname) # Type Alias: StringPropertyName ``` type StringPropertyName = | "name" | "scene/pageFormatId" | "type" | "uuid" | "page/titleTemplate" | "audio/fileURI" | "text/externalReference" | "text/fontFileUri" | "text/text" | "text/typeface" | "cutout/path" | "caption/externalReference" | "caption/fontFileUri" | "caption/text" | "caption/typeface" | "effect/lut_filter/lutFileURI" | "fill/image/externalReference" | "fill/image/imageFileURI" | "fill/image/previewFileURI" | "fill/video/fileURI" | "shape/vector_path/path" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/strokecornergeometry) # Type Alias: StrokeCornerGeometry ``` type StrokeCornerGeometry = typeof StrokeCornerGeometryValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/splitoptions) # Type Alias: SplitOptions ``` type SplitOptions = object; ``` Options for configuring block split operations. ## Properties[#](#properties) | Property | Type | Default value | Description | | --- | --- | --- | --- | | `attachToParent?` | `boolean` | `true` | Whether or not the new block will be attached to the same parent as the original. | | `createParentTrackIfNeeded?` | `boolean` | `false` | Whether to create a parent track if needed and add both blocks to it. Only used when attachToParent is true. | | `selectNewBlock?` | `boolean` | `true` | Whether to select the newly created block after splitting. | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/sortingorder) # Type Alias: SortingOrder ``` type SortingOrder = "None" | "Ascending" | "Descending"; ``` 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. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/sourcesetpropertyname) # Type Alias: SourceSetPropertyName ``` type SourceSetPropertyName = "fill/image/sourceSet" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetypeshorthand) # Type Alias: ShapeTypeShorthand ``` type ShapeTypeShorthand = typeof SHAPE_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/sizemode) # Type Alias: SizeMode ``` type SizeMode = | WidthMode | HeightMode; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetypelonghand) # Type Alias: ShapeTypeLonghand ``` type ShapeTypeLonghand = `//ly.img.ubq/shape/${ShapeTypeShorthand}`; ``` The longhand block type IDs for the blocks. These are the IDs used to create new shapes using `cesdk.engine.block.createShape(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingvaluetype) # Type Alias: SettingValueType ``` type SettingValueType = Settings[K]; ``` Gets the value type for a specific setting key. ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `K` _extends_ [`SettingKey`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingkey/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetype) # Type Alias: ShapeType ``` type ShapeType = | ShapeTypeShorthand | ShapeTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetypeshorthand/) and [ShapeTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingstringpropertyname) # Type Alias: SettingStringPropertyName ``` type SettingStringPropertyName = | "basePath" | "defaultEmojiFontFileUri" | "defaultFontFileUri" | "upload/supportedMimeTypes" | "license" | "web/fetchCredentials" | "page/title/separator" | "page/title/fontFileUri" | "fallbackFontUri" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingtype) # Type Alias: SettingType ``` type SettingType = "Bool" | "Int" | "Float" | "String" | "Color" | "Enum"; ``` Represents the type of a setting. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsstring) # Type Alias: SettingsString ``` type SettingsString = SettingStringPropertyName; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsint) # Type Alias: SettingsInt ``` type SettingsInt = SettingIntPropertyName; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsfloat) # Type Alias: SettingsFloat ``` type SettingsFloat = SettingFloatPropertyName; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsenum) # Type Alias: SettingsEnum ``` type SettingsEnum = SettingEnumType; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingscolorrgba) # Type Alias: SettingsColorRGBA ``` type SettingsColorRGBA = SettingsColor; ``` Represents the color settings available in the editor. ## Deprecated[#](#deprecated) Use SettingsColor instead. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingscolor) # Type Alias: SettingsColor ``` type SettingsColor = SettingColorPropertyName; ``` Represents the color settings available in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsbool) # Type Alias: SettingsBool ``` type SettingsBool = SettingBoolPropertyName; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingkey) # Type Alias: SettingKey ``` type SettingKey = keyof Settings; ``` Union type of all valid setting keys. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingintpropertyname) # Type Alias: SettingIntPropertyName ``` type SettingIntPropertyName = "maxImageSize" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingfloatpropertyname) # Type Alias: SettingFloatPropertyName ``` type SettingFloatPropertyName = | "positionSnappingThreshold" | "rotationSnappingThreshold" | "controlGizmo/blockScaleDownLimit" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumvalues) # Type Alias: SettingEnumValues ``` type SettingEnumValues = | TouchPinchAction | TouchRotateAction | CameraClampingOvershootMode | DoubleClickSelectionMode | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype) # Type Alias: SettingEnumType ``` type SettingEnumType = object; ``` ## Properties[#](#properties) | Property | Type | | --- | --- | | `touch/pinchAction` | [`TouchPinchAction`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/touchpinchaction/) | | `touch/rotateAction` | [`TouchRotateAction`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/touchrotateaction/) | | `camera/clamping/overshootMode` | [`CameraClampingOvershootMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cameraclampingovershootmode/) | | `doubleClickSelectionMode` | [`DoubleClickSelectionMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/doubleclickselectionmode/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumpropertyname) # Type Alias: SettingEnumPropertyName ``` type SettingEnumPropertyName = | "touch/pinchAction" | "touch/rotateAction" | "camera/clamping/overshootMode" | "doubleClickSelectionMode" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname) # Type Alias: SettingColorPropertyName ``` type SettingColorPropertyName = | "clearColor" | "handleFillColor" | "highlightColor" | "pageHighlightColor" | "placeholderHighlightColor" | "snappingGuideColor" | "rotationSnappingGuideColor" | "cropOverlayColor" | "textVariableHighlightColor" | "borderOutlineColor" | "progressColor" | "errorStateColor" | "page/title/color" | "page/marginFillColor" | "page/marginFrameColor" | "page/innerBorderColor" | "page/outerBorderColor" | "colorMaskingSettings/maskColor" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/settingboolpropertyname) # Type Alias: SettingBoolPropertyName ``` type SettingBoolPropertyName = | "alwaysHighlightPlaceholders" | "doubleClickToCropEnabled" | "showBuildVersion" | "placeholderControls/showButton" | "placeholderControls/showOverlay" | "blockAnimations/enabled" | "renderTextCursorAndSelectionInEngine" | "touch/dragStartCanSelect" | "touch/singlePointPanning" | "mouse/enableZoom" | "mouse/enableScroll" | "controlGizmo/showCropHandles" | "controlGizmo/showMoveHandles" | "controlGizmo/showResizeHandles" | "controlGizmo/showScaleHandles" | "controlGizmo/showRotateHandles" | "controlGizmo/showCropScaleHandles" | "page/title/show" | "page/title/showPageTitleTemplate" | "page/title/appendPageName" | "page/title/showOnSinglePage" | "page/dimOutOfPageAreas" | "page/allowCropInteraction" | "page/allowResizeInteraction" | "page/restrictResizeInteractionToFixedAspectRatio" | "page/allowRotateInteraction" | "page/allowMoveInteraction" | "page/moveChildrenWhenCroppingFill" | "page/selectWhenNoBlocksSelected" | "colorMaskingSettings/secondPass" | "clampThumbnailTextureSizes" | "useSystemFontFallback" | "forceSystemEmojis" | "features/textEditModeTransformHandlesEnabled" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/scope) # Type Alias: Scope ``` type Scope = | "text/edit" | "text/character" | "fill/change" | "fill/changeType" | "stroke/change" | "shape/change" | "layer/move" | "layer/resize" | "layer/rotate" | "layer/flip" | "layer/crop" | "layer/opacity" | "layer/blendMode" | "layer/visibility" | "layer/clipping" | "appearance/adjustments" | "appearance/filter" | "appearance/effect" | "appearance/blur" | "appearance/shadow" | "appearance/animation" | "lifecycle/destroy" | "lifecycle/duplicate" | "editor/add" | "editor/select"; ``` Represents the various scopes that define the capabilities and permissions within the Creative Editor SDK. Each scope corresponds to a specific functionality or action that can be performed within the editor. The `Scope` type is used to control access to different features and operations, allowing for fine-grained control over what actions are permitted. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/scenemode) # Type Alias: SceneMode ``` type SceneMode = typeof SceneModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/scenelayout) # Type Alias: SceneLayout ``` type SceneLayout = typeof SceneLayoutValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/rolestring) # Type Alias: RoleString ``` type RoleString = "Creator" | "Adopter" | "Viewer" | "Presenter"; ``` Represents a role string. The RoleString type defines the possible roles within the Creative Editor SDK. Each role corresponds to a different level of access and permissions, allowing for flexibility in how users are managed. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba) # Type Alias: RGBA ``` type RGBA = [number, number, number, number]; ``` Represents a color in the RGBA color space. The `RGBA` type is a tuple that contains four numbers representing the red, green, blue, and alpha components of the color. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/propertytype) # Type Alias: PropertyType ``` type PropertyType = | "Bool" | "Int" | "Float" | "String" | "Color" | "Enum" | "Struct" | "Double" | "SourceSet"; ``` Represents the various types of properties that can be associated with design blocks. Each type corresponds to a different kind of data that can be used to define the properties of a design block within the system. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/positionymode) # Type Alias: PositionYMode ``` type PositionYMode = typeof PositionYModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/positionxmode) # Type Alias: PositionXMode ``` type PositionXMode = typeof PositionXModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/positionmode) # Type Alias: PositionMode ``` type PositionMode = | PositionXMode | PositionYMode; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/palettecolor) # Type Alias: PaletteColor ``` type PaletteColor = | HexColorString | RGBColor | RGBAColor | SpotColor; ``` Represents a color definition for the custom color palette. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/optionalprefix) # Type Alias: OptionalPrefix ``` type OptionalPrefix = `ubq://${T}` | T; ``` ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` _extends_ `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/offscreencanvas) # Type Alias: OffscreenCanvas ``` type OffscreenCanvas = object; ``` A simplified placeholder type for `OffscreenCanvas`, to avoid a dependency on `@types/offscreencanvas` ## Properties[#](#properties) | Property | Type | | --- | --- | | `width` | `number` | | `height` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttypeshorthand) # Type Alias: ObjectTypeShorthand ``` type ObjectTypeShorthand = | DesignBlockTypeShorthand | `shape/${ShapeTypeShorthand}` | `fill/${FillTypeShorthand}` | `effect/${EffectTypeShorthand}` | `blur/${BlurTypeShorthand}` | `animation/${AnimationTypeShorthand}`; ``` 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. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttypelonghand) # Type Alias: ObjectTypeLonghand ``` type ObjectTypeLonghand = | DesignBlockTypeLonghand | ShapeTypeLonghand | FillTypeLonghand | EffectTypeLonghand | BlurTypeLonghand | AnimationTypeLonghand; ``` 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. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttype) # Type Alias: ObjectType ``` type ObjectType = | ObjectTypeShorthand | ObjectTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttypeshorthand/) and [ObjectTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/mimetype) # Type Alias: MimeType ``` type MimeType = typeof MimeType[keyof typeof MimeType]; ``` Represents the MIME types used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/loglevel) # Type Alias: LogLevel ``` type LogLevel = "Info" | "Warning" | "Error"; ``` Provides logging functionality for the Creative Editor SDK. The `Logger` interface and associated types define a standardized way to log messages at different severity levels within the SDK. This allows developers to track the behavior of the editor, diagnose issues, and understand the flow of operations. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/locale) # Type Alias: Locale ``` type Locale = string; ``` e.g. `en`, `de`, etc. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/listener) # Type Alias: \_Listener ``` type _Listener = (value) => void; ``` A listener function that receives value updates ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `value` | `T` | ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/legacysource) # Type Alias: \_LegacySource ``` type _LegacySource = (handler) => () => void; ``` A simplified source type for legacy API streams ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `handler` | (`value`) => `void` | ## Returns[#](#returns) ``` (): void; ``` ### Returns[#](#returns-1) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/intpropertyname) # Type Alias: IntPropertyName ``` type IntPropertyName = | "effect/lut_filter/horizontalTileCount" | "effect/lut_filter/verticalTileCount" | "effect/mirror/side" | "effect/pixelize/horizontalPixelSize" | "effect/pixelize/verticalPixelSize" | "shape/polygon/sides" | "shape/star/points" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/imagemimetype) # Type Alias: ImageMimeType ``` type ImageMimeType = Extract; ``` Represents the image MIME types used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/horizontaltextalignment) # Type Alias: HorizontalTextAlignment ``` type HorizontalTextAlignment = typeof TextHorizontalAlignmentValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/horizontalblockalignment) # Type Alias: HorizontalBlockAlignment ``` type HorizontalBlockAlignment = HorizontalTextAlignment; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/historyid) # Type Alias: HistoryId ``` type HistoryId = number; ``` A numerical identifier for a history stack --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/hexcolorstring) # Type Alias: HexColorString ``` type HexColorString = string; ``` Represents a hexadecimal color value (RGB or RGBA) that starts with a ’#’. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/heightmode) # Type Alias: HeightMode ``` type HeightMode = typeof HeightModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/gradientstoprgba) # Type Alias: GradientstopRGBA ``` type GradientstopRGBA = [number, number, number, number, number]; ``` Represents a gradient stop in the RGBA color space. The `GradientstopRGBA` type is a tuple that contains five numbers representing the stop position and the red, green, blue, and alpha components of the color. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/fontweight) # Type Alias: FontWeight ``` type FontWeight = | "thin" | "extraLight" | "light" | "normal" | "medium" | "semiBold" | "bold" | "extraBold" | "heavy"; ``` Represents the weight of a font. The FontWeight type defines the possible weights of a font within the Creative Editor SDK. Each weight corresponds to a different thickness, allowing for flexibility in how fonts are styled. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/fontstyle) # Type Alias: FontStyle ``` type FontStyle = "normal" | "italic"; ``` Represents the style of a font. The FontStyle type defines the possible styles of a font within the Creative Editor SDK. Each style corresponds to a different appearance, allowing for flexibility in how fonts are styled. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/fontsizeunit) # Type Alias: FontSizeUnit ``` type FontSizeUnit = | DesignUnit | "Point"; ``` Extended design unit type that includes Point for font size operations. Maintains consistency with SceneDesignUnit’s capitalized naming convention. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/floatpropertyname) # Type Alias: FloatPropertyName ``` type FloatPropertyName = | "globalBoundingBox/height" | "globalBoundingBox/width" | "globalBoundingBox/x" | "globalBoundingBox/y" | "height" | "lastFrame/height" | "lastFrame/width" | "lastFrame/x" | "lastFrame/y" | "position/x" | "position/y" | "rotation" | "scene/dpi" | "scene/pageDimensions/height" | "scene/pageDimensions/width" | "scene/pixelScaleFactor" | "width" | "camera/pixelRatio" | "camera/resolution/height" | "camera/resolution/width" | "camera/zoomLevel" | "dropShadow/blurRadius/x" | "dropShadow/blurRadius/y" | "dropShadow/offset/x" | "dropShadow/offset/y" | "page/margin/bottom" | "page/margin/left" | "page/margin/right" | "page/margin/top" | "playback/speed" | "playback/volume" | "stroke/width" | "opacity" | "backgroundColor/cornerRadius" | "backgroundColor/paddingBottom" | "backgroundColor/paddingLeft" | "backgroundColor/paddingRight" | "backgroundColor/paddingTop" | "text/fontSize" | "text/letterSpacing" | "text/lineHeight" | "text/maxAutomaticFontSize" | "text/minAutomaticFontSize" | "text/paragraphSpacing" | "cutout/offset" | "cutout/smoothing" | "caption/fontSize" | "caption/letterSpacing" | "caption/lineHeight" | "caption/maxAutomaticFontSize" | "caption/minAutomaticFontSize" | "caption/paragraphSpacing" | "animation/slide/direction" | "textAnimationOverlap" | "animation/pan/direction" | "animation/pan/distance" | "animation/blur/intensity" | "animation/crop_zoom/scale" | "animation/spin/intensity" | "animation/blur_loop/intensity" | "animation/pulsating_loop/intensity" | "animation/breathing_loop/intensity" | "animation/jump_loop/intensity" | "animation/sway_loop/intensity" | "animation/spread_text/intensity" | "animation/merge_text/intensity" | "animation/ken_burns/travelDistanceRatio" | "animation/ken_burns/zoomIntensity" | "blur/uniform/intensity" | "blur/linear/blurRadius" | "blur/linear/x1" | "blur/linear/x2" | "blur/linear/y1" | "blur/linear/y2" | "blur/mirrored/blurRadius" | "blur/mirrored/gradientSize" | "blur/mirrored/size" | "blur/mirrored/x1" | "blur/mirrored/x2" | "blur/mirrored/y1" | "blur/mirrored/y2" | "blur/radial/blurRadius" | "blur/radial/gradientRadius" | "blur/radial/radius" | "blur/radial/x" | "blur/radial/y" | "effect/adjustments/blacks" | "effect/adjustments/brightness" | "effect/adjustments/clarity" | "effect/adjustments/contrast" | "effect/adjustments/exposure" | "effect/adjustments/gamma" | "effect/adjustments/highlights" | "effect/adjustments/saturation" | "effect/adjustments/shadows" | "effect/adjustments/sharpness" | "effect/adjustments/temperature" | "effect/adjustments/whites" | "effect/cross_cut/offset" | "effect/cross_cut/slices" | "effect/cross_cut/speedV" | "effect/cross_cut/time" | "effect/dot_pattern/blur" | "effect/dot_pattern/dots" | "effect/dot_pattern/size" | "effect/duotone_filter/intensity" | "effect/extrude_blur/amount" | "effect/glow/amount" | "effect/glow/darkness" | "effect/glow/size" | "effect/green_screen/colorMatch" | "effect/green_screen/smoothness" | "effect/green_screen/spill" | "effect/half_tone/angle" | "effect/half_tone/scale" | "effect/linocut/scale" | "effect/liquid/amount" | "effect/liquid/scale" | "effect/liquid/time" | "effect/lut_filter/intensity" | "effect/outliner/amount" | "effect/outliner/passthrough" | "effect/posterize/levels" | "effect/radial_pixel/radius" | "effect/radial_pixel/segments" | "effect/recolor/brightnessMatch" | "effect/recolor/colorMatch" | "effect/recolor/smoothness" | "effect/shifter/amount" | "effect/shifter/angle" | "effect/tilt_shift/amount" | "effect/tilt_shift/position" | "effect/tv_glitch/distortion" | "effect/tv_glitch/distortion2" | "effect/tv_glitch/rollSpeed" | "effect/tv_glitch/speed" | "effect/vignette/darkness" | "effect/vignette/offset" | "fill/gradient/linear/endPointX" | "fill/gradient/linear/endPointY" | "fill/gradient/linear/startPointX" | "fill/gradient/linear/startPointY" | "fill/gradient/radial/centerPointX" | "fill/gradient/radial/centerPointY" | "fill/gradient/radial/radius" | "fill/gradient/conical/centerPointX" | "fill/gradient/conical/centerPointY" | "shape/rect/cornerRadiusBL" | "shape/rect/cornerRadiusBR" | "shape/rect/cornerRadiusTL" | "shape/rect/cornerRadiusTR" | "shape/polygon/cornerRadius" | "shape/star/innerDiameter" | "shape/vector_path/height" | "shape/vector_path/width" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/filltypeshorthand) # Type Alias: FillTypeShorthand ``` type FillTypeShorthand = typeof FILL_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/filltypelonghand) # Type Alias: FillTypeLonghand ``` type FillTypeLonghand = `//ly.img.ubq/fill/${FillTypeShorthand}`; ``` The longhand block type IDs for the fill blocks. These are the IDs used to create new fills using `cesdk.engine.block.createFill(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/filltype) # Type Alias: FillType ``` type FillType = | FillTypeShorthand | FillTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/filltypeshorthand/) and [FillTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/filltypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/fillpixelstreamorientation) # Type Alias: FillPixelStreamOrientation ``` type FillPixelStreamOrientation = typeof FillPixelStreamOrientationValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/exportoptions) # Type Alias: ExportOptions ``` type ExportOptions = object; ``` Represents the options for exporting a design block. Defines the possible options for exporting a design block. * ‘mimeType’: The MIME type of the output file. * ‘pngCompressionLevel’: The PNG compression level to use, when exporting to PNG. * ‘jpegQuality’: The JPEG quality to use when encoding to JPEG. * ‘webpQuality’: The WebP quality to use when encoding to WebP. * ‘targetWidth’: An optional target width used in conjunction with target height. * ‘targetHeight’: An optional target height used in conjunction with target width. * ‘exportPdfWithHighCompatibility’: Export the PDF document with a higher compatibility to different PDF viewers. * ‘exportPdfWithUnderlayer’: Export the PDF document with an underlayer. * ‘underlayerSpotColorName’: The name of the spot color to be used for the underlayer’s fill. * ‘underlayerOffset’: The adjustment in size of the shape of the underlayer. * ‘abortSignal’: An abort signal that can be used to cancel the export. ## Properties[#](#properties) | Property | Type | Default value | Description | | --- | --- | --- | --- | | `mimeType?` | | [`ImageMimeType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/imagemimetype/) | `Exclude`<[`ApplicationMimeType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/applicationmimetype/), `"application/zip"`\> | | `pngCompressionLevel?` | `number` | `5.` | The PNG compression level to use, when exporting to PNG. Valid values are 0 to 9, higher means smaller, but slower. Quality is not affected. Ignored for other encodings. | | `jpegQuality?` | `number` | `0.9` | The JPEG quality to use when encoding to JPEG. Valid values are (0-1\], higher means better quality. Ignored for other encodings. | | `webpQuality?` | `number` | `undefined` | The WebP quality to use when encoding to WebP. Valid values are (0-1\], higher means better quality. WebP uses a special lossless encoding that usually produces smaller file sizes than PNG. Ignored for other encodings. Defaults to 1.0. | | `targetWidth?` | `number` | `undefined` | An optional target width used in conjunction with target height. If used, the block will be rendered large enough, that it fills the target size entirely while maintaining its aspect ratio. | | `targetHeight?` | `number` | `undefined` | An optional target height used in conjunction with target width. If used, the block will be rendered large enough, that it fills the target size entirely while maintaining its aspect ratio. | | `exportPdfWithHighCompatibility?` | `boolean` | `undefined` | Export the PDF document with a higher compatibility to different PDF viewers. Bitmap images and some effects like gradients will be rasterized with the DPI setting instead of embedding them directly. | | `exportPdfWithUnderlayer?` | `boolean` | `undefined` | Export the PDF document with an underlayer. An underlayer is generated by adding a graphics block behind the existing elements of the shape of the elements on the page. | | `underlayerSpotColorName?` | `string` | `undefined` | The name of the spot color to be used for the underlayer’s fill. | | `underlayerOffset?` | `number` | `undefined` | The adjustment in size of the shape of the underlayer. | | `allowTextOverhang?` | `boolean` | `false` | If true, the export will include text bounding boxes that account for glyph overhangs. When enabled, text blocks with glyphs that extend beyond their frame (e.g., decorative fonts with swashes) will be exported with the full glyph bounds visible, preventing text clipping. | | `abortSignal?` | `AbortSignal` | `undefined` | An abortsignal that can be used to cancel the export. | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/equalsfn) # Type Alias: \_EqualsFn ``` type _EqualsFn = (a, b) => boolean; ``` A function that compares two values for equality ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `a` | `T` | | `b` | `T` | ## Returns[#](#returns) `boolean` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/enumvalues) # Type Alias: EnumValues ``` type EnumValues = | BlendMode | ContentFillMode | HeightMode | PositionXMode | PositionYMode | DesignUnit | SceneLayout | SceneMode | WidthMode | StrokeCornerGeometry | StrokePosition | StrokeStyle | HorizontalTextAlignment | TextVerticalAlignment | CutoutType | CaptionHorizontalAlignment | CaptionVerticalAlignment | AnimationEasing | TextAnimationWritingStyle | AnimationGrowDirection | AnimationWipeDirection | AnimationBaselineDirection | AnimationSpinDirection | AnimationSpinLoopDirection | AnimationJumpLoopDirection | AnimationTypewriterTextWritingStyle | AnimationBlockSwipeTextDirection | AnimationMergeTextDirection | AnimationKenBurnsDirection | FillPixelStreamOrientation | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/enumpropertyname) # Type Alias: EnumPropertyName ``` type EnumPropertyName = | "blend/mode" | "contentFill/mode" | "height/mode" | "position/x/mode" | "position/y/mode" | "scene/designUnit" | "scene/layout" | "scene/mode" | "width/mode" | "stroke/cornerGeometry" | "stroke/position" | "stroke/style" | "text/horizontalAlignment" | "text/verticalAlignment" | "cutout/type" | "caption/horizontalAlignment" | "caption/verticalAlignment" | "animationEasing" | "textAnimationWritingStyle" | "animation/grow/direction" | "animation/wipe/direction" | "animation/baseline/direction" | "animation/spin/direction" | "animation/spin_loop/direction" | "animation/jump_loop/direction" | "animation/typewriter_text/writingStyle" | "animation/block_swipe_text/direction" | "animation/merge_text/direction" | "animation/ken_burns/direction" | "fill/pixelStream/orientation" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/engineplugincontext) # Type Alias: EnginePluginContext ``` type EnginePluginContext = object; ``` Represents the context for an engine plugin. Defines the context provided to an engine plugin, including APIs for assets, blocks, scenes, editor, events, and variables. * ‘engine’: The engine instance containing APIs for asset, block, scene, editor, event, and variable management. ## Properties[#](#properties) | Property | Type | | --- | --- | | `engine` | [`CreativeEngine`](https://img.ly/docs/cesdk/angular/api/engine/classes/creativeengine/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttypelonghand) # Type Alias: EffectTypeLonghand ``` type EffectTypeLonghand = `//ly.img.ubq/effect/${EffectTypeShorthand}`; ``` The longhand block type IDs for the effect blocks. These are the IDs used to create new effects using `cesdk.engine.block.createEffect(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttypeshorthand) # Type Alias: EffectTypeShorthand ``` type EffectTypeShorthand = typeof EFFECT_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttype) # Type Alias: EffectType ``` type EffectType = | EffectTypeShorthand | EffectTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttypeshorthand/) and [EffectTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/editmode) # Type Alias: EditMode ``` type EditMode = "Transform" | "Crop" | "Text" | "Playback" | "Trim" | string & object; ``` Represents the current edit mode of the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/dropshadowoptions) # Type Alias: DropShadowOptions ``` type DropShadowOptions = object; ``` Options for configuring drop shadow effects on blocks. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `color?` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color of the drop shadow | | `offset?` | `object` | The offset position of the shadow | | `offset.x?` | `number` | Horizontal offset in scene design units | | `offset.y?` | `number` | Vertical offset in scene design units | | `blur?` | `object` | The blur radius of the shadow | | `blur.x?` | `number` | Horizontal blur radius in scene design units | | `blur.y?` | `number` | Vertical blur radius in scene design units | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/doublepropertyname) # Type Alias: DoublePropertyName ``` type DoublePropertyName = | "playback/time" | "playback/duration" | "playback/timeOffset" | "audio/totalDuration" | "playback/trimLength" | "playback/trimOffset" | "fill/video/totalDuration" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/doubleclickselectionmode) # Type Alias: DoubleClickSelectionMode ``` type DoubleClickSelectionMode = typeof DoubleClickSelectionModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/designunit) # Type Alias: DesignUnit ``` type DesignUnit = typeof SceneDesignUnitValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktypeshorthand) # Type Alias: DesignBlockTypeShorthand ``` type DesignBlockTypeShorthand = typeof DESIGN_BLOCK_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktypelonghand) # Type Alias: DesignBlockTypeLonghand ``` type DesignBlockTypeLonghand = `//ly.img.ubq/${DesignBlockTypeShorthand}`; ``` 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)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktype) # Type Alias: DesignBlockType ``` type DesignBlockType = | DesignBlockTypeShorthand | DesignBlockTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktypeshorthand/) and [DesignBlockTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/designblockid) # Type Alias: DesignBlockId ``` type DesignBlockId = number; ``` A numerical identifier for a design block --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/demoassetsourceid) # Type Alias: DemoAssetSourceId ``` type DemoAssetSourceId = | "ly.img.template" | "ly.img.image.upload" | "ly.img.video.upload" | "ly.img.audio.upload" | "ly.img.image" | "ly.img.video" | "ly.img.video.template" | "ly.img.audio" | "ly.img.textComponents"; ``` Represents the default demo asset source IDs used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/defaultassetsourceid) # Type Alias: DefaultAssetSourceId ``` type DefaultAssetSourceId = | "ly.img.sticker" | "ly.img.vectorpath" | "ly.img.colors.defaultPalette" | "ly.img.filter.lut" | "ly.img.filter.duotone" | "ly.img.effect" | "ly.img.blur" | "ly.img.typeface" | "ly.img.page.presets" | "ly.img.page.presets.video" | "ly.img.crop.presets" | "ly.img.captionPresets"; ``` Represents the default asset source IDs used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/cutouttype) # Type Alias: CutoutType ``` type CutoutType = typeof CutoutTypeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/cutoutoperation) # Type Alias: CutoutOperation ``` type CutoutOperation = "Difference" | "Intersection" | "Union" | "XOR"; ``` Represents the type of a cutout. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/createsceneoptions) # Type Alias: CreateSceneOptions ``` type CreateSceneOptions = object; ``` Options for creating a video scene. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `page` | `object` | The page options | | `page.size` | | `number` | | `page.color?` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The background color of the page | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/contentfillmode) # Type Alias: ContentFillMode ``` type ContentFillMode = typeof ContentFillModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/colorspace) # Type Alias: ColorSpace ``` type ColorSpace = "sRGB" | "CMYK" | "SpotColor"; ``` Represents the color space used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/colorpropertyname) # Type Alias: ColorPropertyName ``` type ColorPropertyName = | "dropShadow/color" | "fill/solid/color" | "stroke/color" | "backgroundColor/color" | "animation/block_swipe_text/blockColor" | "effect/duotone_filter/darkColor" | "effect/duotone_filter/lightColor" | "effect/green_screen/fromColor" | "effect/recolor/fromColor" | "effect/recolor/toColor" | "fill/color/value" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/color) # Type Alias: Color ``` type Color = | RGBAColor | CMYKColor | SpotColor; ``` Represents all color types supported by the engine. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/cmyk) # Type Alias: CMYK ``` type CMYK = [number, number, number, number]; ``` Represents a color in the CMYK color space. The `CMYK` type is a tuple that contains four numbers representing the cyan, magenta, yellow, and black components of the color. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/captionhorizontalalignment) # Type Alias: CaptionHorizontalAlignment ``` type CaptionHorizontalAlignment = typeof CaptionHorizontalAlignmentValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/captionverticalalignment) # Type Alias: CaptionVerticalAlignment ``` type CaptionVerticalAlignment = typeof CaptionVerticalAlignmentValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/canvas) # Type Alias: Canvas ``` type Canvas = | HTMLCanvasElement | OffscreenCanvas; ``` An HTML Canvas or an Offscreen Canvas --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/cameraclampingovershootmode) # Type Alias: CameraClampingOvershootMode ``` type CameraClampingOvershootMode = typeof CameraClampingOvershootModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/boolpropertyname) # Type Alias: BoolPropertyName ``` type BoolPropertyName = | "alwaysOnBottom" | "alwaysOnTop" | "clipped" | "flip/horizontal" | "flip/vertical" | "highlightEnabled" | "includedInExport" | "placeholder/enabled" | "playback/playing" | "playback/soloPlaybackEnabled" | "scene/aspectRatioLock" | "selected" | "selectionEnabled" | "transformLocked" | "visible" | "blur/enabled" | "dropShadow/clip" | "dropShadow/enabled" | "fill/enabled" | "page/marginEnabled" | "placeholderControls/showButton" | "placeholderControls/showOverlay" | "playback/looping" | "playback/muted" | "stroke/enabled" | "backgroundColor/enabled" | "placeholderBehavior/enabled" | "text/automaticFontSizeEnabled" | "text/clipLinesOutsideOfFrame" | "text/hasClippedLines" | "track/automaticallyManageBlockOffsets" | "caption/automaticFontSizeEnabled" | "caption/clipLinesOutsideOfFrame" | "caption/hasClippedLines" | "captionTrack/automaticallyManageBlockOffsets" | "animation/slide/fade" | "animation/pan/fade" | "animation/blur/fade" | "animation/zoom/fade" | "animation/crop_zoom/fade" | "animation/spin/fade" | "animation/block_swipe_text/useTextColor" | "animation/spread_text/fade" | "animation/ken_burns/fade" | "effect/enabled" | string & object; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/booleanoperation) # Type Alias: BooleanOperation ``` type BooleanOperation = "Difference" | "Intersection" | "Union" | "XOR"; ``` Represents the names of boolean operations. Defines the possible boolean operations. * ‘Difference’: The difference between two shapes. * ‘Intersection’: The intersection of two shapes. * ‘Union’: The union of two shapes. * ‘XOR’: The exclusive OR of two shapes. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtypeshorthand) # Type Alias: BlurTypeShorthand ``` type BlurTypeShorthand = typeof BLUR_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtypelonghand) # Type Alias: BlurTypeLonghand ``` type BlurTypeLonghand = `//ly.img.ubq/blur/${BlurTypeShorthand}`; ``` The longhand block type IDs for the blur blocks. These are the IDs used to create new blurs using `cesdk.engine.block.createBlur(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtype) # Type Alias: BlurType ``` type BlurType = | BlurTypeShorthand | BlurTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtypeshorthand/) and [BlurTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/blockstate) # Type Alias: BlockState ``` type BlockState = | BlockStateError | BlockStatePending | BlockStateReady; ``` Represents the state of a design block. The `BlockState` type is a union of the `BlockStateError`, `BlockStatePending`, and `BlockStateReady` interfaces, which describe the possible states of a design block. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/blockenumtype) # Type Alias: BlockEnumType ``` type BlockEnumType = object; ``` ## Properties[#](#properties) | Property | Type | | --- | --- | | `blend/mode` | [`BlendMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blendmode/) | | `contentFill/mode` | [`ContentFillMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/contentfillmode/) | | `height/mode` | [`HeightMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/heightmode/) | | `position/x/mode` | [`PositionXMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionxmode/) | | `position/y/mode` | [`PositionYMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionymode/) | | `scene/designUnit` | [`DesignUnit`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designunit/) | | `scene/layout` | [`SceneLayout`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scenelayout/) | | `scene/mode` | [`SceneMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scenemode/) | | `width/mode` | [`WidthMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/widthmode/) | | `stroke/cornerGeometry` | [`StrokeCornerGeometry`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokecornergeometry/) | | `stroke/position` | [`StrokePosition`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokeposition/) | | `stroke/style` | [`StrokeStyle`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokestyle/) | | `text/horizontalAlignment` | [`HorizontalTextAlignment`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/horizontaltextalignment/) | | `text/verticalAlignment` | [`TextVerticalAlignment`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textverticalalignment/) | | `cutout/type` | [`CutoutType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cutouttype/) | | `caption/horizontalAlignment` | [`CaptionHorizontalAlignment`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/captionhorizontalalignment/) | | `caption/verticalAlignment` | [`CaptionVerticalAlignment`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/captionverticalalignment/) | | `animationEasing` | [`AnimationEasing`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationeasing/) | | `textAnimationWritingStyle` | [`TextAnimationWritingStyle`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textanimationwritingstyle/) | | `animation/grow/direction` | [`AnimationGrowDirection`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationgrowdirection/) | | `animation/wipe/direction` | [`AnimationWipeDirection`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationwipedirection/) | | `animation/baseline/direction` | [`AnimationBaselineDirection`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationbaselinedirection/) | | `animation/spin/direction` | [`AnimationSpinDirection`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationspindirection/) | | `animation/spin_loop/direction` | [`AnimationSpinLoopDirection`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationspinloopdirection/) | | `animation/jump_loop/direction` | [`AnimationJumpLoopDirection`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationjumploopdirection/) | | `animation/typewriter_text/writingStyle` | [`AnimationTypewriterTextWritingStyle`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypewritertextwritingstyle/) | | `animation/block_swipe_text/direction` | [`AnimationBlockSwipeTextDirection`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationblockswipetextdirection/) | | `animation/merge_text/direction` | [`AnimationMergeTextDirection`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationmergetextdirection/) | | `animation/ken_burns/direction` | [`AnimationKenBurnsDirection`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationkenburnsdirection/) | | `fill/pixelStream/orientation` | [`FillPixelStreamOrientation`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fillpixelstreamorientation/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/blendmode) # Type Alias: BlendMode ``` type BlendMode = typeof BlendModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/audiomimetype) # Type Alias: AudioMimeType ``` type AudioMimeType = Extract; ``` Represents the audio MIME types used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/audiofromvideooptions) # Type Alias: AudioFromVideoOptions ``` type AudioFromVideoOptions = object; ``` Options for configuring audio extraction from video operations. ## Properties[#](#properties) | Property | Type | Default value | Description | | --- | --- | --- | --- | | `keepTrimSettings?` | `boolean` | `true` | If true, the audio block will have the same duration, trim length, and trim offset as the source video. If false, the full audio track is extracted without trim settings. | | `muteOriginalVideo?` | `boolean` | `true` | If true, mutes the audio of the original video fill block. | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/audioexportoptions) # Type Alias: AudioExportOptions ``` type AudioExportOptions = object; ``` Represents the options for exporting audio. Defines the possible options for exporting audio. * ‘mimeType’: The MIME type of the output audio file. * ‘onProgress’: A callback which reports on the progress of the export. * ‘timeOffset’: The time offset in seconds relative to the target block. * ‘duration’: The duration in seconds of the final audio. * ‘sampleRate’: The sample rate of the exported audio. * ‘numberOfChannels’: The number of channels of the exported audio. * ‘skipEncoding’: Skip encoding (audio data will be returned immediately even if not compatible with target MIME type). ## Properties[#](#properties) | Property | Type | Default value | Description | | --- | --- | --- | --- | | `mimeType?` | [`AudioMimeType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/audiomimetype/) | `'audio/wav'` | The MIME type of the output audio file. | | `onProgress?` | (`numberOfRenderedFrames`, `numberOfEncodedFrames`, `totalNumberOfFrames`) => `void` | `undefined` | A callback which reports on the progress of the export. | | `timeOffset?` | `number` | `0` | The time offset in seconds relative to the target block. | | `duration?` | `number` | `The duration of the block.` | The duration in seconds of the final audio. | | `sampleRate?` | `number` | `48000` | The sample rate of the exported audio. | | `numberOfChannels?` | `number` | `2` | The number of channels of the exported audio. | | `skipEncoding?` | `boolean` | `false` | Skip encoding (audio data will be returned immediately even if not compatible with target MIME type). | | `abortSignal?` | `AbortSignal` | `undefined` | An AbortSignal that can be used to cancel the audio export operation. | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/assettransformpreset) # Type Alias: AssetTransformPreset ``` type AssetTransformPreset = | AssetFixedAspectRatio | AssetFreeAspectRatio | AssetFixedSize; ``` Transform preset payload --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/assetproperty) # Type Alias: AssetProperty ``` type AssetProperty = | AssetBooleanProperty | AssetColorProperty | AssetEnumProperty | AssetNumberProperty | AssetStringProperty; ``` Asset property for payload --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/assetmetadata) # Type Alias: AssetMetaData ``` type AssetMetaData = object & Record; ``` Generic asset information ## Type declaration[#](#type-declaration) | Name | Type | Description | | --- | --- | --- | | `mimeType?` | `string` | The mime type of this asset or the data behind the asset’s uri. | | `blockType?` | `string` | The type id of the design block that should be created from this asset. | | `fillType?` | `string` | \- | | `shapeType?` | `string` | \- | | `kind?` | `string` | \- | | `uri?` | `string` | \- | | `thumbUri?` | `string` | \- | | `previewUri?` | `string` | \- | | `sourceSet?` | [`Source`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/source/)\[\] | \- | | `filename?` | `string` | \- | | `vectorPath?` | `string` | \- | | `width?` | `number` | \- | | `height?` | `number` | \- | | `duration?` | `string` | \- | | `effectType?` | [`EffectType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttype/) | \- | | `blurType?` | [`BlurType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtype/) | \- | | `looping?` | `boolean` | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/assetgroups) # Type Alias: AssetGroups ``` type AssetGroups = string[]; ``` 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. Tags in comparison have are more loosely hold meaning used for extended searching/filtering. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/assetcolor) # Type Alias: AssetColor ``` type AssetColor = | AssetRGBColor | AssetCMYKColor | AssetSpotColor; ``` Asset Color payload --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/applicationmimetype) # Type Alias: ApplicationMimeType ``` type ApplicationMimeType = Extract; ``` Represents the application MIME types used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationwipedirection) # Type Alias: AnimationWipeDirection ``` type AnimationWipeDirection = typeof AnimationWipeDirectionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypewritertextwritingstyle) # Type Alias: AnimationTypewriterTextWritingStyle ``` type AnimationTypewriterTextWritingStyle = typeof AnimationTypewriterTextWritingStyleValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypeshorthand) # Type Alias: AnimationTypeShorthand ``` type AnimationTypeShorthand = typeof ANIMATION_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypelonghand) # Type Alias: AnimationTypeLonghand ``` type AnimationTypeLonghand = `//ly.img.ubq/animation/${AnimationTypeShorthand}`; ``` The longhand block type IDs for the animation blocks. These are the IDs used to create new animations using `cesdk.engine.block.createAnimation(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtype) # Type Alias: AnimationType ``` type AnimationType = | AnimationTypeShorthand | AnimationTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypeshorthand/) and [AnimationTypeLonghand](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationspinloopdirection) # Type Alias: AnimationSpinLoopDirection ``` type AnimationSpinLoopDirection = typeof AnimationSpinLoopDirectionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationspindirection) # Type Alias: AnimationSpinDirection ``` type AnimationSpinDirection = typeof AnimationSpinDirectionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationoptions) # Type Alias: AnimationOptions ``` type AnimationOptions = object; ``` Options for configuring animations (in, loop, out animations). ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `in?` | [`AnimationEntry`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationentry/) | Animation when the element enters | | `loop?` | [`AnimationEntry`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationentry/) | Animation that loops while the element is visible | | `out?` | [`AnimationEntry`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationentry/) | Animation when the element exits | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationmergetextdirection) # Type Alias: AnimationMergeTextDirection ``` type AnimationMergeTextDirection = typeof AnimationMergeTextDirectionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationkenburnsdirection) # Type Alias: AnimationKenBurnsDirection ``` type AnimationKenBurnsDirection = typeof AnimationKenBurnsDirectionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationjumploopdirection) # Type Alias: AnimationJumpLoopDirection ``` type AnimationJumpLoopDirection = typeof AnimationJumpLoopDirectionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationgrowdirection) # Type Alias: AnimationGrowDirection ``` type AnimationGrowDirection = typeof AnimationGrowDirectionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationentry) # Type Alias: AnimationEntry ``` type AnimationEntry = object; ``` Configuration options for animations. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `type` | [`AnimationType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtype/) | The type of animation to apply | | `duration` | `number` | Duration of the animation in seconds | | `easing?` | [`AnimationEasing`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationeasing/) | Easing function for the animation | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationeasing) # Type Alias: AnimationEasing ``` type AnimationEasing = typeof AnimationEasingValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationblockswipetextdirection) # Type Alias: AnimationBlockSwipeTextDirection ``` type AnimationBlockSwipeTextDirection = typeof AnimationBlockSwipeTextDirectionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/animationbaselinedirection) # Type Alias: AnimationBaselineDirection ``` type AnimationBaselineDirection = typeof AnimationBaselineDirectionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/type-aliases/addimageoptions) # Type Alias: AddImageOptions ``` type AddImageOptions = object; ``` Options for adding images to the scene. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `sizeMode?` | [`SizeMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sizemode/) | How the image should be sized and positioned | | `positionMode?` | [`PositionMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionmode/) | How the position should be interpreted | | `x?` | `number` | X position in scene design units | | `y?` | `number` | Y position in scene design units | | `cornerRadius?` | `number` | Corner radius for rounded corners in scene design units | | `size?` | | `number` | | `timeline?` | `object` | Timeline configuration for video scenes | | `timeline.timeOffset?` | `number` | Start time offset in seconds | | `timeline.duration?` | `number` | Duration in seconds | | `shadow?` | [`DropShadowOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/dropshadowoptions/) | Drop shadow configuration | | `animation?` | [`AnimationOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationoptions/) | Animation configuration | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/vec3) # Interface: Vec3 ## Properties[#](#properties) | Property | Type | | --- | --- | | `x` | `number` | | `y` | `number` | | `z` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/vec2) # Interface: Vec2 ## Properties[#](#properties) | Property | Type | | --- | --- | | `x` | `number` | | `y` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/ubqsplitoptions) # Interface: \_UBQSplitOptions Specifies options for configuring block split operations. The `UBQSplitOptions` interface provides a set of properties that control the behavior of the block splitting operation. Methods for configuring block split operations. ## Properties[#](#properties) | Property | Type | | --- | --- | | `attachToParent` | `boolean` | | `createParentTrackIfNeeded` | `boolean` | | `selectNewBlock` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/ubqexportvideooptions) # Interface: \_UBQExportVideoOptions Specifies options for exporting video design blocks to various formats. The `UBQExportVideoOptions` interface provides a set of properties that control the behavior and quality of the exported video content. These options include settings for H.264 profile, level, framerate, video bitrate, audio bitrate, and resizing. Methods for configuring export settings for video design blocks. ## Properties[#](#properties) | Property | Type | | --- | --- | | `h264Profile` | `number` | | `h264Level` | `number` | | `framerate` | `number` | | `videoBitrate` | `number` | | `audioBitrate` | `number` | | `useTargetSize` | `boolean` | | `targetWidth` | `number` | | `targetHeight` | `number` | | `allowTextOverhang` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/ubqexportoptions) # Interface: \_UBQExportOptions Specifies options for exporting design blocks to various formats. The `UBQExportOptions` interface provides a set of properties that control the behavior and quality of the exported content. These options include settings for JPEG, WebP, PNG, and PDF exports, as well as options for resizing and adding underlayers. ## Properties[#](#properties) | Property | Type | | --- | --- | | `jpegQuality` | `number` | | `webpQuality` | `number` | | `pngCompressionLevel` | `number` | | `useTargetSize` | `boolean` | | `targetWidth` | `number` | | `targetHeight` | `number` | | `exportPdfWithHighCompatibility` | `boolean` | | `exportPdfWithUnderlayer` | `boolean` | | `underlayerSpotColorName` | `string` | | `underlayerOffset` | `number` | | `allowTextOverhang` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/ubqexportaudiooptions) # Interface: \_UBQExportAudioOptions Specifies options for exporting audio design blocks to various formats. The `UBQExportAudioOptions` interface provides a set of properties that control the behavior and quality of the exported audio content. These options include settings for sample rate and number of channels. Methods for configuring export settings for audio design blocks. ## Properties[#](#properties) | Property | Type | | --- | --- | | `sampleRate` | `number` | | `numberOfChannels` | `number` | | `skipEncoding?` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/ubqaudiofromvideooptions) # Interface: \_UBQAudioFromVideoOptions Specifies options for configuring audio extraction from video operations. The `UBQAudioFromVideoOptions` interface provides a set of properties that control the behavior of the audio extraction operation. Methods for configuring audio extraction from video operations. ## Properties[#](#properties) | Property | Type | | --- | --- | | `keepTrimSettings` | `boolean` | | `muteOriginalVideo` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/typeface) # Interface: Typeface Represents a typeface. The Typeface interface defines the structure of a typeface within the Creative Editor SDK. It includes properties for the name and fonts. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `name` | `string` | The unique name of this typeface | | `fonts` | [`Font`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/font/)\[\] | The list of all fonts that are part of this typeface. | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/transientresource) # Interface: TransientResource Represents a transient resource. The `TransientResource` interface provides a set of properties that describe a transient resource, including a URL and the size of the resource. ## Properties[#](#properties) | Property | Type | | --- | --- | | `URL` | `string` | | `size` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/textfontsizeoptions) # Interface: TextFontSizeOptions Options for text font size operations with unit support. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `unit?` | [`FontSizeUnit`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontsizeunit/) | The unit of the font size. Defaults to ‘Point’ | | `from?` | `number` | The start index of the UTF-16 range. Defaults to -1 (start of selection/text) | | `to?` | `number` | The end index of the UTF-16 range. Defaults to -1 (end of selection/text) | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/spotcolor) # Interface: SpotColor Represents a spot color value. Defines a spot color value with a name, tint, and external reference. * ‘name’: The name of the spot color. * ‘tint’: The tint factor. * ‘externalReference’: The external reference of the spot color. ## Properties[#](#properties) | Property | Type | | --- | --- | | `name` | `string` | | `tint` | `number` | | `externalReference` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/source-1) # Interface: \_Source A source that can emit values to subscribed listeners ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | ``` _Source(listener): _Unsubscribe; ``` A source that can emit values to subscribed listeners ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `listener` | [`_Listener`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/listener/)<`T`\> | ## Returns[#](#returns) [`_Unsubscribe`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/) ## Properties[#](#properties) | Property | Type | | --- | --- | | `emit` | (`value`) => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/source) # Interface: Source A single source width an intrinsic width & height. ## Properties[#](#properties) | Property | Type | | --- | --- | | `uri` | `string` | | `width` | `number` | | `height` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/size2) # Interface: Size2 ## Properties[#](#properties) | Property | Type | | --- | --- | | `width` | `number` | | `height` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/settings) # Interface: Settings Map of all available settings with their types. This provides type-safe access to all editor settings. The settings are organized by type: * Boolean settings control various on/off features in the editor * String settings configure paths and textual values * Float settings define numerical thresholds and limits * Integer settings specify whole number limits * Color settings control the visual appearance * Enum settings provide predefined choice options ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `controlGizmo/showCropHandles` | `boolean` | Whether to show handles for adjusting the crop area during crop mode. | | `controlGizmo/showCropScaleHandles` | `boolean` | Whether to display the outer handles that scale the full image during crop. | | `controlGizmo/showMoveHandles` | `boolean` | Whether to show the move handles. | | `controlGizmo/showResizeHandles` | `boolean` | Whether to display the non-proportional resize handles (edge handles). | | `controlGizmo/showRotateHandles` | `boolean` | Whether to show the rotation handles. | | `controlGizmo/showScaleHandles` | `boolean` | Whether to display the proportional scale handles (corner handles). | | `doubleClickToCropEnabled` | `boolean` | Enable double-click to enter crop mode. | | `features/singlePageModeEnabled` | `boolean` | Enable single page mode where only one page is shown at a time. | | `features/pageCarouselEnabled` | `boolean` | Enable the page carousel for navigating between pages. | | `features/transformEditsRetainCoverMode` | `boolean` | Whether transform edits should retain the cover mode of the content. | | `mouse/enableScroll` | `boolean` | Whether the engine processes mouse scroll events. | | `mouse/enableZoom` | `boolean` | Whether the engine processes mouse zoom events. | | `page/allowCropInteraction` | `boolean` | Whether crop interaction (by handles and gestures) should be possible. | | `page/allowMoveInteraction` | `boolean` | Whether move interaction should be possible when page layout is not controlled by the scene. | | `page/allowResizeInteraction` | `boolean` | Whether resize interaction (by handles and gestures) should be possible. | | `page/allowRotateInteraction` | `boolean` | Whether rotation interaction should be possible when page layout is not controlled by the scene. | | `page/dimOutOfPageAreas` | `boolean` | Whether the opacity of the region outside of all pages should be reduced. | | `page/restrictResizeInteractionToFixedAspectRatio` | `boolean` | Whether resize interaction should be restricted to fixed aspect ratio. | | `page/moveChildrenWhenCroppingFill` | `boolean` | Whether children of the page should be transformed to match their old position when cropping. | | `page/title/appendPageName` | `boolean` | Whether to append the page name to the title even if not specified in the template. | | `page/title/show` | `boolean` | Whether to show titles above each page. | | `page/title/showOnSinglePage` | `boolean` | Whether to hide the page title when only a single page exists. | | `page/title/showPageTitleTemplate` | `boolean` | Whether to include the default page title from page.titleTemplate. | | `placeholderControls/showButton` | `boolean` | Whether to show the placeholder button. | | `placeholderControls/showOverlay` | `boolean` | Whether to show the overlay pattern for placeholders. | | `blockAnimations/enabled` | `boolean` | Whether animations should be enabled or not. | | `showBuildVersion` | `boolean` | Whether to display the build version in the UI. | | `touch/dragStartCanSelect` | `boolean` | Whether drag start can select elements. | | `touch/singlePointPanning` | `boolean` | Whether single-point panning is enabled for touch interactions. | | `useSystemFontFallback` | `boolean` | Whether to use system font as fallback for missing glyphs. | | `forceSystemEmojis` | `boolean` | Whether to force the use of system emojis instead of custom emoji fonts. | | `page/selectWhenNoBlocksSelected` | `boolean` | Whether to select the page when a block is deselected and no other blocks are selected. | | `clampThumbnailTextureSizes` | `boolean` | Clamp thumbnail texture sizes to the platform’s GPU texture limit. | | `dock/hideLabels` | `boolean` | Toggle the dock components visibility | | `basePath` | `string` | The root directory used when resolving relative paths or accessing bundle:// URIs. | | `defaultEmojiFontFileUri` | `string` | The URI for the default emoji font file. | | `defaultFontFileUri` | `string` | The URI for the default font file. | | `license` | `string` | The license key for the SDK. | | `page/title/fontFileUri` | `string` | The font file URI for page titles. | | `page/title/separator` | `string` | The separator between page number and page name in titles. | | `fallbackFontUri` | `string` | The URI for the fallback font used when glyphs are missing. | | `upload/supportedMimeTypes` | `string` | The supported MIME types for file uploads. | | `web/fetchCredentials` | `"omit"` | `"same-origin"` | | `controlGizmo/blockScaleDownLimit` | `number` | Scale-down limit for blocks in screen pixels when scaling with gizmos or touch gestures. | | `positionSnappingThreshold` | `number` | The threshold distance in pixels for position snapping. | | `rotationSnappingThreshold` | `number` | The threshold angle in degrees for rotation snapping. | | `maxImageSize` | `number` | The maximum size (width or height) in pixels for images. | | `borderOutlineColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color of the border outline for selected elements. | | `clearColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The background clear color. | | `colorMaskingSettings/maskColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color used for color masking effects. | | `cropOverlayColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color of the crop overlay. | | `errorStateColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color indicating an error state. | | `highlightColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The highlight color for selected or active elements. | | `page/innerBorderColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color of the inner frame around the page. | | `page/marginFillColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color filled into the bleed margins of pages. | | `page/marginFrameColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color of the frame around the bleed margin area. | | `page/outerBorderColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color of the outer frame around the page. | | `page/title/color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color of page titles visible in preview mode. | | `pageHighlightColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | Color of the outline of each page | | `placeholderHighlightColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The highlight color for placeholder elements. | | `progressColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color indicating progress or loading states. | | `rotationSnappingGuideColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color of rotation snapping guide lines. | | `ruleOfThirdsLineColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color of rule of thirds guide lines. | | `snappingGuideColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color of snapping guide lines. | | `textVariableHighlightColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The highlight color for text variables. | | `handleFillColor` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The fill color for handles. | | `doubleClickSelectionMode` | `"Direct"` | `"Hierarchical"` | | `touch/pinchAction` | `"None"` | `"Zoom"` | | `touch/rotateAction` | `"None"` | `"Rotate"` | | `camera/clamping/overshootMode` | `"Center"` | `"Reverse"` | | `dock/iconSize` | `"normal"` | `"large"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/rgbcolor) # Interface: RGBColor Represents an RGB color value. Defines an RGB color value with components between 0 and 1. * ‘r’: The red component. * ‘g’: The green component. * ‘b’: The blue component. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `r` | `number` | Red | | `g` | `number` | Green | | `b` | `number` | Blue | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/rgbacolor) # Interface: RGBAColor Represents an RGBA color value. Defines an RGBA color value with components between 0 and 1. * ‘r’: The red component. * ‘g’: The green component. * ‘b’: The blue component. * ‘a’: The alpha component. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `r` | `number` | Red | | `g` | `number` | Green | | `b` | `number` | Blue | | `a` | `number` | Alpha | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/refocusevent) # Interface: RefocusEvent Dispatched on the engine canvas right before the engine will refocus its text input after a blur. Call `preventDefault()` to prevent the refocusing. ## Extends[#](#extends) * `CustomEvent`<`EventTarget` | `null`\> ## Methods[#](#methods) ### preventDefault()[#](#preventdefault) ``` preventDefault(): void; ``` Prevent refocusing the engine input #### Returns[#](#returns) `void` #### Overrides[#](#overrides) ``` CustomEvent.preventDefault ``` * * * ### ~initCustomEvent()~[#](#initcustomevent) ``` initCustomEvent( type, bubbles?, cancelable?, detail?): void; ``` #### Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | | `detail?` | `EventTarget` | #### Returns[#](#returns-1) `void` #### Deprecated[#](#deprecated) [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/initCustomEvent) #### Inherited from[#](#inherited-from) ``` CustomEvent.initCustomEvent ``` * * * ### composedPath()[#](#composedpath) ``` composedPath(): EventTarget[]; ``` Returns the invocation target objects of event’s path (objects on which listeners will be invoked), except for any nodes in shadow trees of which the shadow root’s mode is “closed” that are not reachable from event’s currentTarget. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composedPath) #### Returns[#](#returns-2) `EventTarget`\[\] #### Inherited from[#](#inherited-from-1) ``` CustomEvent.composedPath ``` * * * ### ~initEvent()~[#](#initevent) ``` initEvent( type, bubbles?, cancelable?): void; ``` #### Parameters[#](#parameters-1) | Parameter | Type | | --- | --- | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | #### Returns[#](#returns-3) `void` #### Deprecated[#](#deprecated-1) [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/initEvent) #### Inherited from[#](#inherited-from-2) ``` CustomEvent.initEvent ``` * * * ### stopImmediatePropagation()[#](#stopimmediatepropagation) ``` stopImmediatePropagation(): void; ``` Invoking this method prevents event from reaching any registered event listeners after the current one finishes running and, when dispatched in a tree, also prevents event from reaching any other objects. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation) #### Returns[#](#returns-4) `void` #### Inherited from[#](#inherited-from-3) ``` CustomEvent.stopImmediatePropagation ``` * * * ### stopPropagation()[#](#stoppropagation) ``` stopPropagation(): void; ``` When dispatched in a tree, invoking this method prevents event from reaching any objects other than the current object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) #### Returns[#](#returns-5) `void` #### Inherited from[#](#inherited-from-4) ``` CustomEvent.stopPropagation ``` ## Properties[#](#properties) | Property | Modifier | Type | Description | Overrides | Inherited from | | --- | --- | --- | --- | --- | --- | | `type` | `readonly` | `"cesdk-refocus"` | Returns the type of event, e.g. “click”, “hashchange”, or “submit”. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/type) | `CustomEvent.type` | \- | | `detail` | `readonly` | `EventTarget` | Contains the element that has received focus during the blur, or null | `CustomEvent.detail` | \- | | `bubbles` | `readonly` | `boolean` | Returns true or false depending on how event was initialized. True if event goes through its target’s ancestors in reverse tree order, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/bubbles) | \- | `CustomEvent.bubbles` | | ~`cancelBubble`~ | `public` | `boolean` | **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelBubble) | \- | `CustomEvent.cancelBubble` | | `cancelable` | `readonly` | `boolean` | Returns true or false depending on how event was initialized. Its return value does not always carry meaning, but true can indicate that part of the operation during which event was dispatched, can be canceled by invoking the preventDefault() method. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelable) | \- | `CustomEvent.cancelable` | | `composed` | `readonly` | `boolean` | Returns true or false depending on how event was initialized. True if event invokes listeners past a ShadowRoot node that is the root of its target, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composed) | \- | `CustomEvent.composed` | | `currentTarget` | `readonly` | `EventTarget` | Returns the object whose event listener’s callback is currently being invoked. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget) | \- | `CustomEvent.currentTarget` | | `defaultPrevented` | `readonly` | `boolean` | Returns true if preventDefault() was invoked successfully to indicate cancelation, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/defaultPrevented) | \- | `CustomEvent.defaultPrevented` | | `eventPhase` | `readonly` | `number` | Returns the event’s phase, which is one of NONE, CAPTURING\_PHASE, AT\_TARGET, and BUBBLING\_PHASE. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/eventPhase) | \- | `CustomEvent.eventPhase` | | `isTrusted` | `readonly` | `boolean` | Returns true if event was dispatched by the user agent, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/isTrusted) | \- | `CustomEvent.isTrusted` | | ~`returnValue`~ | `public` | `boolean` | **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/returnValue) | \- | `CustomEvent.returnValue` | | ~`srcElement`~ | `readonly` | `EventTarget` | **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/srcElement) | \- | `CustomEvent.srcElement` | | `target` | `readonly` | `EventTarget` | Returns the object to which event is dispatched (its target). [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target) | \- | `CustomEvent.target` | | `timeStamp` | `readonly` | `number` | Returns the event’s timestamp as the number of milliseconds measured relative to the time origin. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/timeStamp) | \- | `CustomEvent.timeStamp` | | `NONE` | `readonly` | `0` | \- | \- | `CustomEvent.NONE` | | `CAPTURING_PHASE` | `readonly` | `1` | \- | \- | `CustomEvent.CAPTURING_PHASE` | | `AT_TARGET` | `readonly` | `2` | \- | \- | `CustomEvent.AT_TARGET` | | `BUBBLING_PHASE` | `readonly` | `3` | \- | \- | `CustomEvent.BUBBLING_PHASE` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/readonlyreactiveproperty) # Interface: \_ReadonlyReactiveProperty A read-only reactive property with subscribe and value methods ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `subscribe` | (`listener`) => [`_Unsubscribe`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/) | Subscribe to value changes | | `value` | () => `T` | Get current value | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/reactor) # Interface: Reactor The reactor coordinates the update of registered _Reactions_. * Reactions are created with `createReaction()` * `reaction.track(effect)` will run the effect and associate any engine read calls during the execution with the Reaction. * `reaction.subscribe(handler)` will invoke the handler whenever the engine read calls in the reaction might have changed after an update. ## Methods[#](#methods) ### createReaction()[#](#createreaction) ``` createReaction(debugName?): Reaction; ``` Create and return a new Reaction that is associated with this Reactor. #### Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `debugName?` | `string` | #### Returns[#](#returns) [`Reaction`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reaction/) * * * ### dispose()[#](#dispose) ``` dispose(): void; ``` Dispose the reactor and all reactions. After this call, the reactor is no longer usable. #### Returns[#](#returns-1) `void` ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `nextReaction` | `Promise`<`void`\> | A promise that will resolve after the next update of the Reactor. This can be used to wait for the next update of the Reactor in an async function. `await reactor.nextReaction;` This is useful in situations where you want to make sure that the effects of a reactor update have propagated to any dependent code before continuing. Particularly, this can be used to ensure that the UI has updated before continuing with other operations. | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/reactivepropertyoptions) # Interface: \_ReactivePropertyOptions Options for creating a reactive property ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `equals?` | [`_EqualsFn`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/equalsfn/)<`T`\> | Equality comparison function (default: strict equality) | | `emitOnSubscribe?` | `boolean` | If true, emit the initial value to new subscribers | | `trackSource?` | (`listener`) => [`_Unsubscribe`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/) | Optional source to track (will subscribe and forward updates) | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/reactiveproperty) # Interface: \_ReactiveProperty A reactive property with subscribe, value, and update methods ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `subscribe` | (`listener`) => [`_Unsubscribe`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/) | Subscribe to value changes | | `value` | () => `T` | Get current value | | `update` | (`newValue`) => `void` | Update the value (will notify listeners if changed) | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/reaction) # Interface: Reaction Reactions track read calls and provide a way to react if they change. * Read calls are tracked by passing a function to `track`. That function will be executed, and any read calls made during that execution will be tracked and associated with this reaction. * Reactions can be subscribed to by passing a callback to `subscribe`. That callback will be executed whenever any of the read calls associated with this reaction change. ## Methods[#](#methods) ### track()[#](#track) ``` track(cb): T; ``` Execute the callback and track all engine read calls that happen during the execution. These read calls are associated with this reaction. #### Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | #### Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `cb` | () => `T` | #### Returns[#](#returns) `T` * * * ### subscribe()[#](#subscribe) ``` subscribe(cb): () => void; ``` When the Reactor detects that the engine read calls associated with this reaction might have changed, it will invoke the subscription handler. #### Parameters[#](#parameters-1) | Parameter | Type | | --- | --- | | `cb` | () => `void` | #### Returns[#](#returns-1) A function that can be called to unsubscribe the handler. ``` (): void; ``` ##### Returns[#](#returns-2) `void` * * * ### dispose()[#](#dispose) ``` dispose(): void; ``` Unsubscribe all handlers, nullify the reference to the Reactor and dispose the reaction. #### Returns[#](#returns-3) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/range) # Interface: Range An open range. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `from` | `number` | The starting value of the range | | `to` | `number` | The non-inclusive ending value of the range | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/pageduration) # Interface: PageDuration ## Properties[#](#properties) | Property | Type | | --- | --- | | `pageId` | `number` | | `duration` | `number` | | `start` | `number` | | `end` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/logger) # Interface: Logger Represents a logger function. The Logger interface defines the structure of a logger function within the Creative Editor SDK. It includes a method for logging messages with an optional log level. ``` Logger(message, level?): void; ``` Represents a logger function. The Logger interface defines the structure of a logger function within the Creative Editor SDK. It includes a method for logging messages with an optional log level. ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `message` | `string` | | `level?` | [`LogLevel`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/loglevel/) | ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/gradientcolorstop) # Interface: GradientColorStop Represents a gradient color stop. Defines a gradient color stop with a color and a stop position. * ‘color’: The color value. * ‘stop’: The relative position of the color within the gradient in the range \[0, 1\]. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | A color value within a gradient. | | `stop` | `number` | The relative position of the color within the gradient in the range \[0, 1\]. | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/htmlcreativeenginecanvaselement) # Interface: HTMLCreativeEngineCanvasElement A wrapper around a plain canvas The idea is to shield the user from the weird semantics of changing width and height of a canvas by making this a opaque block element instead and managing the internal render resolution of the canvas dynamically ## Extends[#](#extends) * `HTMLElement` ## Methods[#](#methods) ### clear()[#](#clear) ``` clear(): void; ``` Clear the canvas This is useful when mounting the canvas into a new position in the DOM. If the canvas is not cleared, it will appear in the new DOM position, with its contents stretched to the new size. It will re-render correctly during the next animation frame, but for a brief moment the canvas contents can flash distorted. Call `clear()` before mounting into the DOM to avoid this. This will cause the canvas to be cleared until rendering the next frame. #### Returns[#](#returns) `void` * * * ### animate()[#](#animate) ``` animate(keyframes, options?): Animation; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animate) #### Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `keyframes` | `Keyframe`\[\] | | `options?` | `number` | #### Returns[#](#returns-1) `Animation` #### Inherited from[#](#inherited-from) ``` HTMLElement.animate ``` * * * ### getAnimations()[#](#getanimations) ``` getAnimations(options?): Animation[]; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAnimations) #### Parameters[#](#parameters-1) | Parameter | Type | | --- | --- | | `options?` | `GetAnimationsOptions` | #### Returns[#](#returns-2) `Animation`\[\] #### Inherited from[#](#inherited-from-1) ``` HTMLElement.getAnimations ``` * * * ### after()[#](#after) ``` after(...nodes): void; ``` Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/after) #### Parameters[#](#parameters-2) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-3) `void` #### Inherited from[#](#inherited-from-2) ``` HTMLElement.after ``` * * * ### before()[#](#before) ``` before(...nodes): void; ``` Inserts nodes just before node, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/before) #### Parameters[#](#parameters-3) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-4) `void` #### Inherited from[#](#inherited-from-3) ``` HTMLElement.before ``` * * * ### remove()[#](#remove) ``` remove(): void; ``` Removes node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/remove) #### Returns[#](#returns-5) `void` #### Inherited from[#](#inherited-from-4) ``` HTMLElement.remove ``` * * * ### replaceWith()[#](#replacewith) ``` replaceWith(...nodes): void; ``` Replaces node with nodes, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/replaceWith) #### Parameters[#](#parameters-4) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-6) `void` #### Inherited from[#](#inherited-from-5) ``` HTMLElement.replaceWith ``` * * * ### attachShadow()[#](#attachshadow) ``` attachShadow(init): ShadowRoot; ``` Creates a shadow root for element and returns it. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/attachShadow) #### Parameters[#](#parameters-5) | Parameter | Type | | --- | --- | | `init` | `ShadowRootInit` | #### Returns[#](#returns-7) `ShadowRoot` #### Inherited from[#](#inherited-from-6) ``` HTMLElement.attachShadow ``` * * * ### checkVisibility()[#](#checkvisibility) ``` checkVisibility(options?): boolean; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/checkVisibility) #### Parameters[#](#parameters-6) | Parameter | Type | | --- | --- | | `options?` | `CheckVisibilityOptions` | #### Returns[#](#returns-8) `boolean` #### Inherited from[#](#inherited-from-7) ``` HTMLElement.checkVisibility ``` * * * ### closest()[#](#closest) #### Call Signature[#](#call-signature) ``` closest(selector): HTMLElementTagNameMap[K]; ``` Returns the first (starting at element) inclusive ancestor that matches selectors, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/closest) ##### Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementTagNameMap` | ##### Parameters[#](#parameters-7) | Parameter | Type | | --- | --- | | `selector` | `K` | ##### Returns[#](#returns-9) `HTMLElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-8) ``` HTMLElement.closest ``` #### Call Signature[#](#call-signature-1) ``` closest(selector): SVGElementTagNameMap[K]; ``` ##### Type Parameters[#](#type-parameters-1) | Type Parameter | | --- | | `K` _extends_ keyof `SVGElementTagNameMap` | ##### Parameters[#](#parameters-8) | Parameter | Type | | --- | --- | | `selector` | `K` | ##### Returns[#](#returns-10) `SVGElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-9) ``` HTMLElement.closest ``` #### Call Signature[#](#call-signature-2) ``` closest(selector): MathMLElementTagNameMap[K]; ``` ##### Type Parameters[#](#type-parameters-2) | Type Parameter | | --- | | `K` _extends_ keyof `MathMLElementTagNameMap` | ##### Parameters[#](#parameters-9) | Parameter | Type | | --- | --- | | `selector` | `K` | ##### Returns[#](#returns-11) `MathMLElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-10) ``` HTMLElement.closest ``` #### Call Signature[#](#call-signature-3) ``` closest(selectors): E; ``` ##### Type Parameters[#](#type-parameters-3) | Type Parameter | Default type | | --- | --- | | `E` _extends_ `Element` | `Element` | ##### Parameters[#](#parameters-10) | Parameter | Type | | --- | --- | | `selectors` | `string` | ##### Returns[#](#returns-12) `E` ##### Inherited from[#](#inherited-from-11) ``` HTMLElement.closest ``` * * * ### computedStyleMap()[#](#computedstylemap) ``` computedStyleMap(): StylePropertyMapReadOnly; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/computedStyleMap) #### Returns[#](#returns-13) `StylePropertyMapReadOnly` #### Inherited from[#](#inherited-from-12) ``` HTMLElement.computedStyleMap ``` * * * ### getAttribute()[#](#getattribute) ``` getAttribute(qualifiedName): string; ``` Returns element’s first attribute whose qualified name is qualifiedName, and null if there is no such attribute otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttribute) #### Parameters[#](#parameters-11) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | #### Returns[#](#returns-14) `string` #### Inherited from[#](#inherited-from-13) ``` HTMLElement.getAttribute ``` * * * ### getAttributeNS()[#](#getattributens) ``` getAttributeNS(namespace, localName): string; ``` Returns element’s attribute whose namespace is namespace and local name is localName, and null if there is no such attribute otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNS) #### Parameters[#](#parameters-12) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `localName` | `string` | #### Returns[#](#returns-15) `string` #### Inherited from[#](#inherited-from-14) ``` HTMLElement.getAttributeNS ``` * * * ### getAttributeNames()[#](#getattributenames) ``` getAttributeNames(): string[]; ``` Returns the qualified names of all element’s attributes. Can contain duplicates. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNames) #### Returns[#](#returns-16) `string`\[\] #### Inherited from[#](#inherited-from-15) ``` HTMLElement.getAttributeNames ``` * * * ### getAttributeNode()[#](#getattributenode) ``` getAttributeNode(qualifiedName): Attr; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNode) #### Parameters[#](#parameters-13) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | #### Returns[#](#returns-17) `Attr` #### Inherited from[#](#inherited-from-16) ``` HTMLElement.getAttributeNode ``` * * * ### getAttributeNodeNS()[#](#getattributenodens) ``` getAttributeNodeNS(namespace, localName): Attr; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNodeNS) #### Parameters[#](#parameters-14) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `localName` | `string` | #### Returns[#](#returns-18) `Attr` #### Inherited from[#](#inherited-from-17) ``` HTMLElement.getAttributeNodeNS ``` * * * ### getBoundingClientRect()[#](#getboundingclientrect) ``` getBoundingClientRect(): DOMRect; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect) #### Returns[#](#returns-19) `DOMRect` #### Inherited from[#](#inherited-from-18) ``` HTMLElement.getBoundingClientRect ``` * * * ### getClientRects()[#](#getclientrects) ``` getClientRects(): DOMRectList; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getClientRects) #### Returns[#](#returns-20) `DOMRectList` #### Inherited from[#](#inherited-from-19) ``` HTMLElement.getClientRects ``` * * * ### getElementsByClassName()[#](#getelementsbyclassname) ``` getElementsByClassName(classNames): HTMLCollectionOf; ``` Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getElementsByClassName) #### Parameters[#](#parameters-15) | Parameter | Type | | --- | --- | | `classNames` | `string` | #### Returns[#](#returns-21) `HTMLCollectionOf`<`Element`\> #### Inherited from[#](#inherited-from-20) ``` HTMLElement.getElementsByClassName ``` * * * ### getElementsByTagName()[#](#getelementsbytagname) #### Call Signature[#](#call-signature-4) ``` getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getElementsByTagName) ##### Type Parameters[#](#type-parameters-4) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementTagNameMap` | ##### Parameters[#](#parameters-16) | Parameter | Type | | --- | --- | | `qualifiedName` | `K` | ##### Returns[#](#returns-22) `HTMLCollectionOf`<`HTMLElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-21) ``` HTMLElement.getElementsByTagName ``` #### Call Signature[#](#call-signature-5) ``` getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Type Parameters[#](#type-parameters-5) | Type Parameter | | --- | | `K` _extends_ keyof `SVGElementTagNameMap` | ##### Parameters[#](#parameters-17) | Parameter | Type | | --- | --- | | `qualifiedName` | `K` | ##### Returns[#](#returns-23) `HTMLCollectionOf`<`SVGElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-22) ``` HTMLElement.getElementsByTagName ``` #### Call Signature[#](#call-signature-6) ``` getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Type Parameters[#](#type-parameters-6) | Type Parameter | | --- | | `K` _extends_ keyof `MathMLElementTagNameMap` | ##### Parameters[#](#parameters-18) | Parameter | Type | | --- | --- | | `qualifiedName` | `K` | ##### Returns[#](#returns-24) `HTMLCollectionOf`<`MathMLElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-23) ``` HTMLElement.getElementsByTagName ``` #### Call Signature[#](#call-signature-7) ``` getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Type Parameters[#](#type-parameters-7) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementDeprecatedTagNameMap` | ##### Parameters[#](#parameters-19) | Parameter | Type | | --- | --- | | `qualifiedName` | `K` | ##### Returns[#](#returns-25) `HTMLCollectionOf`<`HTMLElementDeprecatedTagNameMap`\[`K`\]> ##### Deprecated[#](#deprecated) ##### Inherited from[#](#inherited-from-24) ``` HTMLElement.getElementsByTagName ``` #### Call Signature[#](#call-signature-8) ``` getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Parameters[#](#parameters-20) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | ##### Returns[#](#returns-26) `HTMLCollectionOf`<`Element`\> ##### Inherited from[#](#inherited-from-25) ``` HTMLElement.getElementsByTagName ``` * * * ### getElementsByTagNameNS()[#](#getelementsbytagnamens) #### Call Signature[#](#call-signature-9) ``` getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getElementsByTagNameNS) ##### Parameters[#](#parameters-21) | Parameter | Type | | --- | --- | | `namespaceURI` | `"http://www.w3.org/1999/xhtml"` | | `localName` | `string` | ##### Returns[#](#returns-27) `HTMLCollectionOf`<`HTMLElement`\> ##### Inherited from[#](#inherited-from-26) ``` HTMLElement.getElementsByTagNameNS ``` #### Call Signature[#](#call-signature-10) ``` getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; ``` ##### Parameters[#](#parameters-22) | Parameter | Type | | --- | --- | | `namespaceURI` | `"http://www.w3.org/2000/svg"` | | `localName` | `string` | ##### Returns[#](#returns-28) `HTMLCollectionOf`<`SVGElement`\> ##### Inherited from[#](#inherited-from-27) ``` HTMLElement.getElementsByTagNameNS ``` #### Call Signature[#](#call-signature-11) ``` getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; ``` ##### Parameters[#](#parameters-23) | Parameter | Type | | --- | --- | | `namespaceURI` | `"http://www.w3.org/1998/Math/MathML"` | | `localName` | `string` | ##### Returns[#](#returns-29) `HTMLCollectionOf`<`MathMLElement`\> ##### Inherited from[#](#inherited-from-28) ``` HTMLElement.getElementsByTagNameNS ``` #### Call Signature[#](#call-signature-12) ``` getElementsByTagNameNS(namespace, localName): HTMLCollectionOf; ``` ##### Parameters[#](#parameters-24) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `localName` | `string` | ##### Returns[#](#returns-30) `HTMLCollectionOf`<`Element`\> ##### Inherited from[#](#inherited-from-29) ``` HTMLElement.getElementsByTagNameNS ``` * * * ### getHTML()[#](#gethtml) ``` getHTML(options?): string; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getHTML) #### Parameters[#](#parameters-25) | Parameter | Type | | --- | --- | | `options?` | `GetHTMLOptions` | #### Returns[#](#returns-31) `string` #### Inherited from[#](#inherited-from-30) ``` HTMLElement.getHTML ``` * * * ### hasAttribute()[#](#hasattribute) ``` hasAttribute(qualifiedName): boolean; ``` Returns true if element has an attribute whose qualified name is qualifiedName, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasAttribute) #### Parameters[#](#parameters-26) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | #### Returns[#](#returns-32) `boolean` #### Inherited from[#](#inherited-from-31) ``` HTMLElement.hasAttribute ``` * * * ### hasAttributeNS()[#](#hasattributens) ``` hasAttributeNS(namespace, localName): boolean; ``` Returns true if element has an attribute whose namespace is namespace and local name is localName. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasAttributeNS) #### Parameters[#](#parameters-27) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `localName` | `string` | #### Returns[#](#returns-33) `boolean` #### Inherited from[#](#inherited-from-32) ``` HTMLElement.hasAttributeNS ``` * * * ### hasAttributes()[#](#hasattributes) ``` hasAttributes(): boolean; ``` Returns true if element has attributes, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasAttributes) #### Returns[#](#returns-34) `boolean` #### Inherited from[#](#inherited-from-33) ``` HTMLElement.hasAttributes ``` * * * ### hasPointerCapture()[#](#haspointercapture) ``` hasPointerCapture(pointerId): boolean; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasPointerCapture) #### Parameters[#](#parameters-28) | Parameter | Type | | --- | --- | | `pointerId` | `number` | #### Returns[#](#returns-35) `boolean` #### Inherited from[#](#inherited-from-34) ``` HTMLElement.hasPointerCapture ``` * * * ### insertAdjacentElement()[#](#insertadjacentelement) ``` insertAdjacentElement(where, element): Element; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentElement) #### Parameters[#](#parameters-29) | Parameter | Type | | --- | --- | | `where` | `InsertPosition` | | `element` | `Element` | #### Returns[#](#returns-36) `Element` #### Inherited from[#](#inherited-from-35) ``` HTMLElement.insertAdjacentElement ``` * * * ### insertAdjacentHTML()[#](#insertadjacenthtml) ``` insertAdjacentHTML(position, string): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML) #### Parameters[#](#parameters-30) | Parameter | Type | | --- | --- | | `position` | `InsertPosition` | | `string` | `string` | #### Returns[#](#returns-37) `void` #### Inherited from[#](#inherited-from-36) ``` HTMLElement.insertAdjacentHTML ``` * * * ### insertAdjacentText()[#](#insertadjacenttext) ``` insertAdjacentText(where, data): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentText) #### Parameters[#](#parameters-31) | Parameter | Type | | --- | --- | | `where` | `InsertPosition` | | `data` | `string` | #### Returns[#](#returns-38) `void` #### Inherited from[#](#inherited-from-37) ``` HTMLElement.insertAdjacentText ``` * * * ### matches()[#](#matches) ``` matches(selectors): boolean; ``` Returns true if matching selectors against element’s root yields element, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/matches) #### Parameters[#](#parameters-32) | Parameter | Type | | --- | --- | | `selectors` | `string` | #### Returns[#](#returns-39) `boolean` #### Inherited from[#](#inherited-from-38) ``` HTMLElement.matches ``` * * * ### releasePointerCapture()[#](#releasepointercapture) ``` releasePointerCapture(pointerId): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/releasePointerCapture) #### Parameters[#](#parameters-33) | Parameter | Type | | --- | --- | | `pointerId` | `number` | #### Returns[#](#returns-40) `void` #### Inherited from[#](#inherited-from-39) ``` HTMLElement.releasePointerCapture ``` * * * ### removeAttribute()[#](#removeattribute) ``` removeAttribute(qualifiedName): void; ``` Removes element’s first attribute whose qualified name is qualifiedName. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttribute) #### Parameters[#](#parameters-34) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | #### Returns[#](#returns-41) `void` #### Inherited from[#](#inherited-from-40) ``` HTMLElement.removeAttribute ``` * * * ### removeAttributeNS()[#](#removeattributens) ``` removeAttributeNS(namespace, localName): void; ``` Removes element’s attribute whose namespace is namespace and local name is localName. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttributeNS) #### Parameters[#](#parameters-35) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `localName` | `string` | #### Returns[#](#returns-42) `void` #### Inherited from[#](#inherited-from-41) ``` HTMLElement.removeAttributeNS ``` * * * ### removeAttributeNode()[#](#removeattributenode) ``` removeAttributeNode(attr): Attr; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttributeNode) #### Parameters[#](#parameters-36) | Parameter | Type | | --- | --- | | `attr` | `Attr` | #### Returns[#](#returns-43) `Attr` #### Inherited from[#](#inherited-from-42) ``` HTMLElement.removeAttributeNode ``` * * * ### requestFullscreen()[#](#requestfullscreen) ``` requestFullscreen(options?): Promise; ``` Displays element fullscreen and resolves promise when done. When supplied, options’s navigationUI member indicates whether showing navigation UI while in fullscreen is preferred or not. If set to “show”, navigation simplicity is preferred over screen space, and if set to “hide”, more screen space is preferred. User agents are always free to honor user preference over the application’s. The default value “auto” indicates no application preference. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/requestFullscreen) #### Parameters[#](#parameters-37) | Parameter | Type | | --- | --- | | `options?` | `FullscreenOptions` | #### Returns[#](#returns-44) `Promise`<`void`\> #### Inherited from[#](#inherited-from-43) ``` HTMLElement.requestFullscreen ``` * * * ### requestPointerLock()[#](#requestpointerlock) ``` requestPointerLock(options?): Promise; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/requestPointerLock) #### Parameters[#](#parameters-38) | Parameter | Type | | --- | --- | | `options?` | `PointerLockOptions` | #### Returns[#](#returns-45) `Promise`<`void`\> #### Inherited from[#](#inherited-from-44) ``` HTMLElement.requestPointerLock ``` * * * ### scroll()[#](#scroll) #### Call Signature[#](#call-signature-13) ``` scroll(options?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scroll) ##### Parameters[#](#parameters-39) | Parameter | Type | | --- | --- | | `options?` | `ScrollToOptions` | ##### Returns[#](#returns-46) `void` ##### Inherited from[#](#inherited-from-45) ``` HTMLElement.scroll ``` #### Call Signature[#](#call-signature-14) ``` scroll(x, y): void; ``` ##### Parameters[#](#parameters-40) | Parameter | Type | | --- | --- | | `x` | `number` | | `y` | `number` | ##### Returns[#](#returns-47) `void` ##### Inherited from[#](#inherited-from-46) ``` HTMLElement.scroll ``` * * * ### scrollBy()[#](#scrollby) #### Call Signature[#](#call-signature-15) ``` scrollBy(options?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollBy) ##### Parameters[#](#parameters-41) | Parameter | Type | | --- | --- | | `options?` | `ScrollToOptions` | ##### Returns[#](#returns-48) `void` ##### Inherited from[#](#inherited-from-47) ``` HTMLElement.scrollBy ``` #### Call Signature[#](#call-signature-16) ``` scrollBy(x, y): void; ``` ##### Parameters[#](#parameters-42) | Parameter | Type | | --- | --- | | `x` | `number` | | `y` | `number` | ##### Returns[#](#returns-49) `void` ##### Inherited from[#](#inherited-from-48) ``` HTMLElement.scrollBy ``` * * * ### scrollIntoView()[#](#scrollintoview) ``` scrollIntoView(arg?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView) #### Parameters[#](#parameters-43) | Parameter | Type | | --- | --- | | `arg?` | `boolean` | #### Returns[#](#returns-50) `void` #### Inherited from[#](#inherited-from-49) ``` HTMLElement.scrollIntoView ``` * * * ### scrollTo()[#](#scrollto) #### Call Signature[#](#call-signature-17) ``` scrollTo(options?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTo) ##### Parameters[#](#parameters-44) | Parameter | Type | | --- | --- | | `options?` | `ScrollToOptions` | ##### Returns[#](#returns-51) `void` ##### Inherited from[#](#inherited-from-50) ``` HTMLElement.scrollTo ``` #### Call Signature[#](#call-signature-18) ``` scrollTo(x, y): void; ``` ##### Parameters[#](#parameters-45) | Parameter | Type | | --- | --- | | `x` | `number` | | `y` | `number` | ##### Returns[#](#returns-52) `void` ##### Inherited from[#](#inherited-from-51) ``` HTMLElement.scrollTo ``` * * * ### setAttribute()[#](#setattribute) ``` setAttribute(qualifiedName, value): void; ``` Sets the value of element’s first attribute whose qualified name is qualifiedName to value. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttribute) #### Parameters[#](#parameters-46) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | | `value` | `string` | #### Returns[#](#returns-53) `void` #### Inherited from[#](#inherited-from-52) ``` HTMLElement.setAttribute ``` * * * ### setAttributeNS()[#](#setattributens) ``` setAttributeNS( namespace, qualifiedName, value): void; ``` Sets the value of element’s attribute whose namespace is namespace and local name is localName to value. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttributeNS) #### Parameters[#](#parameters-47) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `qualifiedName` | `string` | | `value` | `string` | #### Returns[#](#returns-54) `void` #### Inherited from[#](#inherited-from-53) ``` HTMLElement.setAttributeNS ``` * * * ### setAttributeNode()[#](#setattributenode) ``` setAttributeNode(attr): Attr; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttributeNode) #### Parameters[#](#parameters-48) | Parameter | Type | | --- | --- | | `attr` | `Attr` | #### Returns[#](#returns-55) `Attr` #### Inherited from[#](#inherited-from-54) ``` HTMLElement.setAttributeNode ``` * * * ### setAttributeNodeNS()[#](#setattributenodens) ``` setAttributeNodeNS(attr): Attr; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttributeNodeNS) #### Parameters[#](#parameters-49) | Parameter | Type | | --- | --- | | `attr` | `Attr` | #### Returns[#](#returns-56) `Attr` #### Inherited from[#](#inherited-from-55) ``` HTMLElement.setAttributeNodeNS ``` * * * ### setHTMLUnsafe()[#](#sethtmlunsafe) ``` setHTMLUnsafe(html): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setHTMLUnsafe) #### Parameters[#](#parameters-50) | Parameter | Type | | --- | --- | | `html` | `string` | #### Returns[#](#returns-57) `void` #### Inherited from[#](#inherited-from-56) ``` HTMLElement.setHTMLUnsafe ``` * * * ### setPointerCapture()[#](#setpointercapture) ``` setPointerCapture(pointerId): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setPointerCapture) #### Parameters[#](#parameters-51) | Parameter | Type | | --- | --- | | `pointerId` | `number` | #### Returns[#](#returns-58) `void` #### Inherited from[#](#inherited-from-57) ``` HTMLElement.setPointerCapture ``` * * * ### toggleAttribute()[#](#toggleattribute) ``` toggleAttribute(qualifiedName, force?): boolean; ``` If force is not given, “toggles” qualifiedName, removing it if it is present and adding it if it is not present. If force is true, adds qualifiedName. If force is false, removes qualifiedName. Returns true if qualifiedName is now present, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/toggleAttribute) #### Parameters[#](#parameters-52) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | | `force?` | `boolean` | #### Returns[#](#returns-59) `boolean` #### Inherited from[#](#inherited-from-58) ``` HTMLElement.toggleAttribute ``` * * * ### ~webkitMatchesSelector()~[#](#webkitmatchesselector) ``` webkitMatchesSelector(selectors): boolean; ``` #### Parameters[#](#parameters-53) | Parameter | Type | | --- | --- | | `selectors` | `string` | #### Returns[#](#returns-60) `boolean` #### Deprecated[#](#deprecated-1) This is a legacy alias of `matches`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/matches) #### Inherited from[#](#inherited-from-59) ``` HTMLElement.webkitMatchesSelector ``` * * * ### dispatchEvent()[#](#dispatchevent) ``` dispatchEvent(event): boolean; ``` Dispatches a synthetic event event to target and returns true if either event’s cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent) #### Parameters[#](#parameters-54) | Parameter | Type | | --- | --- | | `event` | `Event` | #### Returns[#](#returns-61) `boolean` #### Inherited from[#](#inherited-from-60) ``` HTMLElement.dispatchEvent ``` * * * ### attachInternals()[#](#attachinternals) ``` attachInternals(): ElementInternals; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/attachInternals) #### Returns[#](#returns-62) `ElementInternals` #### Inherited from[#](#inherited-from-61) ``` HTMLElement.attachInternals ``` * * * ### click()[#](#click) ``` click(): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/click) #### Returns[#](#returns-63) `void` #### Inherited from[#](#inherited-from-62) ``` HTMLElement.click ``` * * * ### hidePopover()[#](#hidepopover) ``` hidePopover(): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/hidePopover) #### Returns[#](#returns-64) `void` #### Inherited from[#](#inherited-from-63) ``` HTMLElement.hidePopover ``` * * * ### showPopover()[#](#showpopover) ``` showPopover(): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/showPopover) #### Returns[#](#returns-65) `void` #### Inherited from[#](#inherited-from-64) ``` HTMLElement.showPopover ``` * * * ### togglePopover()[#](#togglepopover) ``` togglePopover(force?): boolean; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/togglePopover) #### Parameters[#](#parameters-55) | Parameter | Type | | --- | --- | | `force?` | `boolean` | #### Returns[#](#returns-66) `boolean` #### Inherited from[#](#inherited-from-65) ``` HTMLElement.togglePopover ``` * * * ### addEventListener()[#](#addeventlistener) #### Call Signature[#](#call-signature-19) ``` addEventListener( type, listener, options?): void; ``` ##### Type Parameters[#](#type-parameters-8) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementEventMap` | ##### Parameters[#](#parameters-56) | Parameter | Type | | --- | --- | | `type` | `K` | | `listener` | (`this`, `ev`) => `any` | | `options?` | `boolean` | ##### Returns[#](#returns-67) `void` ##### Inherited from[#](#inherited-from-66) ``` HTMLElement.addEventListener ``` #### Call Signature[#](#call-signature-20) ``` addEventListener( type, listener, options?): void; ``` ##### Parameters[#](#parameters-57) | Parameter | Type | | --- | --- | | `type` | `string` | | `listener` | `EventListenerOrEventListenerObject` | | `options?` | `boolean` | ##### Returns[#](#returns-68) `void` ##### Inherited from[#](#inherited-from-67) ``` HTMLElement.addEventListener ``` * * * ### removeEventListener()[#](#removeeventlistener) #### Call Signature[#](#call-signature-21) ``` removeEventListener( type, listener, options?): void; ``` ##### Type Parameters[#](#type-parameters-9) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementEventMap` | ##### Parameters[#](#parameters-58) | Parameter | Type | | --- | --- | | `type` | `K` | | `listener` | (`this`, `ev`) => `any` | | `options?` | `boolean` | ##### Returns[#](#returns-69) `void` ##### Inherited from[#](#inherited-from-68) ``` HTMLElement.removeEventListener ``` #### Call Signature[#](#call-signature-22) ``` removeEventListener( type, listener, options?): void; ``` ##### Parameters[#](#parameters-59) | Parameter | Type | | --- | --- | | `type` | `string` | | `listener` | `EventListenerOrEventListenerObject` | | `options?` | `boolean` | ##### Returns[#](#returns-70) `void` ##### Inherited from[#](#inherited-from-69) ``` HTMLElement.removeEventListener ``` * * * ### blur()[#](#blur) ``` blur(): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/blur) #### Returns[#](#returns-71) `void` #### Inherited from[#](#inherited-from-70) ``` HTMLElement.blur ``` * * * ### focus()[#](#focus) ``` focus(options?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/focus) #### Parameters[#](#parameters-60) | Parameter | Type | | --- | --- | | `options?` | `FocusOptions` | #### Returns[#](#returns-72) `void` #### Inherited from[#](#inherited-from-71) ``` HTMLElement.focus ``` * * * ### appendChild()[#](#appendchild) ``` appendChild(node): T; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/appendChild) #### Type Parameters[#](#type-parameters-10) | Type Parameter | | --- | | `T` _extends_ `Node` | #### Parameters[#](#parameters-61) | Parameter | Type | | --- | --- | | `node` | `T` | #### Returns[#](#returns-73) `T` #### Inherited from[#](#inherited-from-72) ``` HTMLElement.appendChild ``` * * * ### cloneNode()[#](#clonenode) ``` cloneNode(deep?): Node; ``` Returns a copy of node. If deep is true, the copy also includes the node’s descendants. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) #### Parameters[#](#parameters-62) | Parameter | Type | | --- | --- | | `deep?` | `boolean` | #### Returns[#](#returns-74) `Node` #### Inherited from[#](#inherited-from-73) ``` HTMLElement.cloneNode ``` * * * ### compareDocumentPosition()[#](#comparedocumentposition) ``` compareDocumentPosition(other): number; ``` Returns a bitmask indicating the position of other relative to node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/compareDocumentPosition) #### Parameters[#](#parameters-63) | Parameter | Type | | --- | --- | | `other` | `Node` | #### Returns[#](#returns-75) `number` #### Inherited from[#](#inherited-from-74) ``` HTMLElement.compareDocumentPosition ``` * * * ### contains()[#](#contains) ``` contains(other): boolean; ``` Returns true if other is an inclusive descendant of node, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/contains) #### Parameters[#](#parameters-64) | Parameter | Type | | --- | --- | | `other` | `Node` | #### Returns[#](#returns-76) `boolean` #### Inherited from[#](#inherited-from-75) ``` HTMLElement.contains ``` * * * ### getRootNode()[#](#getrootnode) ``` getRootNode(options?): Node; ``` Returns node’s root. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/getRootNode) #### Parameters[#](#parameters-65) | Parameter | Type | | --- | --- | | `options?` | `GetRootNodeOptions` | #### Returns[#](#returns-77) `Node` #### Inherited from[#](#inherited-from-76) ``` HTMLElement.getRootNode ``` * * * ### hasChildNodes()[#](#haschildnodes) ``` hasChildNodes(): boolean; ``` Returns whether node has children. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/hasChildNodes) #### Returns[#](#returns-78) `boolean` #### Inherited from[#](#inherited-from-77) ``` HTMLElement.hasChildNodes ``` * * * ### insertBefore()[#](#insertbefore) ``` insertBefore(node, child): T; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/insertBefore) #### Type Parameters[#](#type-parameters-11) | Type Parameter | | --- | | `T` _extends_ `Node` | #### Parameters[#](#parameters-66) | Parameter | Type | | --- | --- | | `node` | `T` | | `child` | `Node` | #### Returns[#](#returns-79) `T` #### Inherited from[#](#inherited-from-78) ``` HTMLElement.insertBefore ``` * * * ### isDefaultNamespace()[#](#isdefaultnamespace) ``` isDefaultNamespace(namespace): boolean; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isDefaultNamespace) #### Parameters[#](#parameters-67) | Parameter | Type | | --- | --- | | `namespace` | `string` | #### Returns[#](#returns-80) `boolean` #### Inherited from[#](#inherited-from-79) ``` HTMLElement.isDefaultNamespace ``` * * * ### isEqualNode()[#](#isequalnode) ``` isEqualNode(otherNode): boolean; ``` Returns whether node and otherNode have the same properties. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isEqualNode) #### Parameters[#](#parameters-68) | Parameter | Type | | --- | --- | | `otherNode` | `Node` | #### Returns[#](#returns-81) `boolean` #### Inherited from[#](#inherited-from-80) ``` HTMLElement.isEqualNode ``` * * * ### isSameNode()[#](#issamenode) ``` isSameNode(otherNode): boolean; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isSameNode) #### Parameters[#](#parameters-69) | Parameter | Type | | --- | --- | | `otherNode` | `Node` | #### Returns[#](#returns-82) `boolean` #### Inherited from[#](#inherited-from-81) ``` HTMLElement.isSameNode ``` * * * ### lookupNamespaceURI()[#](#lookupnamespaceuri) ``` lookupNamespaceURI(prefix): string; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/lookupNamespaceURI) #### Parameters[#](#parameters-70) | Parameter | Type | | --- | --- | | `prefix` | `string` | #### Returns[#](#returns-83) `string` #### Inherited from[#](#inherited-from-82) ``` HTMLElement.lookupNamespaceURI ``` * * * ### lookupPrefix()[#](#lookupprefix) ``` lookupPrefix(namespace): string; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/lookupPrefix) #### Parameters[#](#parameters-71) | Parameter | Type | | --- | --- | | `namespace` | `string` | #### Returns[#](#returns-84) `string` #### Inherited from[#](#inherited-from-83) ``` HTMLElement.lookupPrefix ``` * * * ### normalize()[#](#normalize) ``` normalize(): void; ``` Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/normalize) #### Returns[#](#returns-85) `void` #### Inherited from[#](#inherited-from-84) ``` HTMLElement.normalize ``` * * * ### removeChild()[#](#removechild) ``` removeChild(child): T; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/removeChild) #### Type Parameters[#](#type-parameters-12) | Type Parameter | | --- | | `T` _extends_ `Node` | #### Parameters[#](#parameters-72) | Parameter | Type | | --- | --- | | `child` | `T` | #### Returns[#](#returns-86) `T` #### Inherited from[#](#inherited-from-85) ``` HTMLElement.removeChild ``` * * * ### replaceChild()[#](#replacechild) ``` replaceChild(node, child): T; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/replaceChild) #### Type Parameters[#](#type-parameters-13) | Type Parameter | | --- | | `T` _extends_ `Node` | #### Parameters[#](#parameters-73) | Parameter | Type | | --- | --- | | `node` | `Node` | | `child` | `T` | #### Returns[#](#returns-87) `T` #### Inherited from[#](#inherited-from-86) ``` HTMLElement.replaceChild ``` * * * ### append()[#](#append) ``` append(...nodes): void; ``` Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/append) #### Parameters[#](#parameters-74) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-88) `void` #### Inherited from[#](#inherited-from-87) ``` HTMLElement.append ``` * * * ### prepend()[#](#prepend) ``` prepend(...nodes): void; ``` Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/prepend) #### Parameters[#](#parameters-75) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-89) `void` #### Inherited from[#](#inherited-from-88) ``` HTMLElement.prepend ``` * * * ### querySelector()[#](#queryselector) #### Call Signature[#](#call-signature-23) ``` querySelector(selectors): HTMLElementTagNameMap[K]; ``` Returns the first element that is a descendant of node that matches selectors. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/querySelector) ##### Type Parameters[#](#type-parameters-14) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementTagNameMap` | ##### Parameters[#](#parameters-76) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-90) `HTMLElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-89) ``` HTMLElement.querySelector ``` #### Call Signature[#](#call-signature-24) ``` querySelector(selectors): SVGElementTagNameMap[K]; ``` ##### Type Parameters[#](#type-parameters-15) | Type Parameter | | --- | | `K` _extends_ keyof `SVGElementTagNameMap` | ##### Parameters[#](#parameters-77) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-91) `SVGElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-90) ``` HTMLElement.querySelector ``` #### Call Signature[#](#call-signature-25) ``` querySelector(selectors): MathMLElementTagNameMap[K]; ``` ##### Type Parameters[#](#type-parameters-16) | Type Parameter | | --- | | `K` _extends_ keyof `MathMLElementTagNameMap` | ##### Parameters[#](#parameters-78) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-92) `MathMLElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-91) ``` HTMLElement.querySelector ``` #### Call Signature[#](#call-signature-26) ``` querySelector(selectors): HTMLElementDeprecatedTagNameMap[K]; ``` ##### Type Parameters[#](#type-parameters-17) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementDeprecatedTagNameMap` | ##### Parameters[#](#parameters-79) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-93) `HTMLElementDeprecatedTagNameMap`\[`K`\] ##### Deprecated[#](#deprecated-2) ##### Inherited from[#](#inherited-from-92) ``` HTMLElement.querySelector ``` #### Call Signature[#](#call-signature-27) ``` querySelector(selectors): E; ``` ##### Type Parameters[#](#type-parameters-18) | Type Parameter | Default type | | --- | --- | | `E` _extends_ `Element` | `Element` | ##### Parameters[#](#parameters-80) | Parameter | Type | | --- | --- | | `selectors` | `string` | ##### Returns[#](#returns-94) `E` ##### Inherited from[#](#inherited-from-93) ``` HTMLElement.querySelector ``` * * * ### querySelectorAll()[#](#queryselectorall) #### Call Signature[#](#call-signature-28) ``` querySelectorAll(selectors): NodeListOf; ``` Returns all element descendants of node that match selectors. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll) ##### Type Parameters[#](#type-parameters-19) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementTagNameMap` | ##### Parameters[#](#parameters-81) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-95) `NodeListOf`<`HTMLElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-94) ``` HTMLElement.querySelectorAll ``` #### Call Signature[#](#call-signature-29) ``` querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters[#](#type-parameters-20) | Type Parameter | | --- | | `K` _extends_ keyof `SVGElementTagNameMap` | ##### Parameters[#](#parameters-82) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-96) `NodeListOf`<`SVGElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-95) ``` HTMLElement.querySelectorAll ``` #### Call Signature[#](#call-signature-30) ``` querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters[#](#type-parameters-21) | Type Parameter | | --- | | `K` _extends_ keyof `MathMLElementTagNameMap` | ##### Parameters[#](#parameters-83) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-97) `NodeListOf`<`MathMLElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-96) ``` HTMLElement.querySelectorAll ``` #### Call Signature[#](#call-signature-31) ``` querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters[#](#type-parameters-22) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementDeprecatedTagNameMap` | ##### Parameters[#](#parameters-84) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-98) `NodeListOf`<`HTMLElementDeprecatedTagNameMap`\[`K`\]> ##### Deprecated[#](#deprecated-3) ##### Inherited from[#](#inherited-from-97) ``` HTMLElement.querySelectorAll ``` #### Call Signature[#](#call-signature-32) ``` querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters[#](#type-parameters-23) | Type Parameter | Default type | | --- | --- | | `E` _extends_ `Element` | `Element` | ##### Parameters[#](#parameters-85) | Parameter | Type | | --- | --- | | `selectors` | `string` | ##### Returns[#](#returns-99) `NodeListOf`<`E`\> ##### Inherited from[#](#inherited-from-98) ``` HTMLElement.querySelectorAll ``` * * * ### replaceChildren()[#](#replacechildren) ``` replaceChildren(...nodes): void; ``` Replace all children of node with nodes, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/replaceChildren) #### Parameters[#](#parameters-86) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-100) `void` #### Inherited from[#](#inherited-from-99) ``` HTMLElement.replaceChildren ``` ## Properties[#](#properties) | Property | Modifier | Type | Description | Inherited from | | --- | --- | --- | --- | --- | | `ariaAtomic` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaAtomic) | `HTMLElement.ariaAtomic` | | `ariaAutoComplete` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaAutoComplete) | `HTMLElement.ariaAutoComplete` | | `ariaBrailleLabel` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaBrailleLabel) | `HTMLElement.ariaBrailleLabel` | | `ariaBrailleRoleDescription` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaBrailleRoleDescription) | `HTMLElement.ariaBrailleRoleDescription` | | `ariaBusy` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaBusy) | `HTMLElement.ariaBusy` | | `ariaChecked` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaChecked) | `HTMLElement.ariaChecked` | | `ariaColCount` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaColCount) | `HTMLElement.ariaColCount` | | `ariaColIndex` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaColIndex) | `HTMLElement.ariaColIndex` | | `ariaColSpan` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaColSpan) | `HTMLElement.ariaColSpan` | | `ariaCurrent` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaCurrent) | `HTMLElement.ariaCurrent` | | `ariaDescription` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaDescription) | `HTMLElement.ariaDescription` | | `ariaDisabled` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaDisabled) | `HTMLElement.ariaDisabled` | | `ariaExpanded` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaExpanded) | `HTMLElement.ariaExpanded` | | `ariaHasPopup` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaHasPopup) | `HTMLElement.ariaHasPopup` | | `ariaHidden` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaHidden) | `HTMLElement.ariaHidden` | | `ariaInvalid` | `public` | `string` | \- | `HTMLElement.ariaInvalid` | | `ariaKeyShortcuts` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaKeyShortcuts) | `HTMLElement.ariaKeyShortcuts` | | `ariaLabel` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel) | `HTMLElement.ariaLabel` | | `ariaLevel` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLevel) | `HTMLElement.ariaLevel` | | `ariaLive` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLive) | `HTMLElement.ariaLive` | | `ariaModal` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaModal) | `HTMLElement.ariaModal` | | `ariaMultiLine` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaMultiLine) | `HTMLElement.ariaMultiLine` | | `ariaMultiSelectable` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaMultiSelectable) | `HTMLElement.ariaMultiSelectable` | | `ariaOrientation` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaOrientation) | `HTMLElement.ariaOrientation` | | `ariaPlaceholder` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaPlaceholder) | `HTMLElement.ariaPlaceholder` | | `ariaPosInSet` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaPosInSet) | `HTMLElement.ariaPosInSet` | | `ariaPressed` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaPressed) | `HTMLElement.ariaPressed` | | `ariaReadOnly` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaReadOnly) | `HTMLElement.ariaReadOnly` | | `ariaRequired` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRequired) | `HTMLElement.ariaRequired` | | `ariaRoleDescription` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRoleDescription) | `HTMLElement.ariaRoleDescription` | | `ariaRowCount` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRowCount) | `HTMLElement.ariaRowCount` | | `ariaRowIndex` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRowIndex) | `HTMLElement.ariaRowIndex` | | `ariaRowSpan` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRowSpan) | `HTMLElement.ariaRowSpan` | | `ariaSelected` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaSelected) | `HTMLElement.ariaSelected` | | `ariaSetSize` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaSetSize) | `HTMLElement.ariaSetSize` | | `ariaSort` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaSort) | `HTMLElement.ariaSort` | | `ariaValueMax` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaValueMax) | `HTMLElement.ariaValueMax` | | `ariaValueMin` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaValueMin) | `HTMLElement.ariaValueMin` | | `ariaValueNow` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaValueNow) | `HTMLElement.ariaValueNow` | | `ariaValueText` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaValueText) | `HTMLElement.ariaValueText` | | `role` | `public` | `string` | \- | `HTMLElement.role` | | `attributes` | `readonly` | `NamedNodeMap` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/attributes) | `HTMLElement.attributes` | | `classList` | `readonly` | `DOMTokenList` | Allows for manipulation of element’s class content attribute as a set of whitespace-separated tokens through a DOMTokenList object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList) | `HTMLElement.classList` | | `className` | `public` | `string` | Returns the value of element’s class content attribute. Can be set to change it. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/className) | `HTMLElement.className` | | `clientHeight` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientHeight) | `HTMLElement.clientHeight` | | `clientLeft` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientLeft) | `HTMLElement.clientLeft` | | `clientTop` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientTop) | `HTMLElement.clientTop` | | `clientWidth` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientWidth) | `HTMLElement.clientWidth` | | `id` | `public` | `string` | Returns the value of element’s id content attribute. Can be set to change it. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id) | `HTMLElement.id` | | `innerHTML` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) | `HTMLElement.innerHTML` | | `localName` | `readonly` | `string` | Returns the local name. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/localName) | `HTMLElement.localName` | | `namespaceURI` | `readonly` | `string` | Returns the namespace. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/namespaceURI) | `HTMLElement.namespaceURI` | | `onfullscreenchange` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/fullscreenchange_event) | `HTMLElement.onfullscreenchange` | | `onfullscreenerror` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/fullscreenerror_event) | `HTMLElement.onfullscreenerror` | | `outerHTML` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/outerHTML) | `HTMLElement.outerHTML` | | `ownerDocument` | `readonly` | `Document` | Returns the node document. Returns null for documents. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/ownerDocument) | `HTMLElement.ownerDocument` | | `part` | `readonly` | `DOMTokenList` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/part) | `HTMLElement.part` | | `prefix` | `readonly` | `string` | Returns the namespace prefix. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/prefix) | `HTMLElement.prefix` | | `scrollHeight` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollHeight) | `HTMLElement.scrollHeight` | | `scrollLeft` | `public` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollLeft) | `HTMLElement.scrollLeft` | | `scrollTop` | `public` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTop) | `HTMLElement.scrollTop` | | `scrollWidth` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollWidth) | `HTMLElement.scrollWidth` | | `shadowRoot` | `readonly` | `ShadowRoot` | Returns element’s shadow root, if any, and if shadow root’s mode is “open”, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/shadowRoot) | `HTMLElement.shadowRoot` | | `slot` | `public` | `string` | Returns the value of element’s slot content attribute. Can be set to change it. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/slot) | `HTMLElement.slot` | | `tagName` | `readonly` | `string` | Returns the HTML-uppercased qualified name. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) | `HTMLElement.tagName` | | `attributeStyleMap` | `readonly` | `StylePropertyMap` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/attributeStyleMap) | `HTMLElement.attributeStyleMap` | | `style` | `readonly` | `CSSStyleDeclaration` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/style) | `HTMLElement.style` | | `contentEditable` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/contentEditable) | `HTMLElement.contentEditable` | | `enterKeyHint` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/enterKeyHint) | `HTMLElement.enterKeyHint` | | `inputMode` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/inputMode) | `HTMLElement.inputMode` | | `isContentEditable` | `readonly` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/isContentEditable) | `HTMLElement.isContentEditable` | | `onabort` | `public` | (`this`, `ev`) => `any` | Fires when the user aborts the download. | `HTMLElement.onabort` | | `onanimationcancel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationcancel_event) | `HTMLElement.onanimationcancel` | | `onanimationend` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationend_event) | `HTMLElement.onanimationend` | | `onanimationiteration` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationiteration_event) | `HTMLElement.onanimationiteration` | | `onanimationstart` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationstart_event) | `HTMLElement.onanimationstart` | | `onauxclick` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/auxclick_event) | `HTMLElement.onauxclick` | | `onbeforeinput` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/beforeinput_event) | `HTMLElement.onbeforeinput` | | `onbeforetoggle` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/beforetoggle_event) | `HTMLElement.onbeforetoggle` | | `onblur` | `public` | (`this`, `ev`) => `any` | Fires when the object loses the input focus. | `HTMLElement.onblur` | | `oncancel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/cancel_event) | `HTMLElement.oncancel` | | `oncanplay` | `public` | (`this`, `ev`) => `any` | Occurs when playback is possible, but would require further buffering. | `HTMLElement.oncanplay` | | `oncanplaythrough` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/canplaythrough_event) | `HTMLElement.oncanplaythrough` | | `onchange` | `public` | (`this`, `ev`) => `any` | Fires when the contents of the object or selection have changed. | `HTMLElement.onchange` | | `onclick` | `public` | (`this`, `ev`) => `any` | Fires when the user clicks the left mouse button on the object | `HTMLElement.onclick` | | `onclose` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/close_event) | `HTMLElement.onclose` | | `oncontextlost` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/webglcontextlost_event) | `HTMLElement.oncontextlost` | | `oncontextmenu` | `public` | (`this`, `ev`) => `any` | Fires when the user clicks the right mouse button in the client area, opening the context menu. | `HTMLElement.oncontextmenu` | | `oncontextrestored` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/contextrestored_event) | `HTMLElement.oncontextrestored` | | `oncopy` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/copy_event) | `HTMLElement.oncopy` | | `oncuechange` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTrackElement/cuechange_event) | `HTMLElement.oncuechange` | | `oncut` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/cut_event) | `HTMLElement.oncut` | | `ondblclick` | `public` | (`this`, `ev`) => `any` | Fires when the user double-clicks the object. | `HTMLElement.ondblclick` | | `ondrag` | `public` | (`this`, `ev`) => `any` | Fires on the source object continuously during a drag operation. | `HTMLElement.ondrag` | | `ondragend` | `public` | (`this`, `ev`) => `any` | Fires on the source object when the user releases the mouse at the close of a drag operation. | `HTMLElement.ondragend` | | `ondragenter` | `public` | (`this`, `ev`) => `any` | Fires on the target element when the user drags the object to a valid drop target. | `HTMLElement.ondragenter` | | `ondragleave` | `public` | (`this`, `ev`) => `any` | Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation. | `HTMLElement.ondragleave` | | `ondragover` | `public` | (`this`, `ev`) => `any` | Fires on the target element continuously while the user drags the object over a valid drop target. | `HTMLElement.ondragover` | | `ondragstart` | `public` | (`this`, `ev`) => `any` | Fires on the source object when the user starts to drag a text selection or selected object. | `HTMLElement.ondragstart` | | `ondrop` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/drop_event) | `HTMLElement.ondrop` | | `ondurationchange` | `public` | (`this`, `ev`) => `any` | Occurs when the duration attribute is updated. | `HTMLElement.ondurationchange` | | `onemptied` | `public` | (`this`, `ev`) => `any` | Occurs when the media element is reset to its initial state. | `HTMLElement.onemptied` | | `onended` | `public` | (`this`, `ev`) => `any` | Occurs when the end of playback is reached. | `HTMLElement.onended` | | `onerror` | `public` | `OnErrorEventHandlerNonNull` | Fires when an error occurs during object loading. **Param** The event. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/error_event) | `HTMLElement.onerror` | | `onfocus` | `public` | (`this`, `ev`) => `any` | Fires when the object receives focus. | `HTMLElement.onfocus` | | `onformdata` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/formdata_event) | `HTMLElement.onformdata` | | `ongotpointercapture` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/gotpointercapture_event) | `HTMLElement.ongotpointercapture` | | `oninput` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/input_event) | `HTMLElement.oninput` | | `oninvalid` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/invalid_event) | `HTMLElement.oninvalid` | | `onkeydown` | `public` | (`this`, `ev`) => `any` | Fires when the user presses a key. | `HTMLElement.onkeydown` | | ~`onkeypress`~ | `public` | (`this`, `ev`) => `any` | Fires when the user presses an alphanumeric key. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keypress_event) | `HTMLElement.onkeypress` | | `onkeyup` | `public` | (`this`, `ev`) => `any` | Fires when the user releases a key. | `HTMLElement.onkeyup` | | `onload` | `public` | (`this`, `ev`) => `any` | Fires immediately after the browser loads the object. | `HTMLElement.onload` | | `onloadeddata` | `public` | (`this`, `ev`) => `any` | Occurs when media data is loaded at the current playback position. | `HTMLElement.onloadeddata` | | `onloadedmetadata` | `public` | (`this`, `ev`) => `any` | Occurs when the duration and dimensions of the media have been determined. | `HTMLElement.onloadedmetadata` | | `onloadstart` | `public` | (`this`, `ev`) => `any` | Occurs when Internet Explorer begins looking for media data. | `HTMLElement.onloadstart` | | `onlostpointercapture` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/lostpointercapture_event) | `HTMLElement.onlostpointercapture` | | `onmousedown` | `public` | (`this`, `ev`) => `any` | Fires when the user clicks the object with either mouse button. | `HTMLElement.onmousedown` | | `onmouseenter` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseenter_event) | `HTMLElement.onmouseenter` | | `onmouseleave` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseleave_event) | `HTMLElement.onmouseleave` | | `onmousemove` | `public` | (`this`, `ev`) => `any` | Fires when the user moves the mouse over the object. | `HTMLElement.onmousemove` | | `onmouseout` | `public` | (`this`, `ev`) => `any` | Fires when the user moves the mouse pointer outside the boundaries of the object. | `HTMLElement.onmouseout` | | `onmouseover` | `public` | (`this`, `ev`) => `any` | Fires when the user moves the mouse pointer into the object. | `HTMLElement.onmouseover` | | `onmouseup` | `public` | (`this`, `ev`) => `any` | Fires when the user releases a mouse button while the mouse is over the object. | `HTMLElement.onmouseup` | | `onpaste` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/paste_event) | `HTMLElement.onpaste` | | `onpause` | `public` | (`this`, `ev`) => `any` | Occurs when playback is paused. | `HTMLElement.onpause` | | `onplay` | `public` | (`this`, `ev`) => `any` | Occurs when the play method is requested. | `HTMLElement.onplay` | | `onplaying` | `public` | (`this`, `ev`) => `any` | Occurs when the audio or video has started playing. | `HTMLElement.onplaying` | | `onpointercancel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointercancel_event) | `HTMLElement.onpointercancel` | | `onpointerdown` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerdown_event) | `HTMLElement.onpointerdown` | | `onpointerenter` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerenter_event) | `HTMLElement.onpointerenter` | | `onpointerleave` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerleave_event) | `HTMLElement.onpointerleave` | | `onpointermove` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointermove_event) | `HTMLElement.onpointermove` | | `onpointerout` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerout_event) | `HTMLElement.onpointerout` | | `onpointerover` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerover_event) | `HTMLElement.onpointerover` | | `onpointerup` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerup_event) | `HTMLElement.onpointerup` | | `onprogress` | `public` | (`this`, `ev`) => `any` | Occurs to indicate progress while downloading media data. | `HTMLElement.onprogress` | | `onratechange` | `public` | (`this`, `ev`) => `any` | Occurs when the playback rate is increased or decreased. | `HTMLElement.onratechange` | | `onreset` | `public` | (`this`, `ev`) => `any` | Fires when the user resets a form. | `HTMLElement.onreset` | | `onresize` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement/resize_event) | `HTMLElement.onresize` | | `onscroll` | `public` | (`this`, `ev`) => `any` | Fires when the user repositions the scroll box in the scroll bar on the object. | `HTMLElement.onscroll` | | `onscrollend` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/scrollend_event) | `HTMLElement.onscrollend` | | `onsecuritypolicyviolation` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/securitypolicyviolation_event) | `HTMLElement.onsecuritypolicyviolation` | | `onseeked` | `public` | (`this`, `ev`) => `any` | Occurs when the seek operation ends. | `HTMLElement.onseeked` | | `onseeking` | `public` | (`this`, `ev`) => `any` | Occurs when the current playback position is moved. | `HTMLElement.onseeking` | | `onselect` | `public` | (`this`, `ev`) => `any` | Fires when the current selection changes. | `HTMLElement.onselect` | | `onselectionchange` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/selectionchange_event) | `HTMLElement.onselectionchange` | | `onselectstart` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/selectstart_event) | `HTMLElement.onselectstart` | | `onslotchange` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLSlotElement/slotchange_event) | `HTMLElement.onslotchange` | | `onstalled` | `public` | (`this`, `ev`) => `any` | Occurs when the download has stopped. | `HTMLElement.onstalled` | | `onsubmit` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/submit_event) | `HTMLElement.onsubmit` | | `onsuspend` | `public` | (`this`, `ev`) => `any` | Occurs if the load operation has been intentionally halted. | `HTMLElement.onsuspend` | | `ontimeupdate` | `public` | (`this`, `ev`) => `any` | Occurs to indicate the current playback position. | `HTMLElement.ontimeupdate` | | `ontoggle` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/toggle_event) | `HTMLElement.ontoggle` | | `ontouchcancel?` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/touchcancel_event) | `HTMLElement.ontouchcancel` | | `ontouchend?` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/touchend_event) | `HTMLElement.ontouchend` | | `ontouchmove?` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/touchmove_event) | `HTMLElement.ontouchmove` | | `ontouchstart?` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/touchstart_event) | `HTMLElement.ontouchstart` | | `ontransitioncancel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitioncancel_event) | `HTMLElement.ontransitioncancel` | | `ontransitionend` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionend_event) | `HTMLElement.ontransitionend` | | `ontransitionrun` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionrun_event) | `HTMLElement.ontransitionrun` | | `ontransitionstart` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionstart_event) | `HTMLElement.ontransitionstart` | | `onvolumechange` | `public` | (`this`, `ev`) => `any` | Occurs when the volume is changed, or playback is muted or unmuted. | `HTMLElement.onvolumechange` | | `onwaiting` | `public` | (`this`, `ev`) => `any` | Occurs when playback stops because the next frame of a video resource is not available. | `HTMLElement.onwaiting` | | ~`onwebkitanimationend`~ | `public` | (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationend`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationend_event) | `HTMLElement.onwebkitanimationend` | | ~`onwebkitanimationiteration`~ | `public` | (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationiteration`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationiteration_event) | `HTMLElement.onwebkitanimationiteration` | | ~`onwebkitanimationstart`~ | `public` | (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationstart`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationstart_event) | `HTMLElement.onwebkitanimationstart` | | ~`onwebkittransitionend`~ | `public` | (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `ontransitionend`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionend_event) | `HTMLElement.onwebkittransitionend` | | `onwheel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/wheel_event) | `HTMLElement.onwheel` | | `accessKey` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKey) | `HTMLElement.accessKey` | | `accessKeyLabel` | `readonly` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKeyLabel) | `HTMLElement.accessKeyLabel` | | `autocapitalize` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/autocapitalize) | `HTMLElement.autocapitalize` | | `dir` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dir) | `HTMLElement.dir` | | `draggable` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/draggable) | `HTMLElement.draggable` | | `hidden` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/hidden) | `HTMLElement.hidden` | | `inert` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/inert) | `HTMLElement.inert` | | `innerText` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/innerText) | `HTMLElement.innerText` | | `lang` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/lang) | `HTMLElement.lang` | | `offsetHeight` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetHeight) | `HTMLElement.offsetHeight` | | `offsetLeft` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetLeft) | `HTMLElement.offsetLeft` | | `offsetParent` | `readonly` | `Element` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetParent) | `HTMLElement.offsetParent` | | `offsetTop` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetTop) | `HTMLElement.offsetTop` | | `offsetWidth` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetWidth) | `HTMLElement.offsetWidth` | | `outerText` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/outerText) | `HTMLElement.outerText` | | `popover` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/popover) | `HTMLElement.popover` | | `spellcheck` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/spellcheck) | `HTMLElement.spellcheck` | | `title` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/title) | `HTMLElement.title` | | `translate` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/translate) | `HTMLElement.translate` | | `autofocus` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/autofocus) | `HTMLElement.autofocus` | | `dataset` | `readonly` | `DOMStringMap` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dataset) | `HTMLElement.dataset` | | `nonce?` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/nonce) | `HTMLElement.nonce` | | `tabIndex` | `public` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/tabIndex) | `HTMLElement.tabIndex` | | `baseURI` | `readonly` | `string` | Returns node’s node document’s document base URL. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/baseURI) | `HTMLElement.baseURI` | | `childNodes` | `readonly` | `NodeListOf`<`ChildNode`\> | Returns the children. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/childNodes) | `HTMLElement.childNodes` | | `firstChild` | `readonly` | `ChildNode` | Returns the first child. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/firstChild) | `HTMLElement.firstChild` | | `isConnected` | `readonly` | `boolean` | Returns true if node is connected and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isConnected) | `HTMLElement.isConnected` | | `lastChild` | `readonly` | `ChildNode` | Returns the last child. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/lastChild) | `HTMLElement.lastChild` | | `nextSibling` | `readonly` | `ChildNode` | Returns the next sibling. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nextSibling) | `HTMLElement.nextSibling` | | `nodeName` | `readonly` | `string` | Returns a string appropriate for the type of node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeName) | `HTMLElement.nodeName` | | `nodeType` | `readonly` | `number` | Returns the type of node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeType) | `HTMLElement.nodeType` | | `nodeValue` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeValue) | `HTMLElement.nodeValue` | | `parentElement` | `readonly` | `HTMLElement` | Returns the parent element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/parentElement) | `HTMLElement.parentElement` | | `parentNode` | `readonly` | `ParentNode` | Returns the parent. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/parentNode) | `HTMLElement.parentNode` | | `previousSibling` | `readonly` | `ChildNode` | Returns the previous sibling. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/previousSibling) | `HTMLElement.previousSibling` | | `textContent` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/textContent) | `HTMLElement.textContent` | | `ELEMENT_NODE` | `readonly` | `1` | node is an element. | `HTMLElement.ELEMENT_NODE` | | `ATTRIBUTE_NODE` | `readonly` | `2` | \- | `HTMLElement.ATTRIBUTE_NODE` | | `TEXT_NODE` | `readonly` | `3` | node is a Text node. | `HTMLElement.TEXT_NODE` | | `CDATA_SECTION_NODE` | `readonly` | `4` | node is a CDATASection node. | `HTMLElement.CDATA_SECTION_NODE` | | `ENTITY_REFERENCE_NODE` | `readonly` | `5` | \- | `HTMLElement.ENTITY_REFERENCE_NODE` | | `ENTITY_NODE` | `readonly` | `6` | \- | `HTMLElement.ENTITY_NODE` | | `PROCESSING_INSTRUCTION_NODE` | `readonly` | `7` | node is a ProcessingInstruction node. | `HTMLElement.PROCESSING_INSTRUCTION_NODE` | | `COMMENT_NODE` | `readonly` | `8` | node is a Comment node. | `HTMLElement.COMMENT_NODE` | | `DOCUMENT_NODE` | `readonly` | `9` | node is a document. | `HTMLElement.DOCUMENT_NODE` | | `DOCUMENT_TYPE_NODE` | `readonly` | `10` | node is a doctype. | `HTMLElement.DOCUMENT_TYPE_NODE` | | `DOCUMENT_FRAGMENT_NODE` | `readonly` | `11` | node is a DocumentFragment node. | `HTMLElement.DOCUMENT_FRAGMENT_NODE` | | `NOTATION_NODE` | `readonly` | `12` | \- | `HTMLElement.NOTATION_NODE` | | `DOCUMENT_POSITION_DISCONNECTED` | `readonly` | `1` | Set when node and other are not in the same tree. | `HTMLElement.DOCUMENT_POSITION_DISCONNECTED` | | `DOCUMENT_POSITION_PRECEDING` | `readonly` | `2` | Set when other is preceding node. | `HTMLElement.DOCUMENT_POSITION_PRECEDING` | | `DOCUMENT_POSITION_FOLLOWING` | `readonly` | `4` | Set when other is following node. | `HTMLElement.DOCUMENT_POSITION_FOLLOWING` | | `DOCUMENT_POSITION_CONTAINS` | `readonly` | `8` | Set when other is an ancestor of node. | `HTMLElement.DOCUMENT_POSITION_CONTAINS` | | `DOCUMENT_POSITION_CONTAINED_BY` | `readonly` | `16` | Set when other is a descendant of node. | `HTMLElement.DOCUMENT_POSITION_CONTAINED_BY` | | `DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | `readonly` | `32` | \- | `HTMLElement.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | | `nextElementSibling` | `readonly` | `Element` | Returns the first following sibling that is an element, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/nextElementSibling) | `HTMLElement.nextElementSibling` | | `previousElementSibling` | `readonly` | `Element` | Returns the first preceding sibling that is an element, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/previousElementSibling) | `HTMLElement.previousElementSibling` | | `childElementCount` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/childElementCount) | `HTMLElement.childElementCount` | | `children` | `readonly` | `HTMLCollection` | Returns the child elements. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/children) | `HTMLElement.children` | | `firstElementChild` | `readonly` | `Element` | Returns the first child that is an element, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/firstElementChild) | `HTMLElement.firstElementChild` | | `lastElementChild` | `readonly` | `Element` | Returns the last child that is an element, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/lastElementChild) | `HTMLElement.lastElementChild` | | `assignedSlot` | `readonly` | `HTMLSlotElement` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/assignedSlot) | `HTMLElement.assignedSlot` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/font) # Interface: Font Represents a font. The Font interface defines the structure of a font within the Creative Editor SDK. It includes properties for the uri, subFamily, weight, and style. ## Properties[#](#properties) | Property | Type | | --- | --- | | `uri` | `string` | | `subFamily` | `string` | | `weight?` | [`FontWeight`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontweight/) | | `style?` | [`FontStyle`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontstyle/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/flip) # Interface: \_Flip Specifies the horizontal and vertical flip states of a design block. The `Flip` interface provides a set of properties that indicate whether the design block is flipped horizontally or vertically. Methods for configuring the flip states of a design block. ## Properties[#](#properties) | Property | Type | | --- | --- | | `horizontal` | `boolean` | | `vertical` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/findassetsquery) # Interface: \_FindAssetsQuery Represents a query for finding assets. The `FindAssetsQuery` interface provides a set of properties that describe a query for finding assets, including the number of assets per page, the page number, the query string, the tags, the groups, the excluded groups, the locale, the sorting order, the sort key, and whether to sort active assets first. Methods for working with queries for finding assets. ## Properties[#](#properties) | Property | Type | | --- | --- | | `perPage` | `number` | | `page` | `number` | | `query` | `string` | | `tags` | `string`\[\] | | `groups` | `string`\[\] | | `excludeGroups` | `string`\[\] | | `locale` | `string` | | `sortingOrder` | [`SortingOrder`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sortingorder/) | | `sortKey` | `string` | | `sortActiveFirst` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/engineplugin) # Interface: EnginePlugin Represents an engine plugin. Defines the structure of an engine plugin, including its name, version, and initialization function. * ‘name’: The name of the plugin. * ‘version’: The version of the plugin. * ‘initialize’: The function to initialize the plugin with the provided context. Can be synchronous or asynchronous. ## Properties[#](#properties) | Property | Type | | --- | --- | | `name` | `string` | | `version` | `string` | | `initialize` | (`context`) => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent) # Interface: CursorEvent Dispatched on the engine canvas when the text input has been blurred. Call `preventDefault()` to disallow this and refocus the engine text input. ## Extends[#](#extends) * `CustomEvent`<`string`\> ## Methods[#](#methods) ### preventDefault()[#](#preventdefault) ``` preventDefault(): void; ``` If default is prevented, the Creative Engine won’t apply the cursor style to itself. #### Returns[#](#returns) `void` #### Overrides[#](#overrides) ``` CustomEvent.preventDefault ``` * * * ### ~initCustomEvent()~[#](#initcustomevent) ``` initCustomEvent( type, bubbles?, cancelable?, detail?): void; ``` #### Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | | `detail?` | `string` | #### Returns[#](#returns-1) `void` #### Deprecated[#](#deprecated) [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/initCustomEvent) #### Inherited from[#](#inherited-from) ``` CustomEvent.initCustomEvent ``` * * * ### composedPath()[#](#composedpath) ``` composedPath(): EventTarget[]; ``` Returns the invocation target objects of event’s path (objects on which listeners will be invoked), except for any nodes in shadow trees of which the shadow root’s mode is “closed” that are not reachable from event’s currentTarget. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composedPath) #### Returns[#](#returns-2) `EventTarget`\[\] #### Inherited from[#](#inherited-from-1) ``` CustomEvent.composedPath ``` * * * ### ~initEvent()~[#](#initevent) ``` initEvent( type, bubbles?, cancelable?): void; ``` #### Parameters[#](#parameters-1) | Parameter | Type | | --- | --- | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | #### Returns[#](#returns-3) `void` #### Deprecated[#](#deprecated-1) [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/initEvent) #### Inherited from[#](#inherited-from-2) ``` CustomEvent.initEvent ``` * * * ### stopImmediatePropagation()[#](#stopimmediatepropagation) ``` stopImmediatePropagation(): void; ``` Invoking this method prevents event from reaching any registered event listeners after the current one finishes running and, when dispatched in a tree, also prevents event from reaching any other objects. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation) #### Returns[#](#returns-4) `void` #### Inherited from[#](#inherited-from-3) ``` CustomEvent.stopImmediatePropagation ``` * * * ### stopPropagation()[#](#stoppropagation) ``` stopPropagation(): void; ``` When dispatched in a tree, invoking this method prevents event from reaching any objects other than the current object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) #### Returns[#](#returns-5) `void` #### Inherited from[#](#inherited-from-4) ``` CustomEvent.stopPropagation ``` ## Properties[#](#properties) | Property | Modifier | Type | Description | Overrides | Inherited from | | --- | --- | --- | --- | --- | --- | | `type` | `readonly` | `"cesdk-cursor"` | Returns the type of event, e.g. “click”, “hashchange”, or “submit”. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/type) | `CustomEvent.type` | \- | | `detail` | `readonly` | `string` | Contains the cursor style | `CustomEvent.detail` | \- | | `bubbles` | `readonly` | `boolean` | Returns true or false depending on how event was initialized. True if event goes through its target’s ancestors in reverse tree order, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/bubbles) | \- | `CustomEvent.bubbles` | | ~`cancelBubble`~ | `public` | `boolean` | **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelBubble) | \- | `CustomEvent.cancelBubble` | | `cancelable` | `readonly` | `boolean` | Returns true or false depending on how event was initialized. Its return value does not always carry meaning, but true can indicate that part of the operation during which event was dispatched, can be canceled by invoking the preventDefault() method. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelable) | \- | `CustomEvent.cancelable` | | `composed` | `readonly` | `boolean` | Returns true or false depending on how event was initialized. True if event invokes listeners past a ShadowRoot node that is the root of its target, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composed) | \- | `CustomEvent.composed` | | `currentTarget` | `readonly` | `EventTarget` | Returns the object whose event listener’s callback is currently being invoked. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget) | \- | `CustomEvent.currentTarget` | | `defaultPrevented` | `readonly` | `boolean` | Returns true if preventDefault() was invoked successfully to indicate cancelation, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/defaultPrevented) | \- | `CustomEvent.defaultPrevented` | | `eventPhase` | `readonly` | `number` | Returns the event’s phase, which is one of NONE, CAPTURING\_PHASE, AT\_TARGET, and BUBBLING\_PHASE. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/eventPhase) | \- | `CustomEvent.eventPhase` | | `isTrusted` | `readonly` | `boolean` | Returns true if event was dispatched by the user agent, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/isTrusted) | \- | `CustomEvent.isTrusted` | | ~`returnValue`~ | `public` | `boolean` | **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/returnValue) | \- | `CustomEvent.returnValue` | | ~`srcElement`~ | `readonly` | `EventTarget` | **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/srcElement) | \- | `CustomEvent.srcElement` | | `target` | `readonly` | `EventTarget` | Returns the object to which event is dispatched (its target). [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target) | \- | `CustomEvent.target` | | `timeStamp` | `readonly` | `number` | Returns the event’s timestamp as the number of milliseconds measured relative to the time origin. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/timeStamp) | \- | `CustomEvent.timeStamp` | | `NONE` | `readonly` | `0` | \- | \- | `CustomEvent.NONE` | | `CAPTURING_PHASE` | `readonly` | `1` | \- | \- | `CustomEvent.CAPTURING_PHASE` | | `AT_TARGET` | `readonly` | `2` | \- | \- | `CustomEvent.AT_TARGET` | | `BUBBLING_PHASE` | `readonly` | `3` | \- | \- | `CustomEvent.BUBBLING_PHASE` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/configuration) # Interface: Configuration Specifies the configuration for the Creative Editor SDK. The `Configuration` interface provides a set of properties that control the behavior and settings of the editor. These options include settings for the base URL, license, user ID, core settings, logger, feature flags, presets, force WebGL1, audio output, and role. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `baseURL` | `string` | \- | | `license?` | `string` | \- | | `userId?` | `string` | \- | | `core` | `object` | \- | | `core.baseURL` | `string` | \- | | `logger` | [`Logger`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/logger/) | \- | | `featureFlags?` | `object` | \- | | ~`presets`~ | `object` | **Deprecated** This config key is not used anymore and will be removed. | | `presets.typefaces?` | `object` | **Deprecated** The configuration option `presets.typefaces` does not exist anymore. Custom typefaces should be defined as asset sources using the `cesdk.engine.asset.addSource` or `cesdk.engine.asset.addLocalSource` instead. | | `forceWebGL1?` | `boolean` | By default the engine tries to create a webgl2 context. If this fails it falls back to trying to create a webgl1 context. If this configuration option is set to true, it will no longer try to create a webgl2 context and always create a webgl1 context. | | `audioOutput?` | `"auto"` | `"none"` | | `role?` | [`RoleString`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rolestring/) | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/completeassetresult) # Interface: CompleteAssetResult Asset results that are returned from the engine. They contain additional information about the context of the asset. ## Extends[#](#extends) * [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) ## Properties[#](#properties) | Property | Type | Description | Overrides | Inherited from | | --- | --- | --- | --- | --- | | `id` | `string` | The unique id of this asset. | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`id`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | | `groups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetgroups/) | Groups of the asset. | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`groups`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | | `meta?` | [`AssetMetaData`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetmetadata/) | Asset-specific and custom meta information | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`meta`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | | `payload?` | [`AssetPayload`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetpayload/) | Structured asset-specific data | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`payload`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | | `locale?` | `string` | The locale of the label and tags | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`locale`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | | `label?` | `string` | The label of the result. Used for description and tooltips. | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`label`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | | `tags?` | `string`\[\] | The tags of this asset. Used for filtering and free-text searching. | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`tags`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | | `credits?` | `object` | Credits for the artist of the asset | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`credits`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | | `credits.name` | `string` | \- | \- | \- | | `credits.url?` | `string` | \- | \- | \- | | `license?` | `object` | License for this asset. Overwrites the source license if present | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`license`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | | `license.name` | `string` | \- | \- | \- | | `license.url?` | `string` | \- | \- | \- | | `utm?` | `object` | UTM parameters for the links inside the credits | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`utm`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | | `utm.source?` | `string` | \- | \- | \- | | `utm.medium?` | `string` | \- | \- | \- | | `context` | `object` | Context how an asset was added or shall be used in the future. This is added to all assets coming from the engine. | \- | \- | | `context.sourceId` | `string` | \- | \- | \- | | `active` | `boolean` | This is optional in `AssetResult` but always present here | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/).[`active`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/cmykcolor) # Interface: CMYKColor Represents a CMYK color value. Defines a CMYK color value with components between 0 and 1. * ‘c’: The cyan component. * ‘m’: The magenta component. * ‘y’: The yellow component. * ‘k’: The black component. * ‘tint’: The tint factor. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `c` | `number` | Cyan | | `m` | `number` | Magenta | | `y` | `number` | Yellow | | `k` | `number` | Black | | `tint` | `number` | The tint factor | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/buffer) # Interface: Buffer Represents a buffer of data. The `Buffer` interface provides a set of properties that describe a buffer of data, including a handle and the buffer itself. ## Properties[#](#properties) | Property | Type | | --- | --- | | `handle` | `string` | | `buffer` | `Uint8Array` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/blurevent) # Interface: BlurEvent Dispatched on the engine canvas when the text input has been blurred. Call `preventDefault()` to disallow this and refocus the engine text input. ## Extends[#](#extends) * `CustomEvent`<`EventTarget` | `null`\> ## Methods[#](#methods) ### preventDefault()[#](#preventdefault) ``` preventDefault(): void; ``` Force focus back to the engine input #### Returns[#](#returns) `void` #### Overrides[#](#overrides) ``` CustomEvent.preventDefault ``` * * * ### ~initCustomEvent()~[#](#initcustomevent) ``` initCustomEvent( type, bubbles?, cancelable?, detail?): void; ``` #### Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | | `detail?` | `EventTarget` | #### Returns[#](#returns-1) `void` #### Deprecated[#](#deprecated) [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/initCustomEvent) #### Inherited from[#](#inherited-from) ``` CustomEvent.initCustomEvent ``` * * * ### composedPath()[#](#composedpath) ``` composedPath(): EventTarget[]; ``` Returns the invocation target objects of event’s path (objects on which listeners will be invoked), except for any nodes in shadow trees of which the shadow root’s mode is “closed” that are not reachable from event’s currentTarget. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composedPath) #### Returns[#](#returns-2) `EventTarget`\[\] #### Inherited from[#](#inherited-from-1) ``` CustomEvent.composedPath ``` * * * ### ~initEvent()~[#](#initevent) ``` initEvent( type, bubbles?, cancelable?): void; ``` #### Parameters[#](#parameters-1) | Parameter | Type | | --- | --- | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | #### Returns[#](#returns-3) `void` #### Deprecated[#](#deprecated-1) [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/initEvent) #### Inherited from[#](#inherited-from-2) ``` CustomEvent.initEvent ``` * * * ### stopImmediatePropagation()[#](#stopimmediatepropagation) ``` stopImmediatePropagation(): void; ``` Invoking this method prevents event from reaching any registered event listeners after the current one finishes running and, when dispatched in a tree, also prevents event from reaching any other objects. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation) #### Returns[#](#returns-4) `void` #### Inherited from[#](#inherited-from-3) ``` CustomEvent.stopImmediatePropagation ``` * * * ### stopPropagation()[#](#stoppropagation) ``` stopPropagation(): void; ``` When dispatched in a tree, invoking this method prevents event from reaching any objects other than the current object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) #### Returns[#](#returns-5) `void` #### Inherited from[#](#inherited-from-4) ``` CustomEvent.stopPropagation ``` ## Properties[#](#properties) | Property | Modifier | Type | Description | Overrides | Inherited from | | --- | --- | --- | --- | --- | --- | | `type` | `readonly` | `"cesdk-blur"` | Returns the type of event, e.g. “click”, “hashchange”, or “submit”. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/type) | `CustomEvent.type` | \- | | `detail` | `readonly` | `EventTarget` | Contains the element that has received focus during the blur, or null | `CustomEvent.detail` | \- | | `bubbles` | `readonly` | `boolean` | Returns true or false depending on how event was initialized. True if event goes through its target’s ancestors in reverse tree order, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/bubbles) | \- | `CustomEvent.bubbles` | | ~`cancelBubble`~ | `public` | `boolean` | **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelBubble) | \- | `CustomEvent.cancelBubble` | | `cancelable` | `readonly` | `boolean` | Returns true or false depending on how event was initialized. Its return value does not always carry meaning, but true can indicate that part of the operation during which event was dispatched, can be canceled by invoking the preventDefault() method. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelable) | \- | `CustomEvent.cancelable` | | `composed` | `readonly` | `boolean` | Returns true or false depending on how event was initialized. True if event invokes listeners past a ShadowRoot node that is the root of its target, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composed) | \- | `CustomEvent.composed` | | `currentTarget` | `readonly` | `EventTarget` | Returns the object whose event listener’s callback is currently being invoked. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget) | \- | `CustomEvent.currentTarget` | | `defaultPrevented` | `readonly` | `boolean` | Returns true if preventDefault() was invoked successfully to indicate cancelation, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/defaultPrevented) | \- | `CustomEvent.defaultPrevented` | | `eventPhase` | `readonly` | `number` | Returns the event’s phase, which is one of NONE, CAPTURING\_PHASE, AT\_TARGET, and BUBBLING\_PHASE. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/eventPhase) | \- | `CustomEvent.eventPhase` | | `isTrusted` | `readonly` | `boolean` | Returns true if event was dispatched by the user agent, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/isTrusted) | \- | `CustomEvent.isTrusted` | | ~`returnValue`~ | `public` | `boolean` | **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/returnValue) | \- | `CustomEvent.returnValue` | | ~`srcElement`~ | `readonly` | `EventTarget` | **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/srcElement) | \- | `CustomEvent.srcElement` | | `target` | `readonly` | `EventTarget` | Returns the object to which event is dispatched (its target). [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target) | \- | `CustomEvent.target` | | `timeStamp` | `readonly` | `number` | Returns the event’s timestamp as the number of milliseconds measured relative to the time origin. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/timeStamp) | \- | `CustomEvent.timeStamp` | | `NONE` | `readonly` | `0` | \- | \- | `CustomEvent.NONE` | | `CAPTURING_PHASE` | `readonly` | `1` | \- | \- | `CustomEvent.CAPTURING_PHASE` | | `AT_TARGET` | `readonly` | `2` | \- | \- | `CustomEvent.AT_TARGET` | | `BUBBLING_PHASE` | `readonly` | `3` | \- | \- | `CustomEvent.BUBBLING_PHASE` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/blockstateready) # Interface: BlockStateReady Represents a ready state for a design block. The `BlockStateReady` interface provides a set of properties that describe a ready state for a design block, including the type of state. ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"Ready"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/blockstatepending) # Interface: BlockStatePending Represents a pending state for a design block. The `BlockStatePending` interface provides a set of properties that describe a pending state for a design block, including the type of state and the progress of the operation. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `type` | `"Pending"` | \- | | `progress` | `number` | Expected range is \[0, 1\] | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/blockstateerror) # Interface: BlockStateError Represents an error state for a design block. The `BlockStateError` interface provides a set of properties that describe an error state for a design block, including the type of error and a description of the error. ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"Error"` | | `error` | | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/blockevent) # Interface: BlockEvent Represents an event related to a design block. The `BlockEvent` interface provides a set of properties that describe an event related to a design block, including the block ID and the type of event. ## Properties[#](#properties) | Property | Type | | --- | --- | | `block` | `number` | | `type` | `"Created"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/audiotrackinfo) # Interface: AudioTrackInfo Information about a single audio track from a video. This interface provides comprehensive metadata about audio tracks, including codec information, technical specifications, and track details. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `audioCodec` | `string` | The codec string | | `channels` | `number` | The number of audio channels | | `sampleRate` | `number` | The audio sample rate | | `audioDuration` | `number` | Duration of the audio track in seconds | | `numAudioPackets` | `number` | The number of audio packets (matches the number of encoded chunks) | | `numAudioFrames` | `number` | The number of audio frames | | `trackName` | `string` | Optional track name/label if available in metadata | | `trackIndex` | `number` | Track index in the container | | `language` | `string` | Track language code (ISO 639-2T format: “und”, “eng”, “deu”, etc.) | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetstringproperty) # Interface: AssetStringProperty Asset string property definition ## Properties[#](#properties) | Property | Type | | --- | --- | | `property` | `string` | | `type` | `"String"` | | `value` | `string` | | `defaultValue` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetsqueryresult) # Interface: AssetsQueryResult Return type of a `findAssets` query. ## Type Parameters[#](#type-parameters) | Type Parameter | Default type | | --- | --- | | `T` _extends_ [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `assets` | `T`\[\] | The assets in the requested page | | `currentPage` | `number` | The current, requested page | | `nextPage?` | `number` | The next page to query if it exists | | `total` | `number` | How many assets are there in total for the current query regardless of the page | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetspotcolor) # Interface: AssetSpotColor Asset Color payload SpotColor representation ## Properties[#](#properties) | Property | Type | | --- | --- | | `colorSpace` | `"SpotColor"` | | `name` | `string` | | `externalReference` | `string` | | `representation` | | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetsource) # Interface: AssetSource A source of assets ## Methods[#](#methods) ### findAssets()[#](#findassets) ``` findAssets(queryData): Promise>; ``` Find all asset for the given type and the provided query data. #### Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `queryData` | [`AssetQueryData`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetquerydata/) | #### Returns[#](#returns) `Promise`<[`AssetsQueryResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetsqueryresult/)<[`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/)\>> * * * ### addAsset()?[#](#addasset) ``` optional addAsset(asset): void; ``` Adds the given asset to this source. Throws an error if the asset source does not support adding assets. #### Parameters[#](#parameters-1) | Parameter | Type | | --- | --- | | `asset` | [`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetdefinition/) | #### Returns[#](#returns-1) `void` * * * ### removeAsset()?[#](#removeasset) ``` optional removeAsset(assetId): void; ``` Removes the given asset from this source. #### Parameters[#](#parameters-2) | Parameter | Type | | --- | --- | | `assetId` | `string` | #### Returns[#](#returns-2) `void` * * * ### getSupportedMimeTypes()?[#](#getsupportedmimetypes) ``` optional getSupportedMimeTypes(): string[]; ``` Generates a list of supported mime types for this source. #### Returns[#](#returns-3) `string`\[\] a list of the mime types should be supported by this source ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `id` | `string` | The unique id of the API | | `fetchAsset?` | (`id`, `params?`) => `Promise`<[`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/)\> | Fetch an asset by id. | | `getGroups?` | () => `Promise`<`string`\[\]> | Return every available group | | `credits?` | `object` | Credits for the source/api | | `credits.name` | `string` | \- | | `credits.url?` | `string` | \- | | `license?` | `object` | General license for all asset from this source | | `license.name` | `string` | \- | | `license.url?` | `string` | \- | | ~`canManageAssets?`~ | `boolean` | Can the source add and remove assets dynamically? If `false` methods like `addAsset` and `removeAsset` will throw an error. **Deprecated** Will be removed in v1.11. Use `canAdd` and `canRemove` in the asset library configuration | | `applyAsset?` | (`asset`) => `Promise`<`number`\> | Apply the given asset result to the active scene. You can override this with custom behavior. | | `applyAssetToBlock?` | (`asset`, `block`) => `Promise`<`void`\> | Apply the given asset result to the given block. You can override this with custom behavior. | | `applyAssetProperty?` | (`asset`, `property`) => `Promise`<`void`\> | Apply a property of the given asset result to the active scene. You can override this with custom behavior. | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetrgbcolor) # Interface: AssetRGBColor Asset Color payload RGB representation ## Properties[#](#properties) | Property | Type | | --- | --- | | `colorSpace` | `"sRGB"` | | `r` | `number` | | `g` | `number` | | `b` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetresultlicense) # Interface: \_AssetResultLicense Represents the license for an asset result. The `AssetResultLicense` interface provides a set of properties that describe the license for an asset result, including the name and URL of the license. Methods for working with the license of asset results. ## Properties[#](#properties) | Property | Type | | --- | --- | | `name` | `string` | | `url` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetresultcredits) # Interface: \_AssetResultCredits Represents the credits for an asset result. The `AssetResultCredits` interface provides a set of properties that describe the credits for an asset result, including the name and URL of the credits. Methods for working with the credits of asset results. ## Properties[#](#properties) | Property | Type | | --- | --- | | `name` | `string` | | `url` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult) # Interface: AssetResult Single asset result of a query from the engine. ## Extends[#](#extends) * [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) ## Extended by[#](#extended-by) * [`CompleteAssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/completeassetresult/) ## Properties[#](#properties) | Property | Type | Description | Inherited from | | --- | --- | --- | --- | | `id` | `string` | The unique id of this asset. | [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/).[`id`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) | | `groups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetgroups/) | Groups of the asset. | [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/).[`groups`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) | | `meta?` | [`AssetMetaData`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetmetadata/) | Asset-specific and custom meta information | [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/).[`meta`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) | | `payload?` | [`AssetPayload`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetpayload/) | Structured asset-specific data | [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/).[`payload`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) | | `locale?` | `string` | The locale of the label and tags | \- | | `label?` | `string` | The label of the result. Used for description and tooltips. | \- | | `tags?` | `string`\[\] | The tags of this asset. Used for filtering and free-text searching. | \- | | `active?` | `boolean` | If the asset is marked as active, i.e., used in a currently selected element. | \- | | `credits?` | `object` | Credits for the artist of the asset | \- | | `credits.name` | `string` | \- | \- | | `credits.url?` | `string` | \- | \- | | `license?` | `object` | License for this asset. Overwrites the source license if present | \- | | `license.name` | `string` | \- | \- | | `license.url?` | `string` | \- | \- | | `utm?` | `object` | UTM parameters for the links inside the credits | \- | | `utm.source?` | `string` | \- | \- | | `utm.medium?` | `string` | \- | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetquerydata) # Interface: AssetQueryData Defines a request for querying assets ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `query?` | `string` | A query string used for (fuzzy) searching of labels and tags | | `page` | `number` | The current page queried for paginated views. | | `tags?` | `string` | `string`\[\] | | `groups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetgroups/) | Query only these groups | | `excludeGroups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetgroups/) | Filter out assets with this groups | | `locale?` | `string` | Choose the locale of the labels and tags for localized search and filtering | | `perPage` | `number` | The number of results queried. How many assets shall be returned regardless of the total number of assets available. Together with `page` this can be used for pagination. | | `sortingOrder?` | [`SortingOrder`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/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. | | `sortKey?` | `string` | The key that identifies the meta data value to sort by or ‘id’ to sort by the asset ID. If empty, the assets are sorted by the index. | | `sortActiveFirst?` | `boolean` | Sort assets that are marked as active first. | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetpayload) # Interface: AssetPayload Asset payload ## Properties[#](#properties) | Property | Type | | --- | --- | | `color?` | [`AssetColor`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetcolor/) | | `sourceSet?` | [`Source`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/source/)\[\] | | `typeface?` | [`Typeface`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/typeface/) | | `transformPreset?` | [`AssetTransformPreset`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assettransformpreset/) | | `properties?` | [`AssetProperty`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetproperty/)\[\] | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetnumberproperty) # Interface: AssetNumberProperty Asset number property definition ## Properties[#](#properties) | Property | Type | | --- | --- | | `property` | `string` | | `type` | `"Int"` | | `value` | `number` | | `defaultValue` | `number` | | `min` | `number` | | `max` | `number` | | `step` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetfreeaspectratio) # Interface: AssetFreeAspectRatio Asset transform preset payload free aspect ratio ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"FreeAspectRatio"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetfixedaspectratio) # Interface: AssetFixedAspectRatio Asset transform preset payload fixed aspect ratio ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"FixedAspectRatio"` | | `width` | `number` | | `height` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetfixedsize) # Interface: AssetFixedSize Asset transform preset payload fixed size ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"FixedSize"` | | `width` | `number` | | `height` | `number` | | `designUnit` | `"Pixel"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetenumproperty) # Interface: AssetEnumProperty Asset enum property definition ## Properties[#](#properties) | Property | Type | | --- | --- | | `property` | `string` | | `type` | `"Enum"` | | `value` | `string` | | `defaultValue` | `string` | | `options` | `string`\[\] | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetdefinition) # Interface: AssetDefinition Definition of an asset used if an asset is added to an asset source. ## Extends[#](#extends) * [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) ## Properties[#](#properties) | Property | Type | Description | Inherited from | | --- | --- | --- | --- | | `id` | `string` | The unique id of this asset. | [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/).[`id`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) | | `groups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetgroups/) | Groups of the asset. | [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/).[`groups`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) | | `meta?` | [`AssetMetaData`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetmetadata/) | Asset-specific and custom meta information | [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/).[`meta`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) | | `payload?` | [`AssetPayload`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetpayload/) | Structured asset-specific data | [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/).[`payload`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) | | `label?` | `Record`<`string`, `string`\> | Label used to display in aria-label and as a tooltip. Will be also searched in a query and should be localized | \- | | `tags?` | `Record`<`string`, `string`\[\]> | Tags for this asset. Can be used for filtering, but is also useful for free-text search. Since the label is searched as well as used for tooltips you do not want to overdo it, but still add things which are searched. Thus, it should be localized similar to the `label`. | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetcolorproperty) # Interface: AssetColorProperty Asset color property definition ## Properties[#](#properties) | Property | Type | | --- | --- | | `property` | `string` | | `type` | `"Color"` | | `value` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | | `defaultValue` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetcmykcolor) # Interface: AssetCMYKColor Asset Color payload CMYK representation ## Properties[#](#properties) | Property | Type | | --- | --- | | `colorSpace` | `"CMYK"` | | `c` | `number` | | `m` | `number` | | `y` | `number` | | `k` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/assetbooleanproperty) # Interface: AssetBooleanProperty Asset boolean property definition ## Properties[#](#properties) | Property | Type | | --- | --- | | `property` | `string` | | `type` | `"Boolean"` | | `value` | `boolean` | | `defaultValue` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/asset) # Interface: Asset Generic asset information ## Extended by[#](#extended-by) * [`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetdefinition/) * [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `id` | `string` | The unique id of this asset. | | `groups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetgroups/) | Groups of the asset. | | `meta?` | [`AssetMetaData`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetmetadata/) | Asset-specific and custom meta information | | `payload?` | [`AssetPayload`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetpayload/) | Structured asset-specific data | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/applyassetoptions) # Interface: ApplyAssetOptions Options for applying an asset to the scene. ## Indexable[#](#indexable) ``` [key: string]: unknown ``` Additional custom context options. Allows passing arbitrary data to middleware for custom placement logic. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `clipType?` | `"clip"` | `"overlay"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/interfaces/addvideooptions) # Interface: AddVideoOptions Options for adding videos to the scene. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `sizeMode?` | [`SizeMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sizemode/) | How the video should be sized and positioned | | `positionMode?` | [`PositionMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionmode/) | How the position should be interpreted | | `x?` | `number` | X position in scene design units | | `y?` | `number` | Y position in scene design units | | `cornerRadius?` | `number` | Corner radius for rounded corners in scene design units | | `timeline?` | `object` | Timeline configuration | | `timeline.timeOffset?` | `number` | Start time offset in seconds | | `timeline.duration?` | `number` | Duration in seconds | | `shadow?` | [`DropShadowOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/dropshadowoptions/) | Drop shadow configuration | | `animation?` | [`AnimationOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationoptions/) | Animation configuration | --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/classes/variableapi) # Class: VariableAPI Manage text variables within design templates. Text variables enable dynamic content replacement in design templates. Variables are stored as key-value pairs and can be referenced in text blocks for automated content updates. ``` // Configure a text block that displays 'Hello, World'const block = cesdk.engine.block.create('text');cesdk.engine.block.setText(block, 'Hello, {{name}}!');cesdk.engine.variable.setString('name', 'World'); ``` ## Constructors[#](#constructors) ### Constructor[#](#constructor) `VariableAPI` ## Variable Management[#](#variable-management) Create, update, retrieve, and remove text variables from the engine. ### findAll()[#](#findall) Get all text variable names currently stored in the engine. #### Returns[#](#returns) `string`\[\] List of variable names. #### Signature[#](#signature) ``` findAll(): string[] ``` * * * ### setString()[#](#setstring) Set a text variable’s value. Creates a new variable if the key doesn’t exist, or updates an existing one. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `key` | `string` | The variable’s key. | | `value` | `string` | The text value to assign to the variable. | #### Returns[#](#returns-1) `void` #### Signature[#](#signature-1) ``` setString(key: string, value: string): void ``` * * * ### getString()[#](#getstring) Get a text variable’s value. #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `key` | `string` | The variable’s key. | #### Returns[#](#returns-2) `string` The text value of the variable. #### Signature[#](#signature-2) ``` getString(key: string): string ``` * * * ### remove()[#](#remove) Remove a text variable from the engine. #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `key` | `string` | The variable’s key to remove. | #### Returns[#](#returns-3) `void` #### Signature[#](#signature-3) ``` remove(key: string): void ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/classes/sceneapi) # Class: SceneAPI Create, load, save, and manipulate scenes. Scenes are the root element of every design hierarchy. Their children, stacks of pages, individual pages or other blocks, define the content of the design. Scenes can be created from scratch, loaded from a file or URL, or created from an image or video. After manipulation, they can be saved to a string or an archive. This allows further processing in another editor instance, automated processing in scripts or sharing with other users. ## Constructors[#](#constructors) ### Constructor[#](#constructor) `SceneAPI` ## Scene Creation[#](#scene-creation) Create new scenes from scratch or from media files. ### create()[#](#create) Create a new design scene, along with its own camera. ``` const scene = engine.scene.create(layout); ``` #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `sceneLayout?` | `"Free"` | `"VerticalStack"` | | `options?` | [`CreateSceneOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/createsceneoptions/) | Optional parameters for the scene. Properties: - `page` - Page options. Properties: - `size` - The size of the page. - `color` - Optional background color of the page. | #### Returns[#](#returns) `number` The scene’s handle. #### Signature[#](#signature) ``` create(sceneLayout?: "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack", options?: CreateSceneOptions): number ``` * * * ### createVideo()[#](#createvideo) Create a new scene in video mode, along with its own camera. ``` const scene = engine.scene.createVideo(); ``` #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `options?` | [`CreateSceneOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/createsceneoptions/) | Optional parameters for the scene. Properties: - `page` - Page options. Properties: - `size` - The size of the page. - `color` - Optional background color of the page. | #### Returns[#](#returns-1) `number` The scene’s handle. #### Signature[#](#signature-1) ``` createVideo(options?: CreateSceneOptions): number ``` * * * ### createFromImage()[#](#createfromimage) Loads the given image and creates a scene with a single page showing the image. Fetching the image may take an arbitrary amount of time, so the scene isn’t immediately available. ``` const scene = await engine.scene.createFromImage('https://img.ly/static/ubq_samples/sample_4.jpg'); ``` #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The image URL. | | `dpi?` | `number` | The scene’s DPI. | | `pixelScaleFactor?` | `number` | The display’s pixel scale factor. | | `sceneLayout?` | `"Free"` | `"VerticalStack"` | | `spacing?` | `number` | \- | | `spacingInScreenSpace?` | `boolean` | \- | #### Returns[#](#returns-2) `Promise`<`number`\> A promise that resolves with the scene ID on success or rejected with an error otherwise. #### Signature[#](#signature-2) ``` createFromImage(url: string, dpi?: number, pixelScaleFactor?: number, sceneLayout?: "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack", spacing?: number, spacingInScreenSpace?: boolean): Promise ``` * * * ### createFromVideo()[#](#createfromvideo) Loads the given video and creates a scene with a single page showing the video. Fetching the video may take an arbitrary amount of time, so the scene isn’t immediately available. ``` const scene = await engine.scene.createFromVideo('https://img.ly/static/ubq_video_samples/bbb.mp4'); ``` #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The video URL. | #### Returns[#](#returns-3) `Promise`<`number`\> A promise that resolves with the scene ID on success or rejected with an error otherwise. #### Signature[#](#signature-3) ``` createFromVideo(url: string): Promise ``` ## Scene Loading[#](#scene-loading) Load scenes from various sources including strings, URLs, and archives. ### loadFromString()[#](#loadfromstring) Load the contents of a scene file. The string must be the binary contents of a scene file and is directly imported as blocks. Any existing scene is replaced by the new one. This is useful for loading scenes that were saved with `saveToString` or scenes that were created in another editor instance. ``` const sceneContent = await creativeEngine.scene.saveToString();creativeEngine.scene.loadFromString(sceneContent); ``` #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `sceneContent` | `string` | The scene file contents, a base64 string. | | `overrideEditorConfig?` | `boolean` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | | `waitForResources?` | `boolean` | Whether to wait for all resources to finish loading before resolving. Defaults to false. | #### Returns[#](#returns-4) `Promise`<`number`\> A handle to the loaded scene. #### Signature[#](#signature-4) ``` loadFromString(sceneContent: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise ``` * * * ### loadFromURL()[#](#loadfromurl) Load a scene from the URL to the scene file. The scene file will be fetched asynchronously by the engine and loaded into the engine once it is available. Any existing scene is replaced by the new one. ``` const sceneURL = 'https://example.com/my-scene.json';creativeEngine.scene.loadFromURL(sceneURL); ``` #### Parameters[#](#parameters-5) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The URL of the scene file. | | `overrideEditorConfig?` | `boolean` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | | `waitForResources?` | `boolean` | Whether to wait for all resources to finish loading before resolving. Defaults to false. | #### Returns[#](#returns-5) `Promise`<`number`\> scene A promise that resolves once the scene was loaded or rejects with an error otherwise. #### Signature[#](#signature-5) ``` loadFromURL(url: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise ``` * * * ### loadFromArchiveURL()[#](#loadfromarchiveurl) Load a previously archived scene from the URL to the scene file. The scene file will be fetched asynchronously by the engine. This requires continuous `render` calls on this engines instance. #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The URL of the scene archive file. | | `overrideEditorConfig?` | `boolean` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | | `waitForResources?` | `boolean` | Whether to wait for all resources to finish loading before resolving. Defaults to false. | #### Returns[#](#returns-6) `Promise`<`number`\> scene A promise that resolves once the scene was loaded or rejects with an error otherwise. #### Signature[#](#signature-6) ``` loadFromArchiveURL(url: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise ``` ## Scene Saving[#](#scene-saving) Save and export scenes to different formats. ### saveToString()[#](#savetostring) Serializes the current scene into a string. Selection is discarded. #### Parameters[#](#parameters-7) | Parameter | Type | Description | | --- | --- | --- | | `allowedResourceSchemes?` | `string`\[\] | The resource schemes to allow in the saved string. Defaults to \[‘blob’, ‘bundle’, ‘file’, ‘http’, ‘https’, ‘opfs’\]. | | `onDisallowedResourceScheme?` | (`url`, `dataHash`) => `Promise`<`string`\> | An optional callback that is called for each resource URL that has a scheme absent from `resourceSchemesAllowed`. The `url` parameter is the resource URL and the `dataHash` parameter is the hash of the resource’s data. The callback should return a new URL for the resource, which will be used in the serialized scene. The callback is expected to return the original URL if no persistence is needed. | #### Returns[#](#returns-7) `Promise`<`string`\> A promise that resolves with a string on success or an error on failure. #### Signature[#](#signature-7) ``` saveToString(allowedResourceSchemes?: string[], onDisallowedResourceScheme?: (url: string, dataHash: string) => Promise): Promise ``` * * * ### saveToArchive()[#](#savetoarchive) Saves the current scene and all of its referenced assets into an archive. The archive contains all assets, that were accessible when this function was called. Blocks in the archived scene reference assets relative from to the location of the scene file. These references are resolved when loading such a scene via `loadSceneFromURL`. #### Returns[#](#returns-8) `Promise`<`Blob`\> A promise that resolves with a Blob on success or an error on failure. #### Signature[#](#signature-8) ``` saveToArchive(): Promise ``` ## Page Management[#](#page-management) Manage pages within scenes and find elements. ### getPages()[#](#getpages) Get the sorted list of pages in the scene. ``` const pages = engine.scene.getPages(); ``` #### Returns[#](#returns-9) `number`\[\] The sorted list of pages in the scene. #### Signature[#](#signature-9) ``` getPages(): number[] ``` * * * ### getCurrentPage()[#](#getcurrentpage) Get the current page, i.e., the page of the first selected element if this page is at least 25% visible or, otherwise, the page nearest to the viewport center. ``` const currentPage = engine.scene.getCurrentPage(); ``` #### Returns[#](#returns-10) `number` The current page in the scene or null. #### Signature[#](#signature-10) ``` getCurrentPage(): number ``` * * * ### findNearestToViewPortCenterByType()[#](#findnearesttoviewportcenterbytype) Find all blocks with the given type sorted by the distance to viewport center. ``` // Use longhand block type ID to find nearest pages.let nearestPageByType = engine.scene.findNearestToViewPortCenterByType('//ly.img.ubq/page')[0];// Or use shorthand block type ID.nearestPageByType = engine.scene.findNearestToViewPortCenterByType('page')[0]; ``` #### Parameters[#](#parameters-8) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`DesignBlockType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktype/) | The type to search for. | #### Returns[#](#returns-11) `number`\[\] A list of block ids sorted by distance to viewport center. #### Signature[#](#signature-11) ``` findNearestToViewPortCenterByType(type: DesignBlockType): number[] ``` * * * ### findNearestToViewPortCenterByKind()[#](#findnearesttoviewportcenterbykind) Find all blocks with the given kind sorted by the distance to viewport center. ``` let nearestImageByKind = engine.scene.findNearestToViewPortCenterByKind('image')[0]; ``` #### Parameters[#](#parameters-9) | Parameter | Type | Description | | --- | --- | --- | | `kind` | `string` | The kind to search for. | #### Returns[#](#returns-12) `number`\[\] A list of block ids sorted by distance to viewport center. #### Signature[#](#signature-12) ``` findNearestToViewPortCenterByKind(kind: string): number[] ``` ## Event Subscriptions[#](#event-subscriptions) Subscribe to scene-related events and changes. ### onZoomLevelChanged()[#](#onzoomlevelchanged) Subscribe to changes to the zoom level. ``` const unsubscribeZoomLevelChanged = engine.scene.onZoomLevelChanged(() => { const zoomLevel = engine.scene.getZoomLevel(); console.log('Zoom level is now: ', zoomLevel);}); ``` #### Parameters[#](#parameters-10) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | This function is called at the end of the engine update, if the zoom level has changed. | #### Returns[#](#returns-13) A method to unsubscribe. ``` (): void; ``` ##### Returns[#](#returns-14) `void` * * * ### onActiveChanged()[#](#onactivechanged) Subscribe to changes to the active scene rendered by the engine. ``` const unsubscribe = engine.scene.onActiveChanged(() => { const newActiveScene = engine.scene.get();}); ``` #### Parameters[#](#parameters-11) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | This function is called at the end of the engine update, if the active scene has changed. | #### Returns[#](#returns-15) A method to unsubscribe. ``` (): void; ``` ##### Returns[#](#returns-16) `void` ## Experimental Features[#](#experimental-features) Experimental features that may change or be removed in future versions. ### unstable\_enableCameraPositionClamping()[#](#unstable_enablecamerapositionclamping) Continually ensures the camera position to be within the width and height of the blocks axis-aligned bounding box. Disables any previously set camera position clamping in the scene and also takes priority over clamp camera commands. ``` // Keep the scene with padding of 10px within the cameraengine.scene.unstable_enableCameraPositionClamping([scene], 10.0, 10.0, 10.0, 10.0, 0.0, 0.0, 0.0, 0.0); ``` Without padding, this results in a tight clamp on the block. With padding, the padded part of the blocks is ensured to be visible. #### Parameters[#](#parameters-12) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The blocks to which the camera position is adjusted to, usually, the scene or a page. | | `paddingLeft?` | `number` | Optional padding in screen pixels to the left of the block. | | `paddingTop?` | `number` | Optional padding in screen pixels to the top of the block. | | `paddingRight?` | `number` | Optional padding in screen pixels to the right of the block. | | `paddingBottom?` | `number` | Optional padding in screen pixels to the bottom of the block. | | `scaledPaddingLeft?` | `number` | Optional padding in screen pixels to the left of the block that scales with the zoom level until five times the initial value. | | `scaledPaddingTop?` | `number` | Optional padding in screen pixels to the top of the block that scales with the zoom level until five times the initial value. | | `scaledPaddingRight?` | `number` | Optional padding in screen pixels to the right of the block that scales with the zoom level until five times the initial value. | | `scaledPaddingBottom?` | `number` | Optional padding in screen pixels to the bottom of the block that scales with the zoom level until five times the initial value. This API is experimental and may change or be removed in future versions. | #### Returns[#](#returns-17) `void` * * * ### unstable\_disableCameraPositionClamping()[#](#unstable_disablecamerapositionclamping) Disables any previously set position clamping for the current scene. ``` engine.scene.unstable_disableCameraPositionClamping(); ``` #### Parameters[#](#parameters-13) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene?` | `number` | Optionally, the scene or a block in the scene for which to query the position clamping. This API is experimental and may change or be removed in future versions. | #### Returns[#](#returns-18) `void` * * * ### unstable\_isCameraPositionClampingEnabled()[#](#unstable_iscamerapositionclampingenabled) Queries whether position clamping is enabled. ``` engine.scene.unstable_isCameraPositionClampingEnabled(); ``` #### Parameters[#](#parameters-14) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene?` | `number` | Optionally, the scene or a block in the scene for which to query the position clamping. | #### Returns[#](#returns-19) `boolean` True if the given block has position clamping set or the scene contains a block for which position clamping is set, false otherwise. This API is experimental and may change or be removed in future versions. * * * ### unstable\_enableCameraZoomClamping()[#](#unstable_enablecamerazoomclamping) Continually ensures the zoom level of the camera in the active scene to be in the given range. ``` // Allow zooming from 12.5% to 800% relative to the size of a pageengine.scene.unstable_enableCameraZoomClamping([page], 0.125, 8.0, 0.0, 0.0, 0.0, 0.0); ``` #### Parameters[#](#parameters-15) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The blocks to which the camera zoom limits are adjusted to, usually, the scene or a page. | | `minZoomLimit?` | `number` | The minimum zoom level limit when zooming out, unlimited when negative. | | `maxZoomLimit?` | `number` | The maximum zoom level limit when zooming in, unlimited when negative. | | `paddingLeft?` | `number` | Optional padding in screen pixels to the left of the block. Only applied when the block is not a camera. | | `paddingTop?` | `number` | Optional padding in screen pixels to the top of the block. Only applied when the block is not a camera. | | `paddingRight?` | `number` | Optional padding in screen pixels to the right of the block. Only applied when the block is not a camera. | | `paddingBottom?` | `number` | Optional padding in screen pixels to the bottom of the block. Only applied when the block is not a camera. This API is experimental and may change or be removed in future versions. | #### Returns[#](#returns-20) `void` * * * ### unstable\_disableCameraZoomClamping()[#](#unstable_disablecamerazoomclamping) Disables any previously set zoom clamping for the current scene. ``` engine.scene.unstable_disableCameraZoomClamping(); ``` #### Parameters[#](#parameters-16) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene?` | `number` | Optionally, the scene or a block for which to query the zoom clamping. This API is experimental and may change or be removed in future versions. | #### Returns[#](#returns-21) `void` * * * ### unstable\_isCameraZoomClampingEnabled()[#](#unstable_iscamerazoomclampingenabled) Queries whether zoom clamping is enabled. ``` engine.scene.unstable_isCameraZoomClampingEnabled(); ``` #### Parameters[#](#parameters-17) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene?` | `number` | Optionally, the scene or a block for which to query the zoom clamping. | #### Returns[#](#returns-22) `boolean` True if the given block has zoom clamping set or the scene contains a block for which zoom clamping is set, false otherwise. This API is experimental and may change or be removed in future versions. ## Scene Properties[#](#scene-properties) Get and set scene properties like design units and mode. ### get()[#](#get) Return the currently active scene. ``` const scene = engine.scene.get(); ``` #### Returns[#](#returns-23) `number` The scene or null, if none was created yet. #### Signature[#](#signature-13) ``` get(): number ``` * * * ### getMode()[#](#getmode) Get the current scene mode. ``` const mode = scene.getMode(); ``` #### Returns[#](#returns-24) `"Design"` | `"Video"` The current mode of the scene. #### Signature[#](#signature-14) ``` getMode(): "Design" | "Video" ``` * * * ### setDesignUnit()[#](#setdesignunit) Converts all values of the current scene into the given design unit. ``` engine.scene.setDesignUnit('Pixel'); ``` #### Parameters[#](#parameters-18) | Parameter | Type | Description | | --- | --- | --- | | `designUnit` | `"Pixel"` | `"Millimeter"` | #### Returns[#](#returns-25) `void` #### Signature[#](#signature-15) ``` setDesignUnit(designUnit: "Pixel" | "Millimeter" | "Inch"): void ``` * * * ### getDesignUnit()[#](#getdesignunit) Returns the design unit of the current scene. ``` engine.scene.getDesignUnit(); ``` #### Returns[#](#returns-26) `"Pixel"` | `"Millimeter"` | `"Inch"` The current design unit. #### Signature[#](#signature-16) ``` getDesignUnit(): "Pixel" | "Millimeter" | "Inch" ``` * * * ### getLayout()[#](#getlayout) Get the layout of the current scene. ``` const layout = engine.scene.getLayout(); ``` #### Returns[#](#returns-27) `"Free"` | `"VerticalStack"` | `"HorizontalStack"` | `"DepthStack"` The current layout of the scene. #### Signature[#](#signature-17) ``` getLayout(): "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack" ``` * * * ### setLayout()[#](#setlayout) Set the layout of the current scene. This will handle all necessary conversions including creating or destroying stack blocks and reparenting pages as needed. When transitioning from stack layouts (VerticalStack, HorizontalStack, DepthStack) to Free layout, the global positions of pages are preserved to maintain their visual appearance in the scene. ``` engine.scene.setLayout('VerticalStack'); ``` #### Parameters[#](#parameters-19) | Parameter | Type | Description | | --- | --- | --- | | `layout` | `"Free"` | `"VerticalStack"` | #### Returns[#](#returns-28) `void` #### Signature[#](#signature-18) ``` setLayout(layout: "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack"): void ``` ## Template Operations[#](#template-operations) Apply templates to existing scenes. ### applyTemplateFromString()[#](#applytemplatefromstring) Applies the contents of the given template scene to the currently loaded scene. This loads the template scene while keeping the design unit and page dimensions of the current scene. The content of the pages is automatically adjusted to fit the new dimensions. ``` engine.scene.applyTemplateFromString("UBQ1ewoiZm9ybWF0Ij..."); ``` #### Parameters[#](#parameters-20) | Parameter | Type | Description | | --- | --- | --- | | `content` | `string` | The template scene file contents, a base64 string. | #### Returns[#](#returns-29) `Promise`<`void`\> A Promise that resolves once the template was applied or rejects if there was an error. #### Signature[#](#signature-19) ``` applyTemplateFromString(content: string): Promise ``` * * * ### applyTemplateFromURL()[#](#applytemplatefromurl) Applies the contents of the given template scene to the currently loaded scene. This loads the template scene while keeping the design unit and page dimensions of the current scene. The content of the pages is automatically adjusted to fit the new dimensions. ``` engine.scene.applyTemplateFromURL('https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'); ``` #### Parameters[#](#parameters-21) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The url to the template scene file. | #### Returns[#](#returns-30) `Promise`<`void`\> A Promise that resolves once the template was applied or rejects if there was an error. #### Signature[#](#signature-20) ``` applyTemplateFromURL(url: string): Promise ``` ## Camera & Zoom[#](#camera--zoom) Control camera position, zoom levels, and auto-fit behavior. ### setZoomLevel()[#](#setzoomlevel) Set the zoom level of the scene, e.g., for headless versions. This only shows an effect if the zoom level is not handled/overwritten by the UI. Setting a zoom level of 2.0f results in one dot in the design to be two pixels on the screen. ``` // Zoom to 100%engine.scene.setZoomLevel(1.0); // Zoom to 50%engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel()); ``` #### Parameters[#](#parameters-22) | Parameter | Type | Description | | --- | --- | --- | | `zoomLevel?` | `number` | The new zoom level. | #### Returns[#](#returns-31) `void` #### Signature[#](#signature-21) ``` setZoomLevel(zoomLevel?: number): void ``` * * * ### getZoomLevel()[#](#getzoomlevel) Get the zoom level of the scene or for a camera in the scene in unit `dpx/dot`. A zoom level of 2.0 results in one pixel in the design to be two pixels on the screen. ``` const zoomLevel = engine.scene.getZoomLevel(); ``` #### Returns[#](#returns-32) `number` The zoom level of the block’s camera. #### Signature[#](#signature-22) ``` getZoomLevel(): number ``` * * * ### zoomToBlock()[#](#zoomtoblock) Sets the zoom and focus to show a block, optionally with animation. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. ##### Parameters[#](#parameters-23) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should be focused on. | | `options?` | [`ZoomOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/zoomoptions/) | Configuration for padding and animation. | ##### Returns[#](#returns-33) `Promise`<`void`\> A promise that resolves once the zoom was set or rejects with an error otherwise. #### Call Signature[#](#call-signature) ``` zoomToBlock( id, paddingLeft?, paddingTop?, paddingRight?,paddingBottom?): Promise; ``` Sets the zoom and focus to show a block. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. ``` // Bring entire scene in view with padding of 20px in all directionsengine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0); ``` ##### Parameters[#](#parameters-24) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should be focused on. | | `paddingLeft?` | `number` | Optional padding in screen pixels to the left of the block. | | `paddingTop?` | `number` | Optional padding in screen pixels to the top of the block. | | `paddingRight?` | `number` | Optional padding in screen pixels to the right of the block. | | `paddingBottom?` | `number` | Optional padding in screen pixels to the bottom of the block. | ##### Returns[#](#returns-34) `Promise`<`void`\> A promise that resolves once the zoom was set or rejects with an error otherwise. ##### Deprecated[#](#deprecated) Use zoomToBlock with options object instead #### Signatures[#](#signatures) ``` zoomToBlock(id: number, options?: ZoomOptions): Promise ``` ``` zoomToBlock(id: number, paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): Promise ``` * * * ### enableZoomAutoFit()[#](#enablezoomautofit) Continually adjusts the zoom level to fit the width or height of a block’s axis-aligned bounding box. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. No more than one block per scene can have zoom auto-fit enabled. Calling `setZoomLevel` or `zoomToBlock` disables the continuous adjustment. ``` // Follow page with padding of 20px horizontally before and after the blockengine.scene.enableZoomAutoFit(page, 'Horizontal', 20, 20) ``` ##### Parameters[#](#parameters-25) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block for which the zoom is adjusted. | | `axis` | `"Horizontal"` | `"Vertical"` | | `paddingBefore?` | `number` | Optional padding in screen pixels before the block. | | `paddingAfter?` | `number` | Optional padding in screen pixels after the block. | ##### Returns[#](#returns-35) `void` #### Call Signature[#](#call-signature-1) ``` enableZoomAutoFit( id, axis, paddingLeft?, paddingTop?, paddingRight?, paddingBottom?): void; ``` Continually adjusts the zoom level to fit the width or height of a block’s axis-aligned bounding box. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. Calling `setZoomLevel` or `zoomToBlock` disables the continuous adjustment. ``` // Follow page with padding of 20px in both directionsengine.scene.enableZoomAutoFit(page, 'Both', 20.0, 20.0, 20.0, 20.0); ``` ##### Parameters[#](#parameters-26) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block for which the zoom is adjusted. | | `axis` | `"Both"` | The block axis for which the zoom is adjusted. | | `paddingLeft?` | `number` | Optional padding in screen pixels to the left of the block. | | `paddingTop?` | `number` | Optional padding in screen pixels to the top of the block. | | `paddingRight?` | `number` | Optional padding in screen pixels to the right of the block. | | `paddingBottom?` | `number` | Optional padding in screen pixels to the bottom of the block. | ##### Returns[#](#returns-36) `void` #### Signatures[#](#signatures-1) ``` enableZoomAutoFit(id: number, axis: "Horizontal" | "Vertical", paddingBefore?: number, paddingAfter?: number): void ``` ``` enableZoomAutoFit(id: number, axis: "Both", paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): void ``` * * * ### disableZoomAutoFit()[#](#disablezoomautofit) Disables any previously set zoom auto-fit. ``` engine.scene.disableZoomAutoFit(scene); ``` #### Parameters[#](#parameters-27) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene` | `number` | The scene or a block in the scene for which to disable zoom auto-fit. | #### Returns[#](#returns-37) `void` #### Signature[#](#signature-23) ``` disableZoomAutoFit(blockOrScene: number): void ``` * * * ### isZoomAutoFitEnabled()[#](#iszoomautofitenabled) Queries whether zoom auto-fit is enabled for the given block. ``` engine.scene.isZoomAutoFitEnabled(scene); ``` #### Parameters[#](#parameters-28) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene` | `number` | The scene or a block in the scene for which to query the zoom auto-fit. | #### Returns[#](#returns-38) `boolean` True if the given block has auto-fit set or the scene contains a block for which auto-fit is set, false otherwise. #### Signature[#](#signature-24) ``` isZoomAutoFitEnabled(blockOrScene: number): boolean ``` ## Other[#](#other) ### setPlaying()[#](#setplaying) Starts or stops playback of the current scene. Only works in Video mode, not in Design mode. #### Parameters[#](#parameters-29) | Parameter | Type | Description | | --- | --- | --- | | `play` | `boolean` | True to start playback, false to stop | #### Returns[#](#returns-39) `void` #### Throws[#](#throws) Error if no page is available for playback #### Signature[#](#signature-25) ``` setPlaying(play: boolean): void ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/classes/eventapi) # Class: EventAPI Subscribe to block lifecycle events in the design engine. The EventAPI enables real-time monitoring of block changes through event subscriptions. Events are bundled and delivered efficiently at the end of each engine update cycle. ## Constructors[#](#constructors) ### Constructor[#](#constructor) `EventAPI` ## Event Subscriptions[#](#event-subscriptions) Subscribe to block lifecycle events with filtering and callback management. ### subscribe()[#](#subscribe) Subscribe to block lifecycle events. Events are bundled and delivered at the end of each engine update cycle for efficient processing. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `blocks` | `number`\[\] | List of blocks to filter events by. If empty, events for all blocks are sent. | | `callback` | (`events`) => `void` | Function called with bundled events. | #### Returns[#](#returns) A method to unsubscribe from the events. ``` (): void; ``` ##### Returns[#](#returns-1) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/classes/creativeengine) # 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. ## Constructors[#](#constructors) ### Constructor[#](#constructor) `CreativeEngine` ## Engine Management[#](#engine-management) Methods for initializing, configuring, and managing the engine lifecycle. ### version[#](#version) The version of the CE.SDK package. * * * ### version[#](#version-1) The SDK version * * * ### addPlugin()[#](#addplugin) Add and initialize a plugin to the engine. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `plugin` | [`EnginePlugin`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/engineplugin/) | The plugin to add and initialize. | #### Returns[#](#returns) `Promise`<`void`\> #### Signature[#](#signature) ``` addPlugin(plugin: EnginePlugin): Promise ``` * * * ### setWheelEventTarget()[#](#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[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `target` | `HTMLElement` | The HTML element to attach the wheel event handler to. | #### Returns[#](#returns-1) A function that removes the event handler from the target and adds it back to the canvas. ``` (): void; ``` ##### Returns[#](#returns-2) `void` #### Signature[#](#signature-1) ``` setWheelEventTarget(target: HTMLElement): () => void ``` * * * ### element[#](#element) Access the canvas element used by the CreativeEngine. ##### Returns[#](#returns-3) [`HTMLCreativeEngineCanvasElement`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/htmlcreativeenginecanvaselement/) * * * ### dispose()[#](#dispose) Dispose the engine and clean up all resources. #### Returns[#](#returns-4) `void` #### Signature[#](#signature-2) ``` dispose(): void ``` * * * ### init()[#](#init) Initialize a CreativeEngine with an optional configuration. #### Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `C` _extends_ `Partial`<[`Configuration`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/configuration/)\> | #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `config?` | `C` | Optional configuration object for engine initialization. | #### Returns[#](#returns-5) `Promise`<`CreativeEngine` & `C` _extends_ `object` ? `object` : `object`\> A promise that resolves to an engine instance. #### Signature[#](#signature-3) ``` init(config?: C): Promise ``` * * * ### getBaseURL()[#](#getbaseurl) Returns the configured base URL for the engine’s assets. #### Returns[#](#returns-6) `string` The absolute base URL configured for this engine instance. #### Example[#](#example) ``` const engine = await CreativeEngine.init({ baseURL: 'https://my-cdn.example.com/assets/'}); console.log(engine.getBaseURL()); // 'https://my-cdn.example.com/assets/' ``` #### Signature[#](#signature-4) ``` getBaseURL(): string ``` ## Core APIs[#](#core-apis) ### asset[#](#asset) Manage and interact with assets in the engine. * * * ### block[#](#block) Create, find, delete and modify with blocks in the engine. * * * ### editor[#](#editor) Manage the editor state, including edit modes and undo/redo operations. * * * ### event[#](#event) Subscribe to events in the engine. * * * ### scene[#](#scene) Manage scenes, including creating, modifying, and deleting scenes. * * * ### variable[#](#variable) Manage variables in the engine, allowing for dynamic data handling and manipulation. ## Asset Sources[#](#asset-sources) Methods for adding default and demo asset sources to the engine. ### addDefaultAssetSources()[#](#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 at `\{\{base_url\}\}//content.json`, where `base_url` defaults to the IMG.LY CDN. 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[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `baseURL?`: `string`; `excludeAssetSourceIds?`: [`DefaultAssetSourceId`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/defaultassetsourceid/)\[\]; } | Configuration options for loading default asset sources. | | `options.baseURL?` | `string` | The source of the asset definitions, must be absolute. Defaults to IMG.LY CDN. | | `options.excludeAssetSourceIds?` | [`DefaultAssetSourceId`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/defaultassetsourceid/)\[\] | A list of IDs, that will be ignored during load. | #### Returns[#](#returns-7) `Promise`<`void`\> A promise that resolves when all asset sources are loaded. #### Signature[#](#signature-5) ``` addDefaultAssetSources(options?: object): Promise ``` * * * ### addDemoAssetSources()[#](#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[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `baseURL?`: `string`; `excludeAssetSourceIds?`: [`DemoAssetSourceId`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/demoassetsourceid/)\[\]; `sceneMode?`: `"Design"` | `"Video"`; `withUploadAssetSources?`: `boolean`; } | | `options.baseURL?` | `string` | The source of the demo asset definitions, must be absolute. Defaults to IMG.LY CDN. | | `options.excludeAssetSourceIds?` | [`DemoAssetSourceId`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/demoassetsourceid/)\[\] | A list of IDs, that will be ignored during load | | `options.sceneMode?` | `"Design"` | `"Video"` | | `options.withUploadAssetSources?` | `boolean` | If ‘true’ asset sources for uploads are added (default false) | #### Returns[#](#returns-8) `Promise`<`void`\> A promise that resolves when all demo asset sources are loaded. #### Signature[#](#signature-6) ``` addDemoAssetSources(options?: object): Promise ``` ## Experimental Features[#](#experimental-features) Experimental APIs that may change or be removed in future versions. ### unstable\_setVideoExportInactivityTimeout()[#](#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[#](#parameters-5) | 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[#](#returns-9) `void` * * * ### unstable\_setExportInactivityTimeout()[#](#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[#](#parameters-6) | 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[#](#returns-10) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/classes/editorapi) # Class: EditorAPI Control the design editor’s behavior and settings. The EditorAPI provides access to edit modes, history management, editor settings, color management, resource handling, and global scope controls. It serves as the central configuration and control interface for the design editor engine. ## Constructors[#](#constructors) ### Constructor[#](#constructor) `EditorAPI` ## Role & Scope Management[#](#role--scope-management) Manage user roles and global scope permissions. ### setRole()[#](#setrole) Set the user role and apply role-dependent defaults. Automatically configures scopes and settings based on the specified role. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `role` | [`RoleString`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rolestring/) | The role to assign to the user. | #### Returns[#](#returns) `void` #### Signature[#](#signature) ``` setRole(role: RoleString): void ``` * * * ### getRole()[#](#getrole) Get the current user role. #### Returns[#](#returns-1) [`RoleString`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rolestring/) The current role of the user. #### Signature[#](#signature-1) ``` getRole(): RoleString ``` * * * ### findAllScopes()[#](#findallscopes) Get all available global scope names. #### Returns[#](#returns-2) [`Scope`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/)\[\] The names of all available global scopes. #### Signature[#](#signature-2) ``` findAllScopes(): Scope[] ``` * * * ### setGlobalScope()[#](#setglobalscope) Set a global scope permission level. #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/) | The scope to configure. | | `value` | `"Allow"` | `"Deny"` | #### Returns[#](#returns-3) `void` #### Signature[#](#signature-3) ``` setGlobalScope(key: Scope, value: "Allow" | "Deny" | "Defer"): void ``` * * * ### getGlobalScope()[#](#getglobalscope) Get a global scope’s permission level. #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/) | The scope to query. | #### Returns[#](#returns-4) `"Allow"` | `"Deny"` | `"Defer"` `Allow`, `Deny`, or `Defer` indicating the scope’s permission level. #### Signature[#](#signature-4) ``` getGlobalScope(key: Scope): "Allow" | "Deny" | "Defer" ``` ## Event Subscriptions[#](#event-subscriptions) Subscribe to editor state changes, history updates, and role changes. ### onStateChanged()[#](#onstatechanged) Subscribe to editor state changes. #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | Function called when the editor state changes. | #### Returns[#](#returns-5) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-6) `void` * * * ### onHistoryUpdated()[#](#onhistoryupdated) Subscribe to undo/redo history changes. ``` const unsubscribe = engine.editor.onHistoryUpdated(() => { const canUndo = engine.editor.canUndo(); const canRedo = engine.editor.canRedo(); console.log("History updated", {canUndo, canRedo});}) ``` #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | Function called when the undo/redo history changes. | #### Returns[#](#returns-7) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-8) `void` * * * ### onSettingsChanged()[#](#onsettingschanged) Subscribe to editor settings changes. #### Parameters[#](#parameters-5) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | Function called when editor settings change. | #### Returns[#](#returns-9) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-10) `void` * * * ### onRoleChanged()[#](#onrolechanged) Subscribe to editor role changes. Allows reacting to role changes and updating engine settings accordingly. The callback is triggered immediately after role changes and default settings are applied. #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`role`) => `void` | Function called when the user role changes. | #### Returns[#](#returns-11) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-12) `void` ## Edit Mode Management[#](#edit-mode-management) Control the editor’s current editing mode and interaction state. ### setEditMode()[#](#seteditmode) Set the editor’s current edit mode. Edit modes represent different tools or interaction states within the editor. Common ones, are “Crop” while the crop tool is shown or “Text” when inline-editing text. ``` engine.editor.setEditMode('Crop');// With a base modeengine.editor.setEditMode('CustomMode', 'Crop'); ``` #### Parameters[#](#parameters-7) | Parameter | Type | Description | | --- | --- | --- | | `mode` | [`EditMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/editmode/) | ”Transform”, “Crop”, “Text”, “Playback”, “Trim” or a custom value. | | `baseMode?` | `string` | Optional base mode from which the custom mode will inherit the settings. | #### Returns[#](#returns-13) `void` #### Signature[#](#signature-5) ``` setEditMode(mode: EditMode, baseMode?: string): void ``` * * * ### getEditMode()[#](#geteditmode) Get the editor’s current edit mode. Edit modes represent different tools or interaction states within the editor. Common ones, are “Crop” while the crop tool is shown or “Text” when inline-editing text. #### Returns[#](#returns-14) [`EditMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/editmode/) “Transform”, “Crop”, “Text”, “Playback”, “Trim” or a custom value. #### Signature[#](#signature-6) ``` getEditMode(): EditMode ``` * * * ### getCursorType()[#](#getcursortype) Get the cursor type that should be displayed. #### Returns[#](#returns-15) `"Text"` | `"Arrow"` | `"Move"` | `"MoveNotPermitted"` | `"Resize"` | `"Rotate"` The cursor type. #### Signature[#](#signature-7) ``` getCursorType(): "Text" | "Arrow" | "Move" | "MoveNotPermitted" | "Resize" | "Rotate" ``` * * * ### getCursorRotation()[#](#getcursorrotation) Get the cursor rotation angle. #### Returns[#](#returns-16) `number` The angle in radians. #### Signature[#](#signature-8) ``` getCursorRotation(): number ``` * * * ### getTextCursorPositionInScreenSpaceX()[#](#gettextcursorpositioninscreenspacex) Get the text cursor’s x position in screen space. #### Returns[#](#returns-17) `number` The text cursor’s x position in screen space. #### Signature[#](#signature-9) ``` getTextCursorPositionInScreenSpaceX(): number ``` * * * ### getTextCursorPositionInScreenSpaceY()[#](#gettextcursorpositioninscreenspacey) Get the text cursor’s y position in screen space. #### Returns[#](#returns-18) `number` The text cursor’s y position in screen space. #### Signature[#](#signature-10) ``` getTextCursorPositionInScreenSpaceY(): number ``` ## History Management[#](#history-management) Create, manage, and operate on undo/redo history stacks. ### createHistory()[#](#createhistory) Create a new undo/redo history stack. Multiple histories can exist, but only one can be active at a time. ``` const newHistory = engine.editor.createHistory(); ``` #### Returns[#](#returns-19) `number` The handle of the created history. #### Signature[#](#signature-11) ``` createHistory(): number ``` * * * ### destroyHistory()[#](#destroyhistory) Destroy a history stack and free its resources. ``` engine.editor.destroyHistory(oldHistory); ``` #### Parameters[#](#parameters-8) | Parameter | Type | Description | | --- | --- | --- | | `history` | `number` | The history handle to destroy. | #### Returns[#](#returns-20) `void` #### Throws[#](#throws) Error if the handle doesn’t refer to a valid history. #### Signature[#](#signature-12) ``` destroyHistory(history: number): void ``` * * * ### setActiveHistory()[#](#setactivehistory) Set a history as the active undo/redo stack. All other histories lose their active state. Undo/redo operations only apply to the active history. ``` engine.editor.setActiveHistory(newHistory); ``` #### Parameters[#](#parameters-9) | Parameter | Type | Description | | --- | --- | --- | | `history` | `number` | The history handle to make active. | #### Returns[#](#returns-21) `void` #### Throws[#](#throws-1) Error if the handle doesn’t refer to a valid history. #### Signature[#](#signature-13) ``` setActiveHistory(history: number): void ``` * * * ### getActiveHistory()[#](#getactivehistory) Get the currently active history handle. Creates a new history if none exists. ``` const oldHistory = engine.editor.getActiveHistory(); ``` #### Returns[#](#returns-22) `number` The handle of the active history. #### Signature[#](#signature-14) ``` getActiveHistory(): number ``` * * * ### addUndoStep()[#](#addundostep) Add a new history state to the undo stack. Only adds a state if undoable changes were made since the last undo step. ``` engine.editor.addUndoStep(); ``` #### Returns[#](#returns-23) `void` #### Signature[#](#signature-15) ``` addUndoStep(): void ``` * * * ### removeUndoStep()[#](#removeundostep) Remove the last history state from the undo stack. Removes the most recent undo step if available. ``` engine.editor.removeUndoStep(); ``` #### Returns[#](#returns-24) `void` #### Signature[#](#signature-16) ``` removeUndoStep(): void ``` * * * ### undo()[#](#undo) Undo one step in the active history if an undo step is available. ``` engine.editor.undo(); ``` #### Returns[#](#returns-25) `void` #### Signature[#](#signature-17) ``` undo(): void ``` * * * ### redo()[#](#redo) Redo one step in the active history if a redo step is available. ``` engine.editor.redo(); ``` #### Returns[#](#returns-26) `void` #### Signature[#](#signature-18) ``` redo(): void ``` * * * ### canUndo()[#](#canundo) Check if an undo step is available. ``` if (engine.editor.canUndo()) { engine.editor.undo();} ``` #### Returns[#](#returns-27) `boolean` True if an undo step is available. #### Signature[#](#signature-19) ``` canUndo(): boolean ``` * * * ### canRedo()[#](#canredo) Check if a redo step is available. ``` if (engine.editor.canRedo()) { engine.editor.redo();} ``` #### Returns[#](#returns-28) `boolean` True if a redo step is available. #### Signature[#](#signature-20) ``` canRedo(): boolean ``` ## Color Management[#](#color-management) Handle spot colors, color conversion, and color space operations. ### findAllSpotColors()[#](#findallspotcolors) Get all spot color names currently defined. #### Returns[#](#returns-29) `string`\[\] The names of all defined spot colors. #### Signature[#](#signature-21) ``` findAllSpotColors(): string[] ``` * * * ### getSpotColorRGBA()[#](#getspotcolorrgba) Queries the RGB representation set for a spot color. If the value of the queried spot color has not been set yet, returns the default RGB representation (of magenta). The alpha value is always 1.0. #### Parameters[#](#parameters-10) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name of a spot color. | #### Returns[#](#returns-30) [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) A result holding a float array of the four color components. #### Signature[#](#signature-22) ``` getSpotColorRGBA(name: string): RGBA ``` * * * ### getSpotColorCMYK()[#](#getspotcolorcmyk) Queries the CMYK representation set for a spot color. If the value of the queried spot color has not been set yet, returns the default CMYK representation (of magenta). #### Parameters[#](#parameters-11) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name of a spot color. | #### Returns[#](#returns-31) [`CMYK`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cmyk/) A result holding a float array of the four color components. #### Signature[#](#signature-23) ``` getSpotColorCMYK(name: string): CMYK ``` * * * ### setSpotColorRGB()[#](#setspotcolorrgb) Sets the RGB representation of a spot color. Use this function to both create a new spot color or update an existing spot color. #### Parameters[#](#parameters-12) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name of a spot color. | | `r` | `number` | The red color component in the range of 0 to 1. | | `g` | `number` | The green color component in the range of 0 to 1. | | `b` | `number` | The blue color component in the range of 0 to 1. | #### Returns[#](#returns-32) `void` #### Signature[#](#signature-24) ``` setSpotColorRGB(name: string, r: number, g: number, b: number): void ``` * * * ### setSpotColorCMYK()[#](#setspotcolorcmyk) Sets the CMYK representation of a spot color. Use this function to both create a new spot color or update an existing spot color. #### Parameters[#](#parameters-13) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name of a spot color. | | `c` | `number` | The cyan color component in the range of 0 to 1. | | `m` | `number` | The magenta color component in the range of 0 to 1. | | `y` | `number` | The yellow color component in the range of 0 to 1. | | `k` | `number` | The key color component in the range of 0 to 1. | #### Returns[#](#returns-33) `void` #### Signature[#](#signature-25) ``` setSpotColorCMYK(name: string, c: number, m: number, y: number, k: number): void ``` * * * ### removeSpotColor()[#](#removespotcolor) Removes a spot color from the list of set spot colors. #### Parameters[#](#parameters-14) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name of a spot color. | #### Returns[#](#returns-34) `void` An empty result on success, an error otherwise. #### Signature[#](#signature-26) ``` removeSpotColor(name: string): void ``` * * * ### setSpotColorForCutoutType()[#](#setspotcolorforcutouttype) Set the spot color assign to a cutout type. All cutout blocks of the given type will be immediately assigned that spot color. #### Parameters[#](#parameters-15) | Parameter | Type | Description | | --- | --- | --- | | `type` | `"Dashed"` | `"Solid"` | | `color` | `string` | The spot color name to assign. | #### Returns[#](#returns-35) `void` #### Signature[#](#signature-27) ``` setSpotColorForCutoutType(type: "Dashed" | "Solid", color: string): void ``` * * * ### getSpotColorForCutoutType()[#](#getspotcolorforcutouttype) Get the name of the spot color assigned to a cutout type. #### Parameters[#](#parameters-16) | Parameter | Type | Description | | --- | --- | --- | | `type` | `"Dashed"` | `"Solid"` | #### Returns[#](#returns-36) `string` The color spot name. #### Signature[#](#signature-28) ``` getSpotColorForCutoutType(type: "Dashed" | "Solid"): string ``` * * * ### convertColorToColorSpace()[#](#convertcolortocolorspace) Converts a color to the given color space. ##### Parameters[#](#parameters-17) | Parameter | Type | Description | | --- | --- | --- | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color to convert. | | `colorSpace` | `"sRGB"` | The color space to convert to. | ##### Returns[#](#returns-37) [`RGBAColor`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/rgbacolor/) The converted color. #### Call Signature[#](#call-signature) ``` convertColorToColorSpace(color, colorSpace): CMYKColor; ``` ##### Parameters[#](#parameters-18) | Parameter | Type | | --- | --- | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | | `colorSpace` | `"CMYK"` | ##### Returns[#](#returns-38) [`CMYKColor`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cmykcolor/) #### Call Signature[#](#call-signature-1) ``` convertColorToColorSpace(color, colorSpace): never; ``` ##### Parameters[#](#parameters-19) | Parameter | Type | | --- | --- | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | | `colorSpace` | [`ColorSpace`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/colorspace/) | ##### Returns[#](#returns-39) `never` #### Signatures[#](#signatures) ``` convertColorToColorSpace(color: Color, colorSpace: "sRGB"): RGBAColor ``` ``` convertColorToColorSpace(color: Color, colorSpace: "CMYK"): CMYKColor ``` ``` convertColorToColorSpace(color: Color, colorSpace: ColorSpace): never ``` ## Resource Management[#](#resource-management) Manage buffers, URIs, and resource data handling. ### createBuffer()[#](#createbuffer) Create a resizable buffer for arbitrary data. ``` const buffer = engine.editor.createBuffer(); // Reference the buffer resource from the audio blockengine.block.setString(audioBlock, 'audio/fileURI', buffer); ``` #### Returns[#](#returns-40) `string` A URI to identify the created buffer. #### Signature[#](#signature-29) ``` createBuffer(): string ``` * * * ### destroyBuffer()[#](#destroybuffer) Destroy a buffer and free its resources. ``` engine.editor.destroyBuffer(buffer); ``` #### Parameters[#](#parameters-20) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the buffer to destroy. | #### Returns[#](#returns-41) `void` #### Signature[#](#signature-30) ``` destroyBuffer(uri: string): void ``` * * * ### setBufferData()[#](#setbufferdata) Set the data of a buffer at a given offset. ``` // Generate 10 seconds of stereo 48 kHz audio dataconst samples = new Float32Array(10 * 2 * 48000);for (let i = 0; i < samples.length; i += 2) { samples[i] = samples[i + 1] = Math.sin((440 * i * Math.PI) / 48000);}// Assign the audio data to the bufferengine.editor.setBufferData(buffer, 0, new Uint8Array(samples.buffer)); ``` #### Parameters[#](#parameters-21) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the buffer to update. | | `offset` | `number` | The offset in bytes at which to start writing. | | `data` | `Uint8Array` | The data to write. | #### Returns[#](#returns-42) `void` #### Signature[#](#signature-31) ``` setBufferData(uri: string, offset: number, data: Uint8Array): void ``` * * * ### getBufferData()[#](#getbufferdata) Get the data of a buffer at a given offset. ``` engine.editor.findAllTransientResources().forEach((resource) => { const bufferURI = resource.URL; const length = engine.editor.getBufferLength(buffer); const data = engine.editor.getBufferData(buffer, 0, length); const blob = new Blob([data]);}) ``` #### Parameters[#](#parameters-22) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the buffer to query. | | `offset` | `number` | The offset in bytes at which to start reading. | | `length` | `number` | The number of bytes to read. | #### Returns[#](#returns-43) `Uint8Array` The data at the given offset. #### Signature[#](#signature-32) ``` getBufferData(uri: string, offset: number, length: number): Uint8Array ``` * * * ### setBufferLength()[#](#setbufferlength) Set the length of a buffer. ``` // Reduce the buffer to half its lengthconst currentLength = engine.editor.getBufferLength(buffer);engine.editor.setBufferLength(buffer, currentLength / 2); ``` #### Parameters[#](#parameters-23) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the buffer to update. | | `length` | `number` | The new length of the buffer in bytes. | #### Returns[#](#returns-44) `void` #### Signature[#](#signature-33) ``` setBufferLength(uri: string, length: number): void ``` * * * ### getBufferLength()[#](#getbufferlength) Get the length of a buffer. ``` const length = engine.editor.getBufferLength(buffer); ``` #### Parameters[#](#parameters-24) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the buffer to query. | #### Returns[#](#returns-45) `number` The length of the buffer in bytes. #### Signature[#](#signature-34) ``` getBufferLength(uri: string): number ``` * * * ### getMimeType()[#](#getmimetype) Get the MIME type of a resource. Downloads the resource if not already cached. #### Parameters[#](#parameters-25) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the resource. | #### Returns[#](#returns-46) `Promise`<`string`\> Promise resolving to the resource’s MIME type. #### Throws[#](#throws-2) Error if the resource cannot be downloaded or MIME type determined. #### Signature[#](#signature-35) ``` getMimeType(uri: string): Promise ``` * * * ### findAllTransientResources()[#](#findalltransientresources) Get all transient resources that would be lost during export. Useful for identifying resources that need relocation (e.g., to a CDN) before export, as these resources are not included in the exported scene. #### Returns[#](#returns-47) [`TransientResource`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/transientresource/)\[\] The URLs and sizes of transient resources. #### Signature[#](#signature-36) ``` findAllTransientResources(): TransientResource[] ``` * * * ### findAllMediaURIs()[#](#findallmediauris) Get all media URIs referenced by blocks in the scene. Returns URIs from image fills, video fills, and audio blocks, including their source sets. Only returns valid media URIs (http://, https://, file://), excluding transient resources like buffer URIs. Useful for determining which media files are referenced by a scene (e.g., for cleanup operations, CDN management, or file system tracking). #### Returns[#](#returns-48) `string`\[\] The URLs of all media resources referenced in the scene, deduplicated. #### Signature[#](#signature-37) ``` findAllMediaURIs(): string[] ``` * * * ### getResourceData()[#](#getresourcedata) Provides the data of a resource at the given URL. #### Parameters[#](#parameters-26) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URL of the resource. | | `chunkSize` | `number` | The size of the chunks in which the resource data is provided. | | `onData` | (`result`) => `boolean` | The callback function that is called with the resource data or an error if an error occurred. The callback will be called as long as there is data left to provide and the callback returns `true`. | #### Returns[#](#returns-49) `void` #### Signature[#](#signature-38) ``` getResourceData(uri: string, chunkSize: number, onData: (result: Uint8Array) => boolean): void ``` * * * ### relocateResource()[#](#relocateresource) Changes the URL associated with a resource. This function can be used change the URL of a resource that has been relocated (e.g., to a CDN). #### Parameters[#](#parameters-27) | Parameter | Type | Description | | --- | --- | --- | | `currentUrl` | `string` | The current URL of the resource. | | `relocatedUrl` | `string` | The new URL of the resource. | #### Returns[#](#returns-50) `void` #### Signature[#](#signature-39) ``` relocateResource(currentUrl: string, relocatedUrl: string): void ``` ## Editor Settings[#](#editor-settings) Configure editor behavior through typed settings for different data types. ### setSetting()[#](#setsetting) Set a setting value using the unified API. The value type is automatically validated based on the key. #### Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `K` _extends_ keyof [`Settings`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/settings/) | #### Parameters[#](#parameters-28) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`OptionalPrefix`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/optionalprefix/)<`K`\> | The setting key from Settings | | `value` | [`SettingValueType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingvaluetype/)<`K`\> | The value to set (type-safe based on key) | #### Returns[#](#returns-51) `void` #### Throws[#](#throws-3) Error if the keypath is invalid or value type doesn’t match #### Example[#](#example) ``` // Boolean settingengine.editor.setSetting('doubleClickToCropEnabled', false); // Color settingengine.editor.setSetting('highlightColor', { r: 1, g: 0, b: 1, a: 1 }); // Enum settingengine.editor.setSetting('doubleClickSelectionMode', 'Direct'); ``` #### Signature[#](#signature-40) ``` setSetting(keypath: OptionalPrefix, value: SettingValueType): void ``` * * * ### getSetting()[#](#getsetting) Get a setting value using the unified API. The return type is automatically inferred from the key. #### Type Parameters[#](#type-parameters-1) | Type Parameter | | --- | | `K` _extends_ keyof [`Settings`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/settings/) | #### Parameters[#](#parameters-29) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`OptionalPrefix`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/optionalprefix/)<`K`\> | The setting key from Settings | #### Returns[#](#returns-52) [`SettingValueType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingvaluetype/)<`K`\> The value of the setting (type-safe based on key) #### Throws[#](#throws-4) Error if the keypath is invalid #### Example[#](#example-1) ``` // Boolean settingconst cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled'); // Color settingconst highlight = engine.editor.getSetting('highlightColor'); // Enum settingconst selectionMode = engine.editor.getSetting('doubleClickSelectionMode'); ``` #### Signature[#](#signature-41) ``` getSetting(keypath: OptionalPrefix): SettingValueType ``` * * * ### setSettingBool()[#](#setsettingbool) Set a boolean setting value. ##### Parameters[#](#parameters-30) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingBoolPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingboolpropertyname/) | The settings keypath, e.g. `doubleClickToCropEnabled`. | | `value` | `boolean` | The boolean value to set. | ##### Returns[#](#returns-53) `void` ##### Throws[#](#throws-5) Error if the keypath is invalid. #### Call Signature[#](#call-signature-2) ``` setSettingBool(keypath, value): void; ``` ##### Parameters[#](#parameters-31) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | `boolean` | ##### Returns[#](#returns-54) `void` ##### Deprecated[#](#deprecated) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Signatures[#](#signatures-1) ``` setSettingBool(keypath: SettingBoolPropertyName, value: boolean): void ``` ``` setSettingBool(keypath: `ubq://${string & {}}`, value: boolean): void ``` * * * ### getSettingBool()[#](#getsettingbool) Get a boolean setting value. ##### Parameters[#](#parameters-32) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingBoolPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingboolpropertyname/) | The settings keypath, e.g. `doubleClickToCropEnabled`. | ##### Returns[#](#returns-55) `boolean` The boolean value of the setting. ##### Throws[#](#throws-6) Error if the keypath is invalid. #### Call Signature[#](#call-signature-3) ``` getSettingBool(keypath): boolean; ``` ##### Parameters[#](#parameters-33) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns[#](#returns-56) `boolean` ##### Deprecated[#](#deprecated-1) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-4) ``` getSettingBool(keypath): boolean; ``` Get a boolean setting value. ##### Parameters[#](#parameters-34) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingBoolPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingboolpropertyname/) | The settings keypath, e.g. `doubleClickToCropEnabled`. | ##### Returns[#](#returns-57) `boolean` The boolean value of the setting. ##### Throws[#](#throws-7) Error if the keypath is invalid. #### Signatures[#](#signatures-2) ``` getSettingBool(keypath: SettingBoolPropertyName): boolean ``` ``` getSettingBool(keypath: `ubq://${string & {}}`): boolean ``` ``` getSettingBool(keypath: SettingBoolPropertyName): boolean ``` * * * ### setSettingInt()[#](#setsettingint) Set an integer setting value. ##### Parameters[#](#parameters-35) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingIntPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingintpropertyname/) | The settings keypath. | | `value` | `number` | The integer value to set. | ##### Returns[#](#returns-58) `void` ##### Throws[#](#throws-8) Error if the keypath is invalid. #### Call Signature[#](#call-signature-5) ``` setSettingInt(keypath, value): void; ``` Set an integer setting value. ##### Parameters[#](#parameters-36) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingIntPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingintpropertyname/) | The settings keypath. | | `value` | `number` | The integer value to set. | ##### Returns[#](#returns-59) `void` ##### Throws[#](#throws-9) Error if the keypath is invalid. #### Signatures[#](#signatures-3) ``` setSettingInt(keypath: SettingIntPropertyName, value: number): void ``` ``` setSettingInt(keypath: SettingIntPropertyName, value: number): void ``` * * * ### getSettingInt()[#](#getsettingint) Get an integer setting value. ##### Parameters[#](#parameters-37) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingIntPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingintpropertyname/) | The settings keypath. | ##### Returns[#](#returns-60) `number` The integer value of the setting. ##### Throws[#](#throws-10) Error if the keypath is invalid. #### Call Signature[#](#call-signature-6) ``` getSettingInt(keypath): number; ``` Get an integer setting value. ##### Parameters[#](#parameters-38) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingIntPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingintpropertyname/) | The settings keypath. | ##### Returns[#](#returns-61) `number` The integer value of the setting. ##### Throws[#](#throws-11) Error if the keypath is invalid. #### Signatures[#](#signatures-4) ``` getSettingInt(keypath: SettingIntPropertyName): number ``` ``` getSettingInt(keypath: SettingIntPropertyName): number ``` * * * ### setSettingFloat()[#](#setsettingfloat) Set a float setting value. ##### Parameters[#](#parameters-39) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingFloatPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingfloatpropertyname/) | The settings keypath, e.g. `positionSnappingThreshold`. | | `value` | `number` | The float value to set. | ##### Returns[#](#returns-62) `void` ##### Throws[#](#throws-12) Error if the keypath is invalid. #### Call Signature[#](#call-signature-7) ``` setSettingFloat(keypath, value): void; ``` ##### Parameters[#](#parameters-40) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | `number` | ##### Returns[#](#returns-63) `void` ##### Deprecated[#](#deprecated-2) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-8) ``` setSettingFloat(keypath, value): void; ``` Set a float setting value. ##### Parameters[#](#parameters-41) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingFloatPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingfloatpropertyname/) | The settings keypath, e.g. `positionSnappingThreshold`. | | `value` | `number` | The float value to set. | ##### Returns[#](#returns-64) `void` ##### Throws[#](#throws-13) Error if the keypath is invalid. #### Signatures[#](#signatures-5) ``` setSettingFloat(keypath: SettingFloatPropertyName, value: number): void ``` ``` setSettingFloat(keypath: `ubq://${string & {}}`, value: number): void ``` ``` setSettingFloat(keypath: SettingFloatPropertyName, value: number): void ``` * * * ### getSettingFloat()[#](#getsettingfloat) Get a float setting value. ##### Parameters[#](#parameters-42) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingFloatPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingfloatpropertyname/) | The settings keypath, e.g. `positionSnappingThreshold`. | ##### Returns[#](#returns-65) `number` The float value of the setting. ##### Throws[#](#throws-14) Error if the keypath is invalid. #### Call Signature[#](#call-signature-9) ``` getSettingFloat(keypath): number; ``` ##### Parameters[#](#parameters-43) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns[#](#returns-66) `number` ##### Deprecated[#](#deprecated-3) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-10) ``` getSettingFloat(keypath): number; ``` Get a float setting value. ##### Parameters[#](#parameters-44) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingFloatPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingfloatpropertyname/) | The settings keypath, e.g. `positionSnappingThreshold`. | ##### Returns[#](#returns-67) `number` The float value of the setting. ##### Throws[#](#throws-15) Error if the keypath is invalid. #### Signatures[#](#signatures-6) ``` getSettingFloat(keypath: SettingFloatPropertyName): number ``` ``` getSettingFloat(keypath: `ubq://${string & {}}`): number ``` ``` getSettingFloat(keypath: SettingFloatPropertyName): number ``` * * * ### setSettingString()[#](#setsettingstring) Set a string setting value. ##### Parameters[#](#parameters-45) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingStringPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingstringpropertyname/) | The settings keypath, e.g. `license`. | | `value` | `string` | The string value to set. | ##### Returns[#](#returns-68) `void` ##### Throws[#](#throws-16) Error if the keypath is invalid. #### Call Signature[#](#call-signature-11) ``` setSettingString(keypath, value): void; ``` ##### Parameters[#](#parameters-46) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | `string` | ##### Returns[#](#returns-69) `void` ##### Deprecated[#](#deprecated-4) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-12) ``` setSettingString(keypath, value): void; ``` Set a string setting value. ##### Parameters[#](#parameters-47) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingStringPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingstringpropertyname/) | The settings keypath, e.g. `license`. | | `value` | `string` | The string value to set. | ##### Returns[#](#returns-70) `void` ##### Throws[#](#throws-17) Error if the keypath is invalid. #### Signatures[#](#signatures-7) ``` setSettingString(keypath: SettingStringPropertyName, value: string): void ``` ``` setSettingString(keypath: `ubq://${string & {}}`, value: string): void ``` ``` setSettingString(keypath: SettingStringPropertyName, value: string): void ``` * * * ### getSettingString()[#](#getsettingstring) Get a string setting value. ##### Parameters[#](#parameters-48) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingStringPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingstringpropertyname/) | The settings keypath, e.g. `license`. | ##### Returns[#](#returns-71) `string` The string value of the setting. ##### Throws[#](#throws-18) Error if the keypath is invalid. #### Call Signature[#](#call-signature-13) ``` getSettingString(keypath): string; ``` ##### Parameters[#](#parameters-49) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns[#](#returns-72) `string` ##### Deprecated[#](#deprecated-5) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-14) ``` getSettingString(keypath): string; ``` Get a string setting value. ##### Parameters[#](#parameters-50) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingStringPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingstringpropertyname/) | The settings keypath, e.g. `license`. | ##### Returns[#](#returns-73) `string` The string value of the setting. ##### Throws[#](#throws-19) Error if the keypath is invalid. #### Signatures[#](#signatures-8) ``` getSettingString(keypath: SettingStringPropertyName): string ``` ``` getSettingString(keypath: `ubq://${string & {}}`): string ``` ``` getSettingString(keypath: SettingStringPropertyName): string ``` * * * ### setSettingColor()[#](#setsettingcolor) Set a color setting. ##### Parameters[#](#parameters-51) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingColorPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname/) | The settings keypath, e.g. `highlightColor`. | | `value` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The The value to set. | ##### Returns[#](#returns-74) `void` #### Call Signature[#](#call-signature-15) ``` setSettingColor(keypath, value): void; ``` ##### Parameters[#](#parameters-52) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | ##### Returns[#](#returns-75) `void` ##### Deprecated[#](#deprecated-6) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-16) ``` setSettingColor(keypath, value): void; ``` Set a color setting. ##### Parameters[#](#parameters-53) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingColorPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname/) | The settings keypath, e.g. `highlightColor`. | | `value` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The The value to set. | ##### Returns[#](#returns-76) `void` #### Signatures[#](#signatures-9) ``` setSettingColor(keypath: SettingColorPropertyName, value: Color): void ``` ``` setSettingColor(keypath: `ubq://${string & {}}`, value: Color): void ``` ``` setSettingColor(keypath: SettingColorPropertyName, value: Color): void ``` * * * ### getSettingColor()[#](#getsettingcolor) Get a color setting. ##### Parameters[#](#parameters-54) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingColorPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname/) | The settings keypath, e.g. `highlightColor`. | ##### Returns[#](#returns-77) [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) ##### Throws[#](#throws-20) An error, if the keypath is invalid. #### Call Signature[#](#call-signature-17) ``` getSettingColor(keypath): Color; ``` ##### Parameters[#](#parameters-55) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns[#](#returns-78) [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) ##### Deprecated[#](#deprecated-7) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-18) ``` getSettingColor(keypath): Color; ``` Get a color setting. ##### Parameters[#](#parameters-56) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | [`SettingColorPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname/) | The settings keypath, e.g. `highlightColor`. | ##### Returns[#](#returns-79) [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) ##### Throws[#](#throws-21) An error, if the keypath is invalid. #### Signatures[#](#signatures-10) ``` getSettingColor(keypath: SettingColorPropertyName): Color ``` ``` getSettingColor(keypath: `ubq://${string & {}}`): Color ``` ``` getSettingColor(keypath: SettingColorPropertyName): Color ``` * * * ### setSettingEnum()[#](#setsettingenum) Set an enum setting. ##### Type Parameters[#](#type-parameters-2) | Type Parameter | | --- | | `T` _extends_ keyof [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/) | ##### Parameters[#](#parameters-57) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `T` | The settings keypath, e.g. `doubleClickSelectionMode`. | | `value` | [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/)\[`T`\] | The enum value as string. | ##### Returns[#](#returns-80) `void` #### Call Signature[#](#call-signature-19) ``` setSettingEnum(keypath, value): void; ``` Set an enum setting. ##### Parameters[#](#parameters-58) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | | `value` | `string` | The enum value as string. | ##### Returns[#](#returns-81) `void` #### Signatures[#](#signatures-11) ``` setSettingEnum(keypath: T, value: SettingEnumType[T]): void ``` ``` setSettingEnum(keypath: string, value: string): void ``` * * * ### getSettingEnum()[#](#getsettingenum) Get an enum setting. ##### Type Parameters[#](#type-parameters-3) | Type Parameter | | --- | | `T` _extends_ keyof [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/) | ##### Parameters[#](#parameters-59) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `T` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns[#](#returns-82) [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/)\[`T`\] The value as string. #### Call Signature[#](#call-signature-20) ``` getSettingEnum(keypath): string; ``` Get an enum setting. ##### Parameters[#](#parameters-60) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns[#](#returns-83) `string` The value as string. #### Signatures[#](#signatures-12) ``` getSettingEnum(keypath: T): SettingEnumType[T] ``` ``` getSettingEnum(keypath: string): string ``` * * * ### getSettingEnumOptions()[#](#getsettingenumoptions) Get the possible enum options for a given enum setting. ##### Type Parameters[#](#type-parameters-4) | Type Parameter | | --- | | `T` _extends_ keyof [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/) | ##### Parameters[#](#parameters-61) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `T` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns[#](#returns-84) [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/)\[`T`\]\[\] The possible enum options as strings. #### Call Signature[#](#call-signature-21) ``` getSettingEnumOptions(keypath): string[]; ``` Get the possible enum options for a given enum setting. ##### Parameters[#](#parameters-62) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns[#](#returns-85) `string`\[\] The possible enum options as strings. #### Signatures[#](#signatures-13) ``` getSettingEnumOptions(keypath: T): SettingEnumType[T][] ``` ``` getSettingEnumOptions(keypath: string): string[] ``` * * * ### findAllSettings()[#](#findallsettings) Returns a list of all the settings available. #### Returns[#](#returns-86) `string`\[\] A list of settings keypaths. #### Signature[#](#signature-42) ``` findAllSettings(): string[] ``` * * * ### getSettingType()[#](#getsettingtype) Returns the type of a setting. #### Parameters[#](#parameters-63) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | #### Returns[#](#returns-87) [`SettingType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingtype/) The setting type. #### Signature[#](#signature-43) ``` getSettingType(keypath: string): SettingType ``` * * * ### setURIResolver()[#](#seturiresolver) Sets a custom URI resolver. This function can be called more than once. Subsequent calls will overwrite previous calls. To remove a previously set resolver, pass the value `null`. The given function must return an absolute path with a scheme and cannot be asynchronous. The input is allowed to be invalid URI, e.g., due to placeholders. ``` // Replace all .jpg files with the IMG.LY logoengine.editor.setURIResolver((uri) => { if (uri.endsWith('.jpg')) { return 'https://img.ly/static/ubq_samples/imgly_logo.jpg'; } // Make use of the default URI resolution behavior. return engine.editor.defaultURIResolver(uri);}); ``` #### Parameters[#](#parameters-64) | Parameter | Type | Description | | --- | --- | --- | | `resolver` | (`URI`, `defaultURIResolver`) => `string` | Custom resolution function. The resolution function should not reference variables outside of its scope. It receives the default URI resolver as its second argument | #### Returns[#](#returns-88) `void` #### Signature[#](#signature-44) ``` setURIResolver(resolver: (URI: string, defaultURIResolver: (URI: string) => string) => string): void ``` * * * ### defaultURIResolver()[#](#defaulturiresolver) This is the default implementation for the URI resolver. It resolves the given path relative to the `basePath` setting. ``` engine.editor.defaultURIResolver(uri); ``` #### Parameters[#](#parameters-65) | Parameter | Type | Description | | --- | --- | --- | | `relativePath` | `string` | The relative path that should be resolved. | #### Returns[#](#returns-89) `string` The resolved absolute URI. #### Signature[#](#signature-45) ``` defaultURIResolver(relativePath: string): string ``` * * * ### getAbsoluteURI()[#](#getabsoluteuri) Resolves the given path. If a custom resolver has been set with `setURIResolver`, it invokes it with the given path. Else, it resolves it as relative to the `basePath` setting. This performs NO validation of whether a file exists at the specified location. #### Parameters[#](#parameters-66) | Parameter | Type | Description | | --- | --- | --- | | `relativePath` | `string` | A relative path string | #### Returns[#](#returns-90) `string` The resolved absolute uri or an error if an invalid path was given. #### Signature[#](#signature-46) ``` getAbsoluteURI(relativePath: string): string ``` ## System Information[#](#system-information) Access memory usage, export limits, and system capabilities. ### getAvailableMemory()[#](#getavailablememory) Get the currently available memory. #### Returns[#](#returns-91) `number` The available memory in bytes. #### Signature[#](#signature-47) ``` getAvailableMemory(): number ``` * * * ### getUsedMemory()[#](#getusedmemory) Get the engine’s current memory usage. #### Returns[#](#returns-92) `number` The current memory usage in bytes. #### Signature[#](#signature-48) ``` getUsedMemory(): number ``` * * * ### getMaxExportSize()[#](#getmaxexportsize) Get the maximum export size limit for the current device. Exports are only possible when both width and height are below this limit. Note that exports may still fail due to other constraints like memory. #### Returns[#](#returns-93) `number` The upper export size limit in pixels, or maximum 32-bit integer if unlimited. #### Signature[#](#signature-49) ``` getMaxExportSize(): number ``` ## Experimental[#](#experimental) ### unstable\_isInteractionHappening()[#](#unstable_isinteractionhappening) Check if a user interaction is currently happening. Detects active interactions like resize edits with drag handles or touch gestures. #### Returns[#](#returns-94) `boolean` True if an interaction is happening. This API is experimental and may change or be removed in future versions. ## Other[#](#other) ### ~setSettingColorRGBA()~[#](#setsettingcolorrgba) Set a color setting. #### Parameters[#](#parameters-67) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | | `` `ubq://${string & {}}` `` | | `r` | `number` | The red color component in the range of 0 to 1. | | `g` | `number` | The green color component in the range of 0 to 1. | | `b` | `number` | The blue color component in the range of 0 to 1. | | `a?` | `number` | The alpha color component in the range of 0 to 1. | #### Returns[#](#returns-95) `void` #### Deprecated[#](#deprecated-8) Use setSettingColor() instead. * * * ### ~getSettingColorRGBA()~[#](#getsettingcolorrgba) Get a color setting. #### Parameters[#](#parameters-68) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | | `` `ubq://${string & {}}` `` | #### Returns[#](#returns-96) [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) A tuple of channels red, green, blue and alpha in the range of 0 to 1. #### Deprecated[#](#deprecated-9) Use getSettingColor() instead. * * * ### isHighlightingEnabled()[#](#ishighlightingenabled) Checks wether the block has selection and hover highlighting enabled or disabled. ``` const highlightingIsEnabled = engine.editor.isHighlightingEnabled(block); ``` #### Parameters[#](#parameters-69) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-97) `boolean` True if highlighting is enabled, false otherwise. #### Signature[#](#signature-50) ``` isHighlightingEnabled(id: number): boolean ``` * * * ### setHighlightingEnabled()[#](#sethighlightingenabled) Enable or disable selection and hover highlighting for a block. ``` engine.editor.setHighlightingEnabled(block, true); ``` #### Parameters[#](#parameters-70) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `enabled` | `boolean` | Whether or not the block should show highlighting when selected or hovered. | #### Returns[#](#returns-98) `void` #### Signature[#](#signature-51) ``` setHighlightingEnabled(id: number, enabled: boolean): void ``` * * * ### isSelectionEnabled()[#](#isselectionenabled) Checks whether the block can currently be selected. ``` const selectionIsEnabled = engine.editor.isSelectionEnabled(block); ``` #### Parameters[#](#parameters-71) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-99) `boolean` True if selection is enabled, false otherwise. #### Signature[#](#signature-52) ``` isSelectionEnabled(id: number): boolean ``` * * * ### setSelectionEnabled()[#](#setselectionenabled) Enable or disable selection for a block. ``` engine.editor.setSelectionEnabled(block, true); ``` #### Parameters[#](#parameters-72) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `enabled` | `boolean` | Whether the block should be selectable. | #### Returns[#](#returns-100) `void` #### Signature[#](#signature-53) ``` setSelectionEnabled(id: number, enabled: boolean): void ``` ## Viewport[#](#viewport) ### setSafeAreaInsets()[#](#setsafeareainsets) Set global safe area insets for UI overlays. Safe area insets define UI-safe regions by specifying padding from screen edges. These insets are automatically applied to all camera operations (zoom, pan, clamping) to ensure important content remains visible when UI elements overlap the viewport edges. Set to zero to disable (default state). #### Parameters[#](#parameters-73) | Parameter | Type | Description | | --- | --- | --- | | `insets` | { `left?`: `number`; `top?`: `number`; `right?`: `number`; `bottom?`: `number`; } | The inset values in CSS pixels (device-independent) | | `insets.left?` | `number` | \- | | `insets.top?` | `number` | \- | | `insets.right?` | `number` | \- | | `insets.bottom?` | `number` | \- | #### Returns[#](#returns-101) `void` #### Signature[#](#signature-54) ``` setSafeAreaInsets(insets: object): void ``` * * * ### getSafeAreaInsets()[#](#getsafeareainsets) Get the current global safe area insets configuration. #### Returns[#](#returns-102) `object` The current inset values in CSS pixels (device-independent) | Name | Type | | --- | --- | | `left` | `number` | | `top` | `number` | | `right` | `number` | | `bottom` | `number` | #### Signature[#](#signature-55) ``` getSafeAreaInsets(): object ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/classes/blockapi) # Class: BlockAPI Create, manipulate, and query the building blocks of your design. This is the primary interface for all block-level operations. Use it to manage the entire lifecycle of blocks from creation and serialization to destruction. You can precisely control a block’s appearance by modifying its fills, strokes, and effects, or transform its position, size, and rotation. The API also includes powerful features for managing complex content like text and video, organizing blocks into groups and hierarchies, and exporting final designs to various formats. ## Constructors[#](#constructors) ### Constructor[#](#constructor) `BlockAPI` ## Block Lifecycle[#](#block-lifecycle) Manage the complete lifecycle: create, find, duplicate, destroy, and serialize blocks. ### loadFromString()[#](#loadfromstring) Loads blocks from a serialized string. The blocks are not attached by default and won’t be visible until attached to a page or the scene. The UUID of the loaded blocks is replaced with a new one. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `content` | `string` | A string representing the given blocks. | #### Returns[#](#returns) `Promise`<`number`\[\]> A promise that resolves with a list of handles representing the found blocks or an error. #### Example[#](#example) ``` const serializedBlocks = await engine.block.saveToString([pageBlockId]);// Later, load those blocksconst loadedBlocks = await engine.block.loadFromString(serializedBlocks);// Attach the first loaded block to the sceneengine.block.appendChild(sceneBlockId, loadedBlocks[0]); ``` #### Signature[#](#signature) ``` loadFromString(content: string): Promise ``` * * * ### loadFromArchiveURL()[#](#loadfromarchiveurl) Loads blocks from a remote archive URL. The URL should be that of a file previously saved with `block.saveToArchive`. The blocks are not attached by default and won’t be visible until attached to a page or the scene. The UUID of the loaded blocks is replaced with a new one. #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The URL of the blocks archive file. | #### Returns[#](#returns-1) `Promise`<`number`\[\]> A promise that resolves with a list of handles representing the found blocks or an error. #### Example[#](#example-1) ``` // Load blocks from a remote archiveconst loadedBlocks = await engine.block.loadFromArchiveURL('https://example.com/blocks.zip');// Attach the first loaded block to the sceneengine.block.appendChild(sceneBlockId, loadedBlocks[0]); ``` #### Signature[#](#signature-1) ``` loadFromArchiveURL(url: string): Promise ``` * * * ### saveToString()[#](#savetostring) Saves the given blocks to a serialized string. If a page with multiple children is given, the entire hierarchy is saved. #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `blocks` | `number`\[\] | The blocks to save. | | `allowedResourceSchemes?` | `string`\[\] | The resource schemes to allow in the saved string. Defaults to \[‘buffer’, ‘http’, ‘https’\]. | | `onDisallowedResourceScheme?` | (`url`, `dataHash`) => `Promise`<`string`\> | An optional callback that is called for each resource URL that has a scheme absent from `resourceSchemesAllowed`. The `url` parameter is the resource URL and the `dataHash` parameter is the hash of the resource’s data. The callback should return a new URL for the resource, which will be used in the serialized scene. The callback is expected to return the original URL if no persistence is needed. | #### Returns[#](#returns-2) `Promise`<`string`\> A promise that resolves to a string representing the blocks or an error. #### Example[#](#example-2) ``` // Create a page with a text elementconst page = engine.block.create('page');const text = engine.block.create('text');engine.block.appendChild(page, text); // Save the whole page hierarchy to a stringconst serialized = await engine.block.saveToString([page]); ``` #### Signature[#](#signature-2) ``` saveToString(blocks: number[], allowedResourceSchemes?: string[], onDisallowedResourceScheme?: (url: string, dataHash: string) => Promise): Promise ``` * * * ### saveToArchive()[#](#savetoarchive) Saves the given blocks and their assets to a zip archive. The archive contains all assets that were accessible when this function was called. Blocks in the archived scene reference assets relative to the location of the scene file. #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `blocks` | `number`\[\] | The blocks to save. | #### Returns[#](#returns-3) `Promise`<`Blob`\> A promise that resolves with a Blob on success or an error on failure. #### Signature[#](#signature-3) ``` saveToArchive(blocks: number[]): Promise ``` * * * ### create()[#](#create) Creates a new block of a given type. ``` // Create a new text blockconst text = engine.block.create('text');const page = engine.scene.getCurrentPage();engine.block.appendChild(page, text); // Create a new image blockconst image = engine.block.create('graphic');engine.block.setShape(image, engine.block.createShape('rect'));const imageFill = engine.block.createFill('image');engine.block.setFill(image, imageFill);engine.block.setString(imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg');engine.block.appendChild(page, image); // Create a new video blockconst video = engine.block.create('graphic');engine.block.setShape(video, engine.block.createShape('rect'));const videoFill = engine.block.createFill('video');engine.block.setString(videoFill, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4');engine.block.setFill(video, videoFill);engine.block.appendChild(page, video); ``` #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`DesignBlockType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktype/) | The type of the block that shall be created. | #### Returns[#](#returns-4) `number` The created block’s handle. #### Signature[#](#signature-4) ``` create(type: DesignBlockType): number ``` * * * ### duplicate()[#](#duplicate) Duplicates a block and its children. #### Parameters[#](#parameters-5) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to duplicate. | | `attachToParent?` | `boolean` | Whether the duplicated block should be attached to the original’s parent. Defaults to true. | #### Returns[#](#returns-5) `number` The handle of the duplicate. #### Signature[#](#signature-5) ``` duplicate(id: number, attachToParent?: boolean): number ``` * * * ### destroy()[#](#destroy) Destroys a block and its children. #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to destroy. | #### Returns[#](#returns-6) `void` #### Signature[#](#signature-6) ``` destroy(id: number): void ``` * * * ### forceLoadResources()[#](#forceloadresources) Forces the loading of resources for a set of blocks and their children. This is useful for preloading resources. If a resource failed to load previously, it will be reloaded. #### Parameters[#](#parameters-7) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The blocks whose resources should be loaded. | #### Returns[#](#returns-7) `Promise`<`void`\> A Promise that resolves once all resources have finished loading. #### Signature[#](#signature-7) ``` forceLoadResources(ids: number[]): Promise ``` ## Block Exploration[#](#block-exploration) Find blocks by properties like name, type, or kind. ### findByName()[#](#findbyname) Finds all blocks with a given name. #### Parameters[#](#parameters-8) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name to search for. | #### Returns[#](#returns-8) `number`\[\] A list of block ids. #### Signature[#](#signature-8) ``` findByName(name: string): number[] ``` * * * ### findByType()[#](#findbytype) Finds all blocks with a given type. #### Parameters[#](#parameters-9) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`ObjectType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttype/) | The type to search for. | #### Returns[#](#returns-9) `number`\[\] A list of block ids. #### Signature[#](#signature-9) ``` findByType(type: ObjectType): number[] ``` * * * ### findByKind()[#](#findbykind) Finds all blocks with a given kind. ``` const allTitles = engine.block.findByKind('title'); ``` #### Parameters[#](#parameters-10) | Parameter | Type | Description | | --- | --- | --- | | `kind` | `string` | The kind to search for. | #### Returns[#](#returns-10) `number`\[\] A list of block ids. #### Signature[#](#signature-10) ``` findByKind(kind: string): number[] ``` * * * ### findAll()[#](#findall) Finds all blocks known to the engine. #### Returns[#](#returns-11) `number`\[\] A list of block ids. #### Signature[#](#signature-11) ``` findAll(): number[] ``` * * * ### findAllPlaceholders()[#](#findallplaceholders) Finds all placeholder blocks in the current scene. #### Returns[#](#returns-12) `number`\[\] A list of block ids. #### Signature[#](#signature-12) ``` findAllPlaceholders(): number[] ``` ## Block Export[#](#block-export) Export blocks to various formats like images, videos, and audio. ### export()[#](#export) Exports a design block to a Blob. Performs an internal update to resolve the final layout for the blocks. ##### Parameters[#](#parameters-11) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. | | `options?` | [`ExportOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/exportoptions/) | The options for exporting the block type, including mime type and export settings. | ##### Returns[#](#returns-13) `Promise`<`Blob`\> A promise that resolves with the exported image or is rejected with an error. #### Call Signature[#](#call-signature) ``` export( handle, mimeType?,options?): Promise; ``` Exports a design block to a Blob. Performs an internal update to resolve the final layout for the blocks. ##### Parameters[#](#parameters-12) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. | | `mimeType?` | | `"application/octet-stream"` | | `options?` | `Omit`<[`ExportOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/exportoptions/), `"mimeType"`\> | The options for exporting the block type | ##### Returns[#](#returns-14) `Promise`<`Blob`\> A promise that resolves with the exported image or is rejected with an error. ##### Deprecated[#](#deprecated) Use the new `export` signature instead ##### Example[#](#example-3) ``` // Before migrationconst blob = await cesdk.block.export(blockId, MimeType.Png, { pngCompressionLevel: 5 })// After migrationconst blob = await cesdk.block.export(blockId, { mimeType: 'image/png', pngCompressionLevel: 5 }) ``` #### Signatures[#](#signatures) ``` export(handle: number, options?: ExportOptions): Promise ``` ``` export(handle: number, mimeType?: "application/octet-stream" | "application/pdf" | ImageMimeType, options?: Omit): Promise ``` * * * ### exportWithColorMask()[#](#exportwithcolormask) Exports a design block and a color mask to two separate Blobs. Performs an internal update to resolve the final layout for the blocks. ##### Parameters[#](#parameters-13) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. | | `maskColorR` | `number` | The red component of the special color mask color. | | `maskColorG` | `number` | The green component of the special color mask color. | | `maskColorB` | `number` | The blue component of the special color mask color. | | `options?` | [`ExportOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/exportoptions/) | The options for exporting the block type | ##### Returns[#](#returns-15) `Promise`<`Blob`\[\]> A promise that resolves with an array of the exported image and mask or is rejected with an error. #### Call Signature[#](#call-signature-1) ``` exportWithColorMask( handle, mimeType, maskColorR, maskColorG, maskColorB,options?): Promise; ``` Exports a design block and a color mask to two separate Blobs. Performs an internal update to resolve the final layout for the blocks. Removes all pixels that exactly match the given RGB color and replaces them with transparency. The output includes two files: the masked image and the mask itself. ##### Parameters[#](#parameters-14) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. | | `mimeType` | | `"application/octet-stream"` | | `maskColorR` | `number` | The red component of the special color mask color. | | `maskColorG` | `number` | The green component of the special color mask color. | | `maskColorB` | `number` | The blue component of the special color mask color. | | `options?` | `Omit`<[`ExportOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/exportoptions/), `"mimeType"`\> | The options for exporting the block type | ##### Returns[#](#returns-16) `Promise`<`Blob`\[\]> A promise that resolves with an array of the exported image and mask or is rejected with an error. ##### Deprecated[#](#deprecated-1) Use the new `exportWithColorMask` signature instead ##### Example[#](#example-4) ``` // Before migrationconst blob = await cesdk.block.exportWithColorMask( blockId, MimeType.Png, 0.5, 0, 0, { pngCompressionLevel: 5 });// After migrationconst blob = await cesdk.block.exportWithColorMask( blockId, 0.5, 0, 0, { mimeType: 'image/png', pngCompressionLevel: 5 }); ``` #### Signatures[#](#signatures-1) ``` exportWithColorMask(handle: number, maskColorR: number, maskColorG: number, maskColorB: number, options?: ExportOptions): Promise ``` ``` exportWithColorMask(handle: number, mimeType: "application/octet-stream" | "application/pdf" | ImageMimeType, maskColorR: number, maskColorG: number, maskColorB: number, options?: Omit): Promise ``` * * * ### exportVideo()[#](#exportvideo) Exports a design block as a video file. Note: The export will run across multiple iterations of the update loop. In each iteration a frame is scheduled for encoding. ##### Parameters[#](#parameters-15) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. Currently, only page blocks are supported. | | `options?` | [`VideoExportOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/videoexportoptions/) | The options for exporting the video, including mime type, h264 profile, level, bitrate, time offset, duration, framerate, target width and height. | ##### Returns[#](#returns-17) `Promise`<`Blob`\> A promise that resolves with a video blob or is rejected with an error. ##### Example[#](#example-5) ``` const page = engine.block.create('page');// Set up a progress tracking functionconst progressTracker = (renderedFrames, encodedFrames, totalFrames) => { console.log(`Progress: ${Math.round((encodedFrames / totalFrames) * 100)}%`);};const videoOptions = { framerate: 30, duration: 5 };const videoBlob = await engine.block.exportVideo(page, MimeType.Mp4, progressTracker, videoOptions); ``` #### Call Signature[#](#call-signature-2) ``` exportVideo( handle, mimeType?, progressCallback?,options?): Promise; ``` Exports a design block as a video file. Note: The export will run across multiple iterations of the update loop. In each iteration a frame is scheduled for encoding. ##### Parameters[#](#parameters-16) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. Currently, only page blocks are supported. | | `mimeType?` | [`VideoMimeType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/videomimetype/) | The MIME type of the output video file. | | `progressCallback?` | (`numberOfRenderedFrames`, `numberOfEncodedFrames`, `totalNumberOfFrames`) => `void` | A callback which reports on the progress of the export. | | `options?` | `Omit`<[`VideoExportOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/videoexportoptions/), `"mimeType"` | `"onProgress"`\> | ##### Returns[#](#returns-18) `Promise`<`Blob`\> A promise that resolves with a video blob or is rejected with an error. ##### Deprecated[#](#deprecated-2) Use the new `exportVideo` signature instead ##### Example[#](#example-6) ``` // Before migrationconst blob = await cesdk.block.exportVideo(blockId, 'video/mp4', handleProgress, { targetWidth: 1920, targetHeight: 1080,})// After migrationconst blob = await cesdk.block.exportVideo(blockId, { mimeType: 'video/mp4', progressCallback: handleProgress, targetWidth: 1920, targetHeight: 1080,}) ``` #### Signatures[#](#signatures-2) ``` exportVideo(handle: number, options?: VideoExportOptions): Promise ``` ``` exportVideo(handle: number, mimeType?: VideoMimeType, progressCallback?: (numberOfRenderedFrames: number, numberOfEncodedFrames: number, totalNumberOfFrames: number) => void, options?: Omit): Promise ``` * * * ### exportAudio()[#](#exportaudio) Exports a design block as an audio file. #### Parameters[#](#parameters-17) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. Currently, only audio blocks are supported. | | `options?` | [`AudioExportOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/audioexportoptions/) | The options for exporting the audio, including mime type, progress callback, and export settings. | #### Returns[#](#returns-19) `Promise`<`Blob`\> A promise that resolves with an audio blob or is rejected with an error. This API is experimental and may change or be removed in future versions. #### Example[#](#example-7) ``` const audioBlock = engine.block.create('audio');// Set up a progress tracking functionconst progressTracker = (renderedFrames, encodedFrames, totalFrames) => { console.log(`Audio export progress: ${Math.round((encodedFrames / totalFrames) * 100)}%`);};const audioOptions = { duration: 10 };const audioBlob = await engine.block.exportAudio(audioBlock, MimeType.Wav, progressTracker, audioOptions); ``` #### Signature[#](#signature-13) ``` exportAudio(handle: number, options?: AudioExportOptions): Promise ``` ## Block Hierarchies[#](#block-hierarchies) Manage parent-child relationships and the scene graph structure. ### getParent()[#](#getparent) Gets the parent of a block. #### Parameters[#](#parameters-18) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-20) `number` The parent’s handle or null if the block has no parent. #### Signature[#](#signature-14) ``` getParent(id: number): number ``` * * * ### getChildren()[#](#getchildren) Gets all direct children of a block. Children are sorted in their rendering order: Last child is rendered in front of other children. #### Parameters[#](#parameters-19) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-21) `number`\[\] A list of block ids. #### Signature[#](#signature-15) ``` getChildren(id: number): number[] ``` * * * ### insertChild()[#](#insertchild) Inserts a child block at a specific index. #### Parameters[#](#parameters-20) | Parameter | Type | Description | | --- | --- | --- | | `parent` | `number` | The block whose children should be updated. | | `child` | `number` | The child to insert. Can be an existing child of `parent`. | | `index` | `number` | The index to insert or move to. | #### Returns[#](#returns-22) `void` #### Signature[#](#signature-16) ``` insertChild(parent: number, child: number, index: number): void ``` * * * ### appendChild()[#](#appendchild) Appends a child block to a parent. #### Parameters[#](#parameters-21) | Parameter | Type | Description | | --- | --- | --- | | `parent` | `number` | The block whose children should be updated. | | `child` | `number` | The child to insert. Can be an existing child of `parent`. | #### Returns[#](#returns-23) `void` #### Signature[#](#signature-17) ``` appendChild(parent: number, child: number): void ``` ## Block Layout[#](#block-layout) Structure designs by positioning, sizing, layering, aligning, and distributing blocks. ### isTransformLocked()[#](#istransformlocked) Gets the transform-locked state of a block. If true, the block’s transform can’t be changed. #### Parameters[#](#parameters-22) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-24) `boolean` True if transform locked, false otherwise. #### Signature[#](#signature-18) ``` isTransformLocked(id: number): boolean ``` * * * ### setTransformLocked()[#](#settransformlocked) Sets the transform-locked state of a block. #### Parameters[#](#parameters-23) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `locked` | `boolean` | Whether the block’s transform should be locked. | #### Returns[#](#returns-25) `void` #### Signature[#](#signature-19) ``` setTransformLocked(id: number, locked: boolean): void ``` * * * ### getPositionX()[#](#getpositionx) Gets the X position of a block. #### Parameters[#](#parameters-24) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-26) `number` The value of the x position. #### Signature[#](#signature-20) ``` getPositionX(id: number): number ``` * * * ### getPositionXMode()[#](#getpositionxmode) Gets the mode for the block’s X position. #### Parameters[#](#parameters-25) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-27) `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the x position: ‘Absolute’ or ‘Percent’. #### Signature[#](#signature-21) ``` getPositionXMode(id: number): "Absolute" | "Percent" | "Auto" ``` * * * ### getPositionY()[#](#getpositiony) Gets the Y position of a block. #### Parameters[#](#parameters-26) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-28) `number` The value of the y position. #### Signature[#](#signature-22) ``` getPositionY(id: number): number ``` * * * ### getPositionYMode()[#](#getpositionymode) Gets the mode for the block’s Y position. #### Parameters[#](#parameters-27) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-29) `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the y position: ‘Absolute’ or ‘Percent’. #### Signature[#](#signature-23) ``` getPositionYMode(id: number): "Absolute" | "Percent" | "Auto" ``` * * * ### setPositionX()[#](#setpositionx) Sets the X position of a block. The position refers to the block’s local space, relative to its parent with the origin at the top left. ``` engine.block.setPositionX(block, 0.25); ``` #### Parameters[#](#parameters-28) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `value` | `number` | The value of the x position. | #### Returns[#](#returns-30) `void` #### Signature[#](#signature-24) ``` setPositionX(id: number, value: number): void ``` * * * ### setPositionXMode()[#](#setpositionxmode) Sets the mode for the block’s X position. ``` engine.block.setPositionXMode(block, 'Percent'); ``` #### Parameters[#](#parameters-29) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | #### Returns[#](#returns-31) `void` #### Signature[#](#signature-25) ``` setPositionXMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` * * * ### setPositionY()[#](#setpositiony) Sets the Y position of a block. The position refers to the block’s local space, relative to its parent with the origin at the top left. ``` engine.block.setPositionY(block, 0.25); ``` #### Parameters[#](#parameters-30) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `value` | `number` | The value of the y position. | #### Returns[#](#returns-32) `void` #### Signature[#](#signature-26) ``` setPositionY(id: number, value: number): void ``` * * * ### setPositionYMode()[#](#setpositionymode) Sets the mode for the block’s Y position. ``` engine.block.setPositionYMode(block, 'Absolute'); ``` #### Parameters[#](#parameters-31) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | #### Returns[#](#returns-33) `void` #### Signature[#](#signature-27) ``` setPositionYMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` * * * ### setAlwaysOnTop()[#](#setalwaysontop) Sets a block to always be rendered on top of its siblings. If true, this block’s sorting order is automatically adjusted to be higher than all other siblings without this property. #### Parameters[#](#parameters-32) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | the block to update. | | `enabled` | `boolean` | whether the block shall be always-on-top. | #### Returns[#](#returns-34) `void` #### Signature[#](#signature-28) ``` setAlwaysOnTop(id: number, enabled: boolean): void ``` * * * ### setAlwaysOnBottom()[#](#setalwaysonbottom) Sets a block to always be rendered below its siblings. If true, this block’s sorting order is automatically adjusted to be lower than all other siblings without this property. #### Parameters[#](#parameters-33) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | the block to update. | | `enabled` | `boolean` | whether the block shall always be below its siblings. | #### Returns[#](#returns-35) `void` #### Signature[#](#signature-29) ``` setAlwaysOnBottom(id: number, enabled: boolean): void ``` * * * ### isAlwaysOnTop()[#](#isalwaysontop) Checks if a block is set to always be on top. #### Parameters[#](#parameters-34) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | the block to query. | #### Returns[#](#returns-36) `boolean` true if the block is set to be always-on-top, false otherwise. #### Signature[#](#signature-30) ``` isAlwaysOnTop(id: number): boolean ``` * * * ### isAlwaysOnBottom()[#](#isalwaysonbottom) Checks if a block is set to always be on the bottom. #### Parameters[#](#parameters-35) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | the block to query. | #### Returns[#](#returns-37) `boolean` true if the block is set to be always-on-bottom, false otherwise. #### Signature[#](#signature-31) ``` isAlwaysOnBottom(id: number): boolean ``` * * * ### bringToFront()[#](#bringtofront) Brings a block to the front of its siblings. Updates the sorting order so that the given block has the highest sorting order. #### Parameters[#](#parameters-36) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The id of the block to bring to the front. | #### Returns[#](#returns-38) `void` #### Signature[#](#signature-32) ``` bringToFront(id: number): void ``` * * * ### sendToBack()[#](#sendtoback) Sends a block to the back of its siblings. Updates the sorting order so that the given block has the lowest sorting order. #### Parameters[#](#parameters-37) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The id of the block to send to the back. | #### Returns[#](#returns-39) `void` #### Signature[#](#signature-33) ``` sendToBack(id: number): void ``` * * * ### bringForward()[#](#bringforward) Brings a block one layer forward. Updates the sorting order to be higher than its next sibling. #### Parameters[#](#parameters-38) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The id of the block to bring forward. | #### Returns[#](#returns-40) `void` #### Signature[#](#signature-34) ``` bringForward(id: number): void ``` * * * ### sendBackward()[#](#sendbackward) Sends a block one layer backward. Updates the sorting order to be lower than its previous sibling. #### Parameters[#](#parameters-39) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The id of the block to send backward. | #### Returns[#](#returns-41) `void` #### Signature[#](#signature-35) ``` sendBackward(id: number): void ``` * * * ### getRotation()[#](#getrotation) Gets the rotation of a block in radians. #### Parameters[#](#parameters-40) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-42) `number` The block’s rotation around its center in radians. #### Signature[#](#signature-36) ``` getRotation(id: number): number ``` * * * ### setRotation()[#](#setrotation) Sets the rotation of a block in radians. Rotation is applied around the block’s center. #### Parameters[#](#parameters-41) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `radians` | `number` | The new rotation in radians. | #### Returns[#](#returns-43) `void` #### Signature[#](#signature-37) ``` setRotation(id: number, radians: number): void ``` * * * ### getWidth()[#](#getwidth) Gets the width of a block in the current width mode. ``` const width = engine.block.getWidth(block); ``` #### Parameters[#](#parameters-42) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-44) `number` The value of the block’s width. #### Signature[#](#signature-38) ``` getWidth(id: number): number ``` * * * ### getWidthMode()[#](#getwidthmode) Gets the mode for the block’s width. ``` const widthMode = engine.block.getWidthMode(block); ``` #### Parameters[#](#parameters-43) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-45) `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the width: ‘Absolute’, ‘Percent’ or ‘Auto’. #### Signature[#](#signature-39) ``` getWidthMode(id: number): "Absolute" | "Percent" | "Auto" ``` * * * ### getHeight()[#](#getheight) Gets the height of a block in the current height mode. ``` const height = engine.block.getHeight(block); ``` #### Parameters[#](#parameters-44) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-46) `number` The value of the block’s height. #### Signature[#](#signature-40) ``` getHeight(id: number): number ``` * * * ### getHeightMode()[#](#getheightmode) Gets the mode for the block’s height. ``` const heightMode = engine.block.getHeightMode(block); ``` #### Parameters[#](#parameters-45) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-47) `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the height: ‘Absolute’, ‘Percent’ or ‘Auto’. #### Signature[#](#signature-41) ``` getHeightMode(id: number): "Absolute" | "Percent" | "Auto" ``` * * * ### setWidth()[#](#setwidth) Sets the width of a block in the current width mode. If the crop is maintained, the crop values will be automatically adjusted. ``` engine.block.setWidth(block, 2.5, true); ``` #### Parameters[#](#parameters-46) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `value` | `number` | The new width of the block. | | `maintainCrop?` | `boolean` | Whether or not the crop values, if available, should be automatically adjusted. | #### Returns[#](#returns-48) `void` #### Signature[#](#signature-42) ``` setWidth(id: number, value: number, maintainCrop?: boolean): void ``` * * * ### setWidthMode()[#](#setwidthmode) Sets the mode for the block’s width. ``` engine.block.setWidthMode(block, 'Percent'); ``` #### Parameters[#](#parameters-47) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | #### Returns[#](#returns-49) `void` #### Signature[#](#signature-43) ``` setWidthMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` * * * ### setHeight()[#](#setheight) Sets the height of a block in the current height mode. If the crop is maintained, the crop values will be automatically adjusted. ``` engine.block.setHeight(block, 0.5);engine.block.setHeight(block, 2.5, true); ``` #### Parameters[#](#parameters-48) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `value` | `number` | The new height of the block. | | `maintainCrop?` | `boolean` | Whether or not the crop values, if available, should be automatically adjusted. | #### Returns[#](#returns-50) `void` #### Signature[#](#signature-44) ``` setHeight(id: number, value: number, maintainCrop?: boolean): void ``` * * * ### setHeightMode()[#](#setheightmode) Sets the mode for the block’s height. ``` engine.block.setHeightMode(block, 'Percent'); ``` #### Parameters[#](#parameters-49) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | #### Returns[#](#returns-51) `void` #### Signature[#](#signature-45) ``` setHeightMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` * * * ### getFrameX()[#](#getframex) Gets the final calculated X position of a block’s frame. The position is only available after an internal update loop. ``` const frameX = engine.block.getFrameX(block); ``` #### Parameters[#](#parameters-50) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-52) `number` The layout position on the x-axis. #### Signature[#](#signature-46) ``` getFrameX(id: number): number ``` * * * ### getFrameY()[#](#getframey) Gets the final calculated Y position of a block’s frame. The position is only available after an internal update loop. ``` const frameY = engine.block.getFrameY(block); ``` #### Parameters[#](#parameters-51) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-53) `number` The layout position on the y-axis. #### Signature[#](#signature-47) ``` getFrameY(id: number): number ``` * * * ### getFrameWidth()[#](#getframewidth) Gets the final calculated width of a block’s frame. The width is only available after an internal update loop. ``` const frameWidth = engine.block.getFrameWidth(block); ``` #### Parameters[#](#parameters-52) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-54) `number` The layout width. #### Signature[#](#signature-48) ``` getFrameWidth(id: number): number ``` * * * ### getFrameHeight()[#](#getframeheight) Gets the final calculated height of a block’s frame. The height is only available after an internal update loop. ``` const frameHeight = engine.block.getFrameHeight(block); ``` #### Parameters[#](#parameters-53) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-55) `number` The layout height. #### Signature[#](#signature-49) ``` getFrameHeight(id: number): number ``` * * * ### getGlobalBoundingBoxX()[#](#getglobalboundingboxx) Gets the X position of the block’s global bounding box. The position is in the scene’s global coordinate space, with the origin at the top left. ``` const globalX = engine.block.getGlobalBoundingBoxX(block); ``` #### Parameters[#](#parameters-54) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns[#](#returns-56) `number` The x coordinate of the axis-aligned bounding box. #### Signature[#](#signature-50) ``` getGlobalBoundingBoxX(id: number): number ``` * * * ### getGlobalBoundingBoxY()[#](#getglobalboundingboxy) Gets the Y position of the block’s global bounding box. The position is in the scene’s global coordinate space, with the origin at the top left. ``` const globalY = engine.block.getGlobalBoundingBoxY(block); ``` #### Parameters[#](#parameters-55) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns[#](#returns-57) `number` The y coordinate of the axis-aligned bounding box. #### Signature[#](#signature-51) ``` getGlobalBoundingBoxY(id: number): number ``` * * * ### getGlobalBoundingBoxWidth()[#](#getglobalboundingboxwidth) Gets the width of the block’s global bounding box. The width is in the scene’s global coordinate space. ``` const globalWidth = engine.block.getGlobalBoundingBoxWidth(block); ``` #### Parameters[#](#parameters-56) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns[#](#returns-58) `number` The width of the axis-aligned bounding box. #### Signature[#](#signature-52) ``` getGlobalBoundingBoxWidth(id: number): number ``` * * * ### getGlobalBoundingBoxHeight()[#](#getglobalboundingboxheight) Gets the height of the block’s global bounding box. The height is in the scene’s global coordinate space. ``` const globalHeight = engine.block.getGlobalBoundingBoxHeight(block); ``` #### Parameters[#](#parameters-57) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns[#](#returns-59) `number` The height of the axis-aligned bounding box. #### Signature[#](#signature-53) ``` getGlobalBoundingBoxHeight(id: number): number ``` * * * ### getScreenSpaceBoundingBoxXYWH()[#](#getscreenspaceboundingboxxywh) Gets the screen-space bounding box for a set of blocks. ``` const boundingBox = engine.block.getScreenSpaceBoundingBoxXYWH([block]); ``` #### Parameters[#](#parameters-58) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The block to query. | #### Returns[#](#returns-60) [`XYWH`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/xywh/) The position and size of the bounding box. #### Signature[#](#signature-54) ``` getScreenSpaceBoundingBoxXYWH(ids: number[]): XYWH ``` * * * ### alignHorizontally()[#](#alignhorizontally) Aligns blocks horizontally. Aligns multiple blocks within their bounding box or a single block to its parent. #### Parameters[#](#parameters-59) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A non-empty array of block ids. | | `horizontalBlockAlignment` | `"Right"` | `"Left"` | #### Returns[#](#returns-61) `void` #### Signature[#](#signature-55) ``` alignHorizontally(ids: number[], horizontalBlockAlignment: "Right" | "Left" | "Center"): void ``` * * * ### alignVertically()[#](#alignvertically) Aligns blocks vertically. Aligns multiple blocks within their bounding box or a single block to its parent. #### Parameters[#](#parameters-60) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A non-empty array of block ids. | | `verticalBlockAlignment` | `"Center"` | `"Top"` | #### Returns[#](#returns-62) `void` #### Signature[#](#signature-56) ``` alignVertically(ids: number[], verticalBlockAlignment: "Center" | "Top" | "Bottom"): void ``` * * * ### distributeHorizontally()[#](#distributehorizontally) Distributes blocks horizontally with even spacing. Distributes multiple blocks horizontally within their bounding box. #### Parameters[#](#parameters-61) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A non-empty array of block ids. | #### Returns[#](#returns-63) `void` #### Signature[#](#signature-57) ``` distributeHorizontally(ids: number[]): void ``` * * * ### distributeVertically()[#](#distributevertically) Distributes blocks vertically with even spacing. Distributes multiple blocks vertically within their bounding box. #### Parameters[#](#parameters-62) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A non-empty array of block ids. | #### Returns[#](#returns-64) `void` #### Signature[#](#signature-58) ``` distributeVertically(ids: number[]): void ``` * * * ### fillParent()[#](#fillparent) Resizes and positions a block to fill its parent. The crop values of the block are reset if it can be cropped. #### Parameters[#](#parameters-63) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should fill its parent. | #### Returns[#](#returns-65) `void` #### Signature[#](#signature-59) ``` fillParent(id: number): void ``` * * * ### resizeContentAware()[#](#resizecontentaware) Resizes blocks while adjusting content to fit. The content of the blocks is automatically adjusted to fit the new dimensions. Full-page blocks are resized to remain as full-page afterwards, while the blocks that are not full-page get resized as a group to the same scale factor and centered. ``` const pages = engine.scene.getPages();engine.block.resizeContentAware(pages, width: 100.0, 100.0); ``` #### Parameters[#](#parameters-64) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The blocks to resize. | | `width` | `number` | The new width of the blocks. | | `height` | `number` | The new height of the blocks. | #### Returns[#](#returns-66) `void` #### Signature[#](#signature-60) ``` resizeContentAware(ids: number[], width: number, height: number): void ``` * * * ### scale()[#](#scale) Scales a block and its children proportionally. This updates the position, size and style properties (e.g. stroke width) of the block and its children around the specified anchor point. ``` // Scale a block to double its size, anchored at the center.engine.block.scale(block, 2.0, 0.5, 0.5); ``` #### Parameters[#](#parameters-65) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should be scaled. | | `scale` | `number` | The scale factor to be applied to the current properties of the block. | | `anchorX?` | `number` | The relative position along the width of the block around which the scaling should occur (0=left, 0.5=center, 1=right). Defaults to 0. | | `anchorY?` | `number` | The relative position along the height of the block around which the scaling should occur (0=top, 0.5=center, 1=bottom). Defaults to 0. | #### Returns[#](#returns-67) `void` #### Signature[#](#signature-61) ``` scale(id: number, scale: number, anchorX?: number, anchorY?: number): void ``` ## Block Selection & Visibility[#](#block-selection--visibility) Manage a block’s selection state and visibility on the canvas. ### select()[#](#select) Selects a block, deselecting all others. #### Parameters[#](#parameters-66) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to be selected. | #### Returns[#](#returns-68) `void` #### Signature[#](#signature-62) ``` select(id: number): void ``` * * * ### setSelected()[#](#setselected) Sets the selection state of a block. #### Parameters[#](#parameters-67) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | | `selected` | `boolean` | Whether or not the block should be selected. | #### Returns[#](#returns-69) `void` #### Signature[#](#signature-63) ``` setSelected(id: number, selected: boolean): void ``` * * * ### isSelected()[#](#isselected) Gets the selection state of a block. #### Parameters[#](#parameters-68) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-70) `boolean` True if the block is selected, false otherwise. #### Signature[#](#signature-64) ``` isSelected(id: number): boolean ``` * * * ### findAllSelected()[#](#findallselected) Finds all currently selected blocks. #### Returns[#](#returns-71) `number`\[\] An array of block ids. #### Signature[#](#signature-65) ``` findAllSelected(): number[] ``` * * * ### isVisible()[#](#isvisible) Gets the visibility state of a block. #### Parameters[#](#parameters-69) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-72) `boolean` True if visible, false otherwise. #### Signature[#](#signature-66) ``` isVisible(id: number): boolean ``` * * * ### setVisible()[#](#setvisible) Sets the visibility state of a block. #### Parameters[#](#parameters-70) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `visible` | `boolean` | Whether the block shall be visible. | #### Returns[#](#returns-73) `void` #### Signature[#](#signature-67) ``` setVisible(id: number, visible: boolean): void ``` ## Block Appearance[#](#block-appearance) Control general appearance, including opacity, blend modes, flipping, and other visual properties. ### isClipped()[#](#isclipped) Gets the clipped state of a block. If true, the block should clip its contents to its frame. #### Parameters[#](#parameters-71) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-74) `boolean` True if clipped, false otherwise. #### Signature[#](#signature-68) ``` isClipped(id: number): boolean ``` * * * ### setClipped()[#](#setclipped) Sets the clipped state of a block. #### Parameters[#](#parameters-72) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `clipped` | `boolean` | Whether the block should clips its contents to its frame. | #### Returns[#](#returns-75) `void` #### Signature[#](#signature-69) ``` setClipped(id: number, clipped: boolean): void ``` * * * ### getFlipHorizontal()[#](#getfliphorizontal) Gets the horizontal flip state of a block. #### Parameters[#](#parameters-73) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-76) `boolean` A boolean indicating whether the block is flipped horizontally. #### Signature[#](#signature-70) ``` getFlipHorizontal(id: number): boolean ``` * * * ### getFlipVertical()[#](#getflipvertical) Gets the vertical flip state of a block. #### Parameters[#](#parameters-74) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-77) `boolean` A boolean indicating whether the block is flipped vertically. #### Signature[#](#signature-71) ``` getFlipVertical(id: number): boolean ``` * * * ### setFlipHorizontal()[#](#setfliphorizontal) Sets the horizontal flip state of a block. #### Parameters[#](#parameters-75) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `flip` | `boolean` | If the flip should be enabled. | #### Returns[#](#returns-78) `void` #### Signature[#](#signature-72) ``` setFlipHorizontal(id: number, flip: boolean): void ``` * * * ### setFlipVertical()[#](#setflipvertical) Sets the vertical flip state of a block. #### Parameters[#](#parameters-76) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `flip` | `boolean` | If the flip should be enabled. | #### Returns[#](#returns-79) `void` #### Signature[#](#signature-73) ``` setFlipVertical(id: number, flip: boolean): void ``` * * * ### ~hasOpacity()~[#](#hasopacity) Checks if a block has an opacity property. #### Parameters[#](#parameters-77) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-80) `boolean` true, if the block has an opacity. #### Deprecated[#](#deprecated-3) Use supportsOpacity() instead. * * * ### supportsOpacity()[#](#supportsopacity) Checks if a block supports opacity. #### Parameters[#](#parameters-78) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-81) `boolean` true, if the block supports opacity. #### Signature[#](#signature-74) ``` supportsOpacity(id: number): boolean ``` * * * ### setOpacity()[#](#setopacity) Sets the opacity of a block. #### Parameters[#](#parameters-79) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose opacity should be set. | | `opacity` | `number` | The opacity to be set. The valid range is 0 to 1. | #### Returns[#](#returns-82) `void` #### Signature[#](#signature-75) ``` setOpacity(id: number, opacity: number): void ``` * * * ### getOpacity()[#](#getopacity) Gets the opacity of a block. #### Parameters[#](#parameters-80) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose opacity should be queried. | #### Returns[#](#returns-83) `number` The opacity value. #### Signature[#](#signature-76) ``` getOpacity(id: number): number ``` * * * ### ~hasBlendMode()~[#](#hasblendmode) Checks if a block has a blend mode property. #### Parameters[#](#parameters-81) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-84) `boolean` true, if the block has a blend mode. #### Deprecated[#](#deprecated-4) Use supportsBlendMode() instead. * * * ### supportsBlendMode()[#](#supportsblendmode) Checks if a block supports blend modes. #### Parameters[#](#parameters-82) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-85) `boolean` true, if the block supports blend modes. #### Signature[#](#signature-77) ``` supportsBlendMode(id: number): boolean ``` * * * ### setBlendMode()[#](#setblendmode) Sets the blend mode of a block. #### Parameters[#](#parameters-83) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose blend mode should be set. | | `blendMode` | | `"Color"` | #### Returns[#](#returns-86) `void` #### Signature[#](#signature-78) ``` setBlendMode(id: number, blendMode: "Color" | "PassThrough" | "Normal" | "Darken" | "Multiply" | "ColorBurn" | "LinearBurn" | "DarkenColor" | "Lighten" | "Screen" | "ColorDodge" | "LinearDodge" | "LightenColor" | "Overlay" | "SoftLight" | "HardLight" | "VividLight" | "LinearLight" | "PinLight" | "HardMix" | "Difference" | "Exclusion" | "Subtract" | "Divide" | "Hue" | "Saturation" | "Luminosity"): void ``` * * * ### getBlendMode()[#](#getblendmode) Gets the blend mode of a block. #### Parameters[#](#parameters-84) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose blend mode should be queried. | #### Returns[#](#returns-87) | `"Color"` | `"PassThrough"` | `"Normal"` | `"Darken"` | `"Multiply"` | `"ColorBurn"` | `"LinearBurn"` | `"DarkenColor"` | `"Lighten"` | `"Screen"` | `"ColorDodge"` | `"LinearDodge"` | `"LightenColor"` | `"Overlay"` | `"SoftLight"` | `"HardLight"` | `"VividLight"` | `"LinearLight"` | `"PinLight"` | `"HardMix"` | `"Difference"` | `"Exclusion"` | `"Subtract"` | `"Divide"` | `"Hue"` | `"Saturation"` | `"Luminosity"` The blend mode. #### Signature[#](#signature-79) ``` getBlendMode(id: number): "Color" | "PassThrough" | "Normal" | "Darken" | "Multiply" | "ColorBurn" | "LinearBurn" | "DarkenColor" | "Lighten" | "Screen" | "ColorDodge" | "LinearDodge" | "LightenColor" | "Overlay" | "SoftLight" | "HardLight" | "VividLight" | "LinearLight" | "PinLight" | "HardMix" | "Difference" | "Exclusion" | "Subtract" | "Divide" | "Hue" | "Saturation" | "Luminosity" ``` * * * ### ~hasBackgroundColor()~[#](#hasbackgroundcolor) Checks if a block has background color properties. #### Parameters[#](#parameters-85) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-88) `boolean` true, if the block has background color properties. #### Deprecated[#](#deprecated-5) Use supportsBackgroundColor() instead. * * * ### supportsBackgroundColor()[#](#supportsbackgroundcolor) Checks if a block supports a background color. #### Parameters[#](#parameters-86) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-89) `boolean` true, if the block supports a background color. #### Signature[#](#signature-80) ``` supportsBackgroundColor(id: number): boolean ``` * * * ### ~setBackgroundColorRGBA()~[#](#setbackgroundcolorrgba) Sets the background color of a block using RGBA values. #### Parameters[#](#parameters-87) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose background color should be set. | | `r` | `number` | The red color component in the range of 0 to 1. | | `g` | `number` | The green color component in the range of 0 to 1. | | `b` | `number` | The blue color component in the range of 0 to 1. | | `a?` | `number` | The alpha color component in the range of 0 to 1. | #### Returns[#](#returns-90) `void` #### Deprecated[#](#deprecated-6) Use `Use setColor() with the key path 'backgroundColor/color' instead.`. * * * ### ~getBackgroundColorRGBA()~[#](#getbackgroundcolorrgba) Gets the background color of a block as RGBA values. #### Parameters[#](#parameters-88) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose background color should be queried. | #### Returns[#](#returns-91) [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) The background color. #### Deprecated[#](#deprecated-7) Use `Use getColor() with the key path 'backgroundColor/color' instead.`. * * * ### setBackgroundColorEnabled()[#](#setbackgroundcolorenabled) Enables or disables the background of a block. ``` engine.block.setBackgroundColorEnabled(block, true); ``` #### Parameters[#](#parameters-89) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose background should be enabled or disabled. | | `enabled` | `boolean` | If true, the background will be enabled. | #### Returns[#](#returns-92) `void` #### Signature[#](#signature-81) ``` setBackgroundColorEnabled(id: number, enabled: boolean): void ``` * * * ### isBackgroundColorEnabled()[#](#isbackgroundcolorenabled) Checks if the background of a block is enabled. ``` const backgroundColorIsEnabled = engine.block.isBackgroundColorEnabled(block); ``` #### Parameters[#](#parameters-90) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose background state should be queried. | #### Returns[#](#returns-93) `boolean` True, if background is enabled. #### Signature[#](#signature-82) ``` isBackgroundColorEnabled(id: number): boolean ``` ## Block Fills[#](#block-fills) Create, configure, and manage block fills, including solid colors, gradients, and images. ### createFill()[#](#createfill) Creates a new fill block. ``` const solidColoFill = engine.block.createFill('color');// Longhand fill types are also supportedconst imageFill = engine.block.createFill('//ly.img.ubq/fill/image'); ``` #### Parameters[#](#parameters-91) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`FillType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/filltype/) | The type of the fill object that shall be created. | #### Returns[#](#returns-94) `number` The created fill’s handle. #### Signature[#](#signature-83) ``` createFill(type: FillType): number ``` * * * ### ~hasContentFillMode()~[#](#hascontentfillmode) Checks if a block supports content fill modes. #### Parameters[#](#parameters-92) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-95) `boolean` true, if the block has a content fill mode. #### Deprecated[#](#deprecated-8) Use supportsContentFillMode instead. * * * ### supportsContentFillMode()[#](#supportscontentfillmode) Checks if a block supports content fill modes. #### Parameters[#](#parameters-93) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-96) `boolean` true, if the block has a content fill mode. #### Signature[#](#signature-84) ``` supportsContentFillMode(id: number): boolean ``` * * * ### setContentFillMode()[#](#setcontentfillmode) Sets the content fill mode of a block. ``` engine.block.setContentFillMode(image, 'Cover'); ``` #### Parameters[#](#parameters-94) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `mode` | `"Crop"` | `"Cover"` | #### Returns[#](#returns-97) `void` #### Signature[#](#signature-85) ``` setContentFillMode(id: number, mode: "Crop" | "Cover" | "Contain"): void ``` * * * ### getContentFillMode()[#](#getcontentfillmode) Gets the content fill mode of a block. ``` engine.block.getContentFillMode(image); ``` #### Parameters[#](#parameters-95) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-98) `"Crop"` | `"Cover"` | `"Contain"` The current mode: ‘Crop’, ‘Cover’ or ‘Contain’. #### Signature[#](#signature-86) ``` getContentFillMode(id: number): "Crop" | "Cover" | "Contain" ``` * * * ### setGradientColorStops()[#](#setgradientcolorstops) Sets the color stops for a gradient property. ``` engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 1.0, g: 0.8, b: 0.2, a: 1.0 }, stop: 0 }, { color: { r: 0.3, g: 0.4, b: 0.7, a: 1.0 }, stop: 1 }]); ``` #### Parameters[#](#parameters-96) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `string` | The name of the property to set, e.g. ‘fill/gradient/colors’. | | `colors` | [`GradientColorStop`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/gradientcolorstop/)\[\] | An array of gradient color stops. | #### Returns[#](#returns-99) `void` #### Signature[#](#signature-87) ``` setGradientColorStops(id: number, property: string, colors: GradientColorStop[]): void ``` * * * ### getGradientColorStops()[#](#getgradientcolorstops) Gets the color stops from a gradient property. ``` engine.block.getGradientColorStops(gradientFill, 'fill/gradient/colors'); ``` #### Parameters[#](#parameters-97) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns[#](#returns-100) [`GradientColorStop`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/gradientcolorstop/)\[\] The gradient colors. #### Signature[#](#signature-88) ``` getGradientColorStops(id: number, property: string): GradientColorStop[] ``` * * * ### getSourceSet()[#](#getsourceset) Gets the source set from a block property. ``` const sourceSet = engine.block.getSourceSet(imageFill, 'fill/image/sourceSet'); ``` #### Parameters[#](#parameters-98) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should be queried. | | `property` | [`SourceSetPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sourcesetpropertyname/) | The name of the property to query, e.g. ‘fill/image/sourceSet’. | #### Returns[#](#returns-101) [`Source`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/source/)\[\] The block’s source set. #### Signature[#](#signature-89) ``` getSourceSet(id: number, property: SourceSetPropertyName): Source[] ``` * * * ### setSourceSet()[#](#setsourceset) Sets the source set for a block property. The crop and content fill mode of the associated block will be reset to default values. ``` engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [{ uri: 'https://example.com/sample.jpg', width: 800, height: 600}]); ``` #### Parameters[#](#parameters-99) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | [`SourceSetPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sourcesetpropertyname/) | The name of the property to set. | | `sourceSet` | [`Source`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/source/)\[\] | The block’s new source set. | #### Returns[#](#returns-102) `void` #### Signature[#](#signature-90) ``` setSourceSet(id: number, property: SourceSetPropertyName, sourceSet: Source[]): void ``` * * * ### addImageFileURIToSourceSet()[#](#addimagefileuritosourceset) Adds an image file URI to a source set property. If an image with the same width already exists in the source set, it will be replaced. ``` await engine.block.addImageFileURIToSourceSet(imageFill, 'fill/image/sourceSet', 'https://example.com/sample.jpg'); ``` #### Parameters[#](#parameters-100) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `property` | [`SourceSetPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sourcesetpropertyname/) | The name of the property to modify. | | `uri` | `string` | The source to add to the source set. | #### Returns[#](#returns-103) `Promise`<`void`\> A promise that resolves when the operation is complete. #### Signature[#](#signature-91) ``` addImageFileURIToSourceSet(id: number, property: SourceSetPropertyName, uri: string): Promise ``` * * * ### addVideoFileURIToSourceSet()[#](#addvideofileuritosourceset) Adds a video file URI to a source set property. If a video with the same width already exists in the source set, it will be replaced. ``` await engine.block.addVideoFileURIToSourceSet(videoFill, 'fill/video/sourceSet', 'https://example.com/sample.mp4'); ``` #### Parameters[#](#parameters-101) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `property` | [`SourceSetPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sourcesetpropertyname/) | The name of the property to modify. | | `uri` | `string` | The source to add to the source set. | #### Returns[#](#returns-104) `Promise`<`void`\> A promise that resolves when the operation is complete. #### Signature[#](#signature-92) ``` addVideoFileURIToSourceSet(id: number, property: SourceSetPropertyName, uri: string): Promise ``` * * * ### ~hasFillColor()~[#](#hasfillcolor) Checks if a block has fill color properties. #### Parameters[#](#parameters-102) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-105) `boolean` true, if the block has fill color properties. #### Deprecated[#](#deprecated-9) Query the fill’s type using getFill() and getType() instead. * * * ### ~setFillColorRGBA()~[#](#setfillcolorrgba) Sets the fill color of a block using RGBA values. #### Parameters[#](#parameters-103) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill color should be set. | | `r` | `number` | The red color component in the range of 0 to 1. | | `g` | `number` | The green color component in the range of 0 to 1. | | `b` | `number` | The blue color component in the range of 0 to 1. | | `a?` | `number` | The alpha color component in the range of 0 to 1. | #### Returns[#](#returns-106) `void` #### Deprecated[#](#deprecated-10) Use setFillSolidColor() instead. * * * ### ~getFillColorRGBA()~[#](#getfillcolorrgba) Gets the fill color of a block as RGBA values. #### Parameters[#](#parameters-104) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill color should be queried. | #### Returns[#](#returns-107) [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) The fill color. #### Deprecated[#](#deprecated-11) Use getFillSolidColor() instead. * * * ### ~setFillColorEnabled()~[#](#setfillcolorenabled) Enables or disables the fill of a block. #### Parameters[#](#parameters-105) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill should be enabled or disabled. | | `enabled` | `boolean` | If true, the fill will be enabled. | #### Returns[#](#returns-108) `void` #### Deprecated[#](#deprecated-12) Use setFillEnabled() instead. * * * ### ~isFillColorEnabled()~[#](#isfillcolorenabled) Checks if the fill of a block is enabled. #### Parameters[#](#parameters-106) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill state should be queried. | #### Returns[#](#returns-109) `boolean` True, if fill is enabled. #### Deprecated[#](#deprecated-13) Use isFillEnabled() instead. * * * ### ~hasFill()~[#](#hasfill) Checks if a block has fill properties. #### Parameters[#](#parameters-107) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-110) `boolean` true, if the block has fill properties. #### Deprecated[#](#deprecated-14) Use supportsFill instead. * * * ### supportsFill()[#](#supportsfill) Checks if a block supports a fill. #### Parameters[#](#parameters-108) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-111) `boolean` true, if the block supports a fill. #### Signature[#](#signature-93) ``` supportsFill(id: number): boolean ``` * * * ### isFillEnabled()[#](#isfillenabled) Checks if the fill of a block is enabled. ``` engine.block.isFillEnabled(block); ``` #### Parameters[#](#parameters-109) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill state should be queried. | #### Returns[#](#returns-112) `boolean` The fill state. #### Signature[#](#signature-94) ``` isFillEnabled(id: number): boolean ``` * * * ### setFillEnabled()[#](#setfillenabled) Enables or disables the fill of a block. ``` engine.block.setFillEnabled(block, false); ``` #### Parameters[#](#parameters-110) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill should be enabled or disabled. | | `enabled` | `boolean` | If true, the fill will be enabled. | #### Returns[#](#returns-113) `void` #### Signature[#](#signature-95) ``` setFillEnabled(id: number, enabled: boolean): void ``` * * * ### getFill()[#](#getfill) Gets the fill block attached to a given block. #### Parameters[#](#parameters-111) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill block should be returned. | #### Returns[#](#returns-114) `number` The block that currently defines the given block’s fill. #### Signature[#](#signature-96) ``` getFill(id: number): number ``` * * * ### setFill()[#](#setfill) Sets the fill block for a given block. The previous fill block is not destroyed automatically. #### Parameters[#](#parameters-112) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill should be changed. | | `fill` | `number` | The new fill block. | #### Returns[#](#returns-115) `void` #### Signature[#](#signature-97) ``` setFill(id: number, fill: number): void ``` * * * ### setFillSolidColor()[#](#setfillsolidcolor) Sets the solid fill color of a block. #### Parameters[#](#parameters-113) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill color should be set. | | `r` | `number` | The red color component in the range of 0 to 1. | | `g` | `number` | The green color component in the range of 0 to 1. | | `b` | `number` | The blue color component in the range of 0 to 1. | | `a?` | `number` | The alpha color component in the range of 0 to 1. Defaults to 1. | #### Returns[#](#returns-116) `void` #### Signature[#](#signature-98) ``` setFillSolidColor(id: number, r: number, g: number, b: number, a?: number): void ``` * * * ### getFillSolidColor()[#](#getfillsolidcolor) Gets the solid fill color of a block as RGBA values. #### Parameters[#](#parameters-114) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill color should be queried. | #### Returns[#](#returns-117) [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) The fill color. #### Signature[#](#signature-99) ``` getFillSolidColor(id: number): RGBA ``` ## Block Shapes[#](#block-shapes) Create and configure shape blocks and geometric forms. ### createShape()[#](#createshape) Creates a new shape block of a given type. ``` const star = engine.block.createShape('star');// Longhand shape types are also supportedconst rect = engine.block.createShape('//ly.img.ubq/shape/rect'); ``` #### Parameters[#](#parameters-115) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`ShapeType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetype/) | The type of the shape object that shall be created. | #### Returns[#](#returns-118) `number` The created shape’s handle. #### Signature[#](#signature-100) ``` createShape(type: ShapeType): number ``` * * * ### ~hasShape()~[#](#hasshape) Checks if a block has a shape property. #### Parameters[#](#parameters-116) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-119) `boolean` true, if the block has a shape property, an error otherwise. #### Deprecated[#](#deprecated-15) Use supportsShape instead. * * * ### supportsShape()[#](#supportsshape) Checks if a block supports having a shape. #### Parameters[#](#parameters-117) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-120) `boolean` true, if the block has a shape property, an error otherwise. #### Signature[#](#signature-101) ``` supportsShape(id: number): boolean ``` * * * ### getShape()[#](#getshape) Gets the shape block attached to a given block. #### Parameters[#](#parameters-118) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose shape block should be returned. | #### Returns[#](#returns-121) `number` The block that currently defines the given block’s shape. #### Signature[#](#signature-102) ``` getShape(id: number): number ``` * * * ### setShape()[#](#setshape) Sets the shape block for a given block. Note that the previous shape block is not destroyed automatically. The new shape is disconnected from its previously attached block. #### Parameters[#](#parameters-119) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose shape should be changed. | | `shape` | `number` | The new shape. | #### Returns[#](#returns-122) `void` #### Signature[#](#signature-103) ``` setShape(id: number, shape: number): void ``` ## Block Text[#](#block-text) Create, edit, and style text content. ### replaceText()[#](#replacetext) Replaces a range of text in a text block. ``` engine.block.replaceText(text, 'Hello World');engine.block.replaceText(text, 'Alex', 6, 11); ``` #### Parameters[#](#parameters-120) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block into which to insert the given text. | | `text` | `string` | The text which should replace the selected range in the block. | | `from?` | `number` | The start index of the UTF-16 range to replace. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range to replace. Defaults to the end of the current selection or text. | #### Returns[#](#returns-123) `void` #### Signature[#](#signature-104) ``` replaceText(id: number, text: string, from?: number, to?: number): void ``` * * * ### removeText()[#](#removetext) Removes a range of text from a text block. ``` engine.block.removeText(text, 0, 6); ``` #### Parameters[#](#parameters-121) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block from which the selected text should be removed. | | `from?` | `number` | The start index of the UTF-16 range to remove. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range to remove. Defaults to the end of the current selection or text. | #### Returns[#](#returns-124) `void` #### Signature[#](#signature-105) ``` removeText(id: number, from?: number, to?: number): void ``` * * * ### setTextColor()[#](#settextcolor) Sets the color for a range of text. ``` engine.block.setTextColor(text, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 1, 4); ``` #### Parameters[#](#parameters-122) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose color should be changed. | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The new color of the selected text range. | | `from?` | `number` | The start index of the UTF-16 range to change. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range to change. Defaults to the end of the current selection or text. | #### Returns[#](#returns-125) `void` #### Signature[#](#signature-106) ``` setTextColor(id: number, color: Color, from?: number, to?: number): void ``` * * * ### getTextColors()[#](#gettextcolors) Gets the unique colors within a range of text. ``` const colorsInRange = engine.block.getTextColors(text, 2, 5); ``` #### Parameters[#](#parameters-123) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose colors should be returned. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-126) [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/)\[\] The ordered unique list of colors. #### Signature[#](#signature-107) ``` getTextColors(id: number, from?: number, to?: number): Color[] ``` * * * ### setTextFontWeight()[#](#settextfontweight) Sets the font weight for a range of text. ``` engine.block.setTextFontWeight(text, 'bold', 0, 5); ``` #### Parameters[#](#parameters-124) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose weight should be changed. | | `fontWeight` | [`FontWeight`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontweight/) | The new weight of the selected text range. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-127) `void` #### Signature[#](#signature-108) ``` setTextFontWeight(id: number, fontWeight: FontWeight, from?: number, to?: number): void ``` * * * ### getTextFontWeights()[#](#gettextfontweights) Gets the unique font weights within a range of text. ``` const fontWeights = engine.block.getTextFontWeights(text, 0, 6); ``` #### Parameters[#](#parameters-125) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font weights should be returned. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-128) [`FontWeight`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontweight/)\[\] The ordered unique list of font weights. #### Signature[#](#signature-109) ``` getTextFontWeights(id: number, from?: number, to?: number): FontWeight[] ``` * * * ### setTextFontSize()[#](#settextfontsize) Sets the font size for a range of text. ``` // With numeric fontSize (in points)engine.block.setTextFontSize(text, 12, 0, 5); // With font size and options objectengine.block.setTextFontSize(text, 16, { unit: 'Pixel' });engine.block.setTextFontSize(text, 24, { unit: 'Point', from: 0, to: 10 }); ``` ##### Parameters[#](#parameters-126) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font size should be changed. | | `fontSize` | `number` | The new font size value. | | `options?` | [`TextFontSizeOptions`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/textfontsizeoptions/) | An options object with unit, from, and to properties. | ##### Returns[#](#returns-129) `void` #### Call Signature[#](#call-signature-3) ``` setTextFontSize( id, fontSize, from?, to?): void; ``` Sets the font size for a range of text. ##### Parameters[#](#parameters-127) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font size should be changed. | | `fontSize` | `number` | The new font size in points. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | ##### Returns[#](#returns-130) `void` ##### Deprecated[#](#deprecated-16) Use the new signature with options object instead. ##### Example[#](#example-8) ``` // Before migrationengine.block.setTextFontSize(text, 18, 0, 5);// After migrationengine.block.setTextFontSize(text, 18, { from: 0, to: 5 }); ``` #### Signatures[#](#signatures-3) ``` setTextFontSize(id: number, fontSize: number, options?: TextFontSizeOptions): void ``` ``` setTextFontSize(id: number, fontSize: number, from?: number, to?: number): void ``` * * * ### getTextFontSizes()[#](#gettextfontsizes) Gets the unique font sizes within a range of text. ``` // Get all font sizesconst fontSizes = engine.block.getTextFontSizes(text); // Get font sizes for a rangeconst fontSizes = engine.block.getTextFontSizes(text, 0, 10); // With options objectconst sizesInPx = engine.block.getTextFontSizes(text, { unit: 'Pixel' });const sizesInRange = engine.block.getTextFontSizes(text, { unit: 'Millimeter', from: 5, to: 15 }); ``` ##### Parameters[#](#parameters-128) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font sizes should be returned. | | `options?` | [`TextFontSizeOptions`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/textfontsizeoptions/) | An options object with unit, from, and to properties. | ##### Returns[#](#returns-131) `number`\[\] The ordered unique list of font sizes. #### Call Signature[#](#call-signature-4) ``` getTextFontSizes( id, from?, to?): number[]; ``` Gets the unique font sizes within a range of text. ##### Parameters[#](#parameters-129) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font sizes should be returned. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | ##### Returns[#](#returns-132) `number`\[\] The ordered unique list of font sizes in points. ##### Deprecated[#](#deprecated-17) Use the new signature with options object instead. ##### Example[#](#example-9) ``` // Before migrationconst fontSizes = engine.block.getTextFontSizes(text, 0, 10);// After migrationconst fontSizes = engine.block.getTextFontSizes(text, { from: 0, to: 10 }); ``` #### Signatures[#](#signatures-4) ``` getTextFontSizes(id: number, options?: TextFontSizeOptions): number[] ``` ``` getTextFontSizes(id: number, from?: number, to?: number): number[] ``` * * * ### setTextFontStyle()[#](#settextfontstyle) Sets the font style for a range of text. ``` engine.block.setTextFontStyle(text, 'italic', 0, 5); ``` #### Parameters[#](#parameters-130) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose style should be changed. | | `fontStyle` | [`FontStyle`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontstyle/) | The new style of the selected text range. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-133) `void` #### Signature[#](#signature-110) ``` setTextFontStyle(id: number, fontStyle: FontStyle, from?: number, to?: number): void ``` * * * ### getTextFontStyles()[#](#gettextfontstyles) Gets the unique font styles within a range of text. ``` const fontStyles = engine.block.getTextFontStyles(text); ``` #### Parameters[#](#parameters-131) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font styles should be returned. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-134) [`FontStyle`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontstyle/)\[\] The ordered unique list of font styles. #### Signature[#](#signature-111) ``` getTextFontStyles(id: number, from?: number, to?: number): FontStyle[] ``` * * * ### getTextCases()[#](#gettextcases) Gets the unique text cases within a range of text. ``` const textCases = engine.block.getTextCases(text); ``` #### Parameters[#](#parameters-132) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose text cases should be returned. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-135) [`TextCase`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textcase/)\[\] The ordered list of text cases. #### Signature[#](#signature-112) ``` getTextCases(id: number, from?: number, to?: number): TextCase[] ``` * * * ### setTextCase()[#](#settextcase) Sets the text case for a range of text. ``` engine.block.setTextCase(text, 'Titlecase'); ``` #### Parameters[#](#parameters-133) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose text case should be changed. | | `textCase` | [`TextCase`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textcase/) | The new text case value. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-136) `void` #### Signature[#](#signature-113) ``` setTextCase(id: number, textCase: TextCase, from?: number, to?: number): void ``` * * * ### canToggleBoldFont()[#](#cantoggleboldfont) Checks if the bold font weight can be toggled for a range of text. Returns true if any part of the range is not bold and the bold font is available. ``` const canToggleBold = engine.block.canToggleBoldFont(text); ``` #### Parameters[#](#parameters-134) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block to check. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-137) `boolean` Whether the font weight can be toggled. #### Signature[#](#signature-114) ``` canToggleBoldFont(id: number, from?: number, to?: number): boolean ``` * * * ### canToggleItalicFont()[#](#cantoggleitalicfont) Checks if the italic font style can be toggled for a range of text. Returns true if any part of the range is not italic and the italic font is available. ``` const canToggleItalic = engine.block.canToggleItalicFont(text); ``` #### Parameters[#](#parameters-135) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block to check. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-138) `boolean` Whether the font style can be toggled. #### Signature[#](#signature-115) ``` canToggleItalicFont(id: number, from?: number, to?: number): boolean ``` * * * ### toggleBoldFont()[#](#toggleboldfont) Toggles the font weight of a text range between bold and normal. If any part of the range is not bold, the entire range becomes bold. If the entire range is already bold, it becomes normal. ``` engine.block.toggleBoldFont(text); ``` #### Parameters[#](#parameters-136) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block to modify. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-139) `void` #### Signature[#](#signature-116) ``` toggleBoldFont(id: number, from?: number, to?: number): void ``` * * * ### toggleItalicFont()[#](#toggleitalicfont) Toggles the font style of a text range between italic and normal. If any part of the range is not italic, the entire range becomes italic. If the entire range is already italic, it becomes normal. ``` engine.block.toggleItalicFont(text); ``` #### Parameters[#](#parameters-137) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block to modify. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-140) `void` #### Signature[#](#signature-117) ``` toggleItalicFont(id: number, from?: number, to?: number): void ``` * * * ### setFont()[#](#setfont) Sets the font and typeface for an entire text block. Existing formatting is reset. ``` engine.block.setFont(text, font.uri, typeface); ``` #### Parameters[#](#parameters-138) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font should be changed. | | `fontFileUri` | `string` | The URI of the new font file. | | `typeface` | [`Typeface`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/typeface/) | The typeface of the new font. | #### Returns[#](#returns-141) `void` #### Signature[#](#signature-118) ``` setFont(id: number, fontFileUri: string, typeface: Typeface): void ``` * * * ### setTypeface()[#](#settypeface) Sets the typeface for a range of text. The current formatting is retained as much as possible. ``` engine.block.setTypeface(text, typeface, 2, 5); ``` #### Parameters[#](#parameters-139) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font should be changed. | | `typeface` | [`Typeface`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/typeface/) | The new typeface. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-142) `void` #### Signature[#](#signature-119) ``` setTypeface(id: number, typeface: Typeface, from?: number, to?: number): void ``` * * * ### getTypeface()[#](#gettypeface) Gets the base typeface of a text block. This does not return the typefaces of individual text runs. ``` const defaultTypeface = engine.block.getTypeface(text); ``` #### Parameters[#](#parameters-140) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose typeface should be queried. | #### Returns[#](#returns-143) [`Typeface`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/typeface/) the typeface property of the text block. #### Signature[#](#signature-120) ``` getTypeface(id: number): Typeface ``` * * * ### getTypefaces()[#](#gettypefaces) Gets the unique typefaces within a range of text. ``` const currentTypefaces = engine.block.getTypefaces(text); ``` #### Parameters[#](#parameters-141) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose typefaces should be queried. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-144) [`Typeface`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/typeface/)\[\] The unique typefaces in the range. #### Signature[#](#signature-121) ``` getTypefaces(id: number, from?: number, to?: number): Typeface[] ``` * * * ### getTextCursorRange()[#](#gettextcursorrange) Gets the current text cursor or selection range. Returns the UTF-16 indices of the selected range of the text block that is currently being edited. ``` const selectedRange = engine.block.getTextCursorRange(); ``` #### Returns[#](#returns-145) [`Range`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/range/) The selected UTF-16 range or `{ from: -1, to: -1 }` if no text block is being edited. #### Signature[#](#signature-122) ``` getTextCursorRange(): Range_2 ``` * * * ### setTextCursorRange()[#](#settextcursorrange) Sets the text cursor range (selection) within the text block that is currently being edited. #### Parameters[#](#parameters-142) | Parameter | Type | Description | | --- | --- | --- | | `range` | [`Range`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/range/) | The UTF-16 range to set as the selection. If `from` equals `to`, the cursor is positioned at that index. If `from` and `to` are set to -1, the whole text is selected. | #### Returns[#](#returns-146) `void` #### Throws[#](#throws) Error if no text block is currently being edited or if the range is invalid. #### Signature[#](#signature-123) ``` setTextCursorRange(range: Range_2): void ``` * * * ### getTextVisibleLineCount()[#](#gettextvisiblelinecount) Gets the number of visible lines in a text block. ``` const lineCount = engine.block.getTextVisibleLineCount(text); ``` #### Parameters[#](#parameters-143) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose line count should be returned. | #### Returns[#](#returns-147) `number` The number of lines in the text block. #### Signature[#](#signature-124) ``` getTextVisibleLineCount(id: number): number ``` * * * ### getTextVisibleLineGlobalBoundingBoxXYWH()[#](#gettextvisiblelineglobalboundingboxxywh) Gets the global bounding box of a visible line of text. The values are in the scene’s global coordinate space. ``` const lineBoundingBox = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH(text, 0); ``` #### Parameters[#](#parameters-144) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose line bounding box should be returned. | | `lineIndex` | `number` | The index of the line whose bounding box should be returned. | #### Returns[#](#returns-148) [`XYWH`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/xywh/) The bounding box of the line. #### Signature[#](#signature-125) ``` getTextVisibleLineGlobalBoundingBoxXYWH(id: number, lineIndex: number): XYWH ``` * * * ### getTextVisibleLineContent()[#](#gettextvisiblelinecontent) Gets the text content of a visible line. #### Parameters[#](#parameters-145) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose line content should be returned. | | `lineIndex` | `number` | The index of the line whose content should be returned. | #### Returns[#](#returns-149) `string` The text content of the line. #### Signature[#](#signature-126) ``` getTextVisibleLineContent(id: number, lineIndex: number): string ``` ## Block Video[#](#block-video) Manage time-based media like video and audio, including playback, timing, and controls. ### createCaptionsFromURI()[#](#createcaptionsfromuri) Creates new caption blocks from an SRT or VTT file URI. #### Parameters[#](#parameters-146) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI for the captions file to load. Supported file formats are: SRT and VTT. | #### Returns[#](#returns-150) `Promise`<`number`\[\]> A promise that resolves with a list of the created caption blocks. #### Signature[#](#signature-127) ``` createCaptionsFromURI(uri: string): Promise ``` * * * ### ~hasDuration()~[#](#hasduration) Checks if a block has a duration property. #### Parameters[#](#parameters-147) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-151) `boolean` true if the block has a duration property. #### Deprecated[#](#deprecated-18) Use supportsDuration instead. * * * ### supportsDuration()[#](#supportsduration) Checks if a block supports a duration property. #### Parameters[#](#parameters-148) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-152) `boolean` true if the block supports a duration property. #### Signature[#](#signature-128) ``` supportsDuration(id: number): boolean ``` * * * ### setDuration()[#](#setduration) Sets the playback duration of a block. The duration defines how long the block is active in the scene during playback. #### Parameters[#](#parameters-149) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose duration should be changed. | | `duration` | `number` | The new duration in seconds. | #### Returns[#](#returns-153) `void` #### Signature[#](#signature-129) ``` setDuration(id: number, duration: number): void ``` * * * ### getDuration()[#](#getduration) Gets the playback duration of a block. #### Parameters[#](#parameters-150) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose duration should be returned. | #### Returns[#](#returns-154) `number` The block’s duration in seconds. #### Signature[#](#signature-130) ``` getDuration(id: number): number ``` * * * ### setPageDurationSource()[#](#setpagedurationsource) Sets a block as the page’s duration source. This causes the page’s total duration to be automatically determined by this block. #### Parameters[#](#parameters-151) | Parameter | Type | Description | | --- | --- | --- | | `page` | `number` | The page block for which it should be enabled. | | `id` | `number` | The block that should become the duration source. | #### Returns[#](#returns-155) `void` #### Signature[#](#signature-131) ``` setPageDurationSource(page: number, id: number): void ``` * * * ### isPageDurationSource()[#](#ispagedurationsource) Checks if a block is the duration source for its page. #### Parameters[#](#parameters-152) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose duration source property should be queried. | #### Returns[#](#returns-156) `boolean` true if the block is a duration source for a page. #### Signature[#](#signature-132) ``` isPageDurationSource(id: number): boolean ``` * * * ### supportsPageDurationSource()[#](#supportspagedurationsource) Checks if a block can be set as the page’s duration source. #### Parameters[#](#parameters-153) | Parameter | Type | Description | | --- | --- | --- | | `page` | `number` | The page to check against. | | `id` | `number` | The block to query. | #### Returns[#](#returns-157) `boolean` true, if the block can be marked as the page’s duration source. #### Signature[#](#signature-133) ``` supportsPageDurationSource(page: number, id: number): boolean ``` * * * ### removePageDurationSource()[#](#removepagedurationsource) Removes a block as the page’s duration source. If a scene or page is given, it is deactivated for all blocks within it. #### Parameters[#](#parameters-154) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose duration source property should be removed. | #### Returns[#](#returns-158) `void` #### Signature[#](#signature-134) ``` removePageDurationSource(id: number): void ``` * * * ### ~hasTimeOffset()~[#](#hastimeoffset) Checks if a block has a time offset property. #### Parameters[#](#parameters-155) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-159) `boolean` true, if the block has a time offset property. #### Deprecated[#](#deprecated-19) Use supportsTimeOffset instead. * * * ### supportsTimeOffset()[#](#supportstimeoffset) Checks if a block supports a time offset. #### Parameters[#](#parameters-156) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-160) `boolean` true, if the block supports a time offset. #### Signature[#](#signature-135) ``` supportsTimeOffset(id: number): boolean ``` * * * ### setTimeOffset()[#](#settimeoffset) Sets the time offset of a block relative to its parent. The time offset controls when the block first becomes active in the timeline. #### Parameters[#](#parameters-157) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose time offset should be changed. | | `offset` | `number` | The new time offset in seconds. | #### Returns[#](#returns-161) `void` #### Signature[#](#signature-136) ``` setTimeOffset(id: number, offset: number): void ``` * * * ### getTimeOffset()[#](#gettimeoffset) Gets the time offset of a block relative to its parent. #### Parameters[#](#parameters-158) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose time offset should be queried. | #### Returns[#](#returns-162) `number` The time offset of the block in seconds. #### Signature[#](#signature-137) ``` getTimeOffset(id: number): number ``` * * * ### ~hasTrim()~[#](#hastrim) Checks if a block has trim properties. #### Parameters[#](#parameters-159) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-163) `boolean` true, if the block has trim properties. #### Deprecated[#](#deprecated-20) Use supportsTrim instead. * * * ### supportsTrim()[#](#supportstrim) Checks if a block supports trim properties. #### Parameters[#](#parameters-160) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-164) `boolean` true, if the block supports trim properties. #### Signature[#](#signature-138) ``` supportsTrim(id: number): boolean ``` * * * ### setTrimOffset()[#](#settrimoffset) Sets the trim offset of a block’s media content. This sets the time within the media clip where playback should begin. #### Parameters[#](#parameters-161) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose trim should be updated. | | `offset` | `number` | The new trim offset, measured in timeline seconds (scaled by playback rate). | #### Returns[#](#returns-165) `void` #### Signature[#](#signature-139) ``` setTrimOffset(id: number, offset: number): void ``` * * * ### getTrimOffset()[#](#gettrimoffset) Gets the trim offset of a block’s media content. #### Parameters[#](#parameters-162) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose trim offset should be queried. | #### Returns[#](#returns-166) `number` the trim offset in seconds. #### Signature[#](#signature-140) ``` getTrimOffset(id: number): number ``` * * * ### setTrimLength()[#](#settrimlength) Sets the trim length of a block’s media content. This is the duration of the media clip that should be used for playback. #### Parameters[#](#parameters-163) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The object whose trim length should be updated. | | `length` | `number` | The new trim length in seconds. | #### Returns[#](#returns-167) `void` #### Signature[#](#signature-141) ``` setTrimLength(id: number, length: number): void ``` * * * ### getTrimLength()[#](#gettrimlength) Gets the trim length of a block’s media content. #### Parameters[#](#parameters-164) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The object whose trim length should be queried. | #### Returns[#](#returns-168) `number` The trim length of the object in seconds. #### Signature[#](#signature-142) ``` getTrimLength(id: number): number ``` * * * ### ~getTotalSceneDuration()~[#](#gettotalsceneduration) Gets the total duration of a scene in video mode. #### Parameters[#](#parameters-165) | Parameter | Type | Description | | --- | --- | --- | | `scene` | `number` | The scene whose duration is being queried. | #### Returns[#](#returns-169) `number` the total scene duration. #### Deprecated[#](#deprecated-21) Use `getDuration` and pass a page block. * * * ### setPlaying()[#](#setplaying) Sets whether a block should play its content during active playback. #### Parameters[#](#parameters-166) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should be updated. | | `enabled` | `boolean` | Whether the block should be playing its contents. | #### Returns[#](#returns-170) `void` #### Signature[#](#signature-143) ``` setPlaying(id: number, enabled: boolean): void ``` * * * ### isPlaying()[#](#isplaying) Checks if a block is playing its content. #### Parameters[#](#parameters-167) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-171) `boolean` whether the block is playing during playback. #### Signature[#](#signature-144) ``` isPlaying(id: number): boolean ``` * * * ### ~hasPlaybackTime()~[#](#hasplaybacktime) Checks if a block has a playback time property. #### Parameters[#](#parameters-168) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-172) `boolean` whether the block has a playback time property. #### Deprecated[#](#deprecated-22) Use supportsPlaybackTime instead. * * * ### supportsPlaybackTime()[#](#supportsplaybacktime) Checks if a block supports a playback time property. #### Parameters[#](#parameters-169) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-173) `boolean` whether the block supports a playback time property. #### Signature[#](#signature-145) ``` supportsPlaybackTime(id: number): boolean ``` * * * ### setPlaybackTime()[#](#setplaybacktime) Sets the current playback time of a block’s content. #### Parameters[#](#parameters-170) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose playback time should be updated. | | `time` | `number` | The new playback time of the block in seconds. | #### Returns[#](#returns-174) `void` #### Signature[#](#signature-146) ``` setPlaybackTime(id: number, time: number): void ``` * * * ### getPlaybackTime()[#](#getplaybacktime) Gets the current playback time of a block’s content. #### Parameters[#](#parameters-171) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-175) `number` The playback time of the block in seconds. #### Signature[#](#signature-147) ``` getPlaybackTime(id: number): number ``` * * * ### setSoloPlaybackEnabled()[#](#setsoloplaybackenabled) Enables or disables solo playback for a block. When enabled, only this block’s content will play while the rest of the scene remains paused. ``` engine.block.setSoloPlaybackEnabled(videoFill, true); ``` #### Parameters[#](#parameters-172) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or fill to update. | | `enabled` | `boolean` | Whether solo playback should be enabled. | #### Returns[#](#returns-176) `void` #### Signature[#](#signature-148) ``` setSoloPlaybackEnabled(id: number, enabled: boolean): void ``` * * * ### isSoloPlaybackEnabled()[#](#issoloplaybackenabled) Checks if solo playback is enabled for a block. ``` engine.block.isSoloPlaybackEnabled(videoFill); ``` #### Parameters[#](#parameters-173) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or fill to query. | #### Returns[#](#returns-177) `boolean` Whether solo playback is enabled for this block. #### Signature[#](#signature-149) ``` isSoloPlaybackEnabled(id: number): boolean ``` * * * ### ~hasPlaybackControl()~[#](#hasplaybackcontrol) Checks if a block has playback controls. #### Parameters[#](#parameters-174) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-178) `boolean` Whether the block has playback control. #### Deprecated[#](#deprecated-23) Use supportsPlaybackControl instead * * * ### supportsPlaybackControl()[#](#supportsplaybackcontrol) Checks if a block supports playback controls. #### Parameters[#](#parameters-175) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-179) `boolean` Whether the block supports playback control. #### Signature[#](#signature-150) ``` supportsPlaybackControl(id: number): boolean ``` * * * ### setLooping()[#](#setlooping) Sets whether a block’s media content should loop. #### Parameters[#](#parameters-176) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or video fill to update. | | `looping` | `boolean` | Whether the block should loop to the beginning or stop. | #### Returns[#](#returns-180) `void` #### Signature[#](#signature-151) ``` setLooping(id: number, looping: boolean): void ``` * * * ### isLooping()[#](#islooping) Checks if a block’s media content is set to loop. #### Parameters[#](#parameters-177) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-181) `boolean` Whether the block is looping. #### Signature[#](#signature-152) ``` isLooping(id: number): boolean ``` * * * ### setMuted()[#](#setmuted) Sets whether the audio of a block is muted. #### Parameters[#](#parameters-178) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or video fill to update. | | `muted` | `boolean` | Whether the audio should be muted. | #### Returns[#](#returns-182) `void` #### Signature[#](#signature-153) ``` setMuted(id: number, muted: boolean): void ``` * * * ### isForceMuted()[#](#isforcemuted) Checks if a block’s audio is muted due to engine rules. #### Parameters[#](#parameters-179) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-183) `boolean` Whether the block is force muted. #### Signature[#](#signature-154) ``` isForceMuted(id: number): boolean ``` * * * ### isMuted()[#](#ismuted) Checks if a block’s audio is muted. #### Parameters[#](#parameters-180) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-184) `boolean` Whether the block is muted. #### Signature[#](#signature-155) ``` isMuted(id: number): boolean ``` * * * ### setVolume()[#](#setvolume) Sets the audio volume of a block. #### Parameters[#](#parameters-181) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or video fill to update. | | `volume` | `number` | The desired volume, ranging from 0.0 to 1.0. | #### Returns[#](#returns-185) `void` #### Signature[#](#signature-156) ``` setVolume(id: number, volume: number): void ``` * * * ### getVolume()[#](#getvolume) Gets the audio volume of a block. #### Parameters[#](#parameters-182) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-186) `number` The volume, ranging from 0.0 to 1.0. #### Signature[#](#signature-157) ``` getVolume(id: number): number ``` * * * ### setPlaybackSpeed()[#](#setplaybackspeed) Sets the playback speed multiplier of a block that supports playback control. Note: This also adjusts the trim and duration of the block. Video fills running faster than 3.0x are force muted until reduced to 3.0x or below. #### Parameters[#](#parameters-183) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or video fill to update. | | `speed` | `number` | The desired playback speed multiplier. Valid range is \[0.25, 3.0\] for audio blocks and \[0.25, infinity) for video fills. | #### Returns[#](#returns-187) `void` #### Signature[#](#signature-158) ``` setPlaybackSpeed(id: number, speed: number): void ``` * * * ### getPlaybackSpeed()[#](#getplaybackspeed) Gets the playback speed multiplier of a block that supports playback control. #### Parameters[#](#parameters-184) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-188) `number` The playback speed multiplier. #### Signature[#](#signature-159) ``` getPlaybackSpeed(id: number): number ``` * * * ### forceLoadAVResource()[#](#forceloadavresource) Forces the loading of a block’s audio/video resource. If the resource failed to load previously, it will be reloaded. #### Parameters[#](#parameters-185) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill or audio block whose resource should be loaded. | #### Returns[#](#returns-189) `Promise`<`void`\> A Promise that resolves once the resource has finished loading. #### Signature[#](#signature-160) ``` forceLoadAVResource(id: number): Promise ``` * * * ### unstable\_isAVResourceLoaded()[#](#unstable_isavresourceloaded) Checks if a block’s audio/video resource is loaded. #### Parameters[#](#parameters-186) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill or audio block. | #### Returns[#](#returns-190) `boolean` The loading state of the resource. This API is experimental and may change or be removed in future versions. * * * ### getAVResourceTotalDuration()[#](#getavresourcetotalduration) Gets the total duration of a block’s audio/video resource. #### Parameters[#](#parameters-187) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill or audio block. | #### Returns[#](#returns-191) `number` The video or audio file duration in seconds. #### Signature[#](#signature-161) ``` getAVResourceTotalDuration(id: number): number ``` * * * ### getVideoWidth()[#](#getvideowidth) Gets the width of a block’s video resource. #### Parameters[#](#parameters-188) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill block. | #### Returns[#](#returns-192) `number` The video width in pixels. #### Signature[#](#signature-162) ``` getVideoWidth(id: number): number ``` * * * ### getVideoHeight()[#](#getvideoheight) Gets the height of a block’s video resource. #### Parameters[#](#parameters-189) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill block. | #### Returns[#](#returns-193) `number` The video height in pixels. #### Signature[#](#signature-163) ``` getVideoHeight(id: number): number ``` * * * ### generateVideoThumbnailSequence()[#](#generatevideothumbnailsequence) Generate a sequence of thumbnails for the given video fill or design block. Note: There can only be one thumbnail generation request in progress for a given block. Note: During playback, the thumbnail generation will be paused. #### Parameters[#](#parameters-190) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill or design block. | | `thumbnailHeight` | `number` | The height of each thumbnail. | | `timeBegin` | `number` | The start time in seconds for the thumbnail sequence. | | `timeEnd` | `number` | The end time in seconds for the thumbnail sequence. | | `numberOfFrames` | `number` | The number of frames to generate. | | `onFrame` | (`frameIndex`, `result`) => `void` | A callback that receives the frame index and image data. | #### Returns[#](#returns-194) A function to cancel the thumbnail generation request. ``` (): void; ``` ##### Returns[#](#returns-195) `void` #### Signature[#](#signature-164) ``` generateVideoThumbnailSequence(id: number, thumbnailHeight: number, timeBegin: number, timeEnd: number, numberOfFrames: number, onFrame: (frameIndex: number, result: ImageData | Error) => void): () => void ``` * * * ### generateAudioThumbnailSequence()[#](#generateaudiothumbnailsequence) Generate a thumbnail sequence for the given audio block or video fill. A thumbnail in this case is a chunk of samples in the range of 0 to 1. In case stereo data is requested, the samples are interleaved, starting with the left channel. Note: During playback, the thumbnail generation will be paused. #### Parameters[#](#parameters-191) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The audio block or video fill. | | `samplesPerChunk` | `number` | The number of samples per chunk. | | `timeBegin` | `number` | The start time in seconds for the thumbnail sequence. | | `timeEnd` | `number` | The end time in seconds for the thumbnail sequence. | | `numberOfSamples` | `number` | The total number of samples to generate. | | `numberOfChannels` | `number` | The number of channels in the output (1 for mono, 2 for stereo). | | `onChunk` | (`chunkIndex`, `result`) => `void` | A callback that receives the chunk index and sample data. | #### Returns[#](#returns-196) A function to cancel the thumbnail generation request. ``` (): void; ``` ##### Returns[#](#returns-197) `void` #### Signature[#](#signature-165) ``` generateAudioThumbnailSequence(id: number, samplesPerChunk: number, timeBegin: number, timeEnd: number, numberOfSamples: number, numberOfChannels: number, onChunk: (chunkIndex: number, result: Error | Float32Array) => void): () => void ``` * * * ### ~getVideoFillThumbnail()~[#](#getvideofillthumbnail) Generates a thumbnail for a video fill. #### Parameters[#](#parameters-192) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill. | | `thumbnailHeight` | `number` | The height of a thumbnail. The width will be calculated from the video aspect ratio. | #### Returns[#](#returns-198) `Promise`<`Blob`\> A promise that resolves with a thumbnail encoded as a JPEG blob. #### Deprecated[#](#deprecated-24) Use `generateVideoThumbnailSequence` instead. * * * ### ~getVideoFillThumbnailAtlas()~[#](#getvideofillthumbnailatlas) Generates a thumbnail atlas for a video fill. #### Parameters[#](#parameters-193) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill. | | `numberOfColumns` | `number` | The number of columns in the atlas. | | `numberOfRows` | `number` | The number of rows in the atlas. | | `thumbnailHeight` | `number` | The height of a single thumbnail. | #### Returns[#](#returns-199) `Promise`<`Blob`\> A promise that resolves with a thumbnail atlas encoded as a JPEG blob. #### Deprecated[#](#deprecated-25) Use `generateVideoThumbnailSequence` instead. * * * ### ~getPageThumbnailAtlas()~[#](#getpagethumbnailatlas) Generates a thumbnail atlas for a page. #### Parameters[#](#parameters-194) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The page. | | `numberOfColumns` | `number` | The number of columns in the atlas. | | `numberOfRows` | `number` | The number of rows in the atlas. | | `thumbnailHeight` | `number` | The height of a single thumbnail. | #### Returns[#](#returns-200) `Promise`<`Blob`\> A promise that resolves with a thumbnail atlas encoded as a JPEG blob. #### Deprecated[#](#deprecated-26) Use `generateVideoThumbnailSequence` instead. * * * ### setNativePixelBuffer()[#](#setnativepixelbuffer) Updates a pixel stream fill block with a new pixel buffer. #### Parameters[#](#parameters-195) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The pixel stream fill block. | | `buffer` | `HTMLCanvasElement` | `HTMLVideoElement` | #### Returns[#](#returns-201) `void` #### Signature[#](#signature-166) ``` setNativePixelBuffer(id: number, buffer: HTMLCanvasElement | HTMLVideoElement): void ``` ## Block Animations[#](#block-animations) Create and manage animations and timeline-based effects. ### createAnimation()[#](#createanimation) Creates a new animation block. #### Parameters[#](#parameters-196) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`AnimationType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtype/) | The type of animation to create. | #### Returns[#](#returns-202) `number` The handle of the new animation instance. #### Signature[#](#signature-167) ``` createAnimation(type: AnimationType): number ``` * * * ### supportsAnimation()[#](#supportsanimation) Checks if a block supports animation. #### Parameters[#](#parameters-197) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-203) `boolean` Whether the block supports animation. #### Signature[#](#signature-168) ``` supportsAnimation(id: number): boolean ``` * * * ### setInAnimation()[#](#setinanimation) Sets the “in” animation of a block. #### Parameters[#](#parameters-198) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “in” animation should be set. | | `animation` | `number` | The animation to set. | #### Returns[#](#returns-204) `void` #### Signature[#](#signature-169) ``` setInAnimation(id: number, animation: number): void ``` * * * ### setLoopAnimation()[#](#setloopanimation) Sets the “loop” animation of a block. #### Parameters[#](#parameters-199) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “loop” animation should be set. | | `animation` | `number` | The animation to set. | #### Returns[#](#returns-205) `void` #### Signature[#](#signature-170) ``` setLoopAnimation(id: number, animation: number): void ``` * * * ### setOutAnimation()[#](#setoutanimation) Sets the “out” animation of a block. #### Parameters[#](#parameters-200) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “out” animation should be set. | | `animation` | `number` | The animation to set. | #### Returns[#](#returns-206) `void` #### Signature[#](#signature-171) ``` setOutAnimation(id: number, animation: number): void ``` * * * ### getInAnimation()[#](#getinanimation) Gets the “in” animation of a block. #### Parameters[#](#parameters-201) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “in” animation should be queried. | #### Returns[#](#returns-207) `number` The “in” animation of the block. #### Signature[#](#signature-172) ``` getInAnimation(id: number): number ``` * * * ### getLoopAnimation()[#](#getloopanimation) Gets the “loop” animation of a block. #### Parameters[#](#parameters-202) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “loop” animation should be queried. | #### Returns[#](#returns-208) `number` The “loop” animation of the block. #### Signature[#](#signature-173) ``` getLoopAnimation(id: number): number ``` * * * ### getOutAnimation()[#](#getoutanimation) Gets the “out” animation of a block. #### Parameters[#](#parameters-203) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “out” animation should be queried. | #### Returns[#](#returns-209) `number` The “out” animation of the block. #### Signature[#](#signature-174) ``` getOutAnimation(id: number): number ``` ## Block Groups[#](#block-groups) Create and manage groups of blocks. ### isGroupable()[#](#isgroupable) Checks if a set of blocks can be grouped. A scene block or a block that is already part of a group cannot be grouped. ``` const groupable = engine.block.isGroupable([block1, block2]) ``` #### Parameters[#](#parameters-204) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | An array of block ids. | #### Returns[#](#returns-210) `boolean` Whether the blocks can be grouped together. #### Signature[#](#signature-175) ``` isGroupable(ids: number[]): boolean ``` * * * ### group()[#](#group) Groups multiple blocks into a new group block. ``` if (engine.block.isGroupable([block1, block2])) { const group = engine.block.group(block1, block2]);} ``` #### Parameters[#](#parameters-205) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A non-empty array of block ids. | #### Returns[#](#returns-211) `number` The block id of the created group. #### Signature[#](#signature-176) ``` group(ids: number[]): number ``` * * * ### ungroup()[#](#ungroup) Ungroups a group block, releasing its children. ``` engine.block.ungroup(group); ``` #### Parameters[#](#parameters-206) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The group id from a previous call to `group`. | #### Returns[#](#returns-212) `void` #### Signature[#](#signature-177) ``` ungroup(id: number): void ``` * * * ### enterGroup()[#](#entergroup) Changes selection to a block within a selected group. Nothing happens if the target is not a group. ``` engine.block.enterGroup(group); ``` #### Parameters[#](#parameters-207) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The group id from a previous call to `group`. | #### Returns[#](#returns-213) `void` #### Signature[#](#signature-178) ``` enterGroup(id: number): void ``` * * * ### exitGroup()[#](#exitgroup) Changes selection from a block to its parent group. Nothing happens if the block is not part of a group. ``` engine.block.exitGroup(member1); ``` #### Parameters[#](#parameters-208) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | A block id. | #### Returns[#](#returns-214) `void` #### Signature[#](#signature-179) ``` exitGroup(id: number): void ``` ## Block State[#](#block-state) Query the intrinsic state or identity of a block, such as its name, UUID, or lock status. ### getType()[#](#gettype) Gets the longhand type of a given block. #### Parameters[#](#parameters-209) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-215) [`ObjectTypeLonghand`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttypelonghand/) The block’s type. #### Signature[#](#signature-180) ``` getType(id: number): ObjectTypeLonghand ``` * * * ### setName()[#](#setname) Sets the name of a block. #### Parameters[#](#parameters-210) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `name` | `string` | The name to set. | #### Returns[#](#returns-216) `void` #### Signature[#](#signature-181) ``` setName(id: number, name: string): void ``` * * * ### getName()[#](#getname) Gets the name of a block. #### Parameters[#](#parameters-211) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-217) `string` The block’s name. #### Signature[#](#signature-182) ``` getName(id: number): string ``` * * * ### getUUID()[#](#getuuid) Gets the unique universal identifier (UUID) of a block. #### Parameters[#](#parameters-212) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-218) `string` The block’s UUID. #### Signature[#](#signature-183) ``` getUUID(id: number): string ``` * * * ### isValid()[#](#isvalid) Checks if a block handle is valid. A block becomes invalid once it has been destroyed. #### Parameters[#](#parameters-213) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-219) `boolean` True, if the block is valid. #### Signature[#](#signature-184) ``` isValid(id: number): boolean ``` * * * ### referencesAnyVariables()[#](#referencesanyvariables) Checks if a block references any variables. This check does not recurse into children. #### Parameters[#](#parameters-214) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to inspect. | #### Returns[#](#returns-220) `boolean` true if the block references variables and false otherwise. #### Signature[#](#signature-185) ``` referencesAnyVariables(id: number): boolean ``` * * * ### isIncludedInExport()[#](#isincludedinexport) Checks if a block is included in exports. #### Parameters[#](#parameters-215) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-221) `boolean` true, if the block is included on the exported result, false otherwise. #### Signature[#](#signature-186) ``` isIncludedInExport(id: number): boolean ``` * * * ### setIncludedInExport()[#](#setincludedinexport) Sets whether a block should be included in exports. #### Parameters[#](#parameters-216) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose exportable state should be set. | | `enabled` | `boolean` | If true, the block will be included on the exported result. | #### Returns[#](#returns-222) `void` #### Signature[#](#signature-187) ``` setIncludedInExport(id: number, enabled: boolean): void ``` * * * ### isVisibleAtCurrentPlaybackTime()[#](#isvisibleatcurrentplaybacktime) Checks if a block is visible at the current scene playback time. #### Parameters[#](#parameters-217) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-223) `boolean` Whether the block should be visible on the canvas at the current playback time. #### Signature[#](#signature-188) ``` isVisibleAtCurrentPlaybackTime(id: number): boolean ``` * * * ### getState()[#](#getstate) Gets the current state of a block. A block’s state is determined by its own state and that of its shape, fill, and effects. ``` const state = engine.block.getState(block); ``` #### Parameters[#](#parameters-218) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-224) [`BlockState`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockstate/) The block’s state: ‘Ready’, ‘Pending’, or ‘Error’. #### Signature[#](#signature-189) ``` getState(id: number): BlockState ``` * * * ### setState()[#](#setstate) Sets the state of a block. ``` engine.block.setState(video, {type: 'Pending', progress: 0.5});engine.block.setState(page, {type: 'Ready'});engine.block.setState(image, {type: 'Error', error: 'ImageDecoding'}); ``` #### Parameters[#](#parameters-219) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose state should be set. | | `state` | [`BlockState`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockstate/) | The new state to set. | #### Returns[#](#returns-225) `void` #### Signature[#](#signature-190) ``` setState(id: number, state: BlockState): void ``` ## Block Crop[#](#block-crop) Crop, scale, translate, and transform block content. ### ~hasCrop()~[#](#hascrop) Checks if a block has crop properties. #### Parameters[#](#parameters-220) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-226) `boolean` true, if the block has crop properties. #### Deprecated[#](#deprecated-27) Use supportsCrop() instead. * * * ### supportsCrop()[#](#supportscrop) Checks if a block supports cropping. ``` engine.block.supportsCrop(image); ``` #### Parameters[#](#parameters-221) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-227) `boolean` true, if the block supports cropping. #### Signature[#](#signature-191) ``` supportsCrop(id: number): boolean ``` * * * ### setCropScaleX()[#](#setcropscalex) Sets the horizontal crop scale of a block. ``` engine.block.setCropScaleX(image, 2.0); ``` #### Parameters[#](#parameters-222) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `scaleX` | `number` | The scale in x direction. | #### Returns[#](#returns-228) `void` #### Signature[#](#signature-192) ``` setCropScaleX(id: number, scaleX: number): void ``` * * * ### setCropScaleY()[#](#setcropscaley) Sets the vertical crop scale of a block. ``` engine.block.setCropScaleY(image, 1.5); ``` #### Parameters[#](#parameters-223) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `scaleY` | `number` | The scale in y direction. | #### Returns[#](#returns-229) `void` #### Signature[#](#signature-193) ``` setCropScaleY(id: number, scaleY: number): void ``` * * * ### setCropRotation()[#](#setcroprotation) Sets the crop rotation of a block in radians. ``` engine.block.setCropRotation(image, Math.PI); ``` #### Parameters[#](#parameters-224) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `rotation` | `number` | The rotation in radians. | #### Returns[#](#returns-230) `void` #### Signature[#](#signature-194) ``` setCropRotation(id: number, rotation: number): void ``` * * * ### setCropScaleRatio()[#](#setcropscaleratio) Sets the uniform crop scale ratio of a block. This scales the content up or down from the center of the crop frame. ``` engine.block.setCropScaleRatio(image, 3.0); ``` #### Parameters[#](#parameters-225) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `scaleRatio` | `number` | The crop scale ratio. | #### Returns[#](#returns-231) `void` #### Signature[#](#signature-195) ``` setCropScaleRatio(id: number, scaleRatio: number): void ``` * * * ### setCropTranslationX()[#](#setcroptranslationx) Sets the horizontal crop translation of a block in percentage of the crop frame width. ``` engine.block.setCropTranslationX(image, -1.0); ``` #### Parameters[#](#parameters-226) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `translationX` | `number` | The translation in x direction. | #### Returns[#](#returns-232) `void` #### Signature[#](#signature-196) ``` setCropTranslationX(id: number, translationX: number): void ``` * * * ### setCropTranslationY()[#](#setcroptranslationy) Sets the vertical crop translation of a block in percentage of the crop frame height. ``` engine.block.setCropTranslationY(image, 1.0); ``` #### Parameters[#](#parameters-227) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `translationY` | `number` | The translation in y direction. | #### Returns[#](#returns-233) `void` #### Signature[#](#signature-197) ``` setCropTranslationY(id: number, translationY: number): void ``` * * * ### resetCrop()[#](#resetcrop) Resets the crop of a block to its default state. The block’s content fill mode is set to ‘Cover’. ``` engine.block.resetCrop(image); ``` #### Parameters[#](#parameters-228) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be reset. | #### Returns[#](#returns-234) `void` #### Signature[#](#signature-198) ``` resetCrop(id: number): void ``` * * * ### getCropScaleX()[#](#getcropscalex) Gets the horizontal crop scale of a block. ``` const scaleX = engine.block.getCropScaleX(image); ``` #### Parameters[#](#parameters-229) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose scale should be queried. | #### Returns[#](#returns-235) `number` The scale on the x axis. #### Signature[#](#signature-199) ``` getCropScaleX(id: number): number ``` * * * ### getCropScaleY()[#](#getcropscaley) Gets the vertical crop scale of a block. ``` const scaleY = engine.block.getCropScaleY(image); ``` #### Parameters[#](#parameters-230) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose scale should be queried. | #### Returns[#](#returns-236) `number` The scale on the y axis. #### Signature[#](#signature-200) ``` getCropScaleY(id: number): number ``` * * * ### getCropRotation()[#](#getcroprotation) Gets the crop rotation of a block in radians. ``` const cropRotation = engine.block.getCropRotation(image); ``` #### Parameters[#](#parameters-231) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop rotation should be queried. | #### Returns[#](#returns-237) `number` The crop rotation in radians. #### Signature[#](#signature-201) ``` getCropRotation(id: number): number ``` * * * ### getCropScaleRatio()[#](#getcropscaleratio) Gets the uniform crop scale ratio of a block. ``` const cropScaleRatio = engine.block.getCropScaleRatio(image); ``` #### Parameters[#](#parameters-232) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop scale ratio should be queried. | #### Returns[#](#returns-238) `number` The crop scale ratio. #### Signature[#](#signature-202) ``` getCropScaleRatio(id: number): number ``` * * * ### getCropTranslationX()[#](#getcroptranslationx) Gets the horizontal crop translation of a block in percentage of the crop frame width. ``` const cropTranslationX = engine.block.getCropTranslationX(image); ``` #### Parameters[#](#parameters-233) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose translation should be queried. | #### Returns[#](#returns-239) `number` The translation on the x axis. #### Signature[#](#signature-203) ``` getCropTranslationX(id: number): number ``` * * * ### getCropTranslationY()[#](#getcroptranslationy) Gets the vertical crop translation of a block in percentage of the crop frame height. ``` const cropTranslationY = engine.block.getCropTranslationY(image); ``` #### Parameters[#](#parameters-234) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose translation should be queried. | #### Returns[#](#returns-240) `number` The translation on the y axis. #### Signature[#](#signature-204) ``` getCropTranslationY(id: number): number ``` * * * ### adjustCropToFillFrame()[#](#adjustcroptofillframe) Adjusts the crop position and scale of the given image block to fill its crop frame, while maintaining the position and size of the crop frame. ``` const adjustedScaleRatio = engine.block.adjustCropToFillFrame(image, 1.0); ``` #### Parameters[#](#parameters-235) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be adjusted. | | `minScaleRatio` | `number` | The minimal crop scale ratio to use. | #### Returns[#](#returns-241) `number` The adjusted scale ratio. #### Signature[#](#signature-205) ``` adjustCropToFillFrame(id: number, minScaleRatio: number): number ``` * * * ### flipCropHorizontal()[#](#flipcrophorizontal) Flips the content horizontally within its crop frame. ``` engine.block.flipCropHorizontal(image); ``` #### Parameters[#](#parameters-236) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be updated. | #### Returns[#](#returns-242) `void` #### Signature[#](#signature-206) ``` flipCropHorizontal(id: number): void ``` * * * ### flipCropVertical()[#](#flipcropvertical) Flips the content vertically within its crop frame. ``` engine.block.flipCropVertical(image); ``` #### Parameters[#](#parameters-237) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be updated. | #### Returns[#](#returns-243) `void` #### Signature[#](#signature-207) ``` flipCropVertical(id: number): void ``` * * * ### isCropAspectRatioLocked()[#](#iscropaspectratiolocked) Checks if the crop aspect ratio is locked for a block. When locked, crop handles will maintain the current aspect ratio during resize. ``` const isLocked = engine.block.isCropAspectRatioLocked(block); ``` #### Parameters[#](#parameters-238) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-244) `boolean` True if aspect ratio is locked, false otherwise. #### Signature[#](#signature-208) ``` isCropAspectRatioLocked(id: number): boolean ``` * * * ### setCropAspectRatioLocked()[#](#setcropaspectratiolocked) Sets whether the crop aspect ratio should be locked for a block. When enabled, crop handles will maintain the current aspect ratio. When disabled, free resizing is allowed. ``` engine.block.setCropAspectRatioLocked(block, true); ``` #### Parameters[#](#parameters-239) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `locked` | `boolean` | Whether aspect ratio should be locked. | #### Returns[#](#returns-245) `void` #### Signature[#](#signature-209) ``` setCropAspectRatioLocked(id: number, locked: boolean): void ``` ## Block Events[#](#block-events) Subscribe to user actions and state changes related to blocks. ### onSelectionChanged()[#](#onselectionchanged) Subscribes to changes in the selection. #### Parameters[#](#parameters-240) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | This function is called at the end of the engine update if the selection has changed. | #### Returns[#](#returns-246) A method to unsubscribe. ``` (): void; ``` ##### Returns[#](#returns-247) `void` * * * ### onClicked()[#](#onclicked) Subscribes to block click events. #### Parameters[#](#parameters-241) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`id`) => `void` | This function is called at the end of the engine update if a block has been clicked. | #### Returns[#](#returns-248) A method to unsubscribe. ``` (): void; ``` ##### Returns[#](#returns-249) `void` * * * ### onStateChanged()[#](#onstatechanged) Subscribes to state changes for a set of blocks. The state is determined by the block and its associated shape, fill, and effects. ``` const unsubscribe = engine.block.onStateChanged([], (blocks) => { blocks.forEach(block => console.log(block));}); ``` #### Parameters[#](#parameters-242) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A list of block IDs to monitor. If empty, all blocks are monitored. | | `callback` | (`ids`) => `void` | The function to call when a state changes. | #### Returns[#](#returns-250) A function to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-251) `void` ## Block Utils[#](#block-utils) Check block capabilities like alignability or distributability. ### isAlignable()[#](#isalignable) Checks if a set of blocks can be aligned. #### Parameters[#](#parameters-243) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | An array of block ids. | #### Returns[#](#returns-252) `boolean` Whether the blocks can be aligned. #### Signature[#](#signature-210) ``` isAlignable(ids: number[]): boolean ``` * * * ### isDistributable()[#](#isdistributable) Checks if a set of blocks can be distributed. #### Parameters[#](#parameters-244) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | An array of block ids. | #### Returns[#](#returns-253) `boolean` Whether the blocks can be distributed. #### Signature[#](#signature-211) ``` isDistributable(ids: number[]): boolean ``` ## Block Kind[#](#block-kind) Get and set a block’s ‘kind’ identifier for custom categorization. ### getKind()[#](#getkind) Gets the kind of a given block. ``` const kind = engine.block.getKind(block); ``` #### Parameters[#](#parameters-245) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-254) `string` The block’s kind. #### Signature[#](#signature-212) ``` getKind(id: number): string ``` * * * ### setKind()[#](#setkind) Sets the kind of a given block, a custom string for categorization of blocks. ``` engine.block.setKind(text, 'title'); ``` #### Parameters[#](#parameters-246) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose kind should be changed. | | `kind` | `string` | The new kind. | #### Returns[#](#returns-255) `void` #### Signature[#](#signature-213) ``` setKind(id: number, kind: string): void ``` ## Block Properties[#](#block-properties) Get and set any block property by name using low-level, generic accessors. ### findAllProperties()[#](#findallproperties) Gets all available properties of a block. #### Parameters[#](#parameters-247) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose properties should be queried. | #### Returns[#](#returns-256) `string`\[\] A list of the property names. #### Signature[#](#signature-214) ``` findAllProperties(id: number): string[] ``` * * * ### isPropertyReadable()[#](#ispropertyreadable) Checks if a property is readable. #### Parameters[#](#parameters-248) | Parameter | Type | Description | | --- | --- | --- | | `property` | `string` | The name of the property to check. | #### Returns[#](#returns-257) `boolean` Whether the property is readable. Returns false for unknown properties. #### Signature[#](#signature-215) ``` isPropertyReadable(property: string): boolean ``` * * * ### isPropertyWritable()[#](#ispropertywritable) Checks if a property is writable. #### Parameters[#](#parameters-249) | Parameter | Type | Description | | --- | --- | --- | | `property` | `string` | The name of the property to check. | #### Returns[#](#returns-258) `boolean` Whether the property is writable. Returns false for unknown properties. #### Signature[#](#signature-216) ``` isPropertyWritable(property: string): boolean ``` * * * ### getPropertyType()[#](#getpropertytype) Gets the type of a property by its name. #### Parameters[#](#parameters-250) | Parameter | Type | Description | | --- | --- | --- | | `property` | `string` | The name of the property whose type should be queried. | #### Returns[#](#returns-259) [`PropertyType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/propertytype/) The property type. #### Signature[#](#signature-217) ``` getPropertyType(property: string): PropertyType ``` * * * ### getEnumValues()[#](#getenumvalues) Gets all possible values of an enum property. #### Type Parameters[#](#type-parameters) | Type Parameter | Default type | | --- | --- | | `T` | `string` | #### Parameters[#](#parameters-251) | Parameter | Type | Description | | --- | --- | --- | | `enumProperty` | `string` | The name of the property whose enum values should be queried. | #### Returns[#](#returns-260) `T`\[\] A list of the enum value names as a string array. #### Signature[#](#signature-218) ``` getEnumValues(enumProperty: string): T[] ``` * * * ### setBool()[#](#setbool) Sets a boolean property on a block. ``` engine.block.setBool(scene, 'scene/aspectRatioLock', false); ``` #### Parameters[#](#parameters-252) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | [`BoolPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/boolpropertyname/) | The name of the property to set. | | `value` | `boolean` | The value to set. | #### Returns[#](#returns-261) `void` #### Signature[#](#signature-219) ``` setBool(id: number, property: BoolPropertyName, value: boolean): void ``` * * * ### getBool()[#](#getbool) Gets a boolean property from a block. ``` engine.block.getBool(scene, 'scene/aspectRatioLock'); ``` #### Parameters[#](#parameters-253) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | [`BoolPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/boolpropertyname/) | The name of the property to query. | #### Returns[#](#returns-262) `boolean` The value of the property. #### Signature[#](#signature-220) ``` getBool(id: number, property: BoolPropertyName): boolean ``` * * * ### setInt()[#](#setint) Sets an integer property on a block. ``` engine.block.setInt(starShape, 'shape/star/points', points + 2); ``` #### Parameters[#](#parameters-254) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | [`IntPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/intpropertyname/) | The name of the property to set. | | `value` | `number` | The value to set. | #### Returns[#](#returns-263) `void` #### Signature[#](#signature-221) ``` setInt(id: number, property: IntPropertyName, value: number): void ``` * * * ### getInt()[#](#getint) Gets an integer property from a block. ``` engine.block.setInt(starShape, 'shape/star/points', points + 2); ``` #### Parameters[#](#parameters-255) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | [`IntPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/intpropertyname/) | The name of the property to query. | #### Returns[#](#returns-264) `number` The value of the property. #### Signature[#](#signature-222) ``` getInt(id: number, property: IntPropertyName): number ``` * * * ### setFloat()[#](#setfloat) Sets a float property on a block. ``` engine.block.setFloat(text, "text/letterSpacing", 0.2);engine.block.setFloat(text, "text/lineHeight", 1.2); ``` #### Parameters[#](#parameters-256) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | [`FloatPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/floatpropertyname/) | The name of the property to set. | | `value` | `number` | The value to set. | #### Returns[#](#returns-265) `void` #### Signature[#](#signature-223) ``` setFloat(id: number, property: FloatPropertyName, value: number): void ``` * * * ### getFloat()[#](#getfloat) Gets a float property from a block. ``` engine.block.getFloat(starShape, 'shape/star/innerDiameter'); ``` #### Parameters[#](#parameters-257) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | [`FloatPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/floatpropertyname/) | The name of the property to query. | #### Returns[#](#returns-266) `number` The value of the property. #### Signature[#](#signature-224) ``` getFloat(id: number, property: FloatPropertyName): number ``` * * * ### setDouble()[#](#setdouble) Sets a double-precision float property on a block. ``` engine.block.setDouble(audio, 'playback/duration', 1.0); ``` #### Parameters[#](#parameters-258) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | [`DoublePropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/doublepropertyname/) | The name of the property to set. | | `value` | `number` | The value to set. | #### Returns[#](#returns-267) `void` #### Signature[#](#signature-225) ``` setDouble(id: number, property: DoublePropertyName, value: number): void ``` * * * ### getDouble()[#](#getdouble) Gets a double-precision float property from a block. ``` engine.block.getDouble(audio, 'playback/duration'); ``` #### Parameters[#](#parameters-259) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | [`DoublePropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/doublepropertyname/) | The name of the property to query. | #### Returns[#](#returns-268) `number` The value of the property. #### Signature[#](#signature-226) ``` getDouble(id: number, property: DoublePropertyName): number ``` * * * ### setString()[#](#setstring) Sets a string property on a block. ``` engine.block.setString(text, 'text/text', 'Hello World');engine.block.setString(imageFill, 'fill/image/imageFileURI', 'https://example.com/sample.jpg'); ``` #### Parameters[#](#parameters-260) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | [`StringPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/stringpropertyname/) | The name of the property to set. | | `value` | `string` | The value to set. | #### Returns[#](#returns-269) `void` #### Signature[#](#signature-227) ``` setString(id: number, property: StringPropertyName, value: string): void ``` * * * ### getString()[#](#getstring) Gets a string property from a block. ``` engine.block.getString(text, 'text/text');engine.block.getString(imageFill, 'fill/image/imageFileURI'); ``` #### Parameters[#](#parameters-261) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | [`StringPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/stringpropertyname/) | The name of the property to query. | #### Returns[#](#returns-270) `string` The value of the property. #### Signature[#](#signature-228) ``` getString(id: number, property: StringPropertyName): string ``` * * * ### setColor()[#](#setcolor) Sets a color property on a block. ``` // Set the block's fill color to white.engine.block.setColor(colorFill, 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); ``` #### Parameters[#](#parameters-262) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | [`ColorPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/colorpropertyname/) | The name of the property to set. | | `value` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The value to set. | #### Returns[#](#returns-271) `void` #### Signature[#](#signature-229) ``` setColor(id: number, property: ColorPropertyName, value: Color): void ``` * * * ### getColor()[#](#getcolor) Gets a color property from a block. ``` engine.block.getColor(colorFill, 'fill/color/value'); ``` #### Parameters[#](#parameters-263) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | [`ColorPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/colorpropertyname/) | The name of the property to query. | #### Returns[#](#returns-272) [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) The value of the property. #### Signature[#](#signature-230) ``` getColor(id: number, property: ColorPropertyName): Color ``` * * * ### ~setColorRGBA()~[#](#setcolorrgba) Sets a color property on a block using RGBA values. #### Parameters[#](#parameters-264) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `string` | The name of the property to set. | | `r` | `number` | The red color component in the range of 0 to 1. | | `g` | `number` | The green color component in the range of 0 to 1. | | `b` | `number` | The blue color component in the range of 0 to 1. | | `a?` | `number` | The alpha color component in the range of 0 to 1. Defaults to 1. | #### Returns[#](#returns-273) `void` #### Deprecated[#](#deprecated-28) Use setColor() instead. * * * ### ~getColorRGBA()~[#](#getcolorrgba) Gets a color property from a block as RGBA values. #### Parameters[#](#parameters-265) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns[#](#returns-274) [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) A tuple of channels red, green, blue and alpha in the range of 0 to 1. #### Deprecated[#](#deprecated-29) Use getColor() instead. * * * ### ~setColorSpot()~[#](#setcolorspot) Sets a spot color property on a block. #### Parameters[#](#parameters-266) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `string` | The name of the property to set. | | `name` | `string` | The name of the spot color. | | `tint?` | `number` | The tint factor in the range of 0 to 1. Defaults to 1. | #### Returns[#](#returns-275) `void` #### Deprecated[#](#deprecated-30) Use setColor() instead. * * * ### ~getColorSpotName()~[#](#getcolorspotname) Gets the spot color name from a color property. #### Parameters[#](#parameters-267) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns[#](#returns-276) `string` The name of the spot color. #### Deprecated[#](#deprecated-31) Use getColor() instead. * * * ### ~getColorSpotTint()~[#](#getcolorspottint) Gets the spot color tint from a color property. #### Parameters[#](#parameters-268) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns[#](#returns-277) `number` The tint factor of the spot color. #### Deprecated[#](#deprecated-32) Use getColor() instead. * * * ### setEnum()[#](#setenum) Sets an enum property on a block. ``` engine.block.setEnum(text, 'text/horizontalAlignment', 'Center');engine.block.setEnum(text, 'text/verticalAlignment', 'Center'); ``` ##### Type Parameters[#](#type-parameters-1) | Type Parameter | | --- | | `T` _extends_ keyof [`BlockEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockenumtype/) | ##### Parameters[#](#parameters-269) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `T` | The name of the property to set. | | `value` | [`BlockEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockenumtype/)\[`T`\] | The enum value as a string. | ##### Returns[#](#returns-278) `void` #### Call Signature[#](#call-signature-5) ``` setEnum( id, property, value): void; ``` Sets an enum property on a block. ``` engine.block.setEnum(text, 'text/horizontalAlignment', 'Center');engine.block.setEnum(text, 'text/verticalAlignment', 'Center'); ``` ##### Parameters[#](#parameters-270) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `string` | The name of the property to set. | | `value` | `string` | The enum value as a string. | ##### Returns[#](#returns-279) `void` #### Signatures[#](#signatures-5) ``` setEnum(id: number, property: T, value: BlockEnumType[T]): void ``` ``` setEnum(id: number, property: string, value: string): void ``` * * * ### getEnum()[#](#getenum) Gets an enum property from a block. ``` engine.block.getEnum(text, 'text/horizontalAlignment');engine.block.getEnum(text, 'text/verticalAlignment'); ``` ##### Type Parameters[#](#type-parameters-2) | Type Parameter | | --- | | `T` _extends_ keyof [`BlockEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockenumtype/) | ##### Parameters[#](#parameters-271) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `T` | The name of the property to query. | ##### Returns[#](#returns-280) [`BlockEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockenumtype/)\[`T`\] The value as a string. #### Call Signature[#](#call-signature-6) ``` getEnum(id, property): string; ``` Gets an enum property from a block. ``` engine.block.getEnum(text, 'text/horizontalAlignment');engine.block.getEnum(text, 'text/verticalAlignment'); ``` ##### Parameters[#](#parameters-272) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | ##### Returns[#](#returns-281) `string` The value as a string. #### Signatures[#](#signatures-6) ``` getEnum(id: number, property: T): BlockEnumType[T] ``` ``` getEnum(id: number, property: string): string ``` ## Block Strokes[#](#block-strokes) Control stroke appearance, including color, width, style, and position. ### ~hasStroke()~[#](#hasstroke) Checks if a block has a stroke property. #### Parameters[#](#parameters-273) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-282) `boolean` True if the block has a stroke property. #### Deprecated[#](#deprecated-33) Use supportsStroke() instead. * * * ### supportsStroke()[#](#supportsstroke) Checks if a block supports a stroke. #### Parameters[#](#parameters-274) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-283) `boolean` True if the block supports a stroke. #### Signature[#](#signature-231) ``` supportsStroke(id: number): boolean ``` * * * ### setStrokeEnabled()[#](#setstrokeenabled) Enables or disables the stroke of a block. ``` engine.block.setStrokeEnabled(block, true); ``` #### Parameters[#](#parameters-275) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke should be enabled or disabled. | | `enabled` | `boolean` | If true, the stroke will be enabled. | #### Returns[#](#returns-284) `void` #### Signature[#](#signature-232) ``` setStrokeEnabled(id: number, enabled: boolean): void ``` * * * ### isStrokeEnabled()[#](#isstrokeenabled) Checks if the stroke of a block is enabled. ``` const strokeIsEnabled = engine.block.isStrokeEnabled(block); ``` #### Parameters[#](#parameters-276) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke state should be queried. | #### Returns[#](#returns-285) `boolean` True if the block’s stroke is enabled. #### Signature[#](#signature-233) ``` isStrokeEnabled(id: number): boolean ``` * * * ### ~setStrokeColorRGBA()~[#](#setstrokecolorrgba) Sets the stroke color of a block using RGBA values. #### Parameters[#](#parameters-277) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke color should be set. | | `r` | `number` | The red color component in the range of 0 to 1. | | `g` | `number` | The green color component in the range of 0 to 1. | | `b` | `number` | The blue color component in the range of 0 to 1. | | `a?` | `number` | The alpha color component in the range of 0 to 1. | #### Returns[#](#returns-286) `void` #### Deprecated[#](#deprecated-34) Use setStrokeColor() instead. * * * ### setStrokeColor()[#](#setstrokecolor) Sets the stroke color of a block. #### Parameters[#](#parameters-278) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke color should be set. | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color to set. | #### Returns[#](#returns-287) `void` #### Signature[#](#signature-234) ``` setStrokeColor(id: number, color: Color): void ``` * * * ### ~getStrokeColorRGBA()~[#](#getstrokecolorrgba) Gets the stroke color of a block as RGBA values. #### Parameters[#](#parameters-279) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke color should be queried. | #### Returns[#](#returns-288) [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) The stroke color. #### Deprecated[#](#deprecated-35) Use getStrokeColor() instead. * * * ### getStrokeColor()[#](#getstrokecolor) Gets the stroke color of a block. #### Parameters[#](#parameters-280) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke color should be queried. | #### Returns[#](#returns-289) [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) The stroke color. #### Signature[#](#signature-235) ``` getStrokeColor(id: number): Color ``` * * * ### setStrokeWidth()[#](#setstrokewidth) Sets the stroke width of a block. #### Parameters[#](#parameters-281) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke width should be set. | | `width` | `number` | The stroke width to be set. | #### Returns[#](#returns-290) `void` #### Signature[#](#signature-236) ``` setStrokeWidth(id: number, width: number): void ``` * * * ### getStrokeWidth()[#](#getstrokewidth) Gets the stroke width of a block. #### Parameters[#](#parameters-282) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke width should be queried. | #### Returns[#](#returns-291) `number` The stroke’s width. #### Signature[#](#signature-237) ``` getStrokeWidth(id: number): number ``` * * * ### setStrokeStyle()[#](#setstrokestyle) Sets the stroke style of a block. #### Parameters[#](#parameters-283) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke style should be set. | | `style` | | `"Dashed"` | #### Returns[#](#returns-292) `void` #### Signature[#](#signature-238) ``` setStrokeStyle(id: number, style: "Dashed" | "DashedRound" | "Dotted" | "LongDashed" | "LongDashedRound" | "Solid"): void ``` * * * ### getStrokeStyle()[#](#getstrokestyle) Gets the stroke style of a block. #### Parameters[#](#parameters-284) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke style should be queried. | #### Returns[#](#returns-293) | `"Dashed"` | `"DashedRound"` | `"Dotted"` | `"LongDashed"` | `"LongDashedRound"` | `"Solid"` The stroke’s style. #### Signature[#](#signature-239) ``` getStrokeStyle(id: number): "Dashed" | "DashedRound" | "Dotted" | "LongDashed" | "LongDashedRound" | "Solid" ``` * * * ### setStrokePosition()[#](#setstrokeposition) Sets the stroke position of a block. #### Parameters[#](#parameters-285) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke position should be set. | | `position` | `"Center"` | `"Inner"` | #### Returns[#](#returns-294) `void` #### Signature[#](#signature-240) ``` setStrokePosition(id: number, position: "Center" | "Inner" | "Outer"): void ``` * * * ### getStrokePosition()[#](#getstrokeposition) Gets the stroke position of a block. #### Parameters[#](#parameters-286) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke position should be queried. | #### Returns[#](#returns-295) `"Center"` | `"Inner"` | `"Outer"` The stroke position. #### Signature[#](#signature-241) ``` getStrokePosition(id: number): "Center" | "Inner" | "Outer" ``` * * * ### setStrokeCornerGeometry()[#](#setstrokecornergeometry) Sets the stroke corner geometry of a block. #### Parameters[#](#parameters-287) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke corner geometry should be set. | | `cornerGeometry` | `"Bevel"` | `"Miter"` | #### Returns[#](#returns-296) `void` #### Signature[#](#signature-242) ``` setStrokeCornerGeometry(id: number, cornerGeometry: "Bevel" | "Miter" | "Round"): void ``` * * * ### getStrokeCornerGeometry()[#](#getstrokecornergeometry) Gets the stroke corner geometry of a block. #### Parameters[#](#parameters-288) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke corner geometry should be queried. | #### Returns[#](#returns-297) `"Bevel"` | `"Miter"` | `"Round"` The stroke corner geometry. #### Signature[#](#signature-243) ``` getStrokeCornerGeometry(id: number): "Bevel" | "Miter" | "Round" ``` ## Block Drop Shadow[#](#block-drop-shadow) Configure drop shadow effects, including blur, color, and offset. ### ~hasDropShadow()~[#](#hasdropshadow) Checks if a block has a drop shadow property. #### Parameters[#](#parameters-289) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-298) `boolean` True if the block has a drop shadow property. #### Deprecated[#](#deprecated-36) Use supportsDropShadow() instead. * * * ### supportsDropShadow()[#](#supportsdropshadow) Checks if a block supports a drop shadow. #### Parameters[#](#parameters-290) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-299) `boolean` True if the block supports a drop shadow. #### Signature[#](#signature-244) ``` supportsDropShadow(id: number): boolean ``` * * * ### setDropShadowEnabled()[#](#setdropshadowenabled) Enables or disables the drop shadow of a block. ``` engine.block.setDropShadowEnabled(block, true); ``` #### Parameters[#](#parameters-291) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow should be enabled or disabled. | | `enabled` | `boolean` | If true, the drop shadow will be enabled. | #### Returns[#](#returns-300) `void` #### Signature[#](#signature-245) ``` setDropShadowEnabled(id: number, enabled: boolean): void ``` * * * ### isDropShadowEnabled()[#](#isdropshadowenabled) Checks if the drop shadow of a block is enabled. ``` const dropShadowIsEnabled = engine.block.isDropShadowEnabled(block); ``` #### Parameters[#](#parameters-292) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow state should be queried. | #### Returns[#](#returns-301) `boolean` True if the block’s drop shadow is enabled. #### Signature[#](#signature-246) ``` isDropShadowEnabled(id: number): boolean ``` * * * ### ~setDropShadowColorRGBA()~[#](#setdropshadowcolorrgba) Sets the drop shadow color of a block using RGBA values. #### Parameters[#](#parameters-293) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow color should be set. | | `r` | `number` | The red color component in the range of 0 to 1. | | `g` | `number` | The green color component in the range of 0 to 1. | | `b` | `number` | The blue color component in the range of 0 to 1. | | `a?` | `number` | The alpha color component in the range of 0 to 1. | #### Returns[#](#returns-302) `void` #### Deprecated[#](#deprecated-37) Use setDropShadowColor() instead. * * * ### setDropShadowColor()[#](#setdropshadowcolor) Sets the drop shadow color of a block. #### Parameters[#](#parameters-294) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow color should be set. | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The color to set. | #### Returns[#](#returns-303) `void` #### Signature[#](#signature-247) ``` setDropShadowColor(id: number, color: Color): void ``` * * * ### ~getDropShadowColorRGBA()~[#](#getdropshadowcolorrgba) Gets the drop shadow color of a block as RGBA values. #### Parameters[#](#parameters-295) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow color should be queried. | #### Returns[#](#returns-304) [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) The drop shadow color. #### Deprecated[#](#deprecated-38) Use getDropShadowColor instead. * * * ### getDropShadowColor()[#](#getdropshadowcolor) Gets the drop shadow color of a block. #### Parameters[#](#parameters-296) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow color should be queried. | #### Returns[#](#returns-305) [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) The drop shadow color. #### Signature[#](#signature-248) ``` getDropShadowColor(id: number): Color ``` * * * ### setDropShadowOffsetX()[#](#setdropshadowoffsetx) Sets the drop shadow’s horizontal offset. #### Parameters[#](#parameters-297) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s X offset should be set. | | `offsetX` | `number` | The X offset to be set. | #### Returns[#](#returns-306) `void` #### Signature[#](#signature-249) ``` setDropShadowOffsetX(id: number, offsetX: number): void ``` * * * ### getDropShadowOffsetX()[#](#getdropshadowoffsetx) Gets the drop shadow’s horizontal offset. #### Parameters[#](#parameters-298) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s X offset should be queried. | #### Returns[#](#returns-307) `number` The offset. #### Signature[#](#signature-250) ``` getDropShadowOffsetX(id: number): number ``` * * * ### setDropShadowOffsetY()[#](#setdropshadowoffsety) Sets the drop shadow’s vertical offset. #### Parameters[#](#parameters-299) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s Y offset should be set. | | `offsetY` | `number` | The Y offset to be set. | #### Returns[#](#returns-308) `void` #### Signature[#](#signature-251) ``` setDropShadowOffsetY(id: number, offsetY: number): void ``` * * * ### getDropShadowOffsetY()[#](#getdropshadowoffsety) Gets the drop shadow’s vertical offset. #### Parameters[#](#parameters-300) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s Y offset should be queried. | #### Returns[#](#returns-309) `number` The offset. #### Signature[#](#signature-252) ``` getDropShadowOffsetY(id: number): number ``` * * * ### setDropShadowBlurRadiusX()[#](#setdropshadowblurradiusx) Sets the drop shadow’s horizontal blur radius. #### Parameters[#](#parameters-301) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s blur radius should be set. | | `blurRadiusX` | `number` | The blur radius to be set. | #### Returns[#](#returns-310) `void` #### Signature[#](#signature-253) ``` setDropShadowBlurRadiusX(id: number, blurRadiusX: number): void ``` * * * ### getDropShadowBlurRadiusX()[#](#getdropshadowblurradiusx) Gets the drop shadow’s horizontal blur radius. #### Parameters[#](#parameters-302) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s blur radius should be queried. | #### Returns[#](#returns-311) `number` The blur radius. #### Signature[#](#signature-254) ``` getDropShadowBlurRadiusX(id: number): number ``` * * * ### setDropShadowBlurRadiusY()[#](#setdropshadowblurradiusy) Sets the drop shadow’s vertical blur radius. #### Parameters[#](#parameters-303) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s blur radius should be set. | | `blurRadiusY` | `number` | The blur radius to be set. | #### Returns[#](#returns-312) `void` #### Signature[#](#signature-255) ``` setDropShadowBlurRadiusY(id: number, blurRadiusY: number): void ``` * * * ### getDropShadowBlurRadiusY()[#](#getdropshadowblurradiusy) Gets the drop shadow’s vertical blur radius. #### Parameters[#](#parameters-304) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s blur radius should be queried. | #### Returns[#](#returns-313) `number` The blur radius. #### Signature[#](#signature-256) ``` getDropShadowBlurRadiusY(id: number): number ``` * * * ### setDropShadowClip()[#](#setdropshadowclip) Sets the drop shadow’s clipping behavior. This only applies to shapes. #### Parameters[#](#parameters-305) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s clip should be set. | | `clip` | `boolean` | The drop shadow’s clip to be set. | #### Returns[#](#returns-314) `void` #### Signature[#](#signature-257) ``` setDropShadowClip(id: number, clip: boolean): void ``` * * * ### getDropShadowClip()[#](#getdropshadowclip) Gets the drop shadow’s clipping behavior. #### Parameters[#](#parameters-306) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s clipping should be queried. | #### Returns[#](#returns-315) `boolean` The drop shadow’s clipping state. #### Signature[#](#signature-258) ``` getDropShadowClip(id: number): boolean ``` ## Block Effects[#](#block-effects) Create, manage, and apply various visual effects to blocks. ### createEffect()[#](#createeffect) Creates a new effect block. #### Parameters[#](#parameters-307) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`EffectType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttype/) | The type of the effect. | #### Returns[#](#returns-316) `number` The created effect’s handle. #### Signature[#](#signature-259) ``` createEffect(type: EffectType): number ``` * * * ### ~hasEffects()~[#](#haseffects) Checks if a block supports effects. #### Parameters[#](#parameters-308) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-317) `boolean` True, if the block can render effects, false otherwise. #### Deprecated[#](#deprecated-39) Use supportsEffects instead. * * * ### supportsEffects()[#](#supportseffects) Checks if a block supports effects. #### Parameters[#](#parameters-309) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-318) `boolean` True, if the block can render effects, false otherwise. #### Signature[#](#signature-260) ``` supportsEffects(id: number): boolean ``` * * * ### getEffects()[#](#geteffects) Gets all effects attached to a block. #### Parameters[#](#parameters-310) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-319) `number`\[\] A list of effects or an error, if the block doesn’t support effects. #### Signature[#](#signature-261) ``` getEffects(id: number): number[] ``` * * * ### insertEffect()[#](#inserteffect) Inserts an effect into a block’s effect list at a given index. #### Parameters[#](#parameters-311) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `effectId` | `number` | The effect to insert. | | `index` | `number` | The index at which the effect shall be inserted. | #### Returns[#](#returns-320) `void` #### Signature[#](#signature-262) ``` insertEffect(id: number, effectId: number, index: number): void ``` * * * ### appendEffect()[#](#appendeffect) Appends an effect to a block’s effect list. #### Parameters[#](#parameters-312) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to append the effect to. | | `effectId` | `number` | The effect to append. | #### Returns[#](#returns-321) `void` #### Signature[#](#signature-263) ``` appendEffect(id: number, effectId: number): void ``` * * * ### removeEffect()[#](#removeeffect) Removes an effect from a block’s effect list at a given index. #### Parameters[#](#parameters-313) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to remove the effect from. | | `index` | `number` | The index where the effect is stored. | #### Returns[#](#returns-322) `void` #### Signature[#](#signature-264) ``` removeEffect(id: number, index: number): void ``` * * * ### ~hasEffectEnabled()~[#](#haseffectenabled) Checks if an effect block can be enabled or disabled. #### Parameters[#](#parameters-314) | Parameter | Type | Description | | --- | --- | --- | | `effectId` | `number` | The ‘effect’ block to query. | #### Returns[#](#returns-323) `boolean` True, if the block supports enabling and disabling, false otherwise. #### Deprecated[#](#deprecated-40) Calls to this function can be removed. All effects can be enabled and disabled. * * * ### setEffectEnabled()[#](#seteffectenabled) Sets the enabled state of an effect block. ``` engine.block.setEffectEnabled(effects[0], false); ``` #### Parameters[#](#parameters-315) | Parameter | Type | Description | | --- | --- | --- | | `effectId` | `number` | The ‘effect’ block to update. | | `enabled` | `boolean` | The new state. | #### Returns[#](#returns-324) `void` #### Signature[#](#signature-265) ``` setEffectEnabled(effectId: number, enabled: boolean): void ``` * * * ### isEffectEnabled()[#](#iseffectenabled) Queries if an effect block is enabled. ``` engine.block.isEffectEnabled(effects[0]); ``` #### Parameters[#](#parameters-316) | Parameter | Type | Description | | --- | --- | --- | | `effectId` | `number` | The ‘effect’ block to query. | #### Returns[#](#returns-325) `boolean` True, if the effect is enabled. False otherwise. #### Signature[#](#signature-266) ``` isEffectEnabled(effectId: number): boolean ``` ## Block Blur[#](#block-blur) Apply and configure blur effects on blocks. ### createBlur()[#](#createblur) Creates a new blur block. #### Parameters[#](#parameters-317) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`BlurType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtype/) | The type of blur. | #### Returns[#](#returns-326) `number` The handle of the newly created blur. #### Signature[#](#signature-267) ``` createBlur(type: BlurType): number ``` * * * ### ~hasBlur()~[#](#hasblur) Checks if a block supports blur. #### Parameters[#](#parameters-318) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-327) `boolean` True, if the block supports blur. #### Deprecated[#](#deprecated-41) Use supportsBlur instead. * * * ### supportsBlur()[#](#supportsblur) Checks if a block supports blur. #### Parameters[#](#parameters-319) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-328) `boolean` True, if the block supports blur. #### Signature[#](#signature-268) ``` supportsBlur(id: number): boolean ``` * * * ### setBlur()[#](#setblur) Sets the blur effect for a block. #### Parameters[#](#parameters-320) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `blurId` | `number` | A ‘blur’ block to apply. | #### Returns[#](#returns-329) `void` #### Signature[#](#signature-269) ``` setBlur(id: number, blurId: number): void ``` * * * ### getBlur()[#](#getblur) Gets the blur block of a given design block. #### Parameters[#](#parameters-321) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-330) `number` The ‘blur’ block. #### Signature[#](#signature-270) ``` getBlur(id: number): number ``` * * * ### setBlurEnabled()[#](#setblurenabled) Enables or disables the blur effect on a block. ``` engine.block.setBlurEnabled(block, true); ``` #### Parameters[#](#parameters-322) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `enabled` | `boolean` | The new enabled value. | #### Returns[#](#returns-331) `void` #### Signature[#](#signature-271) ``` setBlurEnabled(id: number, enabled: boolean): void ``` * * * ### isBlurEnabled()[#](#isblurenabled) Checks if blur is enabled for a block. ``` const isBlurEnabled = engine.block.isBlurEnabled(block); ``` #### Parameters[#](#parameters-323) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-332) `boolean` True, if the blur is enabled. False otherwise. #### Signature[#](#signature-272) ``` isBlurEnabled(id: number): boolean ``` ## Block Placeholder[#](#block-placeholder) Manage placeholder functionality, controls, and behavior. ### setPlaceholderEnabled()[#](#setplaceholderenabled) Enables or disables the placeholder function for a block. When set to `true`, the given block becomes selectable by users and its placeholder capabilities are enabled in Adopter mode. ``` engine.block.setPlaceholderEnabled(block, true); ``` #### Parameters[#](#parameters-324) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder function should be enabled or disabled. | | `enabled` | `boolean` | Whether the function should be enabled or disabled. | #### Returns[#](#returns-333) `void` #### Signature[#](#signature-273) ``` setPlaceholderEnabled(id: number, enabled: boolean): void ``` * * * ### isPlaceholderEnabled()[#](#isplaceholderenabled) Checks if the placeholder function for a block is enabled and can be selected by users in Adopter mode. ``` const placeholderIsEnabled = engine.block.isPlaceholderEnabled(block); ``` #### Parameters[#](#parameters-325) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder function state should be queried. | #### Returns[#](#returns-334) `boolean` The enabled state of the placeholder function. #### Signature[#](#signature-274) ``` isPlaceholderEnabled(id: number): boolean ``` * * * ### ~hasPlaceholderBehavior()~[#](#hasplaceholderbehavior) Checks if a block supports placeholder behavior. #### Parameters[#](#parameters-326) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-335) `boolean` True, if the block supports placeholder behavior. #### Deprecated[#](#deprecated-42) Use supportsPlaceholderBehavior instead. * * * ### supportsPlaceholderBehavior()[#](#supportsplaceholderbehavior) Checks if a block supports placeholder behavior. ``` const placeholderBehaviorSupported = engine.block.supportsPlaceholderBehavior(block); ``` #### Parameters[#](#parameters-327) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-336) `boolean` True, if the block supports placeholder behavior. #### Signature[#](#signature-275) ``` supportsPlaceholderBehavior(id: number): boolean ``` * * * ### setPlaceholderBehaviorEnabled()[#](#setplaceholderbehaviorenabled) Enables or disables the placeholder behavior for a block. When its fill block is set to `true`, an image block will act as a placeholder, showing a control overlay and a replacement button. ``` engine.block.setPlaceholderBehaviorEnabled(block, true); ``` #### Parameters[#](#parameters-328) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder behavior should be enabled or disabled. | | `enabled` | `boolean` | Whether the placeholder behavior should be enabled or disabled. | #### Returns[#](#returns-337) `void` #### Signature[#](#signature-276) ``` setPlaceholderBehaviorEnabled(id: number, enabled: boolean): void ``` * * * ### isPlaceholderBehaviorEnabled()[#](#isplaceholderbehaviorenabled) Checks if the placeholder behavior for a block is enabled. ``` engine.block.setPlaceholderBehaviorEnabled(block, true); ``` #### Parameters[#](#parameters-329) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder behavior state should be queried. | #### Returns[#](#returns-338) `boolean` The enabled state of the placeholder behavior. #### Signature[#](#signature-277) ``` isPlaceholderBehaviorEnabled(id: number): boolean ``` * * * ### ~hasPlaceholderControls()~[#](#hasplaceholdercontrols) Checks if a block supports placeholder controls. #### Parameters[#](#parameters-330) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-339) `boolean` True, if the block supports placeholder controls. #### Deprecated[#](#deprecated-43) Use supportsPlaceholderControls instead. * * * ### supportsPlaceholderControls()[#](#supportsplaceholdercontrols) Checks if a block supports placeholder controls, e.g. a control overlay and a replacement button. #### Parameters[#](#parameters-331) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-340) `boolean` True, if the block supports placeholder controls. #### Signature[#](#signature-278) ``` supportsPlaceholderControls(id: number): boolean ``` * * * ### setPlaceholderControlsOverlayEnabled()[#](#setplaceholdercontrolsoverlayenabled) Enables or disables the placeholder overlay pattern. ``` engine.block.setPlaceholderControlsOverlayEnabled(block, true); ``` #### Parameters[#](#parameters-332) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder overlay should be enabled or disabled. | | `enabled` | `boolean` | Whether the placeholder overlay should be shown or not. | #### Returns[#](#returns-341) `void` #### Signature[#](#signature-279) ``` setPlaceholderControlsOverlayEnabled(id: number, enabled: boolean): void ``` * * * ### isPlaceholderControlsOverlayEnabled()[#](#isplaceholdercontrolsoverlayenabled) Checks if the placeholder overlay pattern is enabled. ``` const overlayEnabled = engine.block.isPlaceholderControlsOverlayEnabled(block); ``` #### Parameters[#](#parameters-333) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder overlay visibility state should be queried. | #### Returns[#](#returns-342) `boolean` The visibility state of the block’s placeholder overlay pattern. #### Signature[#](#signature-280) ``` isPlaceholderControlsOverlayEnabled(id: number): boolean ``` * * * ### setPlaceholderControlsButtonEnabled()[#](#setplaceholdercontrolsbuttonenabled) Enables or disables the placeholder button. ``` engine.block.setPlaceholderControlsButtonEnabled(block, true); ``` #### Parameters[#](#parameters-334) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder button should be shown or not. | | `enabled` | `boolean` | Whether the placeholder button should be shown or not. | #### Returns[#](#returns-343) `void` #### Signature[#](#signature-281) ``` setPlaceholderControlsButtonEnabled(id: number, enabled: boolean): void ``` * * * ### isPlaceholderControlsButtonEnabled()[#](#isplaceholdercontrolsbuttonenabled) Checks if the placeholder button is enabled. ``` const buttonEnabled = engine.block.isPlaceholderControlsButtonEnabled(block); ``` #### Parameters[#](#parameters-335) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder button visibility state should be queried. | #### Returns[#](#returns-344) `boolean` The visibility state of the block’s placeholder button. #### Signature[#](#signature-282) ``` isPlaceholderControlsButtonEnabled(id: number): boolean ``` ## Block Scopes[#](#block-scopes) Manage permissions and capabilities per block. ### setScopeEnabled()[#](#setscopeenabled) Enables or disables a scope for a block. ``` // Allow the user to move the image block.engine.block.setScopeEnabled(image, 'layer/move', true); ``` #### Parameters[#](#parameters-336) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose scope should be enabled or disabled. | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/) | The scope to enable or disable. | | `enabled` | `boolean` | Whether the scope should be enabled or disabled. | #### Returns[#](#returns-345) `void` #### Signature[#](#signature-283) ``` setScopeEnabled(id: number, key: Scope, enabled: boolean): void ``` * * * ### isScopeEnabled()[#](#isscopeenabled) Checks if a scope is enabled for a block. ``` engine.block.isScopeEnabled(image, 'layer/move'); ``` #### Parameters[#](#parameters-337) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose scope state should be queried. | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/) | The scope to query. | #### Returns[#](#returns-346) `boolean` The enabled state of the scope for the given block. #### Signature[#](#signature-284) ``` isScopeEnabled(id: number, key: Scope): boolean ``` * * * ### isAllowedByScope()[#](#isallowedbyscope) Checks if an operation is allowed by a block’s scopes. ``` // This will return true when the global scope is set to 'Defer'.engine.block.isAllowedByScope(image, 'layer/move'); ``` #### Parameters[#](#parameters-338) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to check. | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/) | The scope to check. | #### Returns[#](#returns-347) `boolean` Whether the scope is allowed for the given block. #### Signature[#](#signature-285) ``` isAllowedByScope(id: number, key: Scope): boolean ``` ## Block Boolean Operations[#](#block-boolean-operations) Combine multiple blocks into a single new block using boolean path operations. ### isCombinable()[#](#iscombinable) Checks if a set of blocks can be combined using a boolean operation. Only graphics blocks and text blocks can be combined. All blocks must have the “lifecycle/duplicate” scope enabled. #### Parameters[#](#parameters-339) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | An array of block ids. | #### Returns[#](#returns-348) `boolean` Whether the blocks can be combined. #### Signature[#](#signature-286) ``` isCombinable(ids: number[]): boolean ``` * * * ### combine()[#](#combine) Performs a boolean operation on a set of blocks. All blocks must be combinable. See `isCombinable`. The parent, fill and sort order of the new block is that of the prioritized block. #### Parameters[#](#parameters-340) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The blocks to combine. They will be destroyed if “lifecycle/destroy” scope is enabled. | | `op` | [`BooleanOperation`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/booleanoperation/) | The boolean operation to perform. | #### Returns[#](#returns-349) `number` The newly created block or an error. #### Signature[#](#signature-287) ``` combine(ids: number[], op: BooleanOperation): number ``` ## Block Cutout[#](#block-cutout) Create cutout operations and path-based modifications. ### createCutoutFromBlocks()[#](#createcutoutfromblocks) Creates a cutout block from the contours of other blocks. The path is derived from either existing vector paths or by vectorizing the block’s appearance. #### Parameters[#](#parameters-341) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The blocks whose shape will serve as the basis for the cutout’s path. | | `vectorizeDistanceThreshold?` | `number` | Max deviation from the original contour during vectorization. | | `simplifyDistanceThreshold?` | `number` | Max deviation for path simplification. 0 disables simplification. | | `useExistingShapeInformation?` | `boolean` | If true, use existing vector paths. | #### Returns[#](#returns-350) `number` The newly created block or an error. #### Signature[#](#signature-288) ``` createCutoutFromBlocks(ids: number[], vectorizeDistanceThreshold?: number, simplifyDistanceThreshold?: number, useExistingShapeInformation?: boolean): number ``` * * * ### createCutoutFromPath()[#](#createcutoutfrompath) Creates a cutout block from an SVG path string. #### Parameters[#](#parameters-342) | Parameter | Type | Description | | --- | --- | --- | | `path` | `string` | An SVG string describing a path. | #### Returns[#](#returns-351) `number` The newly created block or an error. #### Signature[#](#signature-289) ``` createCutoutFromPath(path: string): number ``` * * * ### createCutoutFromOperation()[#](#createcutoutfromoperation) Creates a new cutout block by performing a boolean operation on existing cutout blocks. #### Parameters[#](#parameters-343) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The cutout blocks with which to perform to the operation. | | `op` | [`CutoutOperation`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cutoutoperation/) | The boolean operation to perform. | #### Returns[#](#returns-352) `number` The newly created block or an error. #### Signature[#](#signature-290) ``` createCutoutFromOperation(ids: number[], op: CutoutOperation): number ``` ## Block[#](#block) ### split()[#](#split) Splits a block at the specified time. The original block will be trimmed to end at the split time, and the returned duplicate will start at the split time and continue to the original end time. ``` const duplicate = engine.block.split(video, 10.0); ``` #### Parameters[#](#parameters-344) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to split. | | `atTime` | `number` | The time (in seconds) relative to the block’s time offset where the split should occur. | | `options?` | [`SplitOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/splitoptions/) | The options for configuring the split operation. | #### Returns[#](#returns-353) `number` The newly created second half of the split block. #### Signature[#](#signature-291) ``` split(id: number, atTime: number, options?: SplitOptions): number ``` ## Block Audio[#](#block-audio) ### getAudioTrackCountFromVideo()[#](#getaudiotrackcountfromvideo) Gets the number of available audio tracks in a video fill block. ``` const trackCount = engine.block.getAudioTrackCountFromVideo(videoBlock);console.log(`Video has ${trackCount} audio tracks`); ``` #### Parameters[#](#parameters-345) | Parameter | Type | Description | | --- | --- | --- | | `videoFillBlock` | `number` | The video fill block to examine. | #### Returns[#](#returns-354) `number` The number of audio tracks. #### Throws[#](#throws-1) Will throw an error if the block is not a video fill or has no audio. #### Signature[#](#signature-292) ``` getAudioTrackCountFromVideo(videoFillBlock: number): number ``` * * * ### createAudioFromVideo()[#](#createaudiofromvideo) Creates a new audio block by extracting a specific audio track from a video fill block. ``` // Extract the first audio track (usually the main mix) with trim settingsconst audioBlock = engine.block.createAudioFromVideo(videoFillBlock, 0); // Extract full audio track without trim settingsconst audioBlock = engine.block.createAudioFromVideo(videoFillBlock, 0, { keepTrimSettings: false }); // Extract a specific track, keep trim settings, and mute the original videoconst dialogueTrack = engine.block.createAudioFromVideo(videoFillBlock, 1, { keepTrimSettings: true, muteOriginalVideo: true }); ``` #### Parameters[#](#parameters-346) | Parameter | Type | Description | | --- | --- | --- | | `videoFillBlock` | `number` | The video fill block to extract audio from. | | `trackIndex` | `number` | The index of the audio track to extract (0-based). | | `options?` | [`AudioFromVideoOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/audiofromvideooptions/) | Options for the audio extraction operation. | #### Returns[#](#returns-355) `number` The handle of the newly created audio block with extracted audio from the specified track. #### Throws[#](#throws-2) Will throw an error if the track index is invalid or the block has no audio. #### Signature[#](#signature-293) ``` createAudioFromVideo(videoFillBlock: number, trackIndex: number, options?: AudioFromVideoOptions): number ``` * * * ### createAudiosFromVideo()[#](#createaudiosfromvideo) Creates multiple audio blocks by extracting all audio tracks from a video fill block. ``` // Extract all audio tracks from a video with trim settingsconst audioBlocks = engine.block.createAudiosFromVideo(videoFillBlock);console.log(`Created ${audioBlocks.length} audio blocks`); // Extract all tracks without trim settings (full audio)const audioBlocks = engine.block.createAudiosFromVideo(videoFillBlock, { keepTrimSettings: false }); // Extract all tracks with trim settings and mute the original videoconst audioBlocks = engine.block.createAudiosFromVideo(videoFillBlock, { keepTrimSettings: true, muteOriginalVideo: true }); ``` #### Parameters[#](#parameters-347) | Parameter | Type | Description | | --- | --- | --- | | `videoFillBlock` | `number` | The video fill block to extract audio from. | | `options?` | [`AudioFromVideoOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/audiofromvideooptions/) | Options for the audio extraction operation. | #### Returns[#](#returns-356) `number`\[\] An array of handles for the newly created audio blocks, one per track. #### Throws[#](#throws-3) Will throw an error if the block has no audio or extraction fails. #### Signature[#](#signature-294) ``` createAudiosFromVideo(videoFillBlock: number, options?: AudioFromVideoOptions): number[] ``` * * * ### getAudioInfoFromVideo()[#](#getaudioinfofromvideo) Gets information about all audio tracks from a video fill block. ``` // Get information about all audio tracksconst trackInfos = engine.block.getAudioInfoFromVideo(videoFillBlock);console.log(`Video has ${trackInfos.length} audio tracks`); // Display track informationtrackInfos.forEach((track, index) => { console.log(`Track ${index}: ${track.channels} channels, ${track.sampleRate}Hz, ${track.language}`);}); // Use track info to create audio blocks selectivelyconst englishTracks = trackInfos.filter(track => track.language === 'eng');const audioBlocks = englishTracks.map(track => engine.block.createAudioFromVideo(videoFillBlock, track.trackIndex)); ``` #### Parameters[#](#parameters-348) | Parameter | Type | Description | | --- | --- | --- | | `videoFillBlock` | `number` | The video fill block to analyze for audio track information. | #### Returns[#](#returns-357) [`AudioTrackInfo`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/audiotrackinfo/)\[\] An array containing information about each audio track. #### Throws[#](#throws-4) Will throw an error if the block is not a video fill or has no audio. #### Signature[#](#signature-295) ``` getAudioInfoFromVideo(videoFillBlock: number): AudioTrackInfo[] ``` ## Block Metadata[#](#block-metadata) ### setMetadata()[#](#setmetadata) Sets a metadata value for a given key on a block. If the key does not exist, it will be added. #### Parameters[#](#parameters-349) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose metadata will be accessed. | | `key` | `string` | The key used to identify the desired piece of metadata. | | `value` | `string` | The value to set. | #### Returns[#](#returns-358) `void` #### Signature[#](#signature-296) ``` setMetadata(id: number, key: string, value: string): void ``` * * * ### getMetadata()[#](#getmetadata) Gets a metadata value for a given key from a block. #### Parameters[#](#parameters-350) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose metadata will be accessed. | | `key` | `string` | The key used to identify the desired piece of metadata. | #### Returns[#](#returns-359) `string` The value associated with the key. #### Signature[#](#signature-297) ``` getMetadata(id: number, key: string): string ``` * * * ### hasMetadata()[#](#hasmetadata) Checks if a block has metadata for a given key. #### Parameters[#](#parameters-351) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose metadata will be accessed. | | `key` | `string` | The key used to identify the desired piece of metadata. | #### Returns[#](#returns-360) `boolean` Whether the key exists. #### Signature[#](#signature-298) ``` hasMetadata(id: number, key: string): boolean ``` * * * ### findAllMetadata()[#](#findallmetadata) Finds all metadata keys on a block. #### Parameters[#](#parameters-352) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose metadata will be accessed. | #### Returns[#](#returns-361) `string`\[\] A list of all metadata keys on this block. #### Signature[#](#signature-299) ``` findAllMetadata(id: number): string[] ``` * * * ### removeMetadata()[#](#removemetadata) Removes metadata for a given key from a block. #### Parameters[#](#parameters-353) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose metadata will be accessed. | | `key` | `string` | The key used to identify the desired piece of metadata. | #### Returns[#](#returns-362) `void` #### Signature[#](#signature-300) ``` removeMetadata(id: number, key: string): void ``` ## Helper[#](#helper) Convenient high-level functions that combine multiple operations into single, easy-to-use methods for common tasks like adding media, applying effects, and positioning blocks. ### setSize()[#](#setsize) Update a block’s size. #### Parameters[#](#parameters-354) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `width` | `number` | The new width of the block. | | `height` | `number` | The new height of the block. | | `options?` | { `maintainCrop?`: `boolean`; `sizeMode?`: [`SizeMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sizemode/); } | Optional parameters for the size. Properties: - `maintainCrop` - Whether or not the crop values, if available, should be automatically adjusted. - `sizeMode` - The size mode: Absolute, Percent or Auto. | | `options.maintainCrop?` | `boolean` | \- | | `options.sizeMode?` | [`SizeMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sizemode/) | \- | #### Returns[#](#returns-363) `void` #### Signature[#](#signature-301) ``` setSize(id: number, width: number, height: number, options?: object): void ``` * * * ### setPosition()[#](#setposition) Update a block’s position. #### Parameters[#](#parameters-355) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `x` | `number` | The new x position of the block. | | `y` | `number` | The new y position of the block. | | `options?` | { `positionMode?`: [`PositionMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionmode/); } | Optional parameters for the position. Properties: - `positionMode` - The position mode: absolute, percent or undefined. | | `options.positionMode?` | [`PositionMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionmode/) | \- | #### Returns[#](#returns-364) `void` #### Signature[#](#signature-302) ``` setPosition(id: number, x: number, y: number, options?: object): void ``` * * * ### addImage()[#](#addimage) Adds an image to the current page. The image will be automatically loaded and sized appropriately. In Video mode, timeline and animation options can be applied. #### Parameters[#](#parameters-356) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | URL or path to the image file | | `options?` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/addimageoptions/) | Configuration options for the image | #### Returns[#](#returns-365) `Promise`<`number`\> Promise that resolves to the ID of the created image block #### Throws[#](#throws-5) Error if no current page exists #### Signature[#](#signature-303) ``` addImage(url: string, options?: AddImageOptions): Promise ``` * * * ### addVideo()[#](#addvideo) Adds a video block to the current scene page. The video will be positioned and sized according to the provided parameters. Timeline and animation effects can be applied. Only works in Video mode, not in Design mode. #### Parameters[#](#parameters-357) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | URL or path to the video file | | `width` | `number` | Width of the video in scene design units | | `height` | `number` | Height of the video in scene design units | | `options?` | [`AddVideoOptions`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/addvideooptions/) | Configuration options for the video | #### Returns[#](#returns-366) `Promise`<`number`\> Promise that resolves to the ID of the created video block #### Throws[#](#throws-6) Error if called in Design mode or if no current page exists #### Signature[#](#signature-304) ``` addVideo(url: string, width: number, height: number, options?: AddVideoOptions): Promise ``` * * * ### applyAnimation()[#](#applyanimation) Applies an animation to a block. #### Parameters[#](#parameters-358) | Parameter | Type | Description | | --- | --- | --- | | `block` | `number` | The ID of the block to apply the animation to | | `animation?` | [`AnimationOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationoptions/) | The animation configuration options | #### Returns[#](#returns-367) `void` #### Signature[#](#signature-305) ``` applyAnimation(block: number, animation?: AnimationOptions): void ``` * * * ### applyDropShadow()[#](#applydropshadow) Applies a drop shadow effect to any block. #### Parameters[#](#parameters-359) | Parameter | Type | Description | | --- | --- | --- | | `block` | `number` | The ID of the block to apply the shadow to | | `options?` | [`DropShadowOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/dropshadowoptions/) | Shadow configuration options. If not provided, enables shadow with default settings | #### Returns[#](#returns-368) `void` #### Signature[#](#signature-306) ``` applyDropShadow(block: number, options?: DropShadowOptions): void ``` * * * ### generateThumbnailAtTimeOffset()[#](#generatethumbnailattimeoffset) Generates a thumbnail image of the scene at a specific time. Only works in Video mode, not in Design mode. #### Parameters[#](#parameters-360) | Parameter | Type | Description | | --- | --- | --- | | `height` | `number` | Height of the thumbnail in scene design units (maximum 512) | | `time` | `number` | Time position in seconds to capture the thumbnail | #### Returns[#](#returns-369) `Promise`<`Blob`\> Promise that resolves to a Blob containing the PNG thumbnail image #### Throws[#](#throws-7) Error if no page exists, if called in Design mode, or if height exceeds 512 pixels #### Signature[#](#signature-307) ``` generateThumbnailAtTimeOffset(height: number, time: number): Promise ``` * * * ### getBackgroundTrack()[#](#getbackgroundtrack) Gets the background track of the current scene. The background track is the track that determines the page duration. Only works in Video mode, not in Design mode. #### Returns[#](#returns-370) `number` The ID of the background track, or null if none exists #### Throws[#](#throws-8) Error if called in Design mode #### Signature[#](#signature-308) ``` getBackgroundTrack(): number ``` * * * ### moveToBackgroundTrack()[#](#movetobackgroundtrack) Moves a block to the background track. This is useful for organizing content in video scenes where you want certain elements to be part of the background layer. The background track is the track that determines the page duration. If no background track exists, one will be created automatically. #### Parameters[#](#parameters-361) | Parameter | Type | Description | | --- | --- | --- | | `block` | `number` | The ID of the block to move to the background track | #### Returns[#](#returns-371) `void` #### Signature[#](#signature-309) ``` moveToBackgroundTrack(block: number): void ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/engine/classes/assetapi) # Class: AssetAPI Manage asset sources and apply assets to scenes. Asset sources provide assets like images, videos, fonts, and other media that can be applied to design blocks. This API allows registering custom asset sources, querying available assets, and applying them to scenes or specific blocks. It supports both local and remote asset sources, with extensible middleware for custom asset handling. ## Constructors[#](#constructors) ### Constructor[#](#constructor) `AssetAPI` ## Event Subscriptions[#](#event-subscriptions) Subscribe to asset source changes and lifecycle events. ### onAssetSourceAdded()[#](#onassetsourceadded) Subscribe to asset source addition events. ``` engine.asset.onAssetSourceAdded((sourceID) => { console.log(`Added source: ${sourceID}`);}); ``` #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`sourceID`) => `void` | The function called whenever an asset source is added. | #### Returns[#](#returns) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-1) `void` * * * ### onAssetSourceRemoved()[#](#onassetsourceremoved) Subscribe to asset source removal events. ``` engine.asset.onAssetSourceRemoved((sourceID) => { console.log(`Removed source: ${sourceID}`);}); ``` #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`sourceID`) => `void` | The function called whenever an asset source is removed. | #### Returns[#](#returns-2) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-3) `void` * * * ### onAssetSourceUpdated()[#](#onassetsourceupdated) Subscribe to asset source content change events. ``` engine.asset.onAssetSourceUpdated((sourceID) => { console.log(`Updated source: ${sourceID}`);}); ``` #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`sourceID`) => `void` | The function called whenever an asset source’s contents are updated. | #### Returns[#](#returns-4) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-5) `void` ## Asset Source Management[#](#asset-source-management) Register, remove, and query asset sources for different types of media. ### addSource()[#](#addsource) Add a custom asset source with unique ID. The asset source provides methods for finding assets, applying them to scenes or blocks, and managing asset lifecycle. All source operations are handled asynchronously. ``` engine.asset.addSource({ id: 'foobar', async findAssets(queryData) { return Promise.resolve({ assets: [ { id: 'logo', meta: { uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', } } ], total: 1, currentPage: queryData.page, nextPage: undefined }); },}); ``` #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `source` | [`AssetSource`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetsource/) | The asset source configuration. | #### Returns[#](#returns-6) `void` #### Signature[#](#signature) ``` addSource(source: AssetSource): void ``` * * * ### addLocalSource()[#](#addlocalsource) Add a local asset source. Local asset sources allow dynamic asset management through the add/remove methods. You can specify supported MIME types to restrict what assets can be added. ``` engine.asset.addLocalSource('local-source'); ``` #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | Unique identifier for the asset source. | | `supportedMimeTypes?` | `string`\[\] | The mime types of assets that are allowed to be added to this local source. | | `applyAsset?` | (`asset`) => `Promise`<`number`\> | An optional callback that can be used to override the default behavior of applying a given asset result to the active scene. | | `applyAssetToBlock?` | (`asset`, `block`) => `Promise`<`void`\> | An optional callback that can be used to override the default behavior of applying an asset result to a given block. | #### Returns[#](#returns-7) `void` #### Signature[#](#signature-1) ``` addLocalSource(id: string, supportedMimeTypes?: string[], applyAsset?: (asset: CompleteAssetResult) => Promise, applyAssetToBlock?: (asset: CompleteAssetResult, block: number) => Promise): void ``` * * * ### addLocalAssetSourceFromJSONString()[#](#addlocalassetsourcefromjsonstring) Creates a new local asset source from a JSON string containing asset definitions. The JSON structure should contain a `version` field, an `id` field specifying the asset source identifier, and an `assets` array with asset definitions. Each asset should have an `id`, localized `label` object, and a `meta` object containing asset-specific properties like `uri`, `thumbUri`, `blockType`, etc. #### Parameters[#](#parameters-5) | Parameter | Type | Description | | --- | --- | --- | | `contentJSON` | `string` | The JSON string containing the asset definitions. | | `basePath?` | `string` | An optional base path with which {{base\_url}} strings in the assets should be replaced. If no value is provided, settings.basePath is used. | #### Returns[#](#returns-8) `Promise`<`string`\> The ID of the newly created asset source (as specified in the JSON’s `id` field). #### Example[#](#example) ``` const json = JSON.stringify({ "version": "2.0.0", "id": "my.custom.assets", "assets": [ { "id": "sample_asset", "label": { "en": "Sample Asset" }, "meta": { "uri": "https://example.com/asset.jpg", "thumbUri": "https://example.com/thumb.jpg", "blockType": "//ly.img.ubq/image" } } ]});const sourceId = await engine.asset.addLocalAssetSourceFromJSONString(json);console.log('Created asset source:', sourceId); // "my.custom.assets" ``` #### Signature[#](#signature-2) ``` addLocalAssetSourceFromJSONString(contentJSON: string, basePath?: string): Promise ``` * * * ### addLocalAssetSourceFromJSONURI()[#](#addlocalassetsourcefromjsonuri) Creates a new local asset source from a JSON URI. Loads and parses a JSON file from the specified URI to create an asset source. The JSON structure should contain a `version` field, an `id` field specifying the asset source identifier, and an `assets` array with asset definitions. The created asset source will have the ID specified in the JSON’s `id` field, and all assets defined in the JSON will be added to the source. Note: The parent directory of the content.json URI will be used as the base path for resolving relative URLs in the asset definitions (e.g., `{{base_url}}` placeholders). #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `contentURI` | `string` | The URI for the JSON file to load and parse. | #### Returns[#](#returns-9) `Promise`<`string`\> The ID of the newly created asset source (as specified in the JSON’s `id` field). #### Example[#](#example-1) ``` // Load audio assets from IMG.LY's CDNconst sourceId = await engine.asset.addLocalAssetSourceFromJSONURI( 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/content.json');console.log('Loaded asset source:', sourceId); // "ly.img.audio" // The parent directory (https://cdn.img.ly/assets/demo/v2/ly.img.audio/)// will be used as base path for resolving relative asset URLs // The JSON at this URL contains audio assets with structure like:// {// "version": "2.0.0",// "id": "ly.img.audio",// "assets": [// {// "id": "dance_harder",// "label": { "en": "Dance Harder" },// "meta": {// "uri": "https://cdn.img.ly/.../dance_harder.m4a",// "blockType": "//ly.img.ubq/audio",// "mimeType": "audio/x-m4a"// }// }// ]// } ``` #### Signature[#](#signature-3) ``` addLocalAssetSourceFromJSONURI(contentURI: string): Promise ``` * * * ### removeSource()[#](#removesource) Remove a registered asset source. This permanently removes the asset source and all its associated assets. Any ongoing operations with this source will be cancelled. ``` engine.asset.removeSource('asset-source-id'); ``` #### Parameters[#](#parameters-7) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | The ID of the asset source to remove. | #### Returns[#](#returns-10) `void` #### Signature[#](#signature-4) ``` removeSource(id: string): void ``` * * * ### findAllSources()[#](#findallsources) Get all registered asset source IDs. ``` engine.asset.findAllSources(); ``` #### Returns[#](#returns-11) `string`\[\] A list with the IDs of all registered asset sources. #### Signature[#](#signature-5) ``` findAllSources(): string[] ``` ## Asset Discovery[#](#asset-discovery) Search and filter assets from registered sources with advanced query options. ### findAssets()[#](#findassets) Search for assets in a specific source with advanced filtering. Supports pagination, text search, tag filtering, grouping, and sorting options. Results include asset metadata, thumbnails, and application context. ``` const result = await engine.asset.findAssets('asset-source-id', { page: 0, perPage: 100});const asset = result.assets[0]; ``` #### Parameters[#](#parameters-8) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | | `query` | [`AssetQueryData`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetquerydata/) | Query options to filter and sort the search results. | #### Returns[#](#returns-12) `Promise`<[`AssetsQueryResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetsqueryresult/)<[`CompleteAssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/completeassetresult/)\>> Promise resolving to paginated search results. #### Signature[#](#signature-6) ``` findAssets(sourceId: string, query: AssetQueryData): Promise> ``` * * * ### fetchAsset()[#](#fetchasset) Fetch a specific asset by ID from an asset source. ``` const asset = await engine.asset.fetchAsset('asset-source-id', 'asset-id', { locale: 'en-US'}); ``` #### Parameters[#](#parameters-9) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source to search in. | | `assetId` | `string` | The ID of the asset to fetch. | | `params?` | `Pick`<[`AssetQueryData`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetquerydata/), `"locale"`\> | Query parameters including locale (optional). | #### Returns[#](#returns-13) `Promise`<[`CompleteAssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/completeassetresult/)\> Promise resolving to the complete asset result, or undefined if not found. #### Signature[#](#signature-7) ``` fetchAsset(sourceId: string, assetId: string, params?: Pick): Promise ``` ## Asset Information[#](#asset-information) Retrieve metadata, credits, licenses, and supported formats from asset sources. ### getGroups()[#](#getgroups) Get available asset groups from a source. Groups provide categorization for assets within a source, enabling filtered discovery. ``` const groups = engine.asset.getGroups(customSource.id); ``` #### Parameters[#](#parameters-10) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | The ID of the asset source. | #### Returns[#](#returns-14) `Promise`<`string`\[\]> Promise resolving to list of available group names. #### Signature[#](#signature-8) ``` getGroups(id: string): Promise ``` * * * ### getSupportedMimeTypes()[#](#getsupportedmimetypes) Get supported MIME types for an asset source. Returns the file types that can be added to this source. An empty result means all MIME types are supported. ``` const mimeTypes = engine.asset.getSupportedMimeTypes('asset-source-id'); ``` #### Parameters[#](#parameters-11) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | #### Returns[#](#returns-15) `string`\[\] Array of supported MIME type strings. #### Signature[#](#signature-9) ``` getSupportedMimeTypes(sourceId: string): string[] ``` * * * ### getCredits()[#](#getcredits) Get attribution credits for an asset source. ``` const credits = engine.asset.getCredits('asset-source-id'); ``` #### Parameters[#](#parameters-12) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | #### Returns[#](#returns-16) `object` The asset source’s credits info consisting of a name and an optional URL. | Name | Type | | --- | --- | | `name` | `string` | | `url` | `string` | #### Signature[#](#signature-10) ``` getCredits(sourceId: string): object ``` * * * ### getLicense()[#](#getlicense) Get license information for an asset source. ``` const license = engine.asset.getLicense('asset-source-id'); ``` #### Parameters[#](#parameters-13) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | #### Returns[#](#returns-17) `object` The asset source’s license info consisting of a name and an optional URL. | Name | Type | | --- | --- | | `name` | `string` | | `url` | `string` | #### Signature[#](#signature-11) ``` getLicense(sourceId: string): object ``` * * * ### canManageAssets()[#](#canmanageassets) Check if an asset source supports asset management. Returns true if the source allows adding and removing assets dynamically, via ‘Add File’ and ‘Delete’ button on the UI. This is typically true for local asset sources and false for remote sources. ``` engine.asset.canManageAssets('asset-source-id'); ``` #### Parameters[#](#parameters-14) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source to check. | #### Returns[#](#returns-18) `boolean` True if the source supports asset management operations. #### Signature[#](#signature-12) ``` canManageAssets(sourceId: string): boolean ``` ## Asset Application[#](#asset-application) Apply assets to scenes, blocks, or specific properties with customizable behavior. ### registerApplyMiddleware()[#](#registerapplymiddleware) Register middleware that intercepts asset application to scenes. The middleware function receives the source ID, asset result, the original apply function, and a context object containing options about how the asset should be applied. It can perform custom logic before, after, or instead of the default asset application. #### Parameters[#](#parameters-15) | Parameter | Type | Description | | --- | --- | --- | | `middleware` | (`sourceId`, `assetResult`, `apply`, `context`) => `Promise`<`number`\> | The middleware function that is called before applying the asset. | #### Returns[#](#returns-19) `VoidFunction` A function that can be used to remove the middleware. #### Example[#](#example-2) ``` engine.asset.registerApplyMiddleware(async (sourceId, assetResult, apply, context) => { // Access context to determine placement intent console.log('Clip type:', context.clipType); // 'clip', 'overlay', or undefined console.log('Custom data:', context.myCustomField); // Access custom fields // do something before applying the asset // You still have the choice to call apply or skip it const blockId = await apply(sourceId, assetResult); // do something after applying the asset return blockId;}) ``` #### Signature[#](#signature-13) ``` registerApplyMiddleware(middleware: (sourceId: string, assetResult: AssetResult, apply: (sourceId: string, assetResult: AssetResult, options: ApplyAssetOptions) => Promise, context: ApplyAssetOptions) => Promise): VoidFunction ``` * * * ### registerApplyToBlockMiddleware()[#](#registerapplytoblockmiddleware) Register middleware that intercepts asset application to specific blocks. The middleware function receives the source ID, asset result, target block, and the original apply function. It can perform custom logic before, after, or instead of the default block asset application. #### Parameters[#](#parameters-16) | Parameter | Type | Description | | --- | --- | --- | | `middleware` | (`sourceId`, `assetResult`, `block`, `applyToBlock`) => `Promise`<`void`\> | The middleware function that is called before applying the asset. | #### Returns[#](#returns-20) `VoidFunction` A function that can be used to remove the middleware. #### Example[#](#example-3) ``` engine.asset.registerApplyToBlockMiddleware(async (sourceId, assetResult, block, applyToBlock) => { // do something before applying the asset // You still have the choice to call applyToBlock or skip it await applyToBlock(sourceId, assetResult, block); // do something after applying the asset}) ``` #### Signature[#](#signature-14) ``` registerApplyToBlockMiddleware(middleware: (sourceId: string, assetResult: AssetResult, block: number, applyToBlock: (sourceId: string, assetResult: AssetResult, block: number) => Promise) => Promise): VoidFunction ``` * * * ### apply()[#](#apply) Apply an asset to the active scene. Creates a new block configured according to the asset’s properties and adds it to the scene. The behavior can be customized by providing an `applyAsset` function when registering the asset source, or by passing context options to guide middleware behavior. #### Parameters[#](#parameters-17) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | A single asset result from a `findAssets` query. | | `options?` | [`ApplyAssetOptions`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/applyassetoptions/) | Optional configuration for asset application. | #### Returns[#](#returns-21) `Promise`<`number`\> Promise resolving to the created block ID, or undefined if no block was created. #### Examples[#](#examples) ``` // Default behaviorawait engine.asset.apply('asset-source-id', assetResult.assets[0]); ``` ``` // Foreground overlay placementawait engine.asset.apply('asset-source-id', assetResult.assets[0], { clipType: 'overlay'}); ``` #### Signature[#](#signature-15) ``` apply(sourceId: string, assetResult: AssetResult, options?: ApplyAssetOptions): Promise ``` * * * ### applyToBlock()[#](#applytoblock) Apply an asset to a specific block. Modifies the target block’s properties according to the asset’s configuration. The behavior can be customized by providing an `applyAssetToBlock` function when registering the asset source. ``` await engine.asset.applyToBlock('asset-source-id', assetResult.assets[0]); ``` #### Parameters[#](#parameters-18) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | A single asset result from a `findAssets` query. | | `block` | `number` | The block to apply the asset to. | #### Returns[#](#returns-22) `Promise`<`void`\> #### Signature[#](#signature-16) ``` applyToBlock(sourceId: string, assetResult: AssetResult, block: number): Promise ``` * * * ### applyProperty()[#](#applyproperty) Apply a specific asset property to the currently selected element. Allows applying individual properties (like colors, fonts, or effects) from an asset without creating a new block. The behavior can be customized by providing an `applyAssetProperty` function. ``` const asset = assetResult.assets[0];if (asset.payload && asset.payload.properties) { for (const property of asset.payload.properties) { await engine.asset.applyProperty('asset-source-id', asset, property); }} ``` #### Parameters[#](#parameters-19) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | A single asset result from a `findAssets` query. | | `property` | [`AssetProperty`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetproperty/) | The specific asset property to apply. | #### Returns[#](#returns-23) `Promise`<`void`\> #### Signature[#](#signature-17) ``` applyProperty(sourceId: string, assetResult: AssetResult, property: AssetProperty): Promise ``` * * * ### defaultApplyAsset()[#](#defaultapplyasset) Apply an asset using the engine’s default implementation. The default implementation already handles various different kinds of assets and acts as a good starting point. ``` engine.asset.addSource({ id: 'foobar', async findAssets(queryData) { return Promise.resolve({ assets: [ { id: 'logo', meta: { uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', } } ], total: 1, currentPage: queryData.page, nextPage: undefined }); }, async applyAsset(assetResult) { return engine.asset.defaultApplyAsset(assetResult); },}); ``` #### Parameters[#](#parameters-20) | Parameter | Type | Description | | --- | --- | --- | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | A single asset result from a `findAssets` query. | #### Returns[#](#returns-24) `Promise`<`number`\> Promise resolving to the created block ID, or undefined if no block was created. #### Signature[#](#signature-18) ``` defaultApplyAsset(assetResult: AssetResult): Promise ``` * * * ### defaultApplyAssetToBlock()[#](#defaultapplyassettoblock) Apply an asset to a block using the engine’s default implementation. The default implementation already handles various different kinds of assets and acts as a good starting point. ``` engine.asset.addSource({ id: 'foobar', async findAssets(queryData) { return Promise.resolve({ assets: [ { id: 'logo', meta: { uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', } } ], total: 1, currentPage: queryData.page, nextPage: undefined }); }, async applyAssetToBlock(assetResult, block) { engine.asset.defaultApplyAssetToBlock(assetResult, block); },}); ``` #### Parameters[#](#parameters-21) | Parameter | Type | Description | | --- | --- | --- | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | A single asset result from a `findAssets` query. | | `block` | `number` | The block to apply the asset to. | #### Returns[#](#returns-25) `Promise`<`void`\> #### Signature[#](#signature-19) ``` defaultApplyAssetToBlock(assetResult: AssetResult, block: number): Promise ``` ## Asset Lifecycle[#](#asset-lifecycle) Add, remove, and manage assets within local asset sources. ### addAssetToSource()[#](#addassettosource) Add an asset to a local asset source. Only works with local asset sources that support asset management. The asset will be validated against the source’s supported MIME types. ``` engine.asset.addAssetToSource('local-source', { id: 'asset-id', label: { en: 'My Asset' }, meta: { uri: 'https://example.com/asset.jpg', mimeType: 'image/jpeg' }}); ``` #### Parameters[#](#parameters-22) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The local asset source ID that the asset should be added to. | | `asset` | [`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetdefinition/) | The asset definition to add to the source. | #### Returns[#](#returns-26) `void` #### Signature[#](#signature-20) ``` addAssetToSource(sourceId: string, asset: AssetDefinition): void ``` * * * ### removeAssetFromSource()[#](#removeassetfromsource) Remove an asset from a local asset source. Only works with local asset sources that support asset management. The asset will be permanently deleted from the source. ``` engine.asset.removeAssetFromSource('local-source', 'asset-id'); ``` #### Parameters[#](#parameters-23) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The id of the local asset source that currently contains the asset. | | `assetId` | `string` | The id of the asset to be removed. | #### Returns[#](#returns-27) `void` #### Signature[#](#signature-21) ``` removeAssetFromSource(sourceId: string, assetId: string): void ``` * * * ### assetSourceContentsChanged()[#](#assetsourcecontentschanged) Notify the engine that an asset source’s contents have changed. This triggers refresh of any UI components that display assets from this source and notifies subscribers to the asset source update events. ``` engine.asset.assetSourceContentsChanged('asset-source-id'); ``` #### Parameters[#](#parameters-24) | Parameter | Type | Description | | --- | --- | --- | | `sourceID` | `string` | The asset source whose contents changed. | #### Returns[#](#returns-28) `void` #### Signature[#](#signature-22) ``` assetSourceContentsChanged(sourceID: string): void ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/variables/mimetype) # Variable: MimeType ``` const MimeType: object; ``` Represents the MIME types used in the editor. ## Type declaration[#](#type-declaration) | Name | Type | Default value | | --- | --- | --- | | `Png` | `"image/png"` | `'image/png'` | | `Jpeg` | `"image/jpeg"` | `'image/jpeg'` | | `WebP` | `"image/webp"` | `'image/webp'` | | `Tga` | `"image/x-tga"` | `'image/x-tga'` | | `Wav` | `"audio/wav"` | `'audio/wav'` | | `Mp4Audio` | `"audio/mp4"` | `'audio/mp4'` | | `Mp4` | `"video/mp4"` | `'video/mp4'` | | `QuickTime` | `"video/quicktime"` | `'video/quicktime'` | | `Binary` | `"application/octet-stream"` | `'application/octet-stream'` | | `Pdf` | `"application/pdf"` | `'application/pdf'` | | `Zip` | `"application/zip"` | `'application/zip'` | ## Deprecated[#](#deprecated) Use the `MimeType` string literal types instead. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/variables/loglevel) # Variable: LogLevel ``` LogLevel: object; ``` Provides a set of predefined log levels for the Creative Editor SDK. The `LogLevel` object contains constants representing different severity levels for logging messages. These levels can be used to categorize log messages based on their importance and urgency. ## Type declaration[#](#type-declaration) | Name | Type | Default value | | --- | --- | --- | | `Info` | `"Info"` | `'Info'` | | `Warning` | `"Warning"` | `'Warning'` | | `Error` | `"Error"` | `'Error'` | ## Deprecated[#](#deprecated) Specifying log levels via `LogLevel.Info` has been deprecated. Please use the desired LogLevel string directly. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/functions/supportswasm) # Function: supportsWasm ``` function supportsWasm(): boolean; ``` Checks if the current browser supports web assembly ## Returns[#](#returns) `boolean` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/functions/supportsvideoexport) # Function: supportsVideoExport ``` function supportsVideoExport(): Promise; ``` Checks if the current browser supports video exporting. ## Returns[#](#returns) `Promise`<`boolean`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/functions/supportsvideo) # Function: supportsVideo ``` function supportsVideo(): boolean; ``` Checks if the current browser supports video editing. ## Returns[#](#returns) `boolean` false if the browser does not support the required APIs. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/functions/checkvideosupport) # Function: checkVideoSupport ``` function checkVideoSupport(): void; ``` Throws an error if the current browser does not support video editing. ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/functions/supportsbrowser) # Function: supportsBrowser ``` function supportsBrowser(): boolean; ``` Checks if the current browser supports necessary technologies to match our supported browsers ## Returns[#](#returns) `boolean` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/functions/checkvideoexportsupport) # Function: checkVideoExportSupport ``` function checkVideoExportSupport(): Promise; ``` Throws an error if the current browser does not support video exporting. ## Returns[#](#returns) `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/enumerations/panelposition) # Enum: PanelPosition This enum is used to specify the position of various panels within the user interface, such as the inspector, settings, and asset library panels. By setting the position to `Left` or `Right`, you can control the layout and placement of these panels to better suit the user’s workflow and preferences. ## Enumeration Members[#](#enumeration-members) | Enumeration Member | Value | | --- | --- | | `Left` | `"left"` | | `Right` | `"right"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/variableapi) # Class: VariableAPI Manage text variables within design templates. Text variables enable dynamic content replacement in design templates. Variables are stored as key-value pairs and can be referenced in text blocks for automated content updates. ``` // Configure a text block that displays 'Hello, World'const block = cesdk.engine.block.create('text');cesdk.engine.block.setText(block, 'Hello, {{name}}!');cesdk.engine.variable.setString('name', 'World'); ``` ## Variable Management[#](#variable-management) Create, update, retrieve, and remove text variables from the engine. ### findAll()[#](#findall) Get all text variable names currently stored in the engine. #### Returns[#](#returns) `string`\[\] List of variable names. #### Signature[#](#signature) ``` findAll(): string[] ``` * * * ### setString()[#](#setstring) Set a text variable’s value. Creates a new variable if the key doesn’t exist, or updates an existing one. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `key` | `string` | The variable’s key. | | `value` | `string` | The text value to assign to the variable. | #### Returns[#](#returns-1) `void` #### Signature[#](#signature-1) ``` setString(key: string, value: string): void ``` * * * ### getString()[#](#getstring) Get a text variable’s value. #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `key` | `string` | The variable’s key. | #### Returns[#](#returns-2) `string` The text value of the variable. #### Signature[#](#signature-2) ``` getString(key: string): string ``` * * * ### remove()[#](#remove) Remove a text variable from the engine. #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `key` | `string` | The variable’s key to remove. | #### Returns[#](#returns-3) `void` #### Signature[#](#signature-3) ``` remove(key: string): void ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/utilsapi) # Class: UtilsAPI UtilsAPI provides utility functions for common operations in the Creative Engine SDK. This API includes utilities for: * Creating and managing loading dialogs * Exporting content (images, PDFs, videos) * Loading and downloading files * Local file uploads ## Constructors[#](#constructors) ### Constructor[#](#constructor) `UtilsAPI` ## Methods[#](#methods) ### generateBlockName()[#](#generateblockname) Generates the automatic, localized fallback name for a design block. When the block does not have an explicit name set, this mirrors the naming shown in the UI panels. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `blockId` | `number` | The block ID to generate a fallback name for | #### Returns[#](#returns) `string` The localized fallback name for the block #### Signature[#](#signature) ``` generateBlockName(blockId: number): string ``` * * * ### showLoadingDialog()[#](#showloadingdialog) Shows and manages a loading dialog with progress tracking #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `title?`: `string`; `message?`: `string` | `string`\[\]; `cancelLabel?`: `string`; `abortLabel?`: `string`; `abortTitle?`: `string`; `abortMessage?`: `string` | | `options.title?` | `string` | \- | | `options.message?` | `string` | `string`\[\] | | `options.cancelLabel?` | `string` | \- | | `options.abortLabel?` | `string` | \- | | `options.abortTitle?` | `string` | \- | | `options.abortMessage?` | `string` | `string`\[\] | | `options.size?` | `"large"` | `"regular"` | | `options.clickOutsideToClose?` | `boolean` | \- | | `options.progress?` | [`DialogProgress`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogprogress/) | \- | | `options.onDone?` | () => `void` | \- | | `options.onAbort?` | () => `void` | \- | #### Returns[#](#returns-1) `object` A controller object for managing the dialog | Name | Type | | --- | --- | | `dialogId` | `string` | | `updateProgress()` | (`progress`) => `void` | | `showSuccess()` | (`options`) => `void` | | `showError()` | (`options`) => `void` | | `close()` | () => `void` | #### Example[#](#example) ``` const controller = cesdk.utils.showLoadingDialog({ title: 'Exporting', message: 'Please wait...', onAbort: () => console.log('Aborted')}); // Update progresscontroller.updateProgress({ value: 50, max: 100 }); // Show successcontroller.showSuccess({ title: 'Success', message: 'Export completed!'}); ``` #### Signature[#](#signature-1) ``` showLoadingDialog(options?: object): object ``` * * * ### export()[#](#export) Exports content with a loading dialog and progress tracking. Automatically handles both static exports (images, PDFs) and video exports based on MIME type. #### Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` _extends_ | #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `options?` | `T` | Export options. Type inference based on mimeType. | #### Returns[#](#returns-2) `Promise`<{ `blobs`: `Blob`\[\]; `options`: `T` _extends_ [`VideoExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videoexportoptions/) ? [`OnExportVideoOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onexportvideooptions/) : [`OnExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onexportoptions/); }> Export result - either blobs array for static or single blob for video #### Example[#](#example-1) ``` // Image exportconst imageResult = await cesdk.utils.export({ mimeType: 'image/png', pngCompressionLevel: 7}); // Video exportconst videoResult = await cesdk.utils.export({ mimeType: 'video/mp4', onProgress: (rendered, encoded, total) => console.log(`${rendered}/${total}`)}); ``` #### Signature[#](#signature-2) ``` export(options?: T): Promise ``` * * * ### loadFile()[#](#loadfile) Opens a file picker dialog for the user to select a file #### Type Parameters[#](#type-parameters-1) | Type Parameter | | --- | | `T` _extends_ `"text"` | #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `options` | { `accept`: `string`; `returnType?`: `T`; } | Options for the file load operation | | `options.accept` | `string` | \- | | `options.returnType?` | `T` | \- | #### Returns[#](#returns-3) `Promise`<`T` _extends_ `"dataURL"` ? `string` : `T` _extends_ `"text"` ? `string` : `T` _extends_ `"blob"` ? `Blob` : `T` _extends_ `"arrayBuffer"` ? `ArrayBuffer` : `T` _extends_ `"objectURL"` ? `string` : `File`\> The loaded file content in the requested format #### Example[#](#example-2) ``` // Load a text fileconst text = await cesdk.utils.loadFile({ accept: '.txt', returnType: 'text'}); // Load an image as blobconst blob = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'blob'}); // Load a file as object URL (blob URL)const objectURL = await cesdk.utils.loadFile({ accept: '.zip', returnType: 'objectURL'});// Remember to revoke the object URL when doneURL.revokeObjectURL(objectURL); ``` #### Signature[#](#signature-3) ``` loadFile(options: object): Promise ``` * * * ### downloadFile()[#](#downloadfile) Downloads a blob or string as a file to the user’s device #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `file` | `string` | `Blob` | | `mimeType?` | [`FileMimeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filemimetype/) | The MIME type of the content | #### Returns[#](#returns-4) `Promise`<`void`\> #### Example[#](#example-3) ``` // Download a text fileawait cesdk.utils.downloadFile('Hello World', 'text/plain'); // Download a blobconst blob = new Blob(['content'], { type: 'text/plain' });await cesdk.utils.downloadFile(blob, 'text/plain'); ``` #### Signature[#](#signature-4) ``` downloadFile(file: string | Blob, mimeType?: FileMimeType): Promise ``` * * * ### localUpload()[#](#localupload) Performs a local upload of a file (development only) Note: This is meant for development testing only. In production, you should implement a proper upload handler using the callbacks API. #### Parameters[#](#parameters-5) | Parameter | Type | Description | | --- | --- | --- | | `file` | `File` | The file to upload | | `context?` | [`UploadCallbackContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uploadcallbackcontext/) | Optional context information for the upload operation | #### Returns[#](#returns-5) `Promise`<[`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetdefinition/)\> The asset definition for the uploaded file #### Example[#](#example-4) ``` const file = new File(['content'], 'test.txt');const asset = await cesdk.utils.localUpload(file, { context: { source: 'user-upload' }}); ``` #### Signature[#](#signature-5) ``` localUpload(file: File, context?: UploadCallbackContext): Promise ``` * * * ### calculateViewportPadding()[#](#calculateviewportpadding) Calculates the recommended viewport padding based on current viewport size and settings. This utility matches the internal padding used by the SDK for zoom operations. The calculation accounts for safe area insets to ensure content remains visible in UI-safe regions (avoiding notches, rounded corners, system overlays, etc.). #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `width?` | `number` | Optional viewport width to use instead of current camera width | | `height?` | `number` | Optional viewport height to use instead of current camera height | #### Returns[#](#returns-6) `object` An object containing paddingX and paddingY values | Name | Type | | --- | --- | | `paddingX` | `number` | | `paddingY` | `number` | #### Example[#](#example-5) ``` const padding = cesdk.utils.calculateViewportPadding();console.log(`Padding: ${padding.paddingX}x${padding.paddingY}`); // Use with custom zoomawait cesdk.engine.scene.zoomToBlock( pageId, padding.paddingX, padding.paddingY, padding.paddingX, padding.paddingY); ``` #### Signature[#](#signature-6) ``` calculateViewportPadding(width?: number, height?: number): object ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/sceneapi) # Class: SceneAPI Create, load, save, and manipulate scenes. Scenes are the root element of every design hierarchy. Their children, stacks of pages, individual pages or other blocks, define the content of the design. Scenes can be created from scratch, loaded from a file or URL, or created from an image or video. After manipulation, they can be saved to a string or an archive. This allows further processing in another editor instance, automated processing in scripts or sharing with other users. ## Scene Creation[#](#scene-creation) Create new scenes from scratch or from media files. ### create()[#](#create) Create a new design scene, along with its own camera. ``` const scene = engine.scene.create(layout); ``` #### Parameters[#](#parameters) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `sceneLayout` | `"Free"` | `"VerticalStack"` | `"HorizontalStack"` | | `options?` | [`CreateSceneOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/createsceneoptions/) | `undefined` | Optional parameters for the scene. Properties: - `page` - Page options. Properties: - `size` - The size of the page. - `color` - Optional background color of the page. | #### Returns[#](#returns) `number` The scene’s handle. #### Signature[#](#signature) ``` create(sceneLayout?: "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack", options?: CreateSceneOptions): number ``` * * * ### createVideo()[#](#createvideo) Create a new scene in video mode, along with its own camera. ``` const scene = engine.scene.createVideo(); ``` #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `options?` | [`CreateSceneOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/createsceneoptions/) | Optional parameters for the scene. Properties: - `page` - Page options. Properties: - `size` - The size of the page. - `color` - Optional background color of the page. | #### Returns[#](#returns-1) `number` The scene’s handle. #### Signature[#](#signature-1) ``` createVideo(options?: CreateSceneOptions): number ``` * * * ### createFromImage()[#](#createfromimage) Loads the given image and creates a scene with a single page showing the image. Fetching the image may take an arbitrary amount of time, so the scene isn’t immediately available. ``` const scene = await engine.scene.createFromImage('https://img.ly/static/ubq_samples/sample_4.jpg'); ``` #### Parameters[#](#parameters-2) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `url` | `string` | `undefined` | The image URL. | | `dpi` | `number` | `300` | The scene’s DPI. | | `pixelScaleFactor` | `number` | `1` | The display’s pixel scale factor. | | `sceneLayout` | `"Free"` | `"VerticalStack"` | `"HorizontalStack"` | | `spacing` | `number` | `0` | \- | | `spacingInScreenSpace` | `boolean` | `false` | \- | #### Returns[#](#returns-2) `Promise`<`number`\> A promise that resolves with the scene ID on success or rejected with an error otherwise. #### Signature[#](#signature-2) ``` createFromImage(url: string, dpi?: number, pixelScaleFactor?: number, sceneLayout?: "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack", spacing?: number, spacingInScreenSpace?: boolean): Promise ``` * * * ### createFromVideo()[#](#createfromvideo) Loads the given video and creates a scene with a single page showing the video. Fetching the video may take an arbitrary amount of time, so the scene isn’t immediately available. ``` const scene = await engine.scene.createFromVideo('https://img.ly/static/ubq_video_samples/bbb.mp4'); ``` #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The video URL. | #### Returns[#](#returns-3) `Promise`<`number`\> A promise that resolves with the scene ID on success or rejected with an error otherwise. #### Signature[#](#signature-3) ``` createFromVideo(url: string): Promise ``` ## Scene Loading[#](#scene-loading) Load scenes from various sources including strings, URLs, and archives. ### loadFromString()[#](#loadfromstring) Load the contents of a scene file. The string must be the binary contents of a scene file and is directly imported as blocks. Any existing scene is replaced by the new one. This is useful for loading scenes that were saved with `saveToString` or scenes that were created in another editor instance. ``` const sceneContent = await creativeEngine.scene.saveToString();creativeEngine.scene.loadFromString(sceneContent); ``` #### Parameters[#](#parameters-4) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `sceneContent` | `string` | `undefined` | The scene file contents, a base64 string. | | `overrideEditorConfig` | `boolean` | `false` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | | `waitForResources` | `boolean` | `false` | Whether to wait for all resources to finish loading before resolving. Defaults to false. | #### Returns[#](#returns-4) `Promise`<`number`\> A handle to the loaded scene. #### Signature[#](#signature-4) ``` loadFromString(sceneContent: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise ``` * * * ### loadFromURL()[#](#loadfromurl) Load a scene from the URL to the scene file. The scene file will be fetched asynchronously by the engine and loaded into the engine once it is available. Any existing scene is replaced by the new one. ``` const sceneURL = 'https://example.com/my-scene.json';creativeEngine.scene.loadFromURL(sceneURL); ``` #### Parameters[#](#parameters-5) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `url` | `string` | `undefined` | The URL of the scene file. | | `overrideEditorConfig` | `boolean` | `false` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | | `waitForResources` | `boolean` | `false` | Whether to wait for all resources to finish loading before resolving. Defaults to false. | #### Returns[#](#returns-5) `Promise`<`number`\> scene A promise that resolves once the scene was loaded or rejects with an error otherwise. #### Signature[#](#signature-5) ``` loadFromURL(url: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise ``` * * * ### loadFromArchiveURL()[#](#loadfromarchiveurl) Load a previously archived scene from the URL to the scene file. The scene file will be fetched asynchronously by the engine. This requires continuous `render` calls on this engines instance. #### Parameters[#](#parameters-6) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `url` | `string` | `undefined` | The URL of the scene archive file. | | `overrideEditorConfig` | `boolean` | `false` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | | `waitForResources` | `boolean` | `false` | Whether to wait for all resources to finish loading before resolving. Defaults to false. | #### Returns[#](#returns-6) `Promise`<`number`\> scene A promise that resolves once the scene was loaded or rejects with an error otherwise. #### Signature[#](#signature-6) ``` loadFromArchiveURL(url: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise ``` ## Scene Saving[#](#scene-saving) Save and export scenes to different formats. ### saveToString()[#](#savetostring) Serializes the current scene into a string. Selection is discarded. #### Parameters[#](#parameters-7) | Parameter | Type | Description | | --- | --- | --- | | `allowedResourceSchemes` | `string`\[\] | The resource schemes to allow in the saved string. Defaults to \[‘blob’, ‘bundle’, ‘file’, ‘http’, ‘https’, ‘opfs’\]. | | `onDisallowedResourceScheme?` | (`url`, `dataHash`) => `Promise`<`string`\> | An optional callback that is called for each resource URL that has a scheme absent from `resourceSchemesAllowed`. The `url` parameter is the resource URL and the `dataHash` parameter is the hash of the resource’s data. The callback should return a new URL for the resource, which will be used in the serialized scene. The callback is expected to return the original URL if no persistence is needed. | #### Returns[#](#returns-7) `Promise`<`string`\> A promise that resolves with a string on success or an error on failure. #### Signature[#](#signature-7) ``` saveToString(allowedResourceSchemes?: string[], onDisallowedResourceScheme?: (url: string, dataHash: string) => Promise): Promise ``` * * * ### saveToArchive()[#](#savetoarchive) Saves the current scene and all of its referenced assets into an archive. The archive contains all assets, that were accessible when this function was called. Blocks in the archived scene reference assets relative from to the location of the scene file. These references are resolved when loading such a scene via `loadSceneFromURL`. #### Returns[#](#returns-8) `Promise`<`Blob`\> A promise that resolves with a Blob on success or an error on failure. #### Signature[#](#signature-8) ``` saveToArchive(): Promise ``` ## Page Management[#](#page-management) Manage pages within scenes and find elements. ### getPages()[#](#getpages) Get the sorted list of pages in the scene. ``` const pages = engine.scene.getPages(); ``` #### Returns[#](#returns-9) `number`\[\] The sorted list of pages in the scene. #### Signature[#](#signature-9) ``` getPages(): number[] ``` * * * ### getCurrentPage()[#](#getcurrentpage) Get the current page, i.e., the page of the first selected element if this page is at least 25% visible or, otherwise, the page nearest to the viewport center. ``` const currentPage = engine.scene.getCurrentPage(); ``` #### Returns[#](#returns-10) `number` The current page in the scene or null. #### Signature[#](#signature-10) ``` getCurrentPage(): number ``` * * * ### findNearestToViewPortCenterByType()[#](#findnearesttoviewportcenterbytype) Find all blocks with the given type sorted by the distance to viewport center. ``` // Use longhand block type ID to find nearest pages.let nearestPageByType = engine.scene.findNearestToViewPortCenterByType('//ly.img.ubq/page')[0];// Or use shorthand block type ID.nearestPageByType = engine.scene.findNearestToViewPortCenterByType('page')[0]; ``` #### Parameters[#](#parameters-8) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`DesignBlockType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblocktype/) | The type to search for. | #### Returns[#](#returns-11) `number`\[\] A list of block ids sorted by distance to viewport center. #### Signature[#](#signature-11) ``` findNearestToViewPortCenterByType(type: DesignBlockType): number[] ``` * * * ### findNearestToViewPortCenterByKind()[#](#findnearesttoviewportcenterbykind) Find all blocks with the given kind sorted by the distance to viewport center. ``` let nearestImageByKind = engine.scene.findNearestToViewPortCenterByKind('image')[0]; ``` #### Parameters[#](#parameters-9) | Parameter | Type | Description | | --- | --- | --- | | `kind` | `string` | The kind to search for. | #### Returns[#](#returns-12) `number`\[\] A list of block ids sorted by distance to viewport center. #### Signature[#](#signature-12) ``` findNearestToViewPortCenterByKind(kind: string): number[] ``` ## Event Subscriptions[#](#event-subscriptions) Subscribe to scene-related events and changes. ### onZoomLevelChanged()[#](#onzoomlevelchanged) Subscribe to changes to the zoom level. ``` const unsubscribeZoomLevelChanged = engine.scene.onZoomLevelChanged(() => { const zoomLevel = engine.scene.getZoomLevel(); console.log('Zoom level is now: ', zoomLevel);}); ``` #### Parameters[#](#parameters-10) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | This function is called at the end of the engine update, if the zoom level has changed. | #### Returns[#](#returns-13) A method to unsubscribe. ``` (): void; ``` ##### Returns[#](#returns-14) `void` #### Signature[#](#signature-13) ``` onZoomLevelChanged(callback: () => void): () => void ``` * * * ### onActiveChanged()[#](#onactivechanged) Subscribe to changes to the active scene rendered by the engine. ``` const unsubscribe = engine.scene.onActiveChanged(() => { const newActiveScene = engine.scene.get();}); ``` #### Parameters[#](#parameters-11) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | This function is called at the end of the engine update, if the active scene has changed. | #### Returns[#](#returns-15) A method to unsubscribe. ``` (): void; ``` ##### Returns[#](#returns-16) `void` #### Signature[#](#signature-14) ``` onActiveChanged(callback: () => void): () => void ``` ## Experimental Features[#](#experimental-features) Experimental features that may change or be removed in future versions. ### unstable\_enableCameraPositionClamping()[#](#unstable_enablecamerapositionclamping) Continually ensures the camera position to be within the width and height of the blocks axis-aligned bounding box. Disables any previously set camera position clamping in the scene and also takes priority over clamp camera commands. ``` // Keep the scene with padding of 10px within the cameraengine.scene.unstable_enableCameraPositionClamping([scene], 10.0, 10.0, 10.0, 10.0, 0.0, 0.0, 0.0, 0.0); ``` Without padding, this results in a tight clamp on the block. With padding, the padded part of the blocks is ensured to be visible. #### Parameters[#](#parameters-12) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `ids` | `number`\[\] | `undefined` | The blocks to which the camera position is adjusted to, usually, the scene or a page. | | `paddingLeft` | `number` | `0` | Optional padding in screen pixels to the left of the block. | | `paddingTop` | `number` | `0` | Optional padding in screen pixels to the top of the block. | | `paddingRight` | `number` | `0` | Optional padding in screen pixels to the right of the block. | | `paddingBottom` | `number` | `0` | Optional padding in screen pixels to the bottom of the block. | | `scaledPaddingLeft` | `number` | `0` | Optional padding in screen pixels to the left of the block that scales with the zoom level until five times the initial value. | | `scaledPaddingTop` | `number` | `0` | Optional padding in screen pixels to the top of the block that scales with the zoom level until five times the initial value. | | `scaledPaddingRight` | `number` | `0` | Optional padding in screen pixels to the right of the block that scales with the zoom level until five times the initial value. | | `scaledPaddingBottom` | `number` | `0` | Optional padding in screen pixels to the bottom of the block that scales with the zoom level until five times the initial value. This API is experimental and may change or be removed in future versions. | #### Returns[#](#returns-17) `void` * * * ### unstable\_disableCameraPositionClamping()[#](#unstable_disablecamerapositionclamping) Disables any previously set position clamping for the current scene. ``` engine.scene.unstable_disableCameraPositionClamping(); ``` #### Parameters[#](#parameters-13) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene` | `number` | Optionally, the scene or a block in the scene for which to query the position clamping. This API is experimental and may change or be removed in future versions. | #### Returns[#](#returns-18) `void` * * * ### unstable\_isCameraPositionClampingEnabled()[#](#unstable_iscamerapositionclampingenabled) Queries whether position clamping is enabled. ``` engine.scene.unstable_isCameraPositionClampingEnabled(); ``` #### Parameters[#](#parameters-14) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene` | `number` | Optionally, the scene or a block in the scene for which to query the position clamping. | #### Returns[#](#returns-19) `boolean` True if the given block has position clamping set or the scene contains a block for which position clamping is set, false otherwise. This API is experimental and may change or be removed in future versions. * * * ### unstable\_enableCameraZoomClamping()[#](#unstable_enablecamerazoomclamping) Continually ensures the zoom level of the camera in the active scene to be in the given range. ``` // Allow zooming from 12.5% to 800% relative to the size of a pageengine.scene.unstable_enableCameraZoomClamping([page], 0.125, 8.0, 0.0, 0.0, 0.0, 0.0); ``` #### Parameters[#](#parameters-15) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `ids` | `number`\[\] | `undefined` | The blocks to which the camera zoom limits are adjusted to, usually, the scene or a page. | | `minZoomLimit` | `number` | `-1.0` | The minimum zoom level limit when zooming out, unlimited when negative. | | `maxZoomLimit` | `number` | `-1.0` | The maximum zoom level limit when zooming in, unlimited when negative. | | `paddingLeft` | `number` | `0` | Optional padding in screen pixels to the left of the block. Only applied when the block is not a camera. | | `paddingTop` | `number` | `0` | Optional padding in screen pixels to the top of the block. Only applied when the block is not a camera. | | `paddingRight` | `number` | `0` | Optional padding in screen pixels to the right of the block. Only applied when the block is not a camera. | | `paddingBottom` | `number` | `0` | Optional padding in screen pixels to the bottom of the block. Only applied when the block is not a camera. This API is experimental and may change or be removed in future versions. | #### Returns[#](#returns-20) `void` * * * ### unstable\_disableCameraZoomClamping()[#](#unstable_disablecamerazoomclamping) Disables any previously set zoom clamping for the current scene. ``` engine.scene.unstable_disableCameraZoomClamping(); ``` #### Parameters[#](#parameters-16) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene` | `number` | Optionally, the scene or a block for which to query the zoom clamping. This API is experimental and may change or be removed in future versions. | #### Returns[#](#returns-21) `void` * * * ### unstable\_isCameraZoomClampingEnabled()[#](#unstable_iscamerazoomclampingenabled) Queries whether zoom clamping is enabled. ``` engine.scene.unstable_isCameraZoomClampingEnabled(); ``` #### Parameters[#](#parameters-17) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene` | `number` | Optionally, the scene or a block for which to query the zoom clamping. | #### Returns[#](#returns-22) `boolean` True if the given block has zoom clamping set or the scene contains a block for which zoom clamping is set, false otherwise. This API is experimental and may change or be removed in future versions. ## Scene Properties[#](#scene-properties) Get and set scene properties like design units and mode. ### get()[#](#get) Return the currently active scene. ``` const scene = engine.scene.get(); ``` #### Returns[#](#returns-23) `number` The scene or null, if none was created yet. #### Signature[#](#signature-15) ``` get(): number ``` * * * ### getMode()[#](#getmode) Get the current scene mode. ``` const mode = scene.getMode(); ``` #### Returns[#](#returns-24) `"Design"` | `"Video"` The current mode of the scene. #### Signature[#](#signature-16) ``` getMode(): "Design" | "Video" ``` * * * ### setDesignUnit()[#](#setdesignunit) Converts all values of the current scene into the given design unit. ``` engine.scene.setDesignUnit('Pixel'); ``` #### Parameters[#](#parameters-18) | Parameter | Type | Description | | --- | --- | --- | | `designUnit` | `"Pixel"` | `"Millimeter"` | #### Returns[#](#returns-25) `void` #### Signature[#](#signature-17) ``` setDesignUnit(designUnit: "Pixel" | "Millimeter" | "Inch"): void ``` * * * ### getDesignUnit()[#](#getdesignunit) Returns the design unit of the current scene. ``` engine.scene.getDesignUnit(); ``` #### Returns[#](#returns-26) `"Pixel"` | `"Millimeter"` | `"Inch"` The current design unit. #### Signature[#](#signature-18) ``` getDesignUnit(): "Pixel" | "Millimeter" | "Inch" ``` * * * ### getLayout()[#](#getlayout) Get the layout of the current scene. ``` const layout = engine.scene.getLayout(); ``` #### Returns[#](#returns-27) `"Free"` | `"VerticalStack"` | `"HorizontalStack"` | `"DepthStack"` The current layout of the scene. #### Signature[#](#signature-19) ``` getLayout(): "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack" ``` * * * ### setLayout()[#](#setlayout) Set the layout of the current scene. This will handle all necessary conversions including creating or destroying stack blocks and reparenting pages as needed. When transitioning from stack layouts (VerticalStack, HorizontalStack, DepthStack) to Free layout, the global positions of pages are preserved to maintain their visual appearance in the scene. ``` engine.scene.setLayout('VerticalStack'); ``` #### Parameters[#](#parameters-19) | Parameter | Type | Description | | --- | --- | --- | | `layout` | `"Free"` | `"VerticalStack"` | #### Returns[#](#returns-28) `void` #### Signature[#](#signature-20) ``` setLayout(layout: "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack"): void ``` ## Template Operations[#](#template-operations) Apply templates to existing scenes. ### applyTemplateFromString()[#](#applytemplatefromstring) Applies the contents of the given template scene to the currently loaded scene. This loads the template scene while keeping the design unit and page dimensions of the current scene. The content of the pages is automatically adjusted to fit the new dimensions. ``` engine.scene.applyTemplateFromString("UBQ1ewoiZm9ybWF0Ij..."); ``` #### Parameters[#](#parameters-20) | Parameter | Type | Description | | --- | --- | --- | | `content` | `string` | The template scene file contents, a base64 string. | #### Returns[#](#returns-29) `Promise`<`void`\> A Promise that resolves once the template was applied or rejects if there was an error. #### Signature[#](#signature-21) ``` applyTemplateFromString(content: string): Promise ``` * * * ### applyTemplateFromURL()[#](#applytemplatefromurl) Applies the contents of the given template scene to the currently loaded scene. This loads the template scene while keeping the design unit and page dimensions of the current scene. The content of the pages is automatically adjusted to fit the new dimensions. ``` engine.scene.applyTemplateFromURL('https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'); ``` #### Parameters[#](#parameters-21) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The url to the template scene file. | #### Returns[#](#returns-30) `Promise`<`void`\> A Promise that resolves once the template was applied or rejects if there was an error. #### Signature[#](#signature-22) ``` applyTemplateFromURL(url: string): Promise ``` ## Camera & Zoom[#](#camera--zoom) Control camera position, zoom levels, and auto-fit behavior. ### setZoomLevel()[#](#setzoomlevel) Set the zoom level of the scene, e.g., for headless versions. This only shows an effect if the zoom level is not handled/overwritten by the UI. Setting a zoom level of 2.0f results in one dot in the design to be two pixels on the screen. ``` // Zoom to 100%engine.scene.setZoomLevel(1.0); // Zoom to 50%engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel()); ``` #### Parameters[#](#parameters-22) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `zoomLevel` | `number` | `1.0` | The new zoom level. | #### Returns[#](#returns-31) `void` #### Signature[#](#signature-23) ``` setZoomLevel(zoomLevel?: number): void ``` * * * ### getZoomLevel()[#](#getzoomlevel) Get the zoom level of the scene or for a camera in the scene in unit `dpx/dot`. A zoom level of 2.0 results in one pixel in the design to be two pixels on the screen. ``` const zoomLevel = engine.scene.getZoomLevel(); ``` #### Returns[#](#returns-32) `number` The zoom level of the block’s camera. #### Signature[#](#signature-24) ``` getZoomLevel(): number ``` * * * ### zoomToBlock()[#](#zoomtoblock) Sets the zoom and focus to show a block, optionally with animation. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. ##### Parameters[#](#parameters-23) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should be focused on. | | `options?` | [`ZoomOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomoptions/) | Configuration for padding and animation. | ##### Returns[#](#returns-33) `Promise`<`void`\> A promise that resolves once the zoom was set or rejects with an error otherwise. #### Call Signature[#](#call-signature) ``` zoomToBlock( id, paddingLeft?, paddingTop?, paddingRight?,paddingBottom?): Promise; ``` Sets the zoom and focus to show a block. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. ``` // Bring entire scene in view with padding of 20px in all directionsengine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0); ``` ##### Parameters[#](#parameters-24) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should be focused on. | | `paddingLeft?` | `number` | Optional padding in screen pixels to the left of the block. | | `paddingTop?` | `number` | Optional padding in screen pixels to the top of the block. | | `paddingRight?` | `number` | Optional padding in screen pixels to the right of the block. | | `paddingBottom?` | `number` | Optional padding in screen pixels to the bottom of the block. | ##### Returns[#](#returns-34) `Promise`<`void`\> A promise that resolves once the zoom was set or rejects with an error otherwise. ##### Deprecated[#](#deprecated) Use zoomToBlock with options object instead #### Signatures[#](#signatures) ``` zoomToBlock(id: number, options?: ZoomOptions): Promise ``` ``` zoomToBlock(id: number, paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): Promise ``` * * * ### enableZoomAutoFit()[#](#enablezoomautofit) Continually adjusts the zoom level to fit the width or height of a block’s axis-aligned bounding box. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. No more than one block per scene can have zoom auto-fit enabled. Calling `setZoomLevel` or `zoomToBlock` disables the continuous adjustment. ``` // Follow page with padding of 20px horizontally before and after the blockengine.scene.enableZoomAutoFit(page, 'Horizontal', 20, 20) ``` ##### Parameters[#](#parameters-25) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block for which the zoom is adjusted. | | `axis` | `"Horizontal"` | `"Vertical"` | | `paddingBefore?` | `number` | Optional padding in screen pixels before the block. | | `paddingAfter?` | `number` | Optional padding in screen pixels after the block. | ##### Returns[#](#returns-35) `void` #### Call Signature[#](#call-signature-1) ``` enableZoomAutoFit( id, axis, paddingLeft?, paddingTop?, paddingRight?, paddingBottom?): void; ``` Continually adjusts the zoom level to fit the width or height of a block’s axis-aligned bounding box. This only shows an effect if the zoom level is not handled/overwritten by the UI. Without padding, this results in a tight view on the block. Calling `setZoomLevel` or `zoomToBlock` disables the continuous adjustment. ``` // Follow page with padding of 20px in both directionsengine.scene.enableZoomAutoFit(page, 'Both', 20.0, 20.0, 20.0, 20.0); ``` ##### Parameters[#](#parameters-26) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block for which the zoom is adjusted. | | `axis` | `"Both"` | The block axis for which the zoom is adjusted. | | `paddingLeft?` | `number` | Optional padding in screen pixels to the left of the block. | | `paddingTop?` | `number` | Optional padding in screen pixels to the top of the block. | | `paddingRight?` | `number` | Optional padding in screen pixels to the right of the block. | | `paddingBottom?` | `number` | Optional padding in screen pixels to the bottom of the block. | ##### Returns[#](#returns-36) `void` #### Signatures[#](#signatures-1) ``` enableZoomAutoFit(id: number, axis: "Horizontal" | "Vertical", paddingBefore?: number, paddingAfter?: number): void ``` ``` enableZoomAutoFit(id: number, axis: "Both", paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): void ``` * * * ### disableZoomAutoFit()[#](#disablezoomautofit) Disables any previously set zoom auto-fit. ``` engine.scene.disableZoomAutoFit(scene); ``` #### Parameters[#](#parameters-27) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene` | `number` | The scene or a block in the scene for which to disable zoom auto-fit. | #### Returns[#](#returns-37) `void` #### Signature[#](#signature-25) ``` disableZoomAutoFit(blockOrScene: number): void ``` * * * ### isZoomAutoFitEnabled()[#](#iszoomautofitenabled) Queries whether zoom auto-fit is enabled for the given block. ``` engine.scene.isZoomAutoFitEnabled(scene); ``` #### Parameters[#](#parameters-28) | Parameter | Type | Description | | --- | --- | --- | | `blockOrScene` | `number` | The scene or a block in the scene for which to query the zoom auto-fit. | #### Returns[#](#returns-38) `boolean` True if the given block has auto-fit set or the scene contains a block for which auto-fit is set, false otherwise. #### Signature[#](#signature-26) ``` isZoomAutoFitEnabled(blockOrScene: number): boolean ``` ## Other[#](#other) ### setPlaying()[#](#setplaying) Starts or stops playback of the current scene. Only works in Video mode, not in Design mode. #### Parameters[#](#parameters-29) | Parameter | Type | Description | | --- | --- | --- | | `play` | `boolean` | True to start playback, false to stop | #### Returns[#](#returns-39) `void` #### Throws[#](#throws) Error if no page is available for playback #### Signature[#](#signature-27) ``` setPlaying(play: boolean): void ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/userinterfaceapi) # Class: UserInterfaceAPI Control the user interface and behavior of the Creative Editor SDK. The UserInterfaceAPI provides comprehensive methods for managing panels, notifications, dialogs, component registration, UI ordering, asset libraries, and custom interface elements within the editor. ## Constructors[#](#constructors) ### Constructor[#](#constructor) `UserInterfaceAPI` ## Experimental Features[#](#experimental-features) ### unstable\_registerCustomPanel()[#](#unstable_registercustompanel) Registers a custom panel that hooks into a DOM element for custom UI rendering. The onMount function is called when the panel opens, and its return value (if a function) is called when the panel closes for cleanup. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `panelId` | `string` | The unique ID for the custom panel. | | `onMount` | [`CustomPanelMountFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/custompanelmountfunction/) | Function called when the panel is mounted, should return a cleanup function. This API may change or be removed in future versions. | #### Returns[#](#returns) `void` * * * ### ~unstable\_getView()~[#](#unstable_getview) Gets the current view style of the editor interface. #### Returns[#](#returns-1) [`ViewStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/viewstyle/) The current view style (‘default’ or ‘advanced’). #### Deprecated[#](#deprecated) Use `getView()` instead. This experimental API will be removed in a future version. This API may change or be removed in future versions. #### Example[#](#example) ``` // Before (deprecated)const view = cesdk.ui.unstable_getView(); // After (preferred)const view = cesdk.ui.getView(); ``` ## Asset Library[#](#asset-library) ### addAssetLibraryEntry()[#](#addassetlibraryentry) Adds a new asset library entry for display in asset libraries. If an entry with the same ID already exists, it will be replaced. The method validates sorting configurations and warns about duplicates. #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `AssetLibraryEntry` | [`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/) | The asset library entry configuration to add. | #### Returns[#](#returns-2) `void` #### Signature[#](#signature) ``` addAssetLibraryEntry(AssetLibraryEntry: AssetLibraryEntry): void ``` * * * ### updateAssetLibraryEntry()[#](#updateassetlibraryentry) Updates an existing asset library entry with new properties. The provided properties will be merged with the existing entry. #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `id` | [`AssetEntryId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid/) | The ID of the asset library entry to update. | | `assetLibraryEntry` | | `Partial`<`Omit`<[`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/), `"id"` | #### Returns[#](#returns-3) `void` #### Example[#](#example-1) ``` // Simple static updatecesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['my-custom-colors']}); // Update other properties using callback with entrycesdk.ui.updateAssetLibraryEntry('ly.img.pagePresets', (entry) => ({ title: entry?.title ? `${entry.title} (Custom)` : 'Page Formats', icon: { name: 'format-icon' }})); // Extend sourceIds with lazy resolution (preserves dynamic behavior)cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: ({ currentIds }) => [...currentIds, 'my-custom-fonts']}); ``` #### Signature[#](#signature-1) ``` updateAssetLibraryEntry(id: AssetEntryId, assetLibraryEntry: Partial & object> | (entry: AssetLibraryEntry) => Partial & object>): void ``` * * * ### removeAssetLibraryEntry()[#](#removeassetlibraryentry) Removes an asset library entry from the available entries. #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `id` | [`AssetEntryId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid/) | The ID of the asset library entry to remove. | #### Returns[#](#returns-4) `void` #### Signature[#](#signature-2) ``` removeAssetLibraryEntry(id: AssetEntryId): void ``` * * * ### getAssetLibraryEntry()[#](#getassetlibraryentry) Gets a specific asset library entry by its ID. #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `id` | [`AssetEntryId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid/) | The ID of the asset library entry to retrieve. | #### Returns[#](#returns-5) [`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/) The asset library entry configuration, or undefined if not found. #### Signature[#](#signature-3) ``` getAssetLibraryEntry(id: AssetEntryId): AssetLibraryEntry ``` * * * ### findAllAssetLibraryEntries()[#](#findallassetlibraryentries) Gets all currently registered asset library entry IDs. #### Returns[#](#returns-6) [`AssetEntryId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid/)\[\] Array of asset library entry IDs. #### Signature[#](#signature-4) ``` findAllAssetLibraryEntries(): AssetEntryId[] ``` * * * ### ~setBackgroundTrackAssetLibraryEntries()~[#](#setbackgroundtrackassetlibraryentries) Sets the asset library entries to use for the background track in video scenes. This setting only affects video scenes and has no impact on other scene types. #### Parameters[#](#parameters-5) | Parameter | Type | Description | | --- | --- | --- | | `backgroundTrackAssetLibraryEntries` | [`AssetEntryId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid/)\[\] | Array of asset library entry IDs for the background track. | #### Returns[#](#returns-7) `void` #### Deprecated[#](#deprecated-1) please use the cesdk.actions API to register an action for ‘addClip’ and implement your own logic. #### Example[#](#example-2) ``` // Beforecesdk.ui.setBackgroundTrackAssetLibraryEntries(['ly.img.video', 'ly.img.image']);// Aftercesdk.actions.register('addClip', async () => { cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.video', 'ly.img.image'] } });}); ``` * * * ### ~getBackgroundTrackAssetLibraryEntries()~[#](#getbackgroundtrackassetlibraryentries) Gets the asset library entries configured for the background track in video scenes. This setting only affects video scenes and has no impact on other scene types. #### Returns[#](#returns-8) [`AssetEntryId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid/)\[\] Array of asset library entry IDs configured for the background track. #### Deprecated[#](#deprecated-2) The background track entries are now defined via the cesdk.actions API. * * * ### setReplaceAssetLibraryEntries()[#](#setreplaceassetlibraryentries) Sets a function that determines which asset library entries to use for replacement operations. The function receives context information (like selected blocks or default entry IDs) and returns the appropriate asset library entry IDs for replacement. #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `replaceAssetLibraryEntries` | (`context`) => [`AssetEntryId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid/)\[\] | Function that receives context and returns an array of asset library entry IDs for replacement. | #### Returns[#](#returns-9) `void` #### Signature[#](#signature-5) ``` setReplaceAssetLibraryEntries(replaceAssetLibraryEntries: (context: ReplaceAssetLibraryEntriesContext) => AssetEntryId[]): void ``` ## Component Registration[#](#component-registration) ### registerPanel()[#](#registerpanel) Registers a panel with builder-based rendering system. The builder render function will be called with a builder and the engine as arguments. The builder object is used to defined what base components should be rendered (such as a button). The engine can be used to get any state from the engine. The render function will be re-called if anything in the engine changes regarding the made engine calls. #### Type Parameters[#](#type-parameters) | Type Parameter | Default type | | --- | --- | | `P` _extends_ [`ComponentPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) | [`ComponentPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) | #### Parameters[#](#parameters-7) | Parameter | Type | Description | | --- | --- | --- | | `panelId` | `string` | The panel ID for use with panel management APIs. | | `renderPanel` | [`BuilderRenderFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/builderrenderfunction/)<`P`\> | Function that renders the panel content using the builder system. | #### Returns[#](#returns-10) `void` #### Signature[#](#signature-6) ``` registerPanel(panelId: string, renderPanel: BuilderRenderFunction

): void ``` * * * ### ~unstable\_registerPanel()~[#](#unstable_registerpanel) Registers a panel with builder-based rendering system. #### Type Parameters[#](#type-parameters-1) | Type Parameter | Default type | | --- | --- | | `P` _extends_ [`ComponentPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) | [`ComponentPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) | #### Parameters[#](#parameters-8) | Parameter | Type | Description | | --- | --- | --- | | `panelId` | `string` | The panel ID for use with panel management APIs. | | `renderComponent` | [`BuilderRenderFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/builderrenderfunction/)<`P`\> | Function that renders the panel content using the builder system. | #### Returns[#](#returns-11) `void` #### Deprecated[#](#deprecated-3) Use `registerPanel` instead. * * * ### registerComponent()[#](#registercomponent) Registers a component that can be rendered at different UI locations. The builder render function will be called with a builder and the engine as arguments. The builder object is used to defined what base components should be rendered (such as a button). The engine can be used to get any state from the engine. The render function will be re-called if anything in the engine changes regarding the made engine calls. #### Type Parameters[#](#type-parameters-2) | Type Parameter | Default type | | --- | --- | | `P` _extends_ [`ComponentPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) | [`ComponentPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) | #### Parameters[#](#parameters-9) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `string` | `string`\[\] | | `renderComponent` | [`BuilderRenderFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/builderrenderfunction/)<`P`\> | Function that renders the component using the builder system. | #### Returns[#](#returns-12) `void` #### Signature[#](#signature-7) ``` registerComponent(ids: string | string[], renderComponent: BuilderRenderFunction

): void ``` ## Dialogs[#](#dialogs) ### showDialog()[#](#showdialog) Displays a modal dialog with custom content and actions. Dialogs can have different types (info, success, warning, error, loading) and support custom actions like OK, Cancel, or custom buttons. #### Parameters[#](#parameters-10) | Parameter | Type | Description | | --- | --- | --- | | `dialog` | `string` | [`Dialog`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dialog/) | #### Returns[#](#returns-13) `string` The dialog ID for programmatic updates or closure. #### Signature[#](#signature-8) ``` showDialog(dialog: string | Dialog): string ``` * * * ### updateDialog()[#](#updatedialog) Updates an existing dialog with new content or properties. The dialog properties will be merged with the existing dialog configuration. #### Parameters[#](#parameters-11) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | The ID of the dialog to update. | | `dialog` | | `Partial`<[`Dialog`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dialog/)\> | #### Returns[#](#returns-14) `void` #### Signature[#](#signature-9) ``` updateDialog(id: string, dialog: Partial

| (dialog: Dialog) => Partial): void ``` * * * ### closeDialog()[#](#closedialog) Closes a dialog programmatically. If the dialog has an onClose callback, it will be executed before removal. Closing an already closed dialog has no effect. #### Parameters[#](#parameters-12) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | The ID of the dialog to close. | #### Returns[#](#returns-15) `void` #### Signature[#](#signature-10) ``` closeDialog(id: string): void ``` ## Notifications[#](#notifications) ### showNotification()[#](#shownotification) Displays a non-blocking notification message to the user. Notifications appear temporarily and can be dismissed by the user. They support different types (info, success, warning, error) and durations. #### Parameters[#](#parameters-13) | Parameter | Type | Description | | --- | --- | --- | | `notification` | | `string` | #### Returns[#](#returns-16) `string` The notification ID for programmatic updates or dismissal. #### Signature[#](#signature-11) ``` showNotification(notification: string | Notification_2): string ``` * * * ### dismissNotification()[#](#dismissnotification) Dismisses a notification programmatically. #### Parameters[#](#parameters-14) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | The ID of the notification to dismiss. | #### Returns[#](#returns-17) `void` #### Signature[#](#signature-12) ``` dismissNotification(id: string): void ``` * * * ### updateNotification()[#](#updatenotification) Updates an existing notification with new content or properties. The notification object will be merged with the existing notification. If the duration is updated, the timeout will be reset. Updates to dismissed notifications are ignored. #### Parameters[#](#parameters-15) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | The ID of the notification to update. | | `notification` | `Partial`<[`Notification`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/notification/)\> | Partial notification properties to merge. | #### Returns[#](#returns-18) `void` #### Signature[#](#signature-13) ``` updateNotification(id: string, notification: Partial): void ``` ## Other[#](#other) ### experimental[#](#experimental) PLEASE NOTE: This contains experimental APIs. Use them with caution since they might change without warning and might be replaced with a completely different concept or maybe not at all. * * * ### getView()[#](#getview) Gets the current view style of the editor interface. The view style controls the complexity and feature set shown in the UI. ‘default’ provides a simplified interface, while ‘advanced’ shows more comprehensive editing tools and options. #### Returns[#](#returns-19) [`ViewStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/viewstyle/) The current view style (‘default’ or ‘advanced’). #### Example[#](#example-3) ``` // Get the current view styleconst viewStyle = cesdk.ui.getView(); // 'default' or 'advanced' // Use for conditional UI logicconst showAdvancedOptions = cesdk.ui.getView() === 'advanced'; // Switch to advanced mode if currently in defaultif (cesdk.ui.getView() === 'default') { cesdk.ui.setView('advanced');} ``` #### Signature[#](#signature-14) ``` getView(): ViewStyle ``` * * * ### setView()[#](#setview) Sets the view style of the editor interface. This immediately updates the UI to reflect the new view style. The view style controls which UI elements and features are available. #### Parameters[#](#parameters-16) | Parameter | Type | Description | | --- | --- | --- | | `view` | [`ViewStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/viewstyle/) | The view style to set (‘default’ or ‘advanced’). | #### Returns[#](#returns-20) `void` #### Example[#](#example-4) ``` // Set view to advanced modecesdk.ui.setView('advanced'); // Set view to simplified modecesdk.ui.setView('default'); // Toggle between view stylesconst currentView = cesdk.ui.getView();const newView = currentView === 'advanced' ? 'default' : 'advanced';cesdk.ui.setView(newView); ``` * * * ### applyForceCrop()[#](#applyforcecrop) programmatically applies a crop preset to a design block. This is useful in scenarios where you want to enforce a particular format (e.g., fixed aspect ratio) and define how the editor should respond after the preset is applied. #### Parameters[#](#parameters-17) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The ID of the design block to apply the crop preset to. | | `options` | { `sourceId`: `string`; `presetId`: `string`; `mode`: `"silent"` | `"always"` | | `options.sourceId` | `string` | \- | | `options.presetId` | `string` | \- | | `options.mode` | `"silent"` | `"always"` | #### Returns[#](#returns-21) `Promise`<`void`\> #### Signature[#](#signature-15) ``` applyForceCrop(id: number, options: object): Promise ``` ## Panel Management[#](#panel-management) ### openPanel()[#](#openpanel) Opens a panel if it exists, is not already open, and is currently registered. If requirements are not met, this is a no-op. Available built-in panel IDs: * `//ly.img.panel/inspector` - Opens the inspector panel for the selected block * `//ly.img.panel/assetLibrary.replace` - Opens the asset library for replacing the selected block. Beware that the library might show nothing depending on how it was configured. #### Type Parameters[#](#type-parameters-3) | Type Parameter | | --- | | `T` _extends_ [`PanelId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | #### Parameters[#](#parameters-18) | Parameter | Type | Description | | --- | --- | --- | | `panelId` | `T` | The ID of the panel to open. | | `options?` | [`PanelOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneloptions/)<`T`\> | Optional configuration for panel position and floating state. | #### Returns[#](#returns-22) `void` #### Signature[#](#signature-16) ``` openPanel(panelId: T, options?: PanelOptions): void ``` * * * ### closePanel()[#](#closepanel) Closes panels that match the given pattern. Supports wildcard matching. Available built-in panel IDs: * `//ly.img.panel/inspector` - Inspector panel * `//ly.img.panel/assetLibrary` - Asset library * `//ly.img.panel/assetLibrary.replace` - Replacement asset library #### Parameters[#](#parameters-19) | Parameter | Type | Description | | --- | --- | --- | | `panelId` | `string` | The panel ID or pattern to match panels for closing. | #### Returns[#](#returns-23) `void` #### Example[#](#example-5) ``` // Close a specific panel by exact IDcesdk.ui.closePanel('//ly.img.panel/inspector'); // Close all ly.img panels using wildcardcesdk.ui.closePanel('//ly.img.*'); // Close all panels with specific prefixcesdk.ui.closePanel('//ly.img.panel/*'); // Close panels matching complex patterncesdk.ui.closePanel('//ly.img.panel/' + '*' + '/stroke/' + '*'); // Close any inspector panels regardless of namespacecesdk.ui.closePanel('*' + '/inspector'); // Close all asset library panelscesdk.ui.closePanel('*assetLibrary*'); ``` #### Signature[#](#signature-17) ``` closePanel(panelId: string): void ``` * * * ### isPanelOpen()[#](#ispanelopen) Checks if a panel is currently open. Available built-in panel IDs: * `//ly.img.panel/inspector` - Inspector panel for the selected block * `//ly.img.panel/assetLibrary` - Asset library panel * `//ly.img.panel/assetLibrary.replace` - Replacement asset library panel #### Type Parameters[#](#type-parameters-4) | Type Parameter | | --- | | `T` _extends_ [`PanelId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | #### Parameters[#](#parameters-20) | Parameter | Type | Description | | --- | --- | --- | | `panelId` | `T` | The ID of the panel to check. | | `options?` | [`PanelOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneloptions/)<`T`\> | Optional criteria to match against the panel’s current state. | #### Returns[#](#returns-24) `boolean` True if the panel is open and matches the specified options, false otherwise. #### Signature[#](#signature-18) ``` isPanelOpen(panelId: T, options?: PanelOptions): boolean ``` * * * ### findAllPanels()[#](#findallpanels) Gets all panel IDs, optionally filtered by state or position. #### Type Parameters[#](#type-parameters-5) | Type Parameter | | --- | | `T` _extends_ [`PanelId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | #### Parameters[#](#parameters-21) | Parameter | Type | Description | | --- | --- | --- | | `options?` | [`PanelOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneloptions/)<`T`\> & `object` | Optional filter criteria for panel state and position. | #### Returns[#](#returns-25) `string`\[\] Array of panel IDs matching the specified criteria. #### Example[#](#example-6) ``` cesdk.ui.findAllPanels();cesdk.ui.findAllPanels({ open: true, position: 'left' }); ``` #### Signature[#](#signature-19) ``` findAllPanels(options?: PanelOptions & object): string[] ``` * * * ### setPanelPosition()[#](#setpanelposition) Sets the position of a panel within the editor interface. #### Parameters[#](#parameters-22) | Parameter | Type | Description | | --- | --- | --- | | `panelId` | `string` | The ID of the panel to position. | | `panelPosition` | | [`PanelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/enumerations/panelposition/) | #### Returns[#](#returns-26) `void` #### Signature[#](#signature-20) ``` setPanelPosition(panelId: string, panelPosition: PanelPosition | () => PanelPosition): void ``` * * * ### getPanelPosition()[#](#getpanelposition) Gets the current position of a panel. #### Parameters[#](#parameters-23) | Parameter | Type | Description | | --- | --- | --- | | `panelId` | `string` | The ID of the panel. | #### Returns[#](#returns-27) [`PanelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/enumerations/panelposition/) The panel’s position (‘left’ or ‘right’). #### Signature[#](#signature-21) ``` getPanelPosition(panelId: string): PanelPosition ``` * * * ### setPanelFloating()[#](#setpanelfloating) Sets whether a panel floats over the canvas. #### Parameters[#](#parameters-24) | Parameter | Type | Description | | --- | --- | --- | | `panelId` | `string` | The ID of the panel to configure. | | `floating` | `boolean` | () => `boolean` | #### Returns[#](#returns-28) `void` #### Signature[#](#signature-22) ``` setPanelFloating(panelId: string, floating: boolean | () => boolean): void ``` * * * ### getPanelFloating()[#](#getpanelfloating) Checks if a panel is currently floating over the canvas. #### Parameters[#](#parameters-25) | Parameter | Type | Description | | --- | --- | --- | | `panelId` | `string` | The ID of the panel to check. | #### Returns[#](#returns-29) `boolean` True if the panel is floating, false if it’s docked. #### Signature[#](#signature-23) ``` getPanelFloating(panelId: string): boolean ``` ## Theme Management[#](#theme-management) ### getTheme()[#](#gettheme) Gets the resolved theme that is currently being used. If the theme configuration is ‘system’, returns the OS preference. If the theme configuration is a function, it is evaluated lazily and the result is returned. #### Returns[#](#returns-30) [`Theme`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/theme/) The resolved theme (‘light’ or ‘dark’). #### Example[#](#example-7) ``` // Get the actual theme being usedconst theme = cesdk.ui.getTheme(); // 'light' or 'dark' // Use for conditional stylingconst iconColor = cesdk.ui.getTheme() === 'dark' ? 'white' : 'black'; // Theme function is evaluated each time getTheme() is calledcesdk.ui.setTheme(() => new Date().getHours() >= 18 ? 'dark' : 'light');const currentTheme = cesdk.ui.getTheme(); // Function is evaluated here ``` #### Signature[#](#signature-24) ``` getTheme(): Theme ``` * * * ### setTheme()[#](#settheme) Sets the theme configuration. This will immediately update the UI to reflect the new theme. Can be set to: * ‘light’ or ‘dark’ for a specific theme * ‘system’ to use the OS preference * A function that returns ‘light’ or ‘dark’ for dynamic theming #### Parameters[#](#parameters-26) | Parameter | Type | Description | | --- | --- | --- | | `theme` | [`ThemeConfig`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/themeconfig/) | The theme configuration to set. | #### Returns[#](#returns-31) `void` #### Example[#](#example-8) ``` // Set a specific themecesdk.ui.setTheme('dark'); // Use system preferencecesdk.ui.setTheme('system'); // Set theme based on custom logiccesdk.ui.setTheme(() => { const hour = new Date().getHours(); return hour >= 18 || hour < 6 ? 'dark' : 'light';}); // Toggle between themesconst currentTheme = cesdk.ui.getTheme();const newTheme = currentTheme === 'dark' ? 'light' : 'dark';cesdk.ui.setTheme(newTheme); ``` ## UI Layout[#](#ui-layout) ### setDockOrder()[#](#setdockorder) Sets the rendering order of components in the dock area. The ids in this order refer to registered default components or custom components registered in `registerComponent`. Different orders can be set depending on different contexts. The context consists of the edit mode (e.g. `Transform` or `Text`) right now. If no context is given, the default order is set for the `Transform` edit mode. #### Parameters[#](#parameters-27) | Parameter | Type | Description | | --- | --- | --- | | `dockOrder` | ( | [`DockOrderComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/) | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying when this order applies. | #### Returns[#](#returns-32) `void` #### Signature[#](#signature-25) ``` setDockOrder(dockOrder: DockOrderComponentId | DockOrderComponent[], orderContext?: OrderContext): void ``` * * * ### getDockOrder()[#](#getdockorder) Gets the current rendering order of dock components. The id in this order refer to registered default components or custom components registered in `registerComponent`. Different orders could have been set depending on different contexts. The context consists of the edit mode (e.g. `Transform` or `Text`) right now. If no context is given, the default order (with `Transform` edit mode) is returned. #### Parameters[#](#parameters-28) | Parameter | Type | Description | | --- | --- | --- | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to retrieve. | #### Returns[#](#returns-33) [`DockOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponent/)\[\] Array of component configurations defining the dock order. #### Signature[#](#signature-26) ``` getDockOrder(orderContext?: OrderContext): DockOrderComponent[] ``` * * * ### updateDockOrderComponent()[#](#updatedockordercomponent) Updates a component in the render order of the dock area. This method finds a dock order component matching the provided matcher and updates it with the given component, ID, or updater function. The matcher can be a function or an object describing the component to match. The update can be a new ID, a partial object with updated properties, or a function that receives the current component and returns the updated one. The update API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-29) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`DockOrderComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/)\>> | Function or object to match the component to update. | | `update` | | [`DockOrderComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/) | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-34) `object` The updated dock order array. | Name | Type | | --- | --- | | `updated` | `number` | | `order` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`DockOrderComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/)\>\[\] | #### Signature[#](#signature-27) ``` updateDockOrderComponent(matcher: OrderComponentMatcher>, update: DockOrderComponentId | Partial> | (component: OrderComponent) => Partial>, orderContext?: OrderContext): object ``` * * * ### removeDockOrderComponent()[#](#removedockordercomponent) Removes a component from the render order of the dock area. This method finds a dock order component matching the provided matcher and removes it from the current order. The matcher can be a function or an object describing the component to match. The remove API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-30) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`DockOrderComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/)\>> | Function or object to match the component to remove. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-35) `object` The updated dock order array. | Name | Type | | --- | --- | | `removed` | `number` | | `order` | [`DockOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponent/)\[\] | #### Signature[#](#signature-28) ``` removeDockOrderComponent(matcher: OrderComponentMatcher>, orderContext?: OrderContext): object ``` * * * ### insertDockOrderComponent()[#](#insertdockordercomponent) Inserts a component into the render order of the dock area. This method inserts a new dock order component before, after, or to replace a component matching the provided matcher. The matcher can be a function or an object describing the component to match. The location can be ‘before’, ‘after’, or ‘replace’. The insert API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-31) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`DockOrderComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/)\>> | Function or object to match the component to insert relative to. | | `component` | | [`DockOrderComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/) | | `location?` | [`InsertOrderComponentLocation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/insertordercomponentlocation/) | Where to insert the new component relative to the matched component (‘before’ or ‘after’). | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-36) `object` The updated dock order array. | Name | Type | | --- | --- | | `inserted` | `boolean` | | `order` | [`DockOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponent/)\[\] | #### Signature[#](#signature-29) ``` insertDockOrderComponent(matcher: OrderComponentMatcher>, component: DockOrderComponentId | OrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext): object ``` * * * ### setInspectorBarOrder()[#](#setinspectorbarorder) Sets the rendering order of components in the inspector bar. The id in this order refer to registered default components or custom components registered in `registerComponent`. Different orders can be set depending on different contexts. The context consists of the edit mode (e.g. `Transform` or `Text`) right now. If no context is given, the default order is set for the `Transform` edit mode. #### Parameters[#](#parameters-32) | Parameter | Type | Description | | --- | --- | --- | | `inspectorBarOrder` | ( | [`InspectorBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/) | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying when this order applies. | #### Returns[#](#returns-37) `void` #### Signature[#](#signature-30) ``` setInspectorBarOrder(inspectorBarOrder: InspectorBarComponentId | OrderComponent[], orderContext?: OrderContext): void ``` * * * ### getInspectorBarOrder()[#](#getinspectorbarorder) Gets the current rendering order of inspector bar components. Component IDs refer to built-in components or those registered via registerComponent. Returns the order for the specified context, or defaults to Transform mode if no context is provided. #### Parameters[#](#parameters-33) | Parameter | Type | Description | | --- | --- | --- | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to retrieve. | #### Returns[#](#returns-38) [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`ComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentid/)\>\[\] Array of component configurations defining the inspector bar order. #### Signature[#](#signature-31) ``` getInspectorBarOrder(orderContext?: OrderContext): OrderComponent[] ``` * * * ### updateInspectorBarOrderComponent()[#](#updateinspectorbarordercomponent) Updates a component in the render order of the inspector bar. This method finds an inspector bar order component matching the provided matcher and updates it with the given component, ID, or updater function. The matcher can be a function or an object describing the component to match. The update can be a new ID, a partial object with updated properties, or a function that receives the current component and returns the updated one. The update API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-34) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`InspectorBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/)\>> | Function or object to match the component to update. | | `update` | | [`InspectorBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/) | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-39) `object` The updated inspector bar order array. | Name | Type | | --- | --- | | `updated` | `number` | | `order` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`InspectorBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/)\>\[\] | #### Signature[#](#signature-32) ``` updateInspectorBarOrderComponent(matcher: OrderComponentMatcher>, update: InspectorBarComponentId | Partial> | (component: OrderComponent) => Partial>, orderContext?: OrderContext): object ``` * * * ### removeInspectorBarOrderComponent()[#](#removeinspectorbarordercomponent) Removes a component from the render order of the inspector bar. This method finds an inspector bar order component matching the provided matcher and removes it from the current order. The matcher can be a function or an object describing the component to match. The remove API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-35) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`InspectorBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/)\>> | Function or object to match the component to remove. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-40) `object` The updated inspector bar order array. | Name | Type | | --- | --- | | `removed` | `number` | | `order` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`InspectorBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/)\>\[\] | #### Signature[#](#signature-33) ``` removeInspectorBarOrderComponent(matcher: OrderComponentMatcher>, orderContext?: OrderContext): object ``` * * * ### insertInspectorBarOrderComponent()[#](#insertinspectorbarordercomponent) Inserts a component into the render order of the inspector bar. This method inserts a new inspector bar order component before, after, or to replace a component matching the provided matcher. The matcher can be a function or an object describing the component to match. The location can be ‘before’, ‘after’, or ‘replace’. The insert API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-36) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`InspectorBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/)\>> | Function or object to match the component to insert relative to. | | `component` | | [`InspectorBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/) | | `location?` | [`InsertOrderComponentLocation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/insertordercomponentlocation/) | Where to insert the new component relative to the matched component (‘before’ or ‘after’). | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-41) `object` The updated inspector bar order array. | Name | Type | | --- | --- | | `inserted` | `boolean` | | `order` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`InspectorBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/)\>\[\] | #### Signature[#](#signature-34) ``` insertInspectorBarOrderComponent(matcher: OrderComponentMatcher>, component: InspectorBarComponentId | OrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext): object ``` * * * ### setCanvasMenuOrder()[#](#setcanvasmenuorder) Sets the rendering order of components in the canvas menu. Component IDs refer to built-in components or those registered via registerComponent. Different orders can be set for different contexts (e.g., Transform or Text edit modes). Defaults to Transform mode if no context is provided. #### Parameters[#](#parameters-37) | Parameter | Type | Description | | --- | --- | --- | | `canvasMenuOrder` | ( | [`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/) | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying when this order applies. | #### Returns[#](#returns-42) `void` #### Signature[#](#signature-35) ``` setCanvasMenuOrder(canvasMenuOrder: CanvasMenuComponentId | CanvasMenuOrderComponent[], orderContext?: OrderContext): void ``` * * * ### getCanvasMenuOrder()[#](#getcanvasmenuorder) Gets the current rendering order of canvas menu components. Component IDs refer to built-in components or those registered via registerComponent. Returns the order for the specified context, or defaults to Transform mode if no context is provided. #### Parameters[#](#parameters-38) | Parameter | Type | Description | | --- | --- | --- | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to retrieve. | #### Returns[#](#returns-43) [`CanvasMenuOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent/)\[\] Array of component configurations defining the canvas menu order. #### Signature[#](#signature-36) ``` getCanvasMenuOrder(orderContext?: OrderContext): CanvasMenuOrderComponent[] ``` * * * ### updateCanvasMenuOrderComponent()[#](#updatecanvasmenuordercomponent) Updates a component in the render order of the canvas menu. This method finds a canvas menu order component matching the provided matcher and updates it with the given component, ID, or updater function. The matcher can be a function or an object describing the component to match. The update can be a new ID, a partial object with updated properties, or a function that receives the current component and returns the updated one. The update API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-39) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/)\>> | Function or object to match the component to update. | | `update` | | [`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/) | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-44) `object` An object containing the number of updated components and the updated canvas menu order array. | Name | Type | | --- | --- | | `updated` | `number` | | `order` | [`CanvasMenuOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent/)\[\] | #### Signature[#](#signature-37) ``` updateCanvasMenuOrderComponent(matcher: OrderComponentMatcher>, update: CanvasMenuComponentId | Partial | (component: CanvasMenuOrderComponent) => Partial, orderContext?: OrderContext): object ``` * * * ### removeCanvasMenuOrderComponent()[#](#removecanvasmenuordercomponent) Removes a component from the render order of the canvas menu. This method finds a canvas menu order component matching the provided matcher and removes it from the current order. The matcher can be a function or an object describing the component to match. The remove API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-40) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/)\>> | Function or object to match the component to remove. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-45) `object` An object containing the number of removed components and the updated canvas menu order array. | Name | Type | | --- | --- | | `removed` | `number` | | `order` | [`CanvasMenuOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent/)\[\] | #### Signature[#](#signature-38) ``` removeCanvasMenuOrderComponent(matcher: OrderComponentMatcher>, orderContext?: OrderContext): object ``` * * * ### insertCanvasMenuOrderComponent()[#](#insertcanvasmenuordercomponent) Inserts a component into the render order of the canvas menu. This method inserts a new canvas menu order component before, after, or to replace a component matching the provided matcher. The matcher can be a function or an object describing the component to match. The location can be ‘before’, ‘after’, or ‘replace’. The insert API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-41) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/)\>> | Function or object to match the component to insert relative to. | | `component` | | [`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/) | | `location?` | [`InsertOrderComponentLocation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/insertordercomponentlocation/) | Where to insert the new component relative to the matched component (‘before’ or ‘after’). | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-46) `object` The updated canvas menu order array. | Name | Type | | --- | --- | | `inserted` | `boolean` | | `order` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/)\>\[\] | #### Signature[#](#signature-39) ``` insertCanvasMenuOrderComponent(matcher: OrderComponentMatcher>, component: CanvasMenuComponentId | CanvasMenuOrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext): object ``` * * * ### setNavigationBarOrder()[#](#setnavigationbarorder) Sets the rendering order of components in the navigation bar. Component IDs refer to built-in components or those registered via registerComponent. Different orders can be set for different contexts (e.g., Transform or Text edit modes). Defaults to Transform mode if no context is provided. #### Parameters[#](#parameters-42) | Parameter | Type | Description | | --- | --- | --- | | `navigationBarOrder` | ( | [`NavigationBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid/) | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying when this order applies. | #### Returns[#](#returns-47) `void` #### Signature[#](#signature-40) ``` setNavigationBarOrder(navigationBarOrder: NavigationBarComponentId | NavigationBarOrderComponent[], orderContext?: OrderContext): void ``` * * * ### updateNavigationBarOrderComponent()[#](#updatenavigationbarordercomponent) Updates a component in the render order of the navigation bar. This method finds a navigation bar order component matching the provided matcher and updates it with the given component, ID, or updater function. The matcher can be a function or an object describing the component to match. The update can be a new ID, a partial object with updated properties, or a function that receives the current component and returns the updated one. The update API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-43) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`NavigationBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid/)\>> | Function or object to match the component to update. | | `update` | | [`NavigationBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid/) | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-48) `object` An object containing the number of updated components and the updated navigation bar order array. | Name | Type | | --- | --- | | `updated` | `number` | | `order` | [`NavigationBarOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarordercomponent/)\[\] | #### Signature[#](#signature-41) ``` updateNavigationBarOrderComponent(matcher: OrderComponentMatcher>, update: NavigationBarComponentId | Partial | (component: NavigationBarOrderComponent) => Partial, orderContext?: OrderContext): object ``` * * * ### removeNavigationBarOrderComponent()[#](#removenavigationbarordercomponent) Removes a component from the render order of the navigation bar. This method finds a navigation bar order component matching the provided matcher and removes it from the current order. The matcher can be a function or an object describing the component to match. The remove API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-44) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`NavigationBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid/)\>> | Function or object to match the component to remove. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-49) `object` An object containing the number of removed components and the updated navigation bar order array. | Name | Type | | --- | --- | | `removed` | `number` | | `order` | [`NavigationBarOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarordercomponent/)\[\] | #### Signature[#](#signature-42) ``` removeNavigationBarOrderComponent(matcher: OrderComponentMatcher>, orderContext?: OrderContext): object ``` * * * ### insertNavigationBarOrderComponent()[#](#insertnavigationbarordercomponent) Inserts a component into the render order of the navigation bar. This method inserts a new navigation bar order component before, after, or to replace a component matching the provided matcher. The matcher can be a function or an object describing the component to match. The location can be ‘before’, ‘after’, or ‘replace’. The insert API can be used in different contexts (such as edit modes). #### Parameters[#](#parameters-45) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`NavigationBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid/)\>> | Function or object to match the component to insert relative to. | | `component` | | [`NavigationBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid/) | | `location?` | [`InsertOrderComponentLocation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/insertordercomponentlocation/) | Where to insert the new component relative to the matched component (‘before’ or ‘after’). | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-50) `object` The updated navigation bar order array. | Name | Type | | --- | --- | | `inserted` | `boolean` | | `order` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`NavigationBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid/)\>\[\] | #### Signature[#](#signature-43) ``` insertNavigationBarOrderComponent(matcher: OrderComponentMatcher>, component: NavigationBarComponentId | NavigationBarOrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext): object ``` * * * ### getNavigationBarOrder()[#](#getnavigationbarorder) Gets the current rendering order of navigation bar components. Component IDs refer to built-in components or those registered via registerComponent. Returns the order for the specified context, or defaults to Transform mode if no context is provided. #### Parameters[#](#parameters-46) | Parameter | Type | Description | | --- | --- | --- | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to retrieve. | #### Returns[#](#returns-51) [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`ComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentid/)\>\[\] Array of component configurations defining the navigation bar order. #### Signature[#](#signature-44) ``` getNavigationBarOrder(orderContext?: OrderContext): OrderComponent[] ``` * * * ### setCanvasBarOrder()[#](#setcanvasbarorder) Sets the rendering order of components in the canvas bar. Component IDs refer to built-in components or those registered via registerComponent. Canvas bars can be positioned at the top or bottom of the canvas. Different orders can be set for different contexts (e.g., Transform or Text edit modes). Defaults to Transform mode if no context is provided. #### Parameters[#](#parameters-47) | Parameter | Type | Description | | --- | --- | --- | | `canvasBarOrder` | ( | [`CanvasBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/) | | `position` | `"top"` | `"bottom"` | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying when this order applies. | #### Returns[#](#returns-52) `void` #### Signature[#](#signature-45) ``` setCanvasBarOrder(canvasBarOrder: CanvasBarComponentId | OrderComponent[], position: "top" | "bottom", orderContext?: OrderContext): void ``` * * * ### getCanvasBarOrder()[#](#getcanvasbarorder) Gets the current rendering order of canvas bar components at the specified position. Component IDs refer to built-in components or those registered via registerComponent. Returns the order for the specified context, or defaults to Transform mode if no context is provided. #### Parameters[#](#parameters-48) | Parameter | Type | Description | | --- | --- | --- | | `position` | `"top"` | `"bottom"` | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to retrieve. | #### Returns[#](#returns-53) [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`ComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentid/)\>\[\] Array of component configurations defining the canvas bar order. #### Signature[#](#signature-46) ``` getCanvasBarOrder(position: "top" | "bottom", orderContext?: OrderContext): OrderComponent[] ``` * * * ### updateCanvasBarOrderComponent()[#](#updatecanvasbarordercomponent) Updates a component in the render order of the canvas bar. This method finds a canvas bar order component matching the provided matcher and updates it with the given component, ID, or updater function. The matcher can be a function or an object describing the component to match. The update can be a new ID, a partial object with updated properties, or a function that receives the current component and returns the updated one. The update API can be used in different contexts (such as edit modes and bar positions). #### Parameters[#](#parameters-49) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`CanvasBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/)\>> | Function or object to match the component to update. | | `update` | | [`CanvasBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/) | | `position` | `"top"` | `"bottom"` | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-54) `object` The updated canvas bar order array. | Name | Type | | --- | --- | | `updated` | `number` | | `order` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`CanvasBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/)\>\[\] | #### Signature[#](#signature-47) ``` updateCanvasBarOrderComponent(matcher: OrderComponentMatcher>, update: CanvasBarComponentId | Partial> | (component: OrderComponent) => Partial>, position: "top" | "bottom", orderContext?: OrderContext): object ``` * * * ### removeCanvasBarOrderComponent()[#](#removecanvasbarordercomponent) Removes a component from the render order of the canvas bar. This method finds a canvas bar order component matching the provided matcher and removes it from the current order. The matcher can be a function or an object describing the component to match. The remove API can be used in different contexts (such as edit modes and bar positions). #### Parameters[#](#parameters-50) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`CanvasBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/)\>> | Function or object to match the component to remove. | | `position` | `"top"` | `"bottom"` | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-55) `object` The updated canvas bar order array. | Name | Type | | --- | --- | | `removed` | `number` | | `order` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`CanvasBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/)\>\[\] | #### Signature[#](#signature-48) ``` removeCanvasBarOrderComponent(matcher: OrderComponentMatcher>, position: "top" | "bottom", orderContext?: OrderContext): object ``` * * * ### insertCanvasBarOrderComponent()[#](#insertcanvasbarordercomponent) Inserts a component into the render order of the canvas bar. This method inserts a new canvas bar order component before, after, or to replace a component matching the provided matcher. The matcher can be a function or an object describing the component to match. The location can be ‘before’, ‘after’, or ‘replace’. The insert API can be used in different contexts (such as edit modes and bar positions). #### Parameters[#](#parameters-51) | Parameter | Type | Description | | --- | --- | --- | | `matcher` | [`OrderComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/)<[`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`CanvasBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/)\>> | Function or object to match the component to insert relative to. | | `component` | | [`CanvasBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/) | | `position` | `"top"` | `"bottom"` | | `location?` | [`InsertOrderComponentLocation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/insertordercomponentlocation/) | Where to insert the new component relative to the matched component (‘before’ or ‘after’). | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns[#](#returns-56) `object` The updated canvas bar order array. | Name | Type | | --- | --- | | `inserted` | `boolean` | | `order` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<[`CanvasBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/)\>\[\] | #### Signature[#](#signature-49) ``` insertCanvasBarOrderComponent(matcher: OrderComponentMatcher>, component: CanvasBarComponentId | OrderComponent, position: "top" | "bottom", location?: InsertOrderComponentLocation, orderContext?: OrderContext): object ``` * * * ### addIconSet()[#](#addiconset) Adds a custom icon set to the editor interface. The icon set should be an SVG sprite containing symbol elements. Symbol IDs must start with ’@’ to be recognized by the editor. **Security Warning**: The SVG sprite is injected into the DOM without sanitization. Only use trusted sources to prevent XSS attacks. Consider using libraries like DOMPurify for untrusted content. #### Parameters[#](#parameters-52) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | The unique identifier for the icon set. | | `svgSprite` | `string` | The SVG sprite string containing symbol definitions. | #### Returns[#](#returns-57) `void` #### Signature[#](#signature-50) ``` addIconSet(id: string, svgSprite: string): void ``` ## UI Scale Management[#](#ui-scale-management) ### getScale()[#](#getscale) Gets the resolved scale that is currently being used. If the scale configuration is a function, it is evaluated lazily and the result is returned. #### Returns[#](#returns-58) [`Scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scale/) The resolved scale (‘normal’ or ‘large’). #### Example[#](#example-9) ``` // Get the actual scale being usedconst scale = cesdk.ui.getScale(); // 'normal' or 'large' // Use for conditional sizingconst fontSize = cesdk.ui.getScale() === 'large' ? '16px' : '14px'; // Scale function is evaluated each time getScale() is calledcesdk.ui.setScale(({ containerWidth }) => containerWidth < 768 ? 'large' : 'normal');const currentScale = cesdk.ui.getScale(); // Function is evaluated here ``` #### Signature[#](#signature-51) ``` getScale(): Scale ``` * * * ### setScale()[#](#setscale) Sets the scale configuration. This will immediately update the UI to reflect the new scale. Can be set to: * ‘normal’ or ‘large’ for a specific scale * A function that returns ‘normal’ or ‘large’ based on viewport properties #### Parameters[#](#parameters-53) | Parameter | Type | Description | | --- | --- | --- | | `scale` | [`ScaleConfig`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scaleconfig/) | The scale configuration to set. | #### Returns[#](#returns-59) `void` #### Example[#](#example-10) ``` // Set a specific scalecesdk.ui.setScale('large'); // Set scale based on viewportcesdk.ui.setScale(({ containerWidth, isTouch }) => { if (isTouch || containerWidth < 768) { return 'large'; } return 'normal';}); // Toggle between scalesconst currentScale = cesdk.ui.getScale();const newScale = currentScale === 'normal' ? 'large' : 'normal';cesdk.ui.setScale(newScale); ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/internationalizationapi) # Class: InternationalizationAPI Manages localization and internationalization settings for the Creative Editor SDK. The InternationalisationAPI provides methods to get and set the current locale, as well as add custom translations for the editor interface. ## Constructors[#](#constructors) ### Constructor[#](#constructor) `InternationalizationAPI` ## Localization[#](#localization) Methods for managing locale settings and custom translations within the editor. ### getLocale()[#](#getlocale) Gets the currently active locale. #### Returns[#](#returns) `string` The currently set locale as a string, or the fallback locale if none is set. #### Signature[#](#signature) ``` getLocale(): string ``` * * * ### listLocales()[#](#listlocales) Returns all available locales that have been loaded. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `matcher?`: `string`; } | Optional configuration object with the following properties: - `matcher`: Optional pattern to match against. Use `*` for wildcard matching. | | `options.matcher?` | `string` | \- | #### Returns[#](#returns-1) `string`\[\] An array of locale strings that have translations available. #### Example[#](#example) ``` const allLocales = cesdk.i18n.listLocales();console.log('Available locales:', allLocales);// Output: ['en', 'de', 'fr', ...] // Find all English variants using wildcardconst englishLocales = cesdk.i18n.listLocales({ matcher: 'en*' });console.log('English locales:', englishLocales);// Output: ['en', 'en-US', 'en-GB', ...] ``` #### Signature[#](#signature-1) ``` listLocales(options?: object): string[] ``` * * * ### setLocale()[#](#setlocale) Sets the active locale for the editor interface. This will **not check** whether translations for the given locale are available. #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `locale` | `string` | The locale string to set as active (e.g., ‘en’, ‘de’, ‘fr’). | #### Returns[#](#returns-2) `void` * * * ### setTranslations()[#](#settranslations) Adds custom translations for the editor interface. This method allows you to provide custom translations that will be used by the editor interface. Translations are organized by locale and can override or extend the default editor translations. #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `definition` | `Partial`<`Record`<`string`, `Partial`<[`Translations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations/)\>>> | An object mapping locale strings to translation objects. | #### Returns[#](#returns-3) `void` #### Example[#](#example-1) ``` setTranslations({ en: { presets: { scene: ... } }}) ``` #### Signature[#](#signature-2) ``` setTranslations(definition: Partial>>): void ``` * * * ### getTranslations()[#](#gettranslations) Retrieves the translations for the specified locales. This method returns the translations for the given locales, or all available translations if no specific locales are provided. #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `locales?` | `string`\[\] | An optional array of locale strings to retrieve translations for. | #### Returns[#](#returns-4) `Partial`<`Record`<`string`, `Partial`<[`Translations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations/)\>>> An object mapping locale strings to their respective translations. #### Signature[#](#signature-3) ``` getTranslations(locales?: string[]): Partial>> ``` * * * ### translate()[#](#translate) Translates a key or array of keys to the current locale. This method retrieves the translation for the given key(s) in the currently active locale. When an array of keys is provided, the first key that has a translation will be used. If no translation is found for any of the provided keys, the last key in the array (or the single key if a string is provided) will be returned as the fallback value. #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `key` | `string` | `string`\[\] | #### Returns[#](#returns-5) `string` The translated string for the key in the current locale, or the key itself if no translation is found. #### Example[#](#example-2) ``` // Single keyconst translation = cesdk.i18n.translate('common.save');// Returns: "Save" (if translation exists) or "common.save" (if not found) // Array of keys (fallback)const translation = cesdk.i18n.translate(['specific.save', 'common.save']);// Tries 'specific.save' first, then 'common.save'// Returns the first found translation or "common.save" if neither exists ``` #### Signature[#](#signature-4) ``` translate(key: string | string[]): string ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/featureapi) # Class: FeatureAPI Controls the availability of features within the Creative Editor SDK. The FeatureAPI allows you to enable or disable specific functionality within the editor based on custom conditions or user permissions. ## Understanding the Feature System[#](#understanding-the-feature-system) The feature system uses a **predicate chain** to determine if a feature is enabled. There are two types of predicates: 1. **Boolean predicates** (e.g., `true` or `false`) - These are **always terminal** and immediately return their value. 2. **Function predicates** - The implementation decides whether to call `isPreviousEnable()` (continue chain) or return directly (end chain). ### Evaluation Order[#](#evaluation-order) Predicates are evaluated in this order: 1. **`set()` predicates** (most recent first) - Evaluated **FIRST** 2. **`enable()`/`disable()` state** - Evaluated **LAST** This means **`set()` can override `enable()` and `disable()`**. ## Common Use Cases and Expected Outcomes[#](#common-use-cases-and-expected-outcomes) ### Use Case 1: Simple Enable/Disable[#](#use-case-1-simple-enabledisable) ``` // Enable a feature with its default behaviorcesdk.feature.enable('ly.img.delete');// isEnabled: true // Disable itcesdk.feature.disable('ly.img.delete');// isEnabled: false // Re-enable itcesdk.feature.enable('ly.img.delete');// isEnabled: true ``` **Expected outcome:** `enable()` and `disable()` work together to toggle features on/off. ### Use Case 2: Custom Conditions with `set()`[#](#use-case-2-custom-conditions-with-set) ``` // Enable delete only when something is selectedcesdk.feature.set('ly.img.delete', ({ engine }) => { return engine.block.findAllSelected().length > 0;});// isEnabled: depends on selection // Now calling disable() won't work because set() is evaluated first!cesdk.feature.disable('ly.img.delete');// isEnabled: still depends on selection (disable is ignored) ``` **Expected outcome:** `set()` function predicates are evaluated before `disable()`, so `disable()` has no effect when a `set()` predicate exists. ### Use Case 3: Terminal Boolean Predicates[#](#use-case-3-terminal-boolean-predicates) ``` cesdk.feature.enable('ly.img.delete'); // Default predicate: truecesdk.feature.set('ly.img.delete', false); // Adds false to front// Chain: [set(false), enable(true)]// Evaluation: false (stops here, never reaches enable)// isEnabled: false cesdk.feature.set('ly.img.delete', true); // Adds true to front// Chain: [set(true), set(false), enable(true)]// Evaluation: true (stops here, never reaches the rest)// isEnabled: true ``` **Expected outcome:** The most recent `set()` call with a boolean wins because boolean predicates are terminal. ### Use Case 4: Layering Conditions with Functions[#](#use-case-4-layering-conditions-with-functions) ``` // Base: Feature enabled by defaultcesdk.feature.enable('ly.img.delete'); // Layer 1: Add selection requirementcesdk.feature.set('ly.img.delete', ({ isPreviousEnable, engine }) => { const baseEnabled = isPreviousEnable(); // Checks enable(true) const hasSelection = engine.block.findAllSelected().length > 0; return baseEnabled && hasSelection;});// isEnabled: true only if enabled AND has selection // Layer 2: Add mode requirementcesdk.feature.set('ly.img.delete', ({ isPreviousEnable, engine }) => { const previousEnabled = isPreviousEnable(); // Checks Layer 1 const isDesignMode = engine.scene.getMode() === 'Design'; return previousEnabled && isDesignMode;});// isEnabled: true only if all conditions met (mode + selection + enabled) ``` **Expected outcome:** Each `set()` call with a function can build on previous conditions by calling `isPreviousEnable()`. ### Use Case 5: Overriding with `set()`[#](#use-case-5-overriding-with-set) ``` cesdk.feature.enable('ly.img.delete');cesdk.feature.disable('ly.img.delete');// isEnabled: false (disable overrides enable) // But set() overrides both:cesdk.feature.set('ly.img.delete', true);// Chain: [set(true), disable(false)]// isEnabled: true (set is terminal, disable never evaluated) ``` **Expected outcome:** `set()` with a boolean always wins because it’s evaluated first and is terminal. ### Use Case 6: Glob Patterns for Bulk Operations[#](#use-case-6-glob-patterns-for-bulk-operations) ``` // Enable all video features at oncecesdk.feature.enable('ly.img.video.*'); // Disable all crop featurescesdk.feature.disable('ly.img.crop.*'); // Set custom predicate for all navigation featurescesdk.feature.set('ly.img.navigation.*', ({ engine }) => { return engine.scene.getMode() === 'Design';}); // Check if all video features are enabledconst allVideoEnabled = cesdk.feature.isEnabled('ly.img.video.*');// Returns true only if ALL matching features are enabled ``` **Expected outcome:** Glob patterns match multiple features. `isEnabled()` with a glob returns `true` only if **all** matching features are enabled. ### Use Case 7: Role-Based Access Control[#](#use-case-7-role-based-access-control) ``` const userRole = 'editor'; // Could be 'viewer', 'editor', 'admin' cesdk.feature.set('ly.img.delete', () => { return userRole === 'editor' || userRole === 'admin';}); cesdk.feature.set('ly.img.settings', () => { return userRole === 'admin';}); ``` **Expected outcome:** Features are enabled based on user roles, with predicates evaluated on every check. ## Key Principles[#](#key-principles) 1. **Use `enable()` for simple on/off** - Works with default predicates 2. **Use `disable()` to turn off enabled features** - Only works if no `set()` predicates exist 3. **Use `set()` for custom logic** - Overrides `enable()`/`disable()` 4. **Boolean predicates are terminal** - Stop evaluation immediately 5. **Function predicates can chain** - Call `isPreviousEnable()` to continue 6. **Most recent `set()` wins** - Evaluated in LIFO order (most recent first) 7. **Glob patterns affect multiple features** - Use `*` as wildcard ## Constructors[#](#constructors) ### Constructor[#](#constructor) `FeatureAPI` ## Feature Control[#](#feature-control) Methods for enabling and checking the status of editor features based on custom predicates. ### enable()[#](#enable) Enables one or more features using their default predicates. This is the recommended way to enable features. Each feature has a sensible default predicate that determines when it should be available in the UI. To customize the behavior, use the `set()` method instead. Supports glob patterns (e.g., ‘ly.img.video.\*’) to enable multiple features at once. Use `*` as a wildcard to match any sequence of characters. ##### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `featureId` | | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | ##### Returns[#](#returns) `void` ##### Examples[#](#examples) Enable single feature with its default predicate: ``` cesdk.feature.enable('ly.img.delete'); ``` Enable multiple features at once: ``` cesdk.feature.enable(['ly.img.delete', 'ly.img.duplicate']); ``` Enable all video features using a glob pattern: ``` cesdk.feature.enable('ly.img.video.*'); ``` Enable all navigation features: ``` cesdk.feature.enable('ly.img.navigation.*'); ``` #### Call Signature[#](#call-signature) ``` enable(featureId, predicate): void; ``` ##### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `featureId` | | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | | `predicate` | [`FeaturePredicate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featurepredicate/) | The condition that determines if the feature is enabled. | ##### Returns[#](#returns-1) `void` ##### Deprecated[#](#deprecated) Use `cesdk.feature.set(featureId, predicate)` instead. This overload will be removed in a future version. Enables one or more features based on the provided predicate. #### Signatures[#](#signatures) ``` enable(featureId: FeatureId | FeatureId[]): void ``` ``` enable(featureId: FeatureId | FeatureId[], predicate: FeaturePredicate): void ``` * * * ### disable()[#](#disable) Disables one or more features. This is a convenience method that adds a `false` predicate to the feature’s predicate chain, effectively disabling the feature. Disabled features will not be shown in the UI. Supports glob patterns (e.g., ‘ly.img.video.\*’) to disable multiple features at once. Use `*` as a wildcard to match any sequence of characters. #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `featureId` | | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | #### Returns[#](#returns-2) `void` #### Examples[#](#examples-1) Disable a single feature: ``` cesdk.feature.disable('ly.img.delete'); ``` Disable multiple features at once: ``` cesdk.feature.disable([ 'ly.img.delete', 'ly.img.duplicate', 'ly.img.group']); ``` Disable all video features using a glob pattern: ``` cesdk.feature.disable('ly.img.video.*'); ``` Disable all crop features: ``` cesdk.feature.disable('ly.img.crop.*'); ``` #### Signature[#](#signature) ``` disable(featureId: FeatureId | FeatureId[]): void ``` * * * ### set()[#](#set) Sets a feature’s enabled state, replacing any existing predicates. This method provides a unified way to enable or disable features. When setting to `true`, the feature’s default predicate is used. When setting to `false`, the feature is explicitly disabled. You can also provide a custom predicate function for advanced control. Supports glob patterns (e.g., ‘ly.img.video.\*’) to set multiple features at once. Use `*` as a wildcard to match any sequence of characters. #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `featureId` | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | The feature ID or glob pattern to set. | | `enabled` | [`FeaturePredicate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featurepredicate/) | Boolean to enable/disable, or a predicate function for custom logic. | #### Returns[#](#returns-3) `void` #### Examples[#](#examples-2) Enable a feature using its default predicate: ``` cesdk.feature.set('ly.img.delete', true); ``` Disable a feature: ``` cesdk.feature.set('ly.img.delete', false); ``` Set a feature with a custom predicate: ``` cesdk.feature.set('ly.img.delete', ({ engine }) => { return engine.block.findAllSelected().length > 0;}); ``` Disable all video features using a glob pattern: ``` cesdk.feature.set('ly.img.video.*', false); ``` Enable all filter features with a custom predicate: ``` cesdk.feature.set('ly.img.filter.*', ({ engine }) => { // Only enable filters for images const selected = engine.block.findAllSelected(); return selected.some(id => engine.block.getType(id) === '//ly.img.ubq/graphic');}); ``` #### Signature[#](#signature-1) ``` set(featureId: FeatureId, enabled: FeaturePredicate): void ``` * * * ### list()[#](#list) Lists all registered feature IDs, optionally filtered by a pattern. This method is useful for debugging and discovering which features are currently registered in the editor. You can provide a glob-style pattern to filter the results. #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `matcher?`: `string`; } | Optional configuration object with a `matcher` property for glob-style pattern filtering (e.g., ‘ly.img.video.\*’). | | `options.matcher?` | `string` | \- | #### Returns[#](#returns-4) [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/)\[\] An array of feature IDs sorted alphabetically. #### Examples[#](#examples-3) List all registered features: ``` const allFeatures = cesdk.feature.list();console.log(allFeatures); // ['ly.img.delete', 'ly.img.duplicate', ...] ``` List features matching a pattern: ``` const videoFeatures = cesdk.feature.list({ matcher: 'ly.img.video.*' });console.log(videoFeatures); // ['ly.img.video.timeline', 'ly.img.video.clips', ...] ``` List navigation features: ``` const navFeatures = cesdk.feature.list({ matcher: 'ly.img.navigation.*' }); ``` #### Signature[#](#signature-2) ``` list(options?: object): FeatureId[] ``` * * * ### get()[#](#get) Gets the predicate chain for a specific feature. This method returns the array of predicates currently registered for a feature, allowing you to inspect the feature’s configuration. Returns `undefined` if the feature is not registered. #### Parameters[#](#parameters-5) | Parameter | Type | Description | | --- | --- | --- | | `featureId` | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | The feature ID to query. | #### Returns[#](#returns-5) [`FeaturePredicate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featurepredicate/)\[\] The array of predicates for the feature, or undefined if not registered. #### Examples[#](#examples-4) Get predicates for a feature: ``` const predicates = cesdk.feature.get('ly.img.delete');if (predicates) { console.log(`Feature has ${predicates.length} predicates`);} ``` Check if a feature is registered: ``` const isRegistered = cesdk.feature.get('ly.img.delete') !== undefined; ``` #### Signature[#](#signature-3) ``` get(featureId: FeatureId): FeaturePredicate[] ``` * * * ### isEnabled()[#](#isenabled) Checks if one or more features are currently enabled. Supports glob patterns (e.g., ‘ly.img.video.\*’) to check multiple features at once. When a glob pattern is used, returns `true` only if **all** matching features are enabled. #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `featureId` | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | The feature ID or glob pattern to check. | | `context?` | [`IsEnabledFeatureContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/isenabledfeaturecontext/) | The context object containing a reference to the underlying engine. | #### Returns[#](#returns-6) `boolean` True if the feature (or all matching features for glob patterns) is enabled, false otherwise. #### Examples[#](#examples-5) Check if a single feature is enabled: ``` const isDeleteEnabled = cesdk.feature.isEnabled('ly.img.delete'); ``` Check if all video features are enabled: ``` const allVideoFeaturesEnabled = cesdk.feature.isEnabled('ly.img.video.*'); ``` Check with custom context (useful in predicates): ``` cesdk.feature.set('ly.img.delete', ({ engine }) => { return cesdk.feature.isEnabled('ly.img.duplicate', { engine });}); ``` #### Signature[#](#signature-4) ``` isEnabled(featureId: FeatureId, context?: IsEnabledFeatureContext): boolean ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/eventapi) # Class: EventAPI Subscribe to block lifecycle events in the design engine. The EventAPI enables real-time monitoring of block changes through event subscriptions. Events are bundled and delivered efficiently at the end of each engine update cycle. ## Event Subscriptions[#](#event-subscriptions) Subscribe to block lifecycle events with filtering and callback management. ### subscribe()[#](#subscribe) Subscribe to block lifecycle events. Events are bundled and delivered at the end of each engine update cycle for efficient processing. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `blocks` | `number`\[\] | List of blocks to filter events by. If empty, events for all blocks are sent. | | `callback` | (`events`) => `void` | Function called with bundled events. | #### Returns[#](#returns) A method to unsubscribe from the events. ``` (): void; ``` ##### Returns[#](#returns-1) `void` #### Signature[#](#signature) ``` subscribe(blocks: number[], callback: (events: BlockEvent[]) => void): () => void ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/editorapi) # Class: EditorAPI Control the design editor’s behavior and settings. The EditorAPI provides access to edit modes, history management, editor settings, color management, resource handling, and global scope controls. It serves as the central configuration and control interface for the design editor engine. ## Role & Scope Management[#](#role--scope-management) Manage user roles and global scope permissions. ### setRole()[#](#setrole) Set the user role and apply role-dependent defaults. Automatically configures scopes and settings based on the specified role. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `role` | [`RoleString`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rolestring/) | The role to assign to the user. | #### Returns[#](#returns) `void` #### Signature[#](#signature) ``` setRole(role: RoleString): void ``` * * * ### getRole()[#](#getrole) Get the current user role. #### Returns[#](#returns-1) [`RoleString`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rolestring/) The current role of the user. #### Signature[#](#signature-1) ``` getRole(): RoleString ``` * * * ### findAllScopes()[#](#findallscopes) Get all available global scope names. #### Returns[#](#returns-2) [`Scope`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scope/)\[\] The names of all available global scopes. #### Signature[#](#signature-2) ``` findAllScopes(): Scope[] ``` * * * ### setGlobalScope()[#](#setglobalscope) Set a global scope permission level. #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scope/) | The scope to configure. | | `value` | `"Allow"` | `"Deny"` | #### Returns[#](#returns-3) `void` #### Signature[#](#signature-3) ``` setGlobalScope(key: Scope, value: "Allow" | "Deny" | "Defer"): void ``` * * * ### getGlobalScope()[#](#getglobalscope) Get a global scope’s permission level. #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scope/) | The scope to query. | #### Returns[#](#returns-4) `"Allow"` | `"Deny"` | `"Defer"` `Allow`, `Deny`, or `Defer` indicating the scope’s permission level. #### Signature[#](#signature-4) ``` getGlobalScope(key: Scope): "Allow" | "Deny" | "Defer" ``` ## Event Subscriptions[#](#event-subscriptions) Subscribe to editor state changes, history updates, and role changes. ### onStateChanged()[#](#onstatechanged) Subscribe to editor state changes. #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | Function called when the editor state changes. | #### Returns[#](#returns-5) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-6) `void` #### Signature[#](#signature-5) ``` onStateChanged(callback: () => void): () => void ``` * * * ### onHistoryUpdated()[#](#onhistoryupdated) Subscribe to undo/redo history changes. ``` const unsubscribe = engine.editor.onHistoryUpdated(() => { const canUndo = engine.editor.canUndo(); const canRedo = engine.editor.canRedo(); console.log("History updated", {canUndo, canRedo});}) ``` #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | Function called when the undo/redo history changes. | #### Returns[#](#returns-7) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-8) `void` #### Signature[#](#signature-6) ``` onHistoryUpdated(callback: () => void): () => void ``` * * * ### onSettingsChanged()[#](#onsettingschanged) Subscribe to editor settings changes. #### Parameters[#](#parameters-5) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | Function called when editor settings change. | #### Returns[#](#returns-9) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-10) `void` #### Signature[#](#signature-7) ``` onSettingsChanged(callback: () => void): () => void ``` * * * ### onRoleChanged()[#](#onrolechanged) Subscribe to editor role changes. Allows reacting to role changes and updating engine settings accordingly. The callback is triggered immediately after role changes and default settings are applied. #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`role`) => `void` | Function called when the user role changes. | #### Returns[#](#returns-11) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-12) `void` #### Signature[#](#signature-8) ``` onRoleChanged(callback: (role: RoleString) => void): () => void ``` ## Edit Mode Management[#](#edit-mode-management) Control the editor’s current editing mode and interaction state. ### setEditMode()[#](#seteditmode) Set the editor’s current edit mode. Edit modes represent different tools or interaction states within the editor. Common ones, are “Crop” while the crop tool is shown or “Text” when inline-editing text. ``` engine.editor.setEditMode('Crop');// With a base modeengine.editor.setEditMode('CustomMode', 'Crop'); ``` #### Parameters[#](#parameters-7) | Parameter | Type | Description | | --- | --- | --- | | `mode` | [`EditMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/editmode/) | ”Transform”, “Crop”, “Text”, “Playback”, “Trim” or a custom value. | | `baseMode?` | `string` | Optional base mode from which the custom mode will inherit the settings. | #### Returns[#](#returns-13) `void` #### Signature[#](#signature-9) ``` setEditMode(mode: EditMode, baseMode?: string): void ``` * * * ### getEditMode()[#](#geteditmode) Get the editor’s current edit mode. Edit modes represent different tools or interaction states within the editor. Common ones, are “Crop” while the crop tool is shown or “Text” when inline-editing text. #### Returns[#](#returns-14) [`EditMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/editmode/) “Transform”, “Crop”, “Text”, “Playback”, “Trim” or a custom value. #### Signature[#](#signature-10) ``` getEditMode(): EditMode ``` * * * ### getCursorType()[#](#getcursortype) Get the cursor type that should be displayed. #### Returns[#](#returns-15) `"Text"` | `"Arrow"` | `"Move"` | `"MoveNotPermitted"` | `"Resize"` | `"Rotate"` The cursor type. #### Signature[#](#signature-11) ``` getCursorType(): "Text" | "Arrow" | "Move" | "MoveNotPermitted" | "Resize" | "Rotate" ``` * * * ### getCursorRotation()[#](#getcursorrotation) Get the cursor rotation angle. #### Returns[#](#returns-16) `number` The angle in radians. #### Signature[#](#signature-12) ``` getCursorRotation(): number ``` * * * ### getTextCursorPositionInScreenSpaceX()[#](#gettextcursorpositioninscreenspacex) Get the text cursor’s x position in screen space. #### Returns[#](#returns-17) `number` The text cursor’s x position in screen space. #### Signature[#](#signature-13) ``` getTextCursorPositionInScreenSpaceX(): number ``` * * * ### getTextCursorPositionInScreenSpaceY()[#](#gettextcursorpositioninscreenspacey) Get the text cursor’s y position in screen space. #### Returns[#](#returns-18) `number` The text cursor’s y position in screen space. #### Signature[#](#signature-14) ``` getTextCursorPositionInScreenSpaceY(): number ``` ## History Management[#](#history-management) Create, manage, and operate on undo/redo history stacks. ### createHistory()[#](#createhistory) Create a new undo/redo history stack. Multiple histories can exist, but only one can be active at a time. ``` const newHistory = engine.editor.createHistory(); ``` #### Returns[#](#returns-19) `number` The handle of the created history. #### Signature[#](#signature-15) ``` createHistory(): number ``` * * * ### destroyHistory()[#](#destroyhistory) Destroy a history stack and free its resources. ``` engine.editor.destroyHistory(oldHistory); ``` #### Parameters[#](#parameters-8) | Parameter | Type | Description | | --- | --- | --- | | `history` | `number` | The history handle to destroy. | #### Returns[#](#returns-20) `void` #### Throws[#](#throws) Error if the handle doesn’t refer to a valid history. #### Signature[#](#signature-16) ``` destroyHistory(history: number): void ``` * * * ### setActiveHistory()[#](#setactivehistory) Set a history as the active undo/redo stack. All other histories lose their active state. Undo/redo operations only apply to the active history. ``` engine.editor.setActiveHistory(newHistory); ``` #### Parameters[#](#parameters-9) | Parameter | Type | Description | | --- | --- | --- | | `history` | `number` | The history handle to make active. | #### Returns[#](#returns-21) `void` #### Throws[#](#throws-1) Error if the handle doesn’t refer to a valid history. #### Signature[#](#signature-17) ``` setActiveHistory(history: number): void ``` * * * ### getActiveHistory()[#](#getactivehistory) Get the currently active history handle. Creates a new history if none exists. ``` const oldHistory = engine.editor.getActiveHistory(); ``` #### Returns[#](#returns-22) `number` The handle of the active history. #### Signature[#](#signature-18) ``` getActiveHistory(): number ``` * * * ### addUndoStep()[#](#addundostep) Add a new history state to the undo stack. Only adds a state if undoable changes were made since the last undo step. ``` engine.editor.addUndoStep(); ``` #### Returns[#](#returns-23) `void` #### Signature[#](#signature-19) ``` addUndoStep(): void ``` * * * ### removeUndoStep()[#](#removeundostep) Remove the last history state from the undo stack. Removes the most recent undo step if available. ``` engine.editor.removeUndoStep(); ``` #### Returns[#](#returns-24) `void` #### Signature[#](#signature-20) ``` removeUndoStep(): void ``` * * * ### undo()[#](#undo) Undo one step in the active history if an undo step is available. ``` engine.editor.undo(); ``` #### Returns[#](#returns-25) `void` #### Signature[#](#signature-21) ``` undo(): void ``` * * * ### redo()[#](#redo) Redo one step in the active history if a redo step is available. ``` engine.editor.redo(); ``` #### Returns[#](#returns-26) `void` #### Signature[#](#signature-22) ``` redo(): void ``` * * * ### canUndo()[#](#canundo) Check if an undo step is available. ``` if (engine.editor.canUndo()) { engine.editor.undo();} ``` #### Returns[#](#returns-27) `boolean` True if an undo step is available. #### Signature[#](#signature-23) ``` canUndo(): boolean ``` * * * ### canRedo()[#](#canredo) Check if a redo step is available. ``` if (engine.editor.canRedo()) { engine.editor.redo();} ``` #### Returns[#](#returns-28) `boolean` True if a redo step is available. #### Signature[#](#signature-24) ``` canRedo(): boolean ``` ## Color Management[#](#color-management) Handle spot colors, color conversion, and color space operations. ### findAllSpotColors()[#](#findallspotcolors) Get all spot color names currently defined. #### Returns[#](#returns-29) `string`\[\] The names of all defined spot colors. #### Signature[#](#signature-25) ``` findAllSpotColors(): string[] ``` * * * ### getSpotColorRGBA()[#](#getspotcolorrgba) Queries the RGB representation set for a spot color. If the value of the queried spot color has not been set yet, returns the default RGB representation (of magenta). The alpha value is always 1.0. #### Parameters[#](#parameters-10) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name of a spot color. | #### Returns[#](#returns-30) [`RGBA`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rgba/) A result holding a float array of the four color components. #### Signature[#](#signature-26) ``` getSpotColorRGBA(name: string): RGBA ``` * * * ### getSpotColorCMYK()[#](#getspotcolorcmyk) Queries the CMYK representation set for a spot color. If the value of the queried spot color has not been set yet, returns the default CMYK representation (of magenta). #### Parameters[#](#parameters-11) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name of a spot color. | #### Returns[#](#returns-31) [`CMYK`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/cmyk/) A result holding a float array of the four color components. #### Signature[#](#signature-27) ``` getSpotColorCMYK(name: string): CMYK ``` * * * ### setSpotColorRGB()[#](#setspotcolorrgb) Sets the RGB representation of a spot color. Use this function to both create a new spot color or update an existing spot color. #### Parameters[#](#parameters-12) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name of a spot color. | | `r` | `number` | The red color component in the range of 0 to 1. | | `g` | `number` | The green color component in the range of 0 to 1. | | `b` | `number` | The blue color component in the range of 0 to 1. | #### Returns[#](#returns-32) `void` #### Signature[#](#signature-28) ``` setSpotColorRGB(name: string, r: number, g: number, b: number): void ``` * * * ### setSpotColorCMYK()[#](#setspotcolorcmyk) Sets the CMYK representation of a spot color. Use this function to both create a new spot color or update an existing spot color. #### Parameters[#](#parameters-13) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name of a spot color. | | `c` | `number` | The cyan color component in the range of 0 to 1. | | `m` | `number` | The magenta color component in the range of 0 to 1. | | `y` | `number` | The yellow color component in the range of 0 to 1. | | `k` | `number` | The key color component in the range of 0 to 1. | #### Returns[#](#returns-33) `void` #### Signature[#](#signature-29) ``` setSpotColorCMYK(name: string, c: number, m: number, y: number, k: number): void ``` * * * ### removeSpotColor()[#](#removespotcolor) Removes a spot color from the list of set spot colors. #### Parameters[#](#parameters-14) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name of a spot color. | #### Returns[#](#returns-34) `void` An empty result on success, an error otherwise. #### Signature[#](#signature-30) ``` removeSpotColor(name: string): void ``` * * * ### setSpotColorForCutoutType()[#](#setspotcolorforcutouttype) Set the spot color assign to a cutout type. All cutout blocks of the given type will be immediately assigned that spot color. #### Parameters[#](#parameters-15) | Parameter | Type | Description | | --- | --- | --- | | `type` | `"Dashed"` | `"Solid"` | | `color` | `string` | The spot color name to assign. | #### Returns[#](#returns-35) `void` #### Signature[#](#signature-31) ``` setSpotColorForCutoutType(type: "Dashed" | "Solid", color: string): void ``` * * * ### getSpotColorForCutoutType()[#](#getspotcolorforcutouttype) Get the name of the spot color assigned to a cutout type. #### Parameters[#](#parameters-16) | Parameter | Type | Description | | --- | --- | --- | | `type` | `"Dashed"` | `"Solid"` | #### Returns[#](#returns-36) `string` The color spot name. #### Signature[#](#signature-32) ``` getSpotColorForCutoutType(type: "Dashed" | "Solid"): string ``` * * * ### convertColorToColorSpace()[#](#convertcolortocolorspace) Converts a color to the given color space. ##### Parameters[#](#parameters-17) | Parameter | Type | Description | | --- | --- | --- | | `color` | `Color` | The color to convert. | | `colorSpace` | `"sRGB"` | The color space to convert to. | ##### Returns[#](#returns-37) [`RGBAColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/rgbacolor/) The converted color. #### Call Signature[#](#call-signature) ``` convertColorToColorSpace(color, colorSpace): CMYKColor; ``` ##### Parameters[#](#parameters-18) | Parameter | Type | | --- | --- | | `color` | `Color` | | `colorSpace` | `"CMYK"` | ##### Returns[#](#returns-38) [`CMYKColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/cmykcolor/) #### Call Signature[#](#call-signature-1) ``` convertColorToColorSpace(color, colorSpace): never; ``` ##### Parameters[#](#parameters-19) | Parameter | Type | | --- | --- | | `color` | `Color` | | `colorSpace` | [`ColorSpace`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/colorspace/) | ##### Returns[#](#returns-39) `never` #### Signatures[#](#signatures) ``` convertColorToColorSpace(color: Color, colorSpace: "sRGB"): RGBAColor ``` ``` convertColorToColorSpace(color: Color, colorSpace: "CMYK"): CMYKColor ``` ``` convertColorToColorSpace(color: Color, colorSpace: ColorSpace): never ``` ## Resource Management[#](#resource-management) Manage buffers, URIs, and resource data handling. ### createBuffer()[#](#createbuffer) Create a resizable buffer for arbitrary data. ``` const buffer = engine.editor.createBuffer(); // Reference the buffer resource from the audio blockengine.block.setString(audioBlock, 'audio/fileURI', buffer); ``` #### Returns[#](#returns-40) `string` A URI to identify the created buffer. #### Signature[#](#signature-33) ``` createBuffer(): string ``` * * * ### destroyBuffer()[#](#destroybuffer) Destroy a buffer and free its resources. ``` engine.editor.destroyBuffer(buffer); ``` #### Parameters[#](#parameters-20) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the buffer to destroy. | #### Returns[#](#returns-41) `void` #### Signature[#](#signature-34) ``` destroyBuffer(uri: string): void ``` * * * ### setBufferData()[#](#setbufferdata) Set the data of a buffer at a given offset. ``` // Generate 10 seconds of stereo 48 kHz audio dataconst samples = new Float32Array(10 * 2 * 48000);for (let i = 0; i < samples.length; i += 2) { samples[i] = samples[i + 1] = Math.sin((440 * i * Math.PI) / 48000);}// Assign the audio data to the bufferengine.editor.setBufferData(buffer, 0, new Uint8Array(samples.buffer)); ``` #### Parameters[#](#parameters-21) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the buffer to update. | | `offset` | `number` | The offset in bytes at which to start writing. | | `data` | `Uint8Array` | The data to write. | #### Returns[#](#returns-42) `void` #### Signature[#](#signature-35) ``` setBufferData(uri: string, offset: number, data: Uint8Array): void ``` * * * ### getBufferData()[#](#getbufferdata) Get the data of a buffer at a given offset. ``` engine.editor.findAllTransientResources().forEach((resource) => { const bufferURI = resource.URL; const length = engine.editor.getBufferLength(buffer); const data = engine.editor.getBufferData(buffer, 0, length); const blob = new Blob([data]);}) ``` #### Parameters[#](#parameters-22) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the buffer to query. | | `offset` | `number` | The offset in bytes at which to start reading. | | `length` | `number` | The number of bytes to read. | #### Returns[#](#returns-43) `Uint8Array` The data at the given offset. #### Signature[#](#signature-36) ``` getBufferData(uri: string, offset: number, length: number): Uint8Array ``` * * * ### setBufferLength()[#](#setbufferlength) Set the length of a buffer. ``` // Reduce the buffer to half its lengthconst currentLength = engine.editor.getBufferLength(buffer);engine.editor.setBufferLength(buffer, currentLength / 2); ``` #### Parameters[#](#parameters-23) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the buffer to update. | | `length` | `number` | The new length of the buffer in bytes. | #### Returns[#](#returns-44) `void` #### Signature[#](#signature-37) ``` setBufferLength(uri: string, length: number): void ``` * * * ### getBufferLength()[#](#getbufferlength) Get the length of a buffer. ``` const length = engine.editor.getBufferLength(buffer); ``` #### Parameters[#](#parameters-24) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the buffer to query. | #### Returns[#](#returns-45) `number` The length of the buffer in bytes. #### Signature[#](#signature-38) ``` getBufferLength(uri: string): number ``` * * * ### getMimeType()[#](#getmimetype) Get the MIME type of a resource. Downloads the resource if not already cached. #### Parameters[#](#parameters-25) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI of the resource. | #### Returns[#](#returns-46) `Promise`<`string`\> Promise resolving to the resource’s MIME type. #### Throws[#](#throws-2) Error if the resource cannot be downloaded or MIME type determined. #### Signature[#](#signature-39) ``` getMimeType(uri: string): Promise ``` * * * ### findAllTransientResources()[#](#findalltransientresources) Get all transient resources that would be lost during export. Useful for identifying resources that need relocation (e.g., to a CDN) before export, as these resources are not included in the exported scene. #### Returns[#](#returns-47) [`TransientResource`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/transientresource/)\[\] The URLs and sizes of transient resources. #### Signature[#](#signature-40) ``` findAllTransientResources(): TransientResource[] ``` * * * ### findAllMediaURIs()[#](#findallmediauris) Get all media URIs referenced by blocks in the scene. Returns URIs from image fills, video fills, and audio blocks, including their source sets. Only returns valid media URIs (http://, https://, file://), excluding transient resources like buffer URIs. Useful for determining which media files are referenced by a scene (e.g., for cleanup operations, CDN management, or file system tracking). #### Returns[#](#returns-48) `string`\[\] The URLs of all media resources referenced in the scene, deduplicated. #### Signature[#](#signature-41) ``` findAllMediaURIs(): string[] ``` * * * ### getResourceData()[#](#getresourcedata) Provides the data of a resource at the given URL. #### Parameters[#](#parameters-26) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URL of the resource. | | `chunkSize` | `number` | The size of the chunks in which the resource data is provided. | | `onData` | (`result`) => `boolean` | The callback function that is called with the resource data or an error if an error occurred. The callback will be called as long as there is data left to provide and the callback returns `true`. | #### Returns[#](#returns-49) `void` #### Signature[#](#signature-42) ``` getResourceData(uri: string, chunkSize: number, onData: (result: Uint8Array) => boolean): void ``` * * * ### relocateResource()[#](#relocateresource) Changes the URL associated with a resource. This function can be used change the URL of a resource that has been relocated (e.g., to a CDN). #### Parameters[#](#parameters-27) | Parameter | Type | Description | | --- | --- | --- | | `currentUrl` | `string` | The current URL of the resource. | | `relocatedUrl` | `string` | The new URL of the resource. | #### Returns[#](#returns-50) `void` #### Signature[#](#signature-43) ``` relocateResource(currentUrl: string, relocatedUrl: string): void ``` ## Editor Settings[#](#editor-settings) Configure editor behavior through typed settings for different data types. ### setSetting()[#](#setsetting) Set a setting value using the unified API. The value type is automatically validated based on the key. #### Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `K` _extends_ keyof `Settings` | #### Parameters[#](#parameters-28) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `OptionalPrefix`<`K`\> | The setting key from Settings | | `value` | `SettingValueType`<`K`\> | The value to set (type-safe based on key) | #### Returns[#](#returns-51) `void` #### Throws[#](#throws-3) Error if the keypath is invalid or value type doesn’t match #### Example[#](#example) ``` // Boolean settingengine.editor.setSetting('doubleClickToCropEnabled', false); // Color settingengine.editor.setSetting('highlightColor', { r: 1, g: 0, b: 1, a: 1 }); // Enum settingengine.editor.setSetting('doubleClickSelectionMode', 'Direct'); ``` #### Signature[#](#signature-44) ``` setSetting(keypath: OptionalPrefix, value: SettingValueType): void ``` * * * ### getSetting()[#](#getsetting) Get a setting value using the unified API. The return type is automatically inferred from the key. #### Type Parameters[#](#type-parameters-1) | Type Parameter | | --- | | `K` _extends_ keyof `Settings` | #### Parameters[#](#parameters-29) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `OptionalPrefix`<`K`\> | The setting key from Settings | #### Returns[#](#returns-52) `SettingValueType`<`K`\> The value of the setting (type-safe based on key) #### Throws[#](#throws-4) Error if the keypath is invalid #### Example[#](#example-1) ``` // Boolean settingconst cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled'); // Color settingconst highlight = engine.editor.getSetting('highlightColor'); // Enum settingconst selectionMode = engine.editor.getSetting('doubleClickSelectionMode'); ``` #### Signature[#](#signature-45) ``` getSetting(keypath: OptionalPrefix): SettingValueType ``` * * * ### setSettingBool()[#](#setsettingbool) Set a boolean setting value. ##### Parameters[#](#parameters-30) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingBoolPropertyName` | The settings keypath, e.g. `doubleClickToCropEnabled`. | | `value` | `boolean` | The boolean value to set. | ##### Returns[#](#returns-53) `void` ##### Throws[#](#throws-5) Error if the keypath is invalid. #### Call Signature[#](#call-signature-2) ``` setSettingBool(keypath, value): void; ``` ##### Parameters[#](#parameters-31) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | `boolean` | ##### Returns[#](#returns-54) `void` ##### Deprecated[#](#deprecated) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Signatures[#](#signatures-1) ``` setSettingBool(keypath: SettingBoolPropertyName, value: boolean): void ``` ``` setSettingBool(keypath: `ubq://${string & {}}`, value: boolean): void ``` * * * ### getSettingBool()[#](#getsettingbool) Get a boolean setting value. ##### Parameters[#](#parameters-32) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingBoolPropertyName` | The settings keypath, e.g. `doubleClickToCropEnabled`. | ##### Returns[#](#returns-55) `boolean` The boolean value of the setting. ##### Throws[#](#throws-6) Error if the keypath is invalid. #### Call Signature[#](#call-signature-3) ``` getSettingBool(keypath): boolean; ``` ##### Parameters[#](#parameters-33) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns[#](#returns-56) `boolean` ##### Deprecated[#](#deprecated-1) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-4) ``` getSettingBool(keypath): boolean; ``` Get a boolean setting value. ##### Parameters[#](#parameters-34) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingBoolPropertyName` | The settings keypath, e.g. `doubleClickToCropEnabled`. | ##### Returns[#](#returns-57) `boolean` The boolean value of the setting. ##### Throws[#](#throws-7) Error if the keypath is invalid. #### Signatures[#](#signatures-2) ``` getSettingBool(keypath: SettingBoolPropertyName): boolean ``` ``` getSettingBool(keypath: `ubq://${string & {}}`): boolean ``` ``` getSettingBool(keypath: SettingBoolPropertyName): boolean ``` * * * ### setSettingInt()[#](#setsettingint) Set an integer setting value. ##### Parameters[#](#parameters-35) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingIntPropertyName` | The settings keypath. | | `value` | `number` | The integer value to set. | ##### Returns[#](#returns-58) `void` ##### Throws[#](#throws-8) Error if the keypath is invalid. #### Call Signature[#](#call-signature-5) ``` setSettingInt(keypath, value): void; ``` Set an integer setting value. ##### Parameters[#](#parameters-36) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingIntPropertyName` | The settings keypath. | | `value` | `number` | The integer value to set. | ##### Returns[#](#returns-59) `void` ##### Throws[#](#throws-9) Error if the keypath is invalid. #### Signatures[#](#signatures-3) ``` setSettingInt(keypath: SettingIntPropertyName, value: number): void ``` ``` setSettingInt(keypath: SettingIntPropertyName, value: number): void ``` * * * ### getSettingInt()[#](#getsettingint) Get an integer setting value. ##### Parameters[#](#parameters-37) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingIntPropertyName` | The settings keypath. | ##### Returns[#](#returns-60) `number` The integer value of the setting. ##### Throws[#](#throws-10) Error if the keypath is invalid. #### Call Signature[#](#call-signature-6) ``` getSettingInt(keypath): number; ``` Get an integer setting value. ##### Parameters[#](#parameters-38) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingIntPropertyName` | The settings keypath. | ##### Returns[#](#returns-61) `number` The integer value of the setting. ##### Throws[#](#throws-11) Error if the keypath is invalid. #### Signatures[#](#signatures-4) ``` getSettingInt(keypath: SettingIntPropertyName): number ``` ``` getSettingInt(keypath: SettingIntPropertyName): number ``` * * * ### setSettingFloat()[#](#setsettingfloat) Set a float setting value. ##### Parameters[#](#parameters-39) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingFloatPropertyName` | The settings keypath, e.g. `positionSnappingThreshold`. | | `value` | `number` | The float value to set. | ##### Returns[#](#returns-62) `void` ##### Throws[#](#throws-12) Error if the keypath is invalid. #### Call Signature[#](#call-signature-7) ``` setSettingFloat(keypath, value): void; ``` ##### Parameters[#](#parameters-40) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | `number` | ##### Returns[#](#returns-63) `void` ##### Deprecated[#](#deprecated-2) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-8) ``` setSettingFloat(keypath, value): void; ``` Set a float setting value. ##### Parameters[#](#parameters-41) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingFloatPropertyName` | The settings keypath, e.g. `positionSnappingThreshold`. | | `value` | `number` | The float value to set. | ##### Returns[#](#returns-64) `void` ##### Throws[#](#throws-13) Error if the keypath is invalid. #### Signatures[#](#signatures-5) ``` setSettingFloat(keypath: SettingFloatPropertyName, value: number): void ``` ``` setSettingFloat(keypath: `ubq://${string & {}}`, value: number): void ``` ``` setSettingFloat(keypath: SettingFloatPropertyName, value: number): void ``` * * * ### getSettingFloat()[#](#getsettingfloat) Get a float setting value. ##### Parameters[#](#parameters-42) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingFloatPropertyName` | The settings keypath, e.g. `positionSnappingThreshold`. | ##### Returns[#](#returns-65) `number` The float value of the setting. ##### Throws[#](#throws-14) Error if the keypath is invalid. #### Call Signature[#](#call-signature-9) ``` getSettingFloat(keypath): number; ``` ##### Parameters[#](#parameters-43) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns[#](#returns-66) `number` ##### Deprecated[#](#deprecated-3) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-10) ``` getSettingFloat(keypath): number; ``` Get a float setting value. ##### Parameters[#](#parameters-44) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingFloatPropertyName` | The settings keypath, e.g. `positionSnappingThreshold`. | ##### Returns[#](#returns-67) `number` The float value of the setting. ##### Throws[#](#throws-15) Error if the keypath is invalid. #### Signatures[#](#signatures-6) ``` getSettingFloat(keypath: SettingFloatPropertyName): number ``` ``` getSettingFloat(keypath: `ubq://${string & {}}`): number ``` ``` getSettingFloat(keypath: SettingFloatPropertyName): number ``` * * * ### setSettingString()[#](#setsettingstring) Set a string setting value. ##### Parameters[#](#parameters-45) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingStringPropertyName` | The settings keypath, e.g. `license`. | | `value` | `string` | The string value to set. | ##### Returns[#](#returns-68) `void` ##### Throws[#](#throws-16) Error if the keypath is invalid. #### Call Signature[#](#call-signature-11) ``` setSettingString(keypath, value): void; ``` ##### Parameters[#](#parameters-46) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | `string` | ##### Returns[#](#returns-69) `void` ##### Deprecated[#](#deprecated-4) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-12) ``` setSettingString(keypath, value): void; ``` Set a string setting value. ##### Parameters[#](#parameters-47) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingStringPropertyName` | The settings keypath, e.g. `license`. | | `value` | `string` | The string value to set. | ##### Returns[#](#returns-70) `void` ##### Throws[#](#throws-17) Error if the keypath is invalid. #### Signatures[#](#signatures-7) ``` setSettingString(keypath: SettingStringPropertyName, value: string): void ``` ``` setSettingString(keypath: `ubq://${string & {}}`, value: string): void ``` ``` setSettingString(keypath: SettingStringPropertyName, value: string): void ``` * * * ### getSettingString()[#](#getsettingstring) Get a string setting value. ##### Parameters[#](#parameters-48) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingStringPropertyName` | The settings keypath, e.g. `license`. | ##### Returns[#](#returns-71) `string` The string value of the setting. ##### Throws[#](#throws-18) Error if the keypath is invalid. #### Call Signature[#](#call-signature-13) ``` getSettingString(keypath): string; ``` ##### Parameters[#](#parameters-49) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns[#](#returns-72) `string` ##### Deprecated[#](#deprecated-5) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-14) ``` getSettingString(keypath): string; ``` Get a string setting value. ##### Parameters[#](#parameters-50) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingStringPropertyName` | The settings keypath, e.g. `license`. | ##### Returns[#](#returns-73) `string` The string value of the setting. ##### Throws[#](#throws-19) Error if the keypath is invalid. #### Signatures[#](#signatures-8) ``` getSettingString(keypath: SettingStringPropertyName): string ``` ``` getSettingString(keypath: `ubq://${string & {}}`): string ``` ``` getSettingString(keypath: SettingStringPropertyName): string ``` * * * ### setSettingColor()[#](#setsettingcolor) Set a color setting. ##### Parameters[#](#parameters-51) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingColorPropertyName` | The settings keypath, e.g. `highlightColor`. | | `value` | `Color` | The The value to set. | ##### Returns[#](#returns-74) `void` #### Call Signature[#](#call-signature-15) ``` setSettingColor(keypath, value): void; ``` ##### Parameters[#](#parameters-52) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | `Color` | ##### Returns[#](#returns-75) `void` ##### Deprecated[#](#deprecated-6) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-16) ``` setSettingColor(keypath, value): void; ``` Set a color setting. ##### Parameters[#](#parameters-53) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingColorPropertyName` | The settings keypath, e.g. `highlightColor`. | | `value` | `Color` | The The value to set. | ##### Returns[#](#returns-76) `void` #### Signatures[#](#signatures-9) ``` setSettingColor(keypath: SettingColorPropertyName, value: Color): void ``` ``` setSettingColor(keypath: `ubq://${string & {}}`, value: Color): void ``` ``` setSettingColor(keypath: SettingColorPropertyName, value: Color): void ``` * * * ### getSettingColor()[#](#getsettingcolor) Get a color setting. ##### Parameters[#](#parameters-54) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingColorPropertyName` | The settings keypath, e.g. `highlightColor`. | ##### Returns[#](#returns-77) `Color` ##### Throws[#](#throws-20) An error, if the keypath is invalid. #### Call Signature[#](#call-signature-17) ``` getSettingColor(keypath): Color; ``` ##### Parameters[#](#parameters-55) | Parameter | Type | | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns[#](#returns-78) `Color` ##### Deprecated[#](#deprecated-7) Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature[#](#call-signature-18) ``` getSettingColor(keypath): Color; ``` Get a color setting. ##### Parameters[#](#parameters-56) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `SettingColorPropertyName` | The settings keypath, e.g. `highlightColor`. | ##### Returns[#](#returns-79) `Color` ##### Throws[#](#throws-21) An error, if the keypath is invalid. #### Signatures[#](#signatures-10) ``` getSettingColor(keypath: SettingColorPropertyName): Color ``` ``` getSettingColor(keypath: `ubq://${string & {}}`): Color ``` ``` getSettingColor(keypath: SettingColorPropertyName): Color ``` * * * ### setSettingEnum()[#](#setsettingenum) Set an enum setting. ##### Type Parameters[#](#type-parameters-2) | Type Parameter | | --- | | `T` _extends_ keyof `SettingEnumType` | ##### Parameters[#](#parameters-57) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `T` | The settings keypath, e.g. `doubleClickSelectionMode`. | | `value` | `SettingEnumType`\[`T`\] | The enum value as string. | ##### Returns[#](#returns-80) `void` #### Call Signature[#](#call-signature-19) ``` setSettingEnum(keypath, value): void; ``` Set an enum setting. ##### Parameters[#](#parameters-58) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | | `value` | `string` | The enum value as string. | ##### Returns[#](#returns-81) `void` #### Signatures[#](#signatures-11) ``` setSettingEnum(keypath: T, value: SettingEnumType[T]): void ``` ``` setSettingEnum(keypath: string, value: string): void ``` * * * ### getSettingEnum()[#](#getsettingenum) Get an enum setting. ##### Type Parameters[#](#type-parameters-3) | Type Parameter | | --- | | `T` _extends_ keyof `SettingEnumType` | ##### Parameters[#](#parameters-59) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `T` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns[#](#returns-82) `SettingEnumType`\[`T`\] The value as string. #### Call Signature[#](#call-signature-20) ``` getSettingEnum(keypath): string; ``` Get an enum setting. ##### Parameters[#](#parameters-60) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns[#](#returns-83) `string` The value as string. #### Signatures[#](#signatures-12) ``` getSettingEnum(keypath: T): SettingEnumType[T] ``` ``` getSettingEnum(keypath: string): string ``` * * * ### getSettingEnumOptions()[#](#getsettingenumoptions) Get the possible enum options for a given enum setting. ##### Type Parameters[#](#type-parameters-4) | Type Parameter | | --- | | `T` _extends_ keyof `SettingEnumType` | ##### Parameters[#](#parameters-61) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `T` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns[#](#returns-84) `SettingEnumType`\[`T`\]\[\] The possible enum options as strings. #### Call Signature[#](#call-signature-21) ``` getSettingEnumOptions(keypath): string[]; ``` Get the possible enum options for a given enum setting. ##### Parameters[#](#parameters-62) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns[#](#returns-85) `string`\[\] The possible enum options as strings. #### Signatures[#](#signatures-13) ``` getSettingEnumOptions(keypath: T): SettingEnumType[T][] ``` ``` getSettingEnumOptions(keypath: string): string[] ``` * * * ### findAllSettings()[#](#findallsettings) Returns a list of all the settings available. #### Returns[#](#returns-86) `string`\[\] A list of settings keypaths. #### Signature[#](#signature-46) ``` findAllSettings(): string[] ``` * * * ### getSettingType()[#](#getsettingtype) Returns the type of a setting. #### Parameters[#](#parameters-63) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | #### Returns[#](#returns-87) [`SettingType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingtype/) The setting type. #### Signature[#](#signature-47) ``` getSettingType(keypath: string): SettingType ``` * * * ### setURIResolver()[#](#seturiresolver) Sets a custom URI resolver. This function can be called more than once. Subsequent calls will overwrite previous calls. To remove a previously set resolver, pass the value `null`. The given function must return an absolute path with a scheme and cannot be asynchronous. The input is allowed to be invalid URI, e.g., due to placeholders. ``` // Replace all .jpg files with the IMG.LY logoengine.editor.setURIResolver((uri) => { if (uri.endsWith('.jpg')) { return 'https://img.ly/static/ubq_samples/imgly_logo.jpg'; } // Make use of the default URI resolution behavior. return engine.editor.defaultURIResolver(uri);}); ``` #### Parameters[#](#parameters-64) | Parameter | Type | Description | | --- | --- | --- | | `resolver` | (`URI`, `defaultURIResolver`) => `string` | Custom resolution function. The resolution function should not reference variables outside of its scope. It receives the default URI resolver as its second argument | #### Returns[#](#returns-88) `void` #### Signature[#](#signature-48) ``` setURIResolver(resolver: (URI: string, defaultURIResolver: (URI: string) => string) => string): void ``` * * * ### defaultURIResolver()[#](#defaulturiresolver) This is the default implementation for the URI resolver. It resolves the given path relative to the `basePath` setting. ``` engine.editor.defaultURIResolver(uri); ``` #### Parameters[#](#parameters-65) | Parameter | Type | Description | | --- | --- | --- | | `relativePath` | `string` | The relative path that should be resolved. | #### Returns[#](#returns-89) `string` The resolved absolute URI. #### Signature[#](#signature-49) ``` defaultURIResolver(relativePath: string): string ``` * * * ### getAbsoluteURI()[#](#getabsoluteuri) Resolves the given path. If a custom resolver has been set with `setURIResolver`, it invokes it with the given path. Else, it resolves it as relative to the `basePath` setting. This performs NO validation of whether a file exists at the specified location. #### Parameters[#](#parameters-66) | Parameter | Type | Description | | --- | --- | --- | | `relativePath` | `string` | A relative path string | #### Returns[#](#returns-90) `string` The resolved absolute uri or an error if an invalid path was given. #### Signature[#](#signature-50) ``` getAbsoluteURI(relativePath: string): string ``` ## System Information[#](#system-information) Access memory usage, export limits, and system capabilities. ### getAvailableMemory()[#](#getavailablememory) Get the currently available memory. #### Returns[#](#returns-91) `number` The available memory in bytes. #### Signature[#](#signature-51) ``` getAvailableMemory(): number ``` * * * ### getUsedMemory()[#](#getusedmemory) Get the engine’s current memory usage. #### Returns[#](#returns-92) `number` The current memory usage in bytes. #### Signature[#](#signature-52) ``` getUsedMemory(): number ``` * * * ### getMaxExportSize()[#](#getmaxexportsize) Get the maximum export size limit for the current device. Exports are only possible when both width and height are below this limit. Note that exports may still fail due to other constraints like memory. #### Returns[#](#returns-93) `number` The upper export size limit in pixels, or maximum 32-bit integer if unlimited. #### Signature[#](#signature-53) ``` getMaxExportSize(): number ``` ## Experimental[#](#experimental) ### unstable\_isInteractionHappening()[#](#unstable_isinteractionhappening) Check if a user interaction is currently happening. Detects active interactions like resize edits with drag handles or touch gestures. #### Returns[#](#returns-94) `boolean` True if an interaction is happening. This API is experimental and may change or be removed in future versions. ## Other[#](#other) ### ~setSettingColorRGBA()~[#](#setsettingcolorrgba) Set a color setting. #### Parameters[#](#parameters-67) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | `SettingColorPropertyName` | `undefined` | | `r` | `number` | `undefined` | The red color component in the range of 0 to 1. | | `g` | `number` | `undefined` | The green color component in the range of 0 to 1. | | `b` | `number` | `undefined` | The blue color component in the range of 0 to 1. | | `a` | `number` | `1` | The alpha color component in the range of 0 to 1. | #### Returns[#](#returns-95) `void` #### Deprecated[#](#deprecated-8) Use setSettingColor() instead. * * * ### ~getSettingColorRGBA()~[#](#getsettingcolorrgba) Get a color setting. #### Parameters[#](#parameters-68) | Parameter | Type | Description | | --- | --- | --- | | `keypath` | `` `ubq://${string & {}}` `` | `SettingColorPropertyName` | #### Returns[#](#returns-96) [`RGBA`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rgba/) A tuple of channels red, green, blue and alpha in the range of 0 to 1. #### Deprecated[#](#deprecated-9) Use getSettingColor() instead. * * * ### isHighlightingEnabled()[#](#ishighlightingenabled) Checks wether the block has selection and hover highlighting enabled or disabled. ``` const highlightingIsEnabled = engine.editor.isHighlightingEnabled(block); ``` #### Parameters[#](#parameters-69) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-97) `boolean` True if highlighting is enabled, false otherwise. #### Signature[#](#signature-54) ``` isHighlightingEnabled(id: number): boolean ``` * * * ### setHighlightingEnabled()[#](#sethighlightingenabled) Enable or disable selection and hover highlighting for a block. ``` engine.editor.setHighlightingEnabled(block, true); ``` #### Parameters[#](#parameters-70) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `enabled` | `boolean` | Whether or not the block should show highlighting when selected or hovered. | #### Returns[#](#returns-98) `void` #### Signature[#](#signature-55) ``` setHighlightingEnabled(id: number, enabled: boolean): void ``` * * * ### isSelectionEnabled()[#](#isselectionenabled) Checks whether the block can currently be selected. ``` const selectionIsEnabled = engine.editor.isSelectionEnabled(block); ``` #### Parameters[#](#parameters-71) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-99) `boolean` True if selection is enabled, false otherwise. #### Signature[#](#signature-56) ``` isSelectionEnabled(id: number): boolean ``` * * * ### setSelectionEnabled()[#](#setselectionenabled) Enable or disable selection for a block. ``` engine.editor.setSelectionEnabled(block, true); ``` #### Parameters[#](#parameters-72) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `enabled` | `boolean` | Whether the block should be selectable. | #### Returns[#](#returns-100) `void` #### Signature[#](#signature-57) ``` setSelectionEnabled(id: number, enabled: boolean): void ``` ## Viewport[#](#viewport) ### setSafeAreaInsets()[#](#setsafeareainsets) Set global safe area insets for UI overlays. Safe area insets define UI-safe regions by specifying padding from screen edges. These insets are automatically applied to all camera operations (zoom, pan, clamping) to ensure important content remains visible when UI elements overlap the viewport edges. Set to zero to disable (default state). #### Parameters[#](#parameters-73) | Parameter | Type | Description | | --- | --- | --- | | `insets` | { `left?`: `number`; `top?`: `number`; `right?`: `number`; `bottom?`: `number`; } | The inset values in CSS pixels (device-independent) | | `insets.left?` | `number` | \- | | `insets.top?` | `number` | \- | | `insets.right?` | `number` | \- | | `insets.bottom?` | `number` | \- | #### Returns[#](#returns-101) `void` #### Signature[#](#signature-58) ``` setSafeAreaInsets(insets: object): void ``` * * * ### getSafeAreaInsets()[#](#getsafeareainsets) Get the current global safe area insets configuration. #### Returns[#](#returns-102) `object` The current inset values in CSS pixels (device-independent) | Name | Type | | --- | --- | | `left` | `number` | | `top` | `number` | | `right` | `number` | | `bottom` | `number` | #### Signature[#](#signature-59) ``` getSafeAreaInsets(): object ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeeditorsdk) # 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[#](#categories) ## Constructors[#](#constructors) ### Constructor[#](#constructor) `CreativeEditorSDK` ## Members[#](#members) Instance members that allow access to the underlying engine, user interface, and configuration APIs. ### version[#](#version) The version of the CE.SDK package. * * * ### engine[#](#engine) Access to the CreativeEngine instance that powers the editor. * * * ### ui[#](#ui) Access to the [UserInterfaceAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/userinterfaceapi/) for controlling the editor’s user interface * * * ### i18n[#](#i18n) Access to the [InternationalizationAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/internationalizationapi/) to control locale and translations * * * ### feature[#](#feature) Access to the [FeatureAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/featureapi/) to control feature availability * * * ### actions[#](#actions) Access to the [ActionsAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/actionsapi/) to control event actions * * * ### utils[#](#utils) Access to the [UtilsAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/utilsapi/) for utility functions * * * ### version[#](#version-1) The version of the Creative Editor SDK ## Lifecycle Management[#](#lifecycle-management) Methods for SDK initialization, cleanup, and resource management. ### dispose()[#](#dispose) Disposes the editor and engine if no longer needed. #### Returns[#](#returns) `void` #### Signature[#](#signature) ``` dispose(): void ``` * * * ### create()[#](#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[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `container` | `string` | `HTMLDivElement` | | `config?` | `Partial` | the initial configuration to create the editor | #### Returns[#](#returns-1) `Promise`<`CreativeEditorSDK`\> a promise which resolves after the engine is ready to receive further commands on the CreativeEditorSDK instance #### Signature[#](#signature-1) ``` create(container: string | HTMLDivElement, config?: Partial): Promise ``` ## Configuration[#](#configuration) Methods for configuring SDK behavior, translations, and runtime settings. ### onReset()[#](#onreset) Registers a callback function to be executed when resetEditor is called. #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`cesdk`) => `void` | Function to be called with the cesdk instance when reset occurs | #### Returns[#](#returns-2) Function to remove the callback from the registry ``` (): void; ``` ##### Returns[#](#returns-3) `void` #### Example[#](#example) ``` const removeCallback = cesdk.onReset((cesdk) => { console.log('Editor is being reset'); // Custom cleanup/reinitialization logic}); // Later, to remove the callback:removeCallback(); ``` #### Signature[#](#signature-2) ``` onReset(callback: (cesdk: CreativeEditorSDK) => void): () => void ``` * * * ### disableNoSceneWarning()[#](#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[#](#returns-4) `void` #### Signature[#](#signature-3) ``` disableNoSceneWarning(): void ``` * * * ### resetEditor()[#](#reseteditor) Resets the editor to a clean state by disabling all features, clearing UI configurations, and removing asset sources. #### Returns[#](#returns-5) `void` #### Example[#](#example-1) ``` // Reset the editor to clean statecesdk.resetEditor(); // Reconfigure as neededcesdk.feature.enable('ly.img.navigation.bar');cesdk.addDefaultAssetSources(); ``` #### Signature[#](#signature-4) ``` resetEditor(): void ``` * * * ### ~setTranslations()~[#](#settranslations) Adds translations to be used by the editor. #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `definition` | `Partial`<`Record`<`string`, `Partial`<[`Translations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations/)\>>> | locale to a translation object | #### Returns[#](#returns-6) `void` #### Deprecated[#](#deprecated) Use `cesdk.i18n.setTranslations()` instead. This method will be removed in a future version. #### Example[#](#example-2) ``` // Deprecated - do not usecesdk.setTranslations({...}); // Use this insteadcesdk.i18n.setTranslations({ en: { presets: { scene: ... } }}) ``` ## Plugin Management[#](#plugin-management) Methods for extending SDK functionality through plugins and custom integrations. ### addPlugin()[#](#addplugin) Adds and initializes a plugin to the editor. #### Parameters[#](#parameters-3) | Parameter | Type | | --- | --- | | `plugin` | [`EditorPlugin`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/editorplugin/) | #### Returns[#](#returns-7) `Promise`<`void`\> #### Signature[#](#signature-5) ``` addPlugin(plugin: EditorPlugin): Promise ``` ## Asset Management[#](#asset-management) Methods for registering, managing, and refreshing asset sources including default assets, demo assets, and custom asset libraries. ### addDefaultAssetSources()[#](#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 at `\{\{base_url\}\}//content.json`, where `baseURL` defaults to the IMG.LY CDN. 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[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `baseURL?`: `string`; `excludeAssetSourceIds?`: [`DefaultAssetSourceId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/defaultassetsourceid/)\[\]; } | Configuration options for asset sources. Contains `baseURL` (defaults to IMG.LY CDN) and `excludeAssetSourceIds` (IDs to ignore during load). | | `options.baseURL?` | `string` | \- | | `options.excludeAssetSourceIds?` | [`DefaultAssetSourceId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/defaultassetsourceid/)\[\] | \- | #### Returns[#](#returns-8) `Promise`<`void`\> #### Signature[#](#signature-6) ``` addDefaultAssetSources(options?: object): Promise ``` * * * ### addDemoAssetSources()[#](#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[#](#parameters-5) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `baseURL?`: `string`; `excludeAssetSourceIds?`: [`DemoAssetSourceId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/demoassetsourceid/)\[\]; `sceneMode?`: `"Design"` | `"Video"`; `withUploadAssetSources?`: `boolean`; } | | `options.baseURL?` | `string` | \- | | `options.excludeAssetSourceIds?` | [`DemoAssetSourceId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/demoassetsourceid/)\[\] | \- | | `options.sceneMode?` | `"Design"` | `"Video"` | | `options.withUploadAssetSources?` | `boolean` | \- | #### Returns[#](#returns-9) `Promise`<`void`\> #### Signature[#](#signature-7) ``` addDemoAssetSources(options?: object): Promise ``` * * * ### ~refetchAssetSources()~[#](#refetchassetsources) Trigger a refetch of the asset source and update the asset library panel with the new items accordingly. #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `sourceId?` | `string` | `string`\[\] | #### Returns[#](#returns-10) `void` #### Deprecated[#](#deprecated-1) Please use `cesdk.engine.asset.assetSourceContentsChanged` instead. ## Scene Creation[#](#scene-creation) Methods for creating new scenes from scratch, including design scenes, video scenes, and scenes from existing images. ### createDesignScene()[#](#createdesignscene) Create a scene with a single empty page with the given format. #### Parameters[#](#parameters-7) | Parameter | Type | Description | | --- | --- | --- | | `format?` | [`PageFormatDefinition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pageformatdefinition/) | A `PageFormatDefinition` object specifying the page format to use. | #### Returns[#](#returns-11) `Promise`<`number`\> #### Signature[#](#signature-8) ``` createDesignScene(format?: PageFormatDefinition): Promise ``` * * * ### createVideoScene()[#](#createvideoscene) Create a scene with a single empty page with the given format. #### Parameters[#](#parameters-8) | Parameter | Type | Description | | --- | --- | --- | | `format?` | [`PageFormatDefinition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pageformatdefinition/) | The page format to use. Can be either a string, identifying a page format that has been configured or a `PageFormatDefinition` object. | #### Returns[#](#returns-12) `Promise`<`number`\> #### Signature[#](#signature-9) ``` createVideoScene(format?: PageFormatDefinition): Promise ``` * * * ### createFromImage()[#](#createfromimage) Loads the given image and creates a scene with a single page showing the image. Fetching the image may take an arbitrary amount of time, so the scene isn’t immediately available. #### Parameters[#](#parameters-9) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The image URL. | | `dpi?` | `number` | The scene’s DPI. Defaults to 300. | | `pixelScaleFactor?` | `number` | The display’s pixel scale factor. Defaults to 1. | | `sceneLayout?` | `"Free"` | `"VerticalStack"` | | `spacing?` | `number` | Spacing between pages. Defaults to 0. | | `spacingInScreenSpace?` | `boolean` | Whether spacing is in screen space. Defaults to false. | #### Returns[#](#returns-13) `Promise`<`number`\> a promise which resolves if the scene was successfully created. #### Signature[#](#signature-10) ``` createFromImage(url: string, dpi?: number, pixelScaleFactor?: number, sceneLayout?: "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack", spacing?: number, spacingInScreenSpace?: boolean): Promise ``` * * * ### createFromVideo()[#](#createfromvideo) Create a scene from the provided video. #### Parameters[#](#parameters-10) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The url of the video | #### Returns[#](#returns-14) `Promise`<`number`\> a promise which resolves if the scene was successfully created. #### Signature[#](#signature-11) ``` createFromVideo(url: string): Promise ``` ## Scene Loading[#](#scene-loading) Methods for loading existing scenes from various sources including strings, URLs, and encoded scene data. ### ~load()~[#](#load) Load an encoded scene from the provided string. #### Parameters[#](#parameters-11) | Parameter | Type | Description | | --- | --- | --- | | `scene` | `string` | A string starting with UBQ1 and containing the encoded scene. | #### Returns[#](#returns-15) `Promise`<`number`\> #### Deprecated[#](#deprecated-2) Use `loadFromString` instead. * * * ### loadFromString()[#](#loadfromstring) Load an encoded scene from the provided string. #### Parameters[#](#parameters-12) | Parameter | Type | Description | | --- | --- | --- | | `scene` | `string` | A string starting with UBQ1 and containing the encoded scene. | | `overrideEditorConfig?` | `boolean` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | #### Returns[#](#returns-16) `Promise`<`number`\> a promise which resolves if the scene was successfully loaded. #### Signature[#](#signature-12) ``` loadFromString(scene: string, overrideEditorConfig?: boolean): Promise ``` * * * ### loadFromURL()[#](#loadfromurl) Load the scene stored in the file at the given URL. #### Parameters[#](#parameters-13) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The url to fetch to acquire the scene string. | | `overrideEditorConfig?` | `boolean` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | #### Returns[#](#returns-17) `Promise`<`number`\> a promise which resolves if the scene was successfully loaded. #### Signature[#](#signature-13) ``` loadFromURL(url: string, overrideEditorConfig?: boolean): Promise ``` * * * ### loadFromArchiveURL()[#](#loadfromarchiveurl) Load a previously archived scene from the URL to the scene file. #### Parameters[#](#parameters-14) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The URL of the scene archive file. | | `overrideEditorConfig?` | `boolean` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | #### Returns[#](#returns-18) `Promise`<`number`\> a promise which resolves if the scene was successfully loaded. #### Signature[#](#signature-14) ``` loadFromArchiveURL(url: string, overrideEditorConfig?: boolean): Promise ``` ## Scene Saving[#](#scene-saving) Methods for persisting and exporting scene data as strings or files. ### save()[#](#save) Save and return a scene as a base64 encoded string. #### Returns[#](#returns-19) `Promise`<`string`\> a promise with the scene as a string #### Signature[#](#signature-15) ``` save(): Promise ``` ## Export Operations[#](#export-operations) Methods for exporting scenes and pages as files in various formats and mimeTypes. ### export()[#](#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[#](#parameters-15) | Parameter | Type | Description | | --- | --- | --- | | `options` | [`ExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/exportoptions/) | options for the export | #### Returns[#](#returns-20) `Promise`<{ `blobs`: `Blob`\[\]; `options`: [`ExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/exportoptions/); }> a promise with an object holding `blobs` of the export pages and the provided `options`. #### Signature[#](#signature-16) ``` export(options: ExportOptions): Promise ``` ## Upload Operations[#](#upload-operations) Methods for handling file uploads and asset creation from user-provided files. ### ~unstable\_upload()~[#](#unstable_upload) Uses the configured upload handler to upload the given file. #### Parameters[#](#parameters-16) | 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[#](#returns-21) `Promise`<[`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetdefinition/)\> #### Deprecated[#](#deprecated-3) This API will be removed in future versions. Please use the `uploadFile` action instead. ## Other[#](#other) ### getBaseURL()[#](#getbaseurl) Returns the baseURL that was provided in the configuration during editor initialization. #### Returns[#](#returns-22) `string` The original baseURL from the top-level configuration #### Example[#](#example-3) ``` const cesdk = await CreativeEditorSDK.create('#editor', { baseURL: 'https://my-cdn.example.com/assets/'}); console.log(cesdk.getBaseURL()); // 'https://my-cdn.example.com/assets/' ``` #### Signature[#](#signature-17) ``` getBaseURL(): string ``` ## Page Management[#](#page-management) This API is experimental and may change or be removed in future versions. ### unstable\_switchPage()[#](#unstable_switchpage) #### Parameters[#](#parameters-17) | Parameter | Type | | --- | --- | | `pageId` | `number` | #### Returns[#](#returns-23) `Promise`<`void`\> * * * ### unstable\_getPages()[#](#unstable_getpages) #### Returns[#](#returns-24) `Promise`<`number`\[\]> * * * ### unstable\_onActivePageChanged()[#](#unstable_onactivepagechanged) #### Parameters[#](#parameters-18) | Parameter | Type | | --- | --- | | `callback` | (`id`) => `void` | #### Returns[#](#returns-25) ``` (): void; ``` ##### Returns[#](#returns-26) `void` * * * ### unstable\_focusPage()[#](#unstable_focuspage) Focus on a specific page and zoom to fit it in the viewport. #### Parameters[#](#parameters-19) | Parameter | Type | Description | | --- | --- | --- | | `pageId` | `number` | The ID of the page to focus on | #### Returns[#](#returns-27) `Promise`<`void`\> A promise that resolves when the focus operation is complete ## Upload Operations[#](#upload-operations-1) This API is experimental and may change or be removed in future versions. ### ~unstable\_supportsUpload()~[#](#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[#](#parameters-20) | Parameter | Type | | --- | --- | | `mimeTypes?` | `string` | #### Returns[#](#returns-28) `boolean` #### Deprecated[#](#deprecated-4) This API will be removed in future versions. Please use the `engine.editor.getSetting('upload/supportedMimeTypes')` to check for supported mime types instead. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeengine) # 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[#](#engine-management) Methods for initializing, configuring, and managing the engine lifecycle. ### version[#](#version) The version of the CE.SDK package. * * * ### version[#](#version-1) The SDK version * * * ### addPlugin()[#](#addplugin) Add and initialize a plugin to the engine. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `plugin` | [`EnginePlugin`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/engineplugin/) | The plugin to add and initialize. | #### Returns[#](#returns) `Promise`<`void`\> #### Signature[#](#signature) ``` addPlugin(plugin: EnginePlugin): Promise ``` * * * ### setWheelEventTarget()[#](#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[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `target` | `HTMLElement` | The HTML element to attach the wheel event handler to. | #### Returns[#](#returns-1) A function that removes the event handler from the target and adds it back to the canvas. ``` (): void; ``` ##### Returns[#](#returns-2) `void` #### Signature[#](#signature-1) ``` setWheelEventTarget(target: HTMLElement): () => void ``` * * * ### element[#](#element) Access the canvas element used by the CreativeEngine. ##### Returns[#](#returns-3) [`HTMLCreativeEngineCanvasElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/htmlcreativeenginecanvaselement/) * * * ### dispose()[#](#dispose) Dispose the engine and clean up all resources. #### Returns[#](#returns-4) `void` #### Signature[#](#signature-2) ``` dispose(): void ``` * * * ### init()[#](#init) Initialize a CreativeEngine with an optional configuration. #### Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `C` _extends_ `Partial`<[`_EngineConfiguration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/engineconfiguration/)\> | #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `config?` | `C` | Optional configuration object for engine initialization. | #### Returns[#](#returns-5) `Promise`<`CreativeEngine` & `C` _extends_ `object` ? `object` : `object`\> A promise that resolves to an engine instance. #### Signature[#](#signature-3) ``` init(config?: C): Promise ``` * * * ### getBaseURL()[#](#getbaseurl) Returns the configured base URL for the engine’s assets. #### Returns[#](#returns-6) `string` The absolute base URL configured for this engine instance. #### Example[#](#example) ``` const engine = await CreativeEngine.init({ baseURL: 'https://my-cdn.example.com/assets/'}); console.log(engine.getBaseURL()); // 'https://my-cdn.example.com/assets/' ``` #### Signature[#](#signature-4) ``` getBaseURL(): string ``` ## Core APIs[#](#core-apis) ### asset[#](#asset) Manage and interact with assets in the engine. * * * ### block[#](#block) Create, find, delete and modify with blocks in the engine. * * * ### editor[#](#editor) Manage the editor state, including edit modes and undo/redo operations. * * * ### event[#](#event) Subscribe to events in the engine. * * * ### scene[#](#scene) Manage scenes, including creating, modifying, and deleting scenes. * * * ### variable[#](#variable) Manage variables in the engine, allowing for dynamic data handling and manipulation. ## Asset Sources[#](#asset-sources) Methods for adding default and demo asset sources to the engine. ### addDefaultAssetSources()[#](#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 at `\{\{base_url\}\}//content.json`, where `base_url` defaults to the IMG.LY CDN. 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[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `options` | { `baseURL?`: `string`; `excludeAssetSourceIds?`: [`DefaultAssetSourceId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/defaultassetsourceid/)\[\]; } | Configuration options for loading default asset sources. | | `options.baseURL?` | `string` | The source of the asset definitions, must be absolute. Defaults to IMG.LY CDN. | | `options.excludeAssetSourceIds?` | [`DefaultAssetSourceId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/defaultassetsourceid/)\[\] | A list of IDs, that will be ignored during load. | #### Returns[#](#returns-7) `Promise`<`void`\> A promise that resolves when all asset sources are loaded. #### Signature[#](#signature-5) ``` addDefaultAssetSources(options?: object): Promise ``` * * * ### addDemoAssetSources()[#](#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[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `options` | { `baseURL?`: `string`; `excludeAssetSourceIds?`: [`DemoAssetSourceId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/demoassetsourceid/)\[\]; `sceneMode?`: `"Design"` | `"Video"`; `withUploadAssetSources?`: `boolean`; } | | `options.baseURL?` | `string` | The source of the demo asset definitions, must be absolute. Defaults to IMG.LY CDN. | | `options.excludeAssetSourceIds?` | [`DemoAssetSourceId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/demoassetsourceid/)\[\] | A list of IDs, that will be ignored during load | | `options.sceneMode?` | `"Design"` | `"Video"` | | `options.withUploadAssetSources?` | `boolean` | If ‘true’ asset sources for uploads are added (default false) | #### Returns[#](#returns-8) `Promise`<`void`\> A promise that resolves when all demo asset sources are loaded. #### Signature[#](#signature-6) ``` addDemoAssetSources(options?: object): Promise ``` ## Experimental Features[#](#experimental-features) Experimental APIs that may change or be removed in future versions. ### unstable\_setVideoExportInactivityTimeout()[#](#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[#](#parameters-5) | 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[#](#returns-9) `void` * * * ### unstable\_setExportInactivityTimeout()[#](#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[#](#parameters-6) | 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[#](#returns-10) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/blockapi) # Class: BlockAPI Create, manipulate, and query the building blocks of your design. This is the primary interface for all block-level operations. Use it to manage the entire lifecycle of blocks from creation and serialization to destruction. You can precisely control a block’s appearance by modifying its fills, strokes, and effects, or transform its position, size, and rotation. The API also includes powerful features for managing complex content like text and video, organizing blocks into groups and hierarchies, and exporting final designs to various formats. ## Block Lifecycle[#](#block-lifecycle) Manage the complete lifecycle: create, find, duplicate, destroy, and serialize blocks. ### loadFromString()[#](#loadfromstring) Loads blocks from a serialized string. The blocks are not attached by default and won’t be visible until attached to a page or the scene. The UUID of the loaded blocks is replaced with a new one. #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `content` | `string` | A string representing the given blocks. | #### Returns[#](#returns) `Promise`<`number`\[\]> A promise that resolves with a list of handles representing the found blocks or an error. #### Example[#](#example) ``` const serializedBlocks = await engine.block.saveToString([pageBlockId]);// Later, load those blocksconst loadedBlocks = await engine.block.loadFromString(serializedBlocks);// Attach the first loaded block to the sceneengine.block.appendChild(sceneBlockId, loadedBlocks[0]); ``` #### Signature[#](#signature) ``` loadFromString(content: string): Promise ``` * * * ### loadFromArchiveURL()[#](#loadfromarchiveurl) Loads blocks from a remote archive URL. The URL should be that of a file previously saved with `block.saveToArchive`. The blocks are not attached by default and won’t be visible until attached to a page or the scene. The UUID of the loaded blocks is replaced with a new one. #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | The URL of the blocks archive file. | #### Returns[#](#returns-1) `Promise`<`number`\[\]> A promise that resolves with a list of handles representing the found blocks or an error. #### Example[#](#example-1) ``` // Load blocks from a remote archiveconst loadedBlocks = await engine.block.loadFromArchiveURL('https://example.com/blocks.zip');// Attach the first loaded block to the sceneengine.block.appendChild(sceneBlockId, loadedBlocks[0]); ``` #### Signature[#](#signature-1) ``` loadFromArchiveURL(url: string): Promise ``` * * * ### saveToString()[#](#savetostring) Saves the given blocks to a serialized string. If a page with multiple children is given, the entire hierarchy is saved. #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `blocks` | `number`\[\] | The blocks to save. | | `allowedResourceSchemes` | `string`\[\] | The resource schemes to allow in the saved string. Defaults to \[‘buffer’, ‘http’, ‘https’\]. | | `onDisallowedResourceScheme?` | (`url`, `dataHash`) => `Promise`<`string`\> | An optional callback that is called for each resource URL that has a scheme absent from `resourceSchemesAllowed`. The `url` parameter is the resource URL and the `dataHash` parameter is the hash of the resource’s data. The callback should return a new URL for the resource, which will be used in the serialized scene. The callback is expected to return the original URL if no persistence is needed. | #### Returns[#](#returns-2) `Promise`<`string`\> A promise that resolves to a string representing the blocks or an error. #### Example[#](#example-2) ``` // Create a page with a text elementconst page = engine.block.create('page');const text = engine.block.create('text');engine.block.appendChild(page, text); // Save the whole page hierarchy to a stringconst serialized = await engine.block.saveToString([page]); ``` #### Signature[#](#signature-2) ``` saveToString(blocks: number[], allowedResourceSchemes?: string[], onDisallowedResourceScheme?: (url: string, dataHash: string) => Promise): Promise ``` * * * ### saveToArchive()[#](#savetoarchive) Saves the given blocks and their assets to a zip archive. The archive contains all assets that were accessible when this function was called. Blocks in the archived scene reference assets relative to the location of the scene file. #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `blocks` | `number`\[\] | The blocks to save. | #### Returns[#](#returns-3) `Promise`<`Blob`\> A promise that resolves with a Blob on success or an error on failure. #### Signature[#](#signature-3) ``` saveToArchive(blocks: number[]): Promise ``` * * * ### create()[#](#create) Creates a new block of a given type. ``` // Create a new text blockconst text = engine.block.create('text');const page = engine.scene.getCurrentPage();engine.block.appendChild(page, text); // Create a new image blockconst image = engine.block.create('graphic');engine.block.setShape(image, engine.block.createShape('rect'));const imageFill = engine.block.createFill('image');engine.block.setFill(image, imageFill);engine.block.setString(imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg');engine.block.appendChild(page, image); // Create a new video blockconst video = engine.block.create('graphic');engine.block.setShape(video, engine.block.createShape('rect'));const videoFill = engine.block.createFill('video');engine.block.setString(videoFill, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4');engine.block.setFill(video, videoFill);engine.block.appendChild(page, video); ``` #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`DesignBlockType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblocktype/) | The type of the block that shall be created. | #### Returns[#](#returns-4) `number` The created block’s handle. #### Signature[#](#signature-4) ``` create(type: DesignBlockType): number ``` * * * ### duplicate()[#](#duplicate) Duplicates a block and its children. #### Parameters[#](#parameters-5) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The block to duplicate. | | `attachToParent` | `boolean` | `true` | Whether the duplicated block should be attached to the original’s parent. Defaults to true. | #### Returns[#](#returns-5) `number` The handle of the duplicate. #### Signature[#](#signature-5) ``` duplicate(id: number, attachToParent?: boolean): number ``` * * * ### destroy()[#](#destroy) Destroys a block and its children. #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to destroy. | #### Returns[#](#returns-6) `void` #### Signature[#](#signature-6) ``` destroy(id: number): void ``` * * * ### forceLoadResources()[#](#forceloadresources) Forces the loading of resources for a set of blocks and their children. This is useful for preloading resources. If a resource failed to load previously, it will be reloaded. #### Parameters[#](#parameters-7) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The blocks whose resources should be loaded. | #### Returns[#](#returns-7) `Promise`<`void`\> A Promise that resolves once all resources have finished loading. #### Signature[#](#signature-7) ``` forceLoadResources(ids: number[]): Promise ``` ## Block Exploration[#](#block-exploration) Find blocks by properties like name, type, or kind. ### findByName()[#](#findbyname) Finds all blocks with a given name. #### Parameters[#](#parameters-8) | Parameter | Type | Description | | --- | --- | --- | | `name` | `string` | The name to search for. | #### Returns[#](#returns-8) `number`\[\] A list of block ids. #### Signature[#](#signature-8) ``` findByName(name: string): number[] ``` * * * ### findByType()[#](#findbytype) Finds all blocks with a given type. #### Parameters[#](#parameters-9) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`ObjectType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/objecttype/) | The type to search for. | #### Returns[#](#returns-9) `number`\[\] A list of block ids. #### Signature[#](#signature-9) ``` findByType(type: ObjectType): number[] ``` * * * ### findByKind()[#](#findbykind) Finds all blocks with a given kind. ``` const allTitles = engine.block.findByKind('title'); ``` #### Parameters[#](#parameters-10) | Parameter | Type | Description | | --- | --- | --- | | `kind` | `string` | The kind to search for. | #### Returns[#](#returns-10) `number`\[\] A list of block ids. #### Signature[#](#signature-10) ``` findByKind(kind: string): number[] ``` * * * ### findAll()[#](#findall) Finds all blocks known to the engine. #### Returns[#](#returns-11) `number`\[\] A list of block ids. #### Signature[#](#signature-11) ``` findAll(): number[] ``` * * * ### findAllPlaceholders()[#](#findallplaceholders) Finds all placeholder blocks in the current scene. #### Returns[#](#returns-12) `number`\[\] A list of block ids. #### Signature[#](#signature-12) ``` findAllPlaceholders(): number[] ``` ## Block Export[#](#block-export) Export blocks to various formats like images, videos, and audio. ### export()[#](#export) Exports a design block to a Blob. Performs an internal update to resolve the final layout for the blocks. ##### Parameters[#](#parameters-11) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. | | `options?` | [`EngineExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineexportoptions/) | The options for exporting the block type, including mime type and export settings. | ##### Returns[#](#returns-13) `Promise`<`Blob`\> A promise that resolves with the exported image or is rejected with an error. #### Call Signature[#](#call-signature) ``` export( handle, mimeType?,options?): Promise; ``` Exports a design block to a Blob. Performs an internal update to resolve the final layout for the blocks. ##### Parameters[#](#parameters-12) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. | | `mimeType?` | | `"application/octet-stream"` | | `options?` | `Omit`<[`EngineExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineexportoptions/), `"mimeType"`\> | The options for exporting the block type | ##### Returns[#](#returns-14) `Promise`<`Blob`\> A promise that resolves with the exported image or is rejected with an error. ##### Deprecated[#](#deprecated) Use the new `export` signature instead ##### Example[#](#example-3) ``` // Before migrationconst blob = await cesdk.block.export(blockId, MimeType.Png, { pngCompressionLevel: 5 })// After migrationconst blob = await cesdk.block.export(blockId, { mimeType: 'image/png', pngCompressionLevel: 5 }) ``` #### Signatures[#](#signatures) ``` export(handle: number, options?: ExportOptions): Promise ``` ``` export(handle: number, mimeType?: "application/octet-stream" | "application/pdf" | ImageMimeType, options?: Omit): Promise ``` * * * ### exportWithColorMask()[#](#exportwithcolormask) Exports a design block and a color mask to two separate Blobs. Performs an internal update to resolve the final layout for the blocks. ##### Parameters[#](#parameters-13) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. | | `maskColorR` | `number` | The red component of the special color mask color. | | `maskColorG` | `number` | The green component of the special color mask color. | | `maskColorB` | `number` | The blue component of the special color mask color. | | `options?` | [`EngineExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineexportoptions/) | The options for exporting the block type | ##### Returns[#](#returns-15) `Promise`<`Blob`\[\]> A promise that resolves with an array of the exported image and mask or is rejected with an error. #### Call Signature[#](#call-signature-1) ``` exportWithColorMask( handle, mimeType, maskColorR, maskColorG, maskColorB,options?): Promise; ``` Exports a design block and a color mask to two separate Blobs. Performs an internal update to resolve the final layout for the blocks. Removes all pixels that exactly match the given RGB color and replaces them with transparency. The output includes two files: the masked image and the mask itself. ##### Parameters[#](#parameters-14) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. | | `mimeType` | | `"application/octet-stream"` | | `maskColorR` | `number` | The red component of the special color mask color. | | `maskColorG` | `number` | The green component of the special color mask color. | | `maskColorB` | `number` | The blue component of the special color mask color. | | `options?` | `Omit`<[`EngineExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineexportoptions/), `"mimeType"`\> | The options for exporting the block type | ##### Returns[#](#returns-16) `Promise`<`Blob`\[\]> A promise that resolves with an array of the exported image and mask or is rejected with an error. ##### Deprecated[#](#deprecated-1) Use the new `exportWithColorMask` signature instead ##### Example[#](#example-4) ``` // Before migrationconst blob = await cesdk.block.exportWithColorMask( blockId, MimeType.Png, 0.5, 0, 0, { pngCompressionLevel: 5 });// After migrationconst blob = await cesdk.block.exportWithColorMask( blockId, 0.5, 0, 0, { mimeType: 'image/png', pngCompressionLevel: 5 }); ``` #### Signatures[#](#signatures-1) ``` exportWithColorMask(handle: number, maskColorR: number, maskColorG: number, maskColorB: number, options?: ExportOptions): Promise ``` ``` exportWithColorMask(handle: number, mimeType: "application/octet-stream" | "application/pdf" | ImageMimeType, maskColorR: number, maskColorG: number, maskColorB: number, options?: Omit): Promise ``` * * * ### exportVideo()[#](#exportvideo) Exports a design block as a video file. Note: The export will run across multiple iterations of the update loop. In each iteration a frame is scheduled for encoding. ##### Parameters[#](#parameters-15) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. Currently, only page blocks are supported. | | `options?` | [`VideoExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videoexportoptions/) | The options for exporting the video, including mime type, h264 profile, level, bitrate, time offset, duration, framerate, target width and height. | ##### Returns[#](#returns-17) `Promise`<`Blob`\> A promise that resolves with a video blob or is rejected with an error. ##### Example[#](#example-5) ``` const page = engine.block.create('page');// Set up a progress tracking functionconst progressTracker = (renderedFrames, encodedFrames, totalFrames) => { console.log(`Progress: ${Math.round((encodedFrames / totalFrames) * 100)}%`);};const videoOptions = { framerate: 30, duration: 5 };const videoBlob = await engine.block.exportVideo(page, MimeType.Mp4, progressTracker, videoOptions); ``` #### Call Signature[#](#call-signature-2) ``` exportVideo( handle, mimeType?, progressCallback?,options?): Promise; ``` Exports a design block as a video file. Note: The export will run across multiple iterations of the update loop. In each iteration a frame is scheduled for encoding. ##### Parameters[#](#parameters-16) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. Currently, only page blocks are supported. | | `mimeType?` | [`VideoMimeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videomimetype/) | The MIME type of the output video file. | | `progressCallback?` | (`numberOfRenderedFrames`, `numberOfEncodedFrames`, `totalNumberOfFrames`) => `void` | A callback which reports on the progress of the export. | | `options?` | `Omit`<[`VideoExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videoexportoptions/), `"mimeType"` | `"onProgress"`\> | ##### Returns[#](#returns-18) `Promise`<`Blob`\> A promise that resolves with a video blob or is rejected with an error. ##### Deprecated[#](#deprecated-2) Use the new `exportVideo` signature instead ##### Example[#](#example-6) ``` // Before migrationconst blob = await cesdk.block.exportVideo(blockId, 'video/mp4', handleProgress, { targetWidth: 1920, targetHeight: 1080,})// After migrationconst blob = await cesdk.block.exportVideo(blockId, { mimeType: 'video/mp4', progressCallback: handleProgress, targetWidth: 1920, targetHeight: 1080,}) ``` #### Signatures[#](#signatures-2) ``` exportVideo(handle: number, options?: VideoExportOptions): Promise ``` ``` exportVideo(handle: number, mimeType?: VideoMimeType, progressCallback?: (numberOfRenderedFrames: number, numberOfEncodedFrames: number, totalNumberOfFrames: number) => void, options?: Omit): Promise ``` * * * ### exportAudio()[#](#exportaudio) Exports a design block as an audio file. #### Parameters[#](#parameters-17) | Parameter | Type | Description | | --- | --- | --- | | `handle` | `number` | The design block element to export. Currently, only audio blocks are supported. | | `options` | [`AudioExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/audioexportoptions/) | The options for exporting the audio, including mime type, progress callback, and export settings. | #### Returns[#](#returns-19) `Promise`<`Blob`\> A promise that resolves with an audio blob or is rejected with an error. This API is experimental and may change or be removed in future versions. #### Example[#](#example-7) ``` const audioBlock = engine.block.create('audio');// Set up a progress tracking functionconst progressTracker = (renderedFrames, encodedFrames, totalFrames) => { console.log(`Audio export progress: ${Math.round((encodedFrames / totalFrames) * 100)}%`);};const audioOptions = { duration: 10 };const audioBlob = await engine.block.exportAudio(audioBlock, MimeType.Wav, progressTracker, audioOptions); ``` #### Signature[#](#signature-13) ``` exportAudio(handle: number, options?: AudioExportOptions): Promise ``` ## Block Hierarchies[#](#block-hierarchies) Manage parent-child relationships and the scene graph structure. ### getParent()[#](#getparent) Gets the parent of a block. #### Parameters[#](#parameters-18) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-20) `number` The parent’s handle or null if the block has no parent. #### Signature[#](#signature-14) ``` getParent(id: number): number ``` * * * ### getChildren()[#](#getchildren) Gets all direct children of a block. Children are sorted in their rendering order: Last child is rendered in front of other children. #### Parameters[#](#parameters-19) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-21) `number`\[\] A list of block ids. #### Signature[#](#signature-15) ``` getChildren(id: number): number[] ``` * * * ### insertChild()[#](#insertchild) Inserts a child block at a specific index. #### Parameters[#](#parameters-20) | Parameter | Type | Description | | --- | --- | --- | | `parent` | `number` | The block whose children should be updated. | | `child` | `number` | The child to insert. Can be an existing child of `parent`. | | `index` | `number` | The index to insert or move to. | #### Returns[#](#returns-22) `void` #### Signature[#](#signature-16) ``` insertChild(parent: number, child: number, index: number): void ``` * * * ### appendChild()[#](#appendchild) Appends a child block to a parent. #### Parameters[#](#parameters-21) | Parameter | Type | Description | | --- | --- | --- | | `parent` | `number` | The block whose children should be updated. | | `child` | `number` | The child to insert. Can be an existing child of `parent`. | #### Returns[#](#returns-23) `void` #### Signature[#](#signature-17) ``` appendChild(parent: number, child: number): void ``` ## Block Layout[#](#block-layout) Structure designs by positioning, sizing, layering, aligning, and distributing blocks. ### isTransformLocked()[#](#istransformlocked) Gets the transform-locked state of a block. If true, the block’s transform can’t be changed. #### Parameters[#](#parameters-22) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-24) `boolean` True if transform locked, false otherwise. #### Signature[#](#signature-18) ``` isTransformLocked(id: number): boolean ``` * * * ### setTransformLocked()[#](#settransformlocked) Sets the transform-locked state of a block. #### Parameters[#](#parameters-23) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `locked` | `boolean` | Whether the block’s transform should be locked. | #### Returns[#](#returns-25) `void` #### Signature[#](#signature-19) ``` setTransformLocked(id: number, locked: boolean): void ``` * * * ### getPositionX()[#](#getpositionx) Gets the X position of a block. #### Parameters[#](#parameters-24) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-26) `number` The value of the x position. #### Signature[#](#signature-20) ``` getPositionX(id: number): number ``` * * * ### getPositionXMode()[#](#getpositionxmode) Gets the mode for the block’s X position. #### Parameters[#](#parameters-25) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-27) `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the x position: ‘Absolute’ or ‘Percent’. #### Signature[#](#signature-21) ``` getPositionXMode(id: number): "Absolute" | "Percent" | "Auto" ``` * * * ### getPositionY()[#](#getpositiony) Gets the Y position of a block. #### Parameters[#](#parameters-26) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-28) `number` The value of the y position. #### Signature[#](#signature-22) ``` getPositionY(id: number): number ``` * * * ### getPositionYMode()[#](#getpositionymode) Gets the mode for the block’s Y position. #### Parameters[#](#parameters-27) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-29) `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the y position: ‘Absolute’ or ‘Percent’. #### Signature[#](#signature-23) ``` getPositionYMode(id: number): "Absolute" | "Percent" | "Auto" ``` * * * ### setPositionX()[#](#setpositionx) Sets the X position of a block. The position refers to the block’s local space, relative to its parent with the origin at the top left. ``` engine.block.setPositionX(block, 0.25); ``` #### Parameters[#](#parameters-28) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `value` | `number` | The value of the x position. | #### Returns[#](#returns-30) `void` #### Signature[#](#signature-24) ``` setPositionX(id: number, value: number): void ``` * * * ### setPositionXMode()[#](#setpositionxmode) Sets the mode for the block’s X position. ``` engine.block.setPositionXMode(block, 'Percent'); ``` #### Parameters[#](#parameters-29) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | #### Returns[#](#returns-31) `void` #### Signature[#](#signature-25) ``` setPositionXMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` * * * ### setPositionY()[#](#setpositiony) Sets the Y position of a block. The position refers to the block’s local space, relative to its parent with the origin at the top left. ``` engine.block.setPositionY(block, 0.25); ``` #### Parameters[#](#parameters-30) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `value` | `number` | The value of the y position. | #### Returns[#](#returns-32) `void` #### Signature[#](#signature-26) ``` setPositionY(id: number, value: number): void ``` * * * ### setPositionYMode()[#](#setpositionymode) Sets the mode for the block’s Y position. ``` engine.block.setPositionYMode(block, 'Absolute'); ``` #### Parameters[#](#parameters-31) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | #### Returns[#](#returns-33) `void` #### Signature[#](#signature-27) ``` setPositionYMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` * * * ### setAlwaysOnTop()[#](#setalwaysontop) Sets a block to always be rendered on top of its siblings. If true, this block’s sorting order is automatically adjusted to be higher than all other siblings without this property. #### Parameters[#](#parameters-32) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | the block to update. | | `enabled` | `boolean` | whether the block shall be always-on-top. | #### Returns[#](#returns-34) `void` #### Signature[#](#signature-28) ``` setAlwaysOnTop(id: number, enabled: boolean): void ``` * * * ### setAlwaysOnBottom()[#](#setalwaysonbottom) Sets a block to always be rendered below its siblings. If true, this block’s sorting order is automatically adjusted to be lower than all other siblings without this property. #### Parameters[#](#parameters-33) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | the block to update. | | `enabled` | `boolean` | whether the block shall always be below its siblings. | #### Returns[#](#returns-35) `void` #### Signature[#](#signature-29) ``` setAlwaysOnBottom(id: number, enabled: boolean): void ``` * * * ### isAlwaysOnTop()[#](#isalwaysontop) Checks if a block is set to always be on top. #### Parameters[#](#parameters-34) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | the block to query. | #### Returns[#](#returns-36) `boolean` true if the block is set to be always-on-top, false otherwise. #### Signature[#](#signature-30) ``` isAlwaysOnTop(id: number): boolean ``` * * * ### isAlwaysOnBottom()[#](#isalwaysonbottom) Checks if a block is set to always be on the bottom. #### Parameters[#](#parameters-35) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | the block to query. | #### Returns[#](#returns-37) `boolean` true if the block is set to be always-on-bottom, false otherwise. #### Signature[#](#signature-31) ``` isAlwaysOnBottom(id: number): boolean ``` * * * ### bringToFront()[#](#bringtofront) Brings a block to the front of its siblings. Updates the sorting order so that the given block has the highest sorting order. #### Parameters[#](#parameters-36) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The id of the block to bring to the front. | #### Returns[#](#returns-38) `void` #### Signature[#](#signature-32) ``` bringToFront(id: number): void ``` * * * ### sendToBack()[#](#sendtoback) Sends a block to the back of its siblings. Updates the sorting order so that the given block has the lowest sorting order. #### Parameters[#](#parameters-37) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The id of the block to send to the back. | #### Returns[#](#returns-39) `void` #### Signature[#](#signature-33) ``` sendToBack(id: number): void ``` * * * ### bringForward()[#](#bringforward) Brings a block one layer forward. Updates the sorting order to be higher than its next sibling. #### Parameters[#](#parameters-38) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The id of the block to bring forward. | #### Returns[#](#returns-40) `void` #### Signature[#](#signature-34) ``` bringForward(id: number): void ``` * * * ### sendBackward()[#](#sendbackward) Sends a block one layer backward. Updates the sorting order to be lower than its previous sibling. #### Parameters[#](#parameters-39) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The id of the block to send backward. | #### Returns[#](#returns-41) `void` #### Signature[#](#signature-35) ``` sendBackward(id: number): void ``` * * * ### getRotation()[#](#getrotation) Gets the rotation of a block in radians. #### Parameters[#](#parameters-40) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-42) `number` The block’s rotation around its center in radians. #### Signature[#](#signature-36) ``` getRotation(id: number): number ``` * * * ### setRotation()[#](#setrotation) Sets the rotation of a block in radians. Rotation is applied around the block’s center. #### Parameters[#](#parameters-41) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `radians` | `number` | The new rotation in radians. | #### Returns[#](#returns-43) `void` #### Signature[#](#signature-37) ``` setRotation(id: number, radians: number): void ``` * * * ### getWidth()[#](#getwidth) Gets the width of a block in the current width mode. ``` const width = engine.block.getWidth(block); ``` #### Parameters[#](#parameters-42) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-44) `number` The value of the block’s width. #### Signature[#](#signature-38) ``` getWidth(id: number): number ``` * * * ### getWidthMode()[#](#getwidthmode) Gets the mode for the block’s width. ``` const widthMode = engine.block.getWidthMode(block); ``` #### Parameters[#](#parameters-43) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-45) `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the width: ‘Absolute’, ‘Percent’ or ‘Auto’. #### Signature[#](#signature-39) ``` getWidthMode(id: number): "Absolute" | "Percent" | "Auto" ``` * * * ### getHeight()[#](#getheight) Gets the height of a block in the current height mode. ``` const height = engine.block.getHeight(block); ``` #### Parameters[#](#parameters-44) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-46) `number` The value of the block’s height. #### Signature[#](#signature-40) ``` getHeight(id: number): number ``` * * * ### getHeightMode()[#](#getheightmode) Gets the mode for the block’s height. ``` const heightMode = engine.block.getHeightMode(block); ``` #### Parameters[#](#parameters-45) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-47) `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the height: ‘Absolute’, ‘Percent’ or ‘Auto’. #### Signature[#](#signature-41) ``` getHeightMode(id: number): "Absolute" | "Percent" | "Auto" ``` * * * ### setWidth()[#](#setwidth) Sets the width of a block in the current width mode. If the crop is maintained, the crop values will be automatically adjusted. ``` engine.block.setWidth(block, 2.5, true); ``` #### Parameters[#](#parameters-46) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `value` | `number` | The new width of the block. | | `maintainCrop?` | `boolean` | Whether or not the crop values, if available, should be automatically adjusted. | #### Returns[#](#returns-48) `void` #### Signature[#](#signature-42) ``` setWidth(id: number, value: number, maintainCrop?: boolean): void ``` * * * ### setWidthMode()[#](#setwidthmode) Sets the mode for the block’s width. ``` engine.block.setWidthMode(block, 'Percent'); ``` #### Parameters[#](#parameters-47) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | #### Returns[#](#returns-49) `void` #### Signature[#](#signature-43) ``` setWidthMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` * * * ### setHeight()[#](#setheight) Sets the height of a block in the current height mode. If the crop is maintained, the crop values will be automatically adjusted. ``` engine.block.setHeight(block, 0.5);engine.block.setHeight(block, 2.5, true); ``` #### Parameters[#](#parameters-48) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `value` | `number` | The new height of the block. | | `maintainCrop?` | `boolean` | Whether or not the crop values, if available, should be automatically adjusted. | #### Returns[#](#returns-50) `void` #### Signature[#](#signature-44) ``` setHeight(id: number, value: number, maintainCrop?: boolean): void ``` * * * ### setHeightMode()[#](#setheightmode) Sets the mode for the block’s height. ``` engine.block.setHeightMode(block, 'Percent'); ``` #### Parameters[#](#parameters-49) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | #### Returns[#](#returns-51) `void` #### Signature[#](#signature-45) ``` setHeightMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` * * * ### getFrameX()[#](#getframex) Gets the final calculated X position of a block’s frame. The position is only available after an internal update loop. ``` const frameX = engine.block.getFrameX(block); ``` #### Parameters[#](#parameters-50) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-52) `number` The layout position on the x-axis. #### Signature[#](#signature-46) ``` getFrameX(id: number): number ``` * * * ### getFrameY()[#](#getframey) Gets the final calculated Y position of a block’s frame. The position is only available after an internal update loop. ``` const frameY = engine.block.getFrameY(block); ``` #### Parameters[#](#parameters-51) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-53) `number` The layout position on the y-axis. #### Signature[#](#signature-47) ``` getFrameY(id: number): number ``` * * * ### getFrameWidth()[#](#getframewidth) Gets the final calculated width of a block’s frame. The width is only available after an internal update loop. ``` const frameWidth = engine.block.getFrameWidth(block); ``` #### Parameters[#](#parameters-52) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-54) `number` The layout width. #### Signature[#](#signature-48) ``` getFrameWidth(id: number): number ``` * * * ### getFrameHeight()[#](#getframeheight) Gets the final calculated height of a block’s frame. The height is only available after an internal update loop. ``` const frameHeight = engine.block.getFrameHeight(block); ``` #### Parameters[#](#parameters-53) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-55) `number` The layout height. #### Signature[#](#signature-49) ``` getFrameHeight(id: number): number ``` * * * ### getGlobalBoundingBoxX()[#](#getglobalboundingboxx) Gets the X position of the block’s global bounding box. The position is in the scene’s global coordinate space, with the origin at the top left. ``` const globalX = engine.block.getGlobalBoundingBoxX(block); ``` #### Parameters[#](#parameters-54) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns[#](#returns-56) `number` The x coordinate of the axis-aligned bounding box. #### Signature[#](#signature-50) ``` getGlobalBoundingBoxX(id: number): number ``` * * * ### getGlobalBoundingBoxY()[#](#getglobalboundingboxy) Gets the Y position of the block’s global bounding box. The position is in the scene’s global coordinate space, with the origin at the top left. ``` const globalY = engine.block.getGlobalBoundingBoxY(block); ``` #### Parameters[#](#parameters-55) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns[#](#returns-57) `number` The y coordinate of the axis-aligned bounding box. #### Signature[#](#signature-51) ``` getGlobalBoundingBoxY(id: number): number ``` * * * ### getGlobalBoundingBoxWidth()[#](#getglobalboundingboxwidth) Gets the width of the block’s global bounding box. The width is in the scene’s global coordinate space. ``` const globalWidth = engine.block.getGlobalBoundingBoxWidth(block); ``` #### Parameters[#](#parameters-56) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns[#](#returns-58) `number` The width of the axis-aligned bounding box. #### Signature[#](#signature-52) ``` getGlobalBoundingBoxWidth(id: number): number ``` * * * ### getGlobalBoundingBoxHeight()[#](#getglobalboundingboxheight) Gets the height of the block’s global bounding box. The height is in the scene’s global coordinate space. ``` const globalHeight = engine.block.getGlobalBoundingBoxHeight(block); ``` #### Parameters[#](#parameters-57) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns[#](#returns-59) `number` The height of the axis-aligned bounding box. #### Signature[#](#signature-53) ``` getGlobalBoundingBoxHeight(id: number): number ``` * * * ### getScreenSpaceBoundingBoxXYWH()[#](#getscreenspaceboundingboxxywh) Gets the screen-space bounding box for a set of blocks. ``` const boundingBox = engine.block.getScreenSpaceBoundingBoxXYWH([block]); ``` #### Parameters[#](#parameters-58) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The block to query. | #### Returns[#](#returns-60) [`XYWH`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/xywh/) The position and size of the bounding box. #### Signature[#](#signature-54) ``` getScreenSpaceBoundingBoxXYWH(ids: number[]): XYWH ``` * * * ### alignHorizontally()[#](#alignhorizontally) Aligns blocks horizontally. Aligns multiple blocks within their bounding box or a single block to its parent. #### Parameters[#](#parameters-59) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A non-empty array of block ids. | | `horizontalBlockAlignment` | `"Left"` | `"Right"` | #### Returns[#](#returns-61) `void` #### Signature[#](#signature-55) ``` alignHorizontally(ids: number[], horizontalBlockAlignment: "Left" | "Right" | "Center"): void ``` * * * ### alignVertically()[#](#alignvertically) Aligns blocks vertically. Aligns multiple blocks within their bounding box or a single block to its parent. #### Parameters[#](#parameters-60) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A non-empty array of block ids. | | `verticalBlockAlignment` | `"Center"` | `"Top"` | #### Returns[#](#returns-62) `void` #### Signature[#](#signature-56) ``` alignVertically(ids: number[], verticalBlockAlignment: "Center" | "Top" | "Bottom"): void ``` * * * ### distributeHorizontally()[#](#distributehorizontally) Distributes blocks horizontally with even spacing. Distributes multiple blocks horizontally within their bounding box. #### Parameters[#](#parameters-61) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A non-empty array of block ids. | #### Returns[#](#returns-63) `void` #### Signature[#](#signature-57) ``` distributeHorizontally(ids: number[]): void ``` * * * ### distributeVertically()[#](#distributevertically) Distributes blocks vertically with even spacing. Distributes multiple blocks vertically within their bounding box. #### Parameters[#](#parameters-62) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A non-empty array of block ids. | #### Returns[#](#returns-64) `void` #### Signature[#](#signature-58) ``` distributeVertically(ids: number[]): void ``` * * * ### fillParent()[#](#fillparent) Resizes and positions a block to fill its parent. The crop values of the block are reset if it can be cropped. #### Parameters[#](#parameters-63) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should fill its parent. | #### Returns[#](#returns-65) `void` #### Signature[#](#signature-59) ``` fillParent(id: number): void ``` * * * ### resizeContentAware()[#](#resizecontentaware) Resizes blocks while adjusting content to fit. The content of the blocks is automatically adjusted to fit the new dimensions. Full-page blocks are resized to remain as full-page afterwards, while the blocks that are not full-page get resized as a group to the same scale factor and centered. ``` const pages = engine.scene.getPages();engine.block.resizeContentAware(pages, width: 100.0, 100.0); ``` #### Parameters[#](#parameters-64) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The blocks to resize. | | `width` | `number` | The new width of the blocks. | | `height` | `number` | The new height of the blocks. | #### Returns[#](#returns-66) `void` #### Signature[#](#signature-60) ``` resizeContentAware(ids: number[], width: number, height: number): void ``` * * * ### scale()[#](#scale) Scales a block and its children proportionally. This updates the position, size and style properties (e.g. stroke width) of the block and its children around the specified anchor point. ``` // Scale a block to double its size, anchored at the center.engine.block.scale(block, 2.0, 0.5, 0.5); ``` #### Parameters[#](#parameters-65) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The block that should be scaled. | | `scale` | `number` | `undefined` | The scale factor to be applied to the current properties of the block. | | `anchorX` | `number` | `0` | The relative position along the width of the block around which the scaling should occur (0=left, 0.5=center, 1=right). Defaults to 0. | | `anchorY` | `number` | `0` | The relative position along the height of the block around which the scaling should occur (0=top, 0.5=center, 1=bottom). Defaults to 0. | #### Returns[#](#returns-67) `void` #### Signature[#](#signature-61) ``` scale(id: number, scale: number, anchorX?: number, anchorY?: number): void ``` ## Block Selection & Visibility[#](#block-selection--visibility) Manage a block’s selection state and visibility on the canvas. ### select()[#](#select) Selects a block, deselecting all others. #### Parameters[#](#parameters-66) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to be selected. | #### Returns[#](#returns-68) `void` #### Signature[#](#signature-62) ``` select(id: number): void ``` * * * ### setSelected()[#](#setselected) Sets the selection state of a block. #### Parameters[#](#parameters-67) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | | `selected` | `boolean` | Whether or not the block should be selected. | #### Returns[#](#returns-69) `void` #### Signature[#](#signature-63) ``` setSelected(id: number, selected: boolean): void ``` * * * ### isSelected()[#](#isselected) Gets the selection state of a block. #### Parameters[#](#parameters-68) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-70) `boolean` True if the block is selected, false otherwise. #### Signature[#](#signature-64) ``` isSelected(id: number): boolean ``` * * * ### findAllSelected()[#](#findallselected) Finds all currently selected blocks. #### Returns[#](#returns-71) `number`\[\] An array of block ids. #### Signature[#](#signature-65) ``` findAllSelected(): number[] ``` * * * ### isVisible()[#](#isvisible) Gets the visibility state of a block. #### Parameters[#](#parameters-69) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-72) `boolean` True if visible, false otherwise. #### Signature[#](#signature-66) ``` isVisible(id: number): boolean ``` * * * ### setVisible()[#](#setvisible) Sets the visibility state of a block. #### Parameters[#](#parameters-70) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `visible` | `boolean` | Whether the block shall be visible. | #### Returns[#](#returns-73) `void` #### Signature[#](#signature-67) ``` setVisible(id: number, visible: boolean): void ``` ## Block Appearance[#](#block-appearance) Control general appearance, including opacity, blend modes, flipping, and other visual properties. ### isClipped()[#](#isclipped) Gets the clipped state of a block. If true, the block should clip its contents to its frame. #### Parameters[#](#parameters-71) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-74) `boolean` True if clipped, false otherwise. #### Signature[#](#signature-68) ``` isClipped(id: number): boolean ``` * * * ### setClipped()[#](#setclipped) Sets the clipped state of a block. #### Parameters[#](#parameters-72) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `clipped` | `boolean` | Whether the block should clips its contents to its frame. | #### Returns[#](#returns-75) `void` #### Signature[#](#signature-69) ``` setClipped(id: number, clipped: boolean): void ``` * * * ### getFlipHorizontal()[#](#getfliphorizontal) Gets the horizontal flip state of a block. #### Parameters[#](#parameters-73) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-76) `boolean` A boolean indicating whether the block is flipped horizontally. #### Signature[#](#signature-70) ``` getFlipHorizontal(id: number): boolean ``` * * * ### getFlipVertical()[#](#getflipvertical) Gets the vertical flip state of a block. #### Parameters[#](#parameters-74) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-77) `boolean` A boolean indicating whether the block is flipped vertically. #### Signature[#](#signature-71) ``` getFlipVertical(id: number): boolean ``` * * * ### setFlipHorizontal()[#](#setfliphorizontal) Sets the horizontal flip state of a block. #### Parameters[#](#parameters-75) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `flip` | `boolean` | If the flip should be enabled. | #### Returns[#](#returns-78) `void` #### Signature[#](#signature-72) ``` setFlipHorizontal(id: number, flip: boolean): void ``` * * * ### setFlipVertical()[#](#setflipvertical) Sets the vertical flip state of a block. #### Parameters[#](#parameters-76) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `flip` | `boolean` | If the flip should be enabled. | #### Returns[#](#returns-79) `void` #### Signature[#](#signature-73) ``` setFlipVertical(id: number, flip: boolean): void ``` * * * ### ~hasOpacity()~[#](#hasopacity) Checks if a block has an opacity property. #### Parameters[#](#parameters-77) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-80) `boolean` true, if the block has an opacity. #### Deprecated[#](#deprecated-3) Use supportsOpacity() instead. * * * ### supportsOpacity()[#](#supportsopacity) Checks if a block supports opacity. #### Parameters[#](#parameters-78) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-81) `boolean` true, if the block supports opacity. #### Signature[#](#signature-74) ``` supportsOpacity(id: number): boolean ``` * * * ### setOpacity()[#](#setopacity) Sets the opacity of a block. #### Parameters[#](#parameters-79) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose opacity should be set. | | `opacity` | `number` | The opacity to be set. The valid range is 0 to 1. | #### Returns[#](#returns-82) `void` #### Signature[#](#signature-75) ``` setOpacity(id: number, opacity: number): void ``` * * * ### getOpacity()[#](#getopacity) Gets the opacity of a block. #### Parameters[#](#parameters-80) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose opacity should be queried. | #### Returns[#](#returns-83) `number` The opacity value. #### Signature[#](#signature-76) ``` getOpacity(id: number): number ``` * * * ### ~hasBlendMode()~[#](#hasblendmode) Checks if a block has a blend mode property. #### Parameters[#](#parameters-81) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-84) `boolean` true, if the block has a blend mode. #### Deprecated[#](#deprecated-4) Use supportsBlendMode() instead. * * * ### supportsBlendMode()[#](#supportsblendmode) Checks if a block supports blend modes. #### Parameters[#](#parameters-82) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-85) `boolean` true, if the block supports blend modes. #### Signature[#](#signature-77) ``` supportsBlendMode(id: number): boolean ``` * * * ### setBlendMode()[#](#setblendmode) Sets the blend mode of a block. #### Parameters[#](#parameters-83) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose blend mode should be set. | | `blendMode` | | `"Color"` | #### Returns[#](#returns-86) `void` #### Signature[#](#signature-78) ``` setBlendMode(id: number, blendMode: "Color" | "Difference" | "PassThrough" | "Normal" | "Darken" | "Multiply" | "ColorBurn" | "LinearBurn" | "DarkenColor" | "Lighten" | "Screen" | "ColorDodge" | "LinearDodge" | "LightenColor" | "Overlay" | "SoftLight" | "HardLight" | "VividLight" | "LinearLight" | "PinLight" | "HardMix" | "Exclusion" | "Subtract" | "Divide" | "Hue" | "Saturation" | "Luminosity"): void ``` * * * ### getBlendMode()[#](#getblendmode) Gets the blend mode of a block. #### Parameters[#](#parameters-84) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose blend mode should be queried. | #### Returns[#](#returns-87) | `"Color"` | `"Difference"` | `"PassThrough"` | `"Normal"` | `"Darken"` | `"Multiply"` | `"ColorBurn"` | `"LinearBurn"` | `"DarkenColor"` | `"Lighten"` | `"Screen"` | `"ColorDodge"` | `"LinearDodge"` | `"LightenColor"` | `"Overlay"` | `"SoftLight"` | `"HardLight"` | `"VividLight"` | `"LinearLight"` | `"PinLight"` | `"HardMix"` | `"Exclusion"` | `"Subtract"` | `"Divide"` | `"Hue"` | `"Saturation"` | `"Luminosity"` The blend mode. #### Signature[#](#signature-79) ``` getBlendMode(id: number): "Color" | "Difference" | "PassThrough" | "Normal" | "Darken" | "Multiply" | "ColorBurn" | "LinearBurn" | "DarkenColor" | "Lighten" | "Screen" | "ColorDodge" | "LinearDodge" | "LightenColor" | "Overlay" | "SoftLight" | "HardLight" | "VividLight" | "LinearLight" | "PinLight" | "HardMix" | "Exclusion" | "Subtract" | "Divide" | "Hue" | "Saturation" | "Luminosity" ``` * * * ### ~hasBackgroundColor()~[#](#hasbackgroundcolor) Checks if a block has background color properties. #### Parameters[#](#parameters-85) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-88) `boolean` true, if the block has background color properties. #### Deprecated[#](#deprecated-5) Use supportsBackgroundColor() instead. * * * ### supportsBackgroundColor()[#](#supportsbackgroundcolor) Checks if a block supports a background color. #### Parameters[#](#parameters-86) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-89) `boolean` true, if the block supports a background color. #### Signature[#](#signature-80) ``` supportsBackgroundColor(id: number): boolean ``` * * * ### ~setBackgroundColorRGBA()~[#](#setbackgroundcolorrgba) Sets the background color of a block using RGBA values. #### Parameters[#](#parameters-87) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The block whose background color should be set. | | `r` | `number` | `undefined` | The red color component in the range of 0 to 1. | | `g` | `number` | `undefined` | The green color component in the range of 0 to 1. | | `b` | `number` | `undefined` | The blue color component in the range of 0 to 1. | | `a` | `number` | `1` | The alpha color component in the range of 0 to 1. | #### Returns[#](#returns-90) `void` #### Deprecated[#](#deprecated-6) Use `Use setColor() with the key path 'backgroundColor/color' instead.`. * * * ### ~getBackgroundColorRGBA()~[#](#getbackgroundcolorrgba) Gets the background color of a block as RGBA values. #### Parameters[#](#parameters-88) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose background color should be queried. | #### Returns[#](#returns-91) [`RGBA`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rgba/) The background color. #### Deprecated[#](#deprecated-7) Use `Use getColor() with the key path 'backgroundColor/color' instead.`. * * * ### setBackgroundColorEnabled()[#](#setbackgroundcolorenabled) Enables or disables the background of a block. ``` engine.block.setBackgroundColorEnabled(block, true); ``` #### Parameters[#](#parameters-89) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose background should be enabled or disabled. | | `enabled` | `boolean` | If true, the background will be enabled. | #### Returns[#](#returns-92) `void` #### Signature[#](#signature-81) ``` setBackgroundColorEnabled(id: number, enabled: boolean): void ``` * * * ### isBackgroundColorEnabled()[#](#isbackgroundcolorenabled) Checks if the background of a block is enabled. ``` const backgroundColorIsEnabled = engine.block.isBackgroundColorEnabled(block); ``` #### Parameters[#](#parameters-90) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose background state should be queried. | #### Returns[#](#returns-93) `boolean` True, if background is enabled. #### Signature[#](#signature-82) ``` isBackgroundColorEnabled(id: number): boolean ``` ## Block Fills[#](#block-fills) Create, configure, and manage block fills, including solid colors, gradients, and images. ### createFill()[#](#createfill) Creates a new fill block. ``` const solidColoFill = engine.block.createFill('color');// Longhand fill types are also supportedconst imageFill = engine.block.createFill('//ly.img.ubq/fill/image'); ``` #### Parameters[#](#parameters-91) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`FillType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filltype/) | The type of the fill object that shall be created. | #### Returns[#](#returns-94) `number` The created fill’s handle. #### Signature[#](#signature-83) ``` createFill(type: FillType): number ``` * * * ### ~hasContentFillMode()~[#](#hascontentfillmode) Checks if a block supports content fill modes. #### Parameters[#](#parameters-92) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-95) `boolean` true, if the block has a content fill mode. #### Deprecated[#](#deprecated-8) Use supportsContentFillMode instead. * * * ### supportsContentFillMode()[#](#supportscontentfillmode) Checks if a block supports content fill modes. #### Parameters[#](#parameters-93) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-96) `boolean` true, if the block has a content fill mode. #### Signature[#](#signature-84) ``` supportsContentFillMode(id: number): boolean ``` * * * ### setContentFillMode()[#](#setcontentfillmode) Sets the content fill mode of a block. ``` engine.block.setContentFillMode(image, 'Cover'); ``` #### Parameters[#](#parameters-94) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `mode` | `"Crop"` | `"Cover"` | #### Returns[#](#returns-97) `void` #### Signature[#](#signature-85) ``` setContentFillMode(id: number, mode: "Crop" | "Cover" | "Contain"): void ``` * * * ### getContentFillMode()[#](#getcontentfillmode) Gets the content fill mode of a block. ``` engine.block.getContentFillMode(image); ``` #### Parameters[#](#parameters-95) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-98) `"Crop"` | `"Cover"` | `"Contain"` The current mode: ‘Crop’, ‘Cover’ or ‘Contain’. #### Signature[#](#signature-86) ``` getContentFillMode(id: number): "Crop" | "Cover" | "Contain" ``` * * * ### setGradientColorStops()[#](#setgradientcolorstops) Sets the color stops for a gradient property. ``` engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 1.0, g: 0.8, b: 0.2, a: 1.0 }, stop: 0 }, { color: { r: 0.3, g: 0.4, b: 0.7, a: 1.0 }, stop: 1 }]); ``` #### Parameters[#](#parameters-96) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `string` | The name of the property to set, e.g. ‘fill/gradient/colors’. | | `colors` | [`GradientColorStop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/gradientcolorstop/)\[\] | An array of gradient color stops. | #### Returns[#](#returns-99) `void` #### Signature[#](#signature-87) ``` setGradientColorStops(id: number, property: string, colors: GradientColorStop[]): void ``` * * * ### getGradientColorStops()[#](#getgradientcolorstops) Gets the color stops from a gradient property. ``` engine.block.getGradientColorStops(gradientFill, 'fill/gradient/colors'); ``` #### Parameters[#](#parameters-97) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns[#](#returns-100) [`GradientColorStop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/gradientcolorstop/)\[\] The gradient colors. #### Signature[#](#signature-88) ``` getGradientColorStops(id: number, property: string): GradientColorStop[] ``` * * * ### getSourceSet()[#](#getsourceset) Gets the source set from a block property. ``` const sourceSet = engine.block.getSourceSet(imageFill, 'fill/image/sourceSet'); ``` #### Parameters[#](#parameters-98) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should be queried. | | `property` | `SourceSetPropertyName` | The name of the property to query, e.g. ‘fill/image/sourceSet’. | #### Returns[#](#returns-101) [`Source`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/source/)\[\] The block’s source set. #### Signature[#](#signature-89) ``` getSourceSet(id: number, property: SourceSetPropertyName): Source[] ``` * * * ### setSourceSet()[#](#setsourceset) Sets the source set for a block property. The crop and content fill mode of the associated block will be reset to default values. ``` engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [{ uri: 'https://example.com/sample.jpg', width: 800, height: 600}]); ``` #### Parameters[#](#parameters-99) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `SourceSetPropertyName` | The name of the property to set. | | `sourceSet` | [`Source`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/source/)\[\] | The block’s new source set. | #### Returns[#](#returns-102) `void` #### Signature[#](#signature-90) ``` setSourceSet(id: number, property: SourceSetPropertyName, sourceSet: Source[]): void ``` * * * ### addImageFileURIToSourceSet()[#](#addimagefileuritosourceset) Adds an image file URI to a source set property. If an image with the same width already exists in the source set, it will be replaced. ``` await engine.block.addImageFileURIToSourceSet(imageFill, 'fill/image/sourceSet', 'https://example.com/sample.jpg'); ``` #### Parameters[#](#parameters-100) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `property` | `SourceSetPropertyName` | The name of the property to modify. | | `uri` | `string` | The source to add to the source set. | #### Returns[#](#returns-103) `Promise`<`void`\> A promise that resolves when the operation is complete. #### Signature[#](#signature-91) ``` addImageFileURIToSourceSet(id: number, property: SourceSetPropertyName, uri: string): Promise ``` * * * ### addVideoFileURIToSourceSet()[#](#addvideofileuritosourceset) Adds a video file URI to a source set property. If a video with the same width already exists in the source set, it will be replaced. ``` await engine.block.addVideoFileURIToSourceSet(videoFill, 'fill/video/sourceSet', 'https://example.com/sample.mp4'); ``` #### Parameters[#](#parameters-101) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `property` | `SourceSetPropertyName` | The name of the property to modify. | | `uri` | `string` | The source to add to the source set. | #### Returns[#](#returns-104) `Promise`<`void`\> A promise that resolves when the operation is complete. #### Signature[#](#signature-92) ``` addVideoFileURIToSourceSet(id: number, property: SourceSetPropertyName, uri: string): Promise ``` * * * ### ~hasFillColor()~[#](#hasfillcolor) Checks if a block has fill color properties. #### Parameters[#](#parameters-102) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-105) `boolean` true, if the block has fill color properties. #### Deprecated[#](#deprecated-9) Query the fill’s type using getFill() and getType() instead. * * * ### ~setFillColorRGBA()~[#](#setfillcolorrgba) Sets the fill color of a block using RGBA values. #### Parameters[#](#parameters-103) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The block whose fill color should be set. | | `r` | `number` | `undefined` | The red color component in the range of 0 to 1. | | `g` | `number` | `undefined` | The green color component in the range of 0 to 1. | | `b` | `number` | `undefined` | The blue color component in the range of 0 to 1. | | `a` | `number` | `1` | The alpha color component in the range of 0 to 1. | #### Returns[#](#returns-106) `void` #### Deprecated[#](#deprecated-10) Use setFillSolidColor() instead. * * * ### ~getFillColorRGBA()~[#](#getfillcolorrgba) Gets the fill color of a block as RGBA values. #### Parameters[#](#parameters-104) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill color should be queried. | #### Returns[#](#returns-107) [`RGBA`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rgba/) The fill color. #### Deprecated[#](#deprecated-11) Use getFillSolidColor() instead. * * * ### ~setFillColorEnabled()~[#](#setfillcolorenabled) Enables or disables the fill of a block. #### Parameters[#](#parameters-105) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill should be enabled or disabled. | | `enabled` | `boolean` | If true, the fill will be enabled. | #### Returns[#](#returns-108) `void` #### Deprecated[#](#deprecated-12) Use setFillEnabled() instead. * * * ### ~isFillColorEnabled()~[#](#isfillcolorenabled) Checks if the fill of a block is enabled. #### Parameters[#](#parameters-106) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill state should be queried. | #### Returns[#](#returns-109) `boolean` True, if fill is enabled. #### Deprecated[#](#deprecated-13) Use isFillEnabled() instead. * * * ### ~hasFill()~[#](#hasfill) Checks if a block has fill properties. #### Parameters[#](#parameters-107) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-110) `boolean` true, if the block has fill properties. #### Deprecated[#](#deprecated-14) Use supportsFill instead. * * * ### supportsFill()[#](#supportsfill) Checks if a block supports a fill. #### Parameters[#](#parameters-108) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-111) `boolean` true, if the block supports a fill. #### Signature[#](#signature-93) ``` supportsFill(id: number): boolean ``` * * * ### isFillEnabled()[#](#isfillenabled) Checks if the fill of a block is enabled. ``` engine.block.isFillEnabled(block); ``` #### Parameters[#](#parameters-109) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill state should be queried. | #### Returns[#](#returns-112) `boolean` The fill state. #### Signature[#](#signature-94) ``` isFillEnabled(id: number): boolean ``` * * * ### setFillEnabled()[#](#setfillenabled) Enables or disables the fill of a block. ``` engine.block.setFillEnabled(block, false); ``` #### Parameters[#](#parameters-110) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill should be enabled or disabled. | | `enabled` | `boolean` | If true, the fill will be enabled. | #### Returns[#](#returns-113) `void` #### Signature[#](#signature-95) ``` setFillEnabled(id: number, enabled: boolean): void ``` * * * ### getFill()[#](#getfill) Gets the fill block attached to a given block. #### Parameters[#](#parameters-111) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill block should be returned. | #### Returns[#](#returns-114) `number` The block that currently defines the given block’s fill. #### Signature[#](#signature-96) ``` getFill(id: number): number ``` * * * ### setFill()[#](#setfill) Sets the fill block for a given block. The previous fill block is not destroyed automatically. #### Parameters[#](#parameters-112) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill should be changed. | | `fill` | `number` | The new fill block. | #### Returns[#](#returns-115) `void` #### Signature[#](#signature-97) ``` setFill(id: number, fill: number): void ``` * * * ### setFillSolidColor()[#](#setfillsolidcolor) Sets the solid fill color of a block. #### Parameters[#](#parameters-113) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The block whose fill color should be set. | | `r` | `number` | `undefined` | The red color component in the range of 0 to 1. | | `g` | `number` | `undefined` | The green color component in the range of 0 to 1. | | `b` | `number` | `undefined` | The blue color component in the range of 0 to 1. | | `a` | `number` | `1` | The alpha color component in the range of 0 to 1. Defaults to 1. | #### Returns[#](#returns-116) `void` #### Signature[#](#signature-98) ``` setFillSolidColor(id: number, r: number, g: number, b: number, a?: number): void ``` * * * ### getFillSolidColor()[#](#getfillsolidcolor) Gets the solid fill color of a block as RGBA values. #### Parameters[#](#parameters-114) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose fill color should be queried. | #### Returns[#](#returns-117) [`RGBA`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rgba/) The fill color. #### Signature[#](#signature-99) ``` getFillSolidColor(id: number): RGBA ``` ## Block Shapes[#](#block-shapes) Create and configure shape blocks and geometric forms. ### createShape()[#](#createshape) Creates a new shape block of a given type. ``` const star = engine.block.createShape('star');// Longhand shape types are also supportedconst rect = engine.block.createShape('//ly.img.ubq/shape/rect'); ``` #### Parameters[#](#parameters-115) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`ShapeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/shapetype/) | The type of the shape object that shall be created. | #### Returns[#](#returns-118) `number` The created shape’s handle. #### Signature[#](#signature-100) ``` createShape(type: ShapeType): number ``` * * * ### ~hasShape()~[#](#hasshape) Checks if a block has a shape property. #### Parameters[#](#parameters-116) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-119) `boolean` true, if the block has a shape property, an error otherwise. #### Deprecated[#](#deprecated-15) Use supportsShape instead. * * * ### supportsShape()[#](#supportsshape) Checks if a block supports having a shape. #### Parameters[#](#parameters-117) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-120) `boolean` true, if the block has a shape property, an error otherwise. #### Signature[#](#signature-101) ``` supportsShape(id: number): boolean ``` * * * ### getShape()[#](#getshape) Gets the shape block attached to a given block. #### Parameters[#](#parameters-118) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose shape block should be returned. | #### Returns[#](#returns-121) `number` The block that currently defines the given block’s shape. #### Signature[#](#signature-102) ``` getShape(id: number): number ``` * * * ### setShape()[#](#setshape) Sets the shape block for a given block. Note that the previous shape block is not destroyed automatically. The new shape is disconnected from its previously attached block. #### Parameters[#](#parameters-119) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose shape should be changed. | | `shape` | `number` | The new shape. | #### Returns[#](#returns-122) `void` #### Signature[#](#signature-103) ``` setShape(id: number, shape: number): void ``` ## Block Text[#](#block-text) Create, edit, and style text content. ### replaceText()[#](#replacetext) Replaces a range of text in a text block. ``` engine.block.replaceText(text, 'Hello World');engine.block.replaceText(text, 'Alex', 6, 11); ``` #### Parameters[#](#parameters-120) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block into which to insert the given text. | | `text` | `string` | `undefined` | The text which should replace the selected range in the block. | | `from` | `number` | `-1` | The start index of the UTF-16 range to replace. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range to replace. Defaults to the end of the current selection or text. | #### Returns[#](#returns-123) `void` #### Signature[#](#signature-104) ``` replaceText(id: number, text: string, from?: number, to?: number): void ``` * * * ### removeText()[#](#removetext) Removes a range of text from a text block. ``` engine.block.removeText(text, 0, 6); ``` #### Parameters[#](#parameters-121) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block from which the selected text should be removed. | | `from` | `number` | `-1` | The start index of the UTF-16 range to remove. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range to remove. Defaults to the end of the current selection or text. | #### Returns[#](#returns-124) `void` #### Signature[#](#signature-105) ``` removeText(id: number, from?: number, to?: number): void ``` * * * ### setTextColor()[#](#settextcolor) Sets the color for a range of text. ``` engine.block.setTextColor(text, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 1, 4); ``` #### Parameters[#](#parameters-122) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block whose color should be changed. | | `color` | `Color` | `undefined` | The new color of the selected text range. | | `from` | `number` | `-1` | The start index of the UTF-16 range to change. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range to change. Defaults to the end of the current selection or text. | #### Returns[#](#returns-125) `void` #### Signature[#](#signature-106) ``` setTextColor(id: number, color: Color, from?: number, to?: number): void ``` * * * ### getTextColors()[#](#gettextcolors) Gets the unique colors within a range of text. ``` const colorsInRange = engine.block.getTextColors(text, 2, 5); ``` #### Parameters[#](#parameters-123) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block whose colors should be returned. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-126) `Color`\[\] The ordered unique list of colors. #### Signature[#](#signature-107) ``` getTextColors(id: number, from?: number, to?: number): Color[] ``` * * * ### setTextFontWeight()[#](#settextfontweight) Sets the font weight for a range of text. ``` engine.block.setTextFontWeight(text, 'bold', 0, 5); ``` #### Parameters[#](#parameters-124) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block whose weight should be changed. | | `fontWeight` | [`FontWeight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/fontweight/) | `undefined` | The new weight of the selected text range. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-127) `void` #### Signature[#](#signature-108) ``` setTextFontWeight(id: number, fontWeight: FontWeight, from?: number, to?: number): void ``` * * * ### getTextFontWeights()[#](#gettextfontweights) Gets the unique font weights within a range of text. ``` const fontWeights = engine.block.getTextFontWeights(text, 0, 6); ``` #### Parameters[#](#parameters-125) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block whose font weights should be returned. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-128) [`FontWeight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/fontweight/)\[\] The ordered unique list of font weights. #### Signature[#](#signature-109) ``` getTextFontWeights(id: number, from?: number, to?: number): FontWeight[] ``` * * * ### setTextFontSize()[#](#settextfontsize) Sets the font size for a range of text. ``` // With numeric fontSize (in points)engine.block.setTextFontSize(text, 12, 0, 5); // With font size and options objectengine.block.setTextFontSize(text, 16, { unit: 'Pixel' });engine.block.setTextFontSize(text, 24, { unit: 'Point', from: 0, to: 10 }); ``` ##### Parameters[#](#parameters-126) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font size should be changed. | | `fontSize` | `number` | The new font size value. | | `options?` | `TextFontSizeOptions` | An options object with unit, from, and to properties. | ##### Returns[#](#returns-129) `void` #### Call Signature[#](#call-signature-3) ``` setTextFontSize( id, fontSize, from?, to?): void; ``` Sets the font size for a range of text. ##### Parameters[#](#parameters-127) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font size should be changed. | | `fontSize` | `number` | The new font size in points. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | ##### Returns[#](#returns-130) `void` ##### Deprecated[#](#deprecated-16) Use the new signature with options object instead. ##### Example[#](#example-8) ``` // Before migrationengine.block.setTextFontSize(text, 18, 0, 5);// After migrationengine.block.setTextFontSize(text, 18, { from: 0, to: 5 }); ``` #### Signatures[#](#signatures-3) ``` setTextFontSize(id: number, fontSize: number, options?: TextFontSizeOptions): void ``` ``` setTextFontSize(id: number, fontSize: number, from?: number, to?: number): void ``` * * * ### getTextFontSizes()[#](#gettextfontsizes) Gets the unique font sizes within a range of text. ``` // Get all font sizesconst fontSizes = engine.block.getTextFontSizes(text); // Get font sizes for a rangeconst fontSizes = engine.block.getTextFontSizes(text, 0, 10); // With options objectconst sizesInPx = engine.block.getTextFontSizes(text, { unit: 'Pixel' });const sizesInRange = engine.block.getTextFontSizes(text, { unit: 'Millimeter', from: 5, to: 15 }); ``` ##### Parameters[#](#parameters-128) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font sizes should be returned. | | `options?` | `TextFontSizeOptions` | An options object with unit, from, and to properties. | ##### Returns[#](#returns-131) `number`\[\] The ordered unique list of font sizes. #### Call Signature[#](#call-signature-4) ``` getTextFontSizes( id, from?, to?): number[]; ``` Gets the unique font sizes within a range of text. ##### Parameters[#](#parameters-129) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font sizes should be returned. | | `from?` | `number` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to?` | `number` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | ##### Returns[#](#returns-132) `number`\[\] The ordered unique list of font sizes in points. ##### Deprecated[#](#deprecated-17) Use the new signature with options object instead. ##### Example[#](#example-9) ``` // Before migrationconst fontSizes = engine.block.getTextFontSizes(text, 0, 10);// After migrationconst fontSizes = engine.block.getTextFontSizes(text, { from: 0, to: 10 }); ``` #### Signatures[#](#signatures-4) ``` getTextFontSizes(id: number, options?: TextFontSizeOptions): number[] ``` ``` getTextFontSizes(id: number, from?: number, to?: number): number[] ``` * * * ### setTextFontStyle()[#](#settextfontstyle) Sets the font style for a range of text. ``` engine.block.setTextFontStyle(text, 'italic', 0, 5); ``` #### Parameters[#](#parameters-130) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block whose style should be changed. | | `fontStyle` | [`FontStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/fontstyle/) | `undefined` | The new style of the selected text range. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-133) `void` #### Signature[#](#signature-110) ``` setTextFontStyle(id: number, fontStyle: FontStyle, from?: number, to?: number): void ``` * * * ### getTextFontStyles()[#](#gettextfontstyles) Gets the unique font styles within a range of text. ``` const fontStyles = engine.block.getTextFontStyles(text); ``` #### Parameters[#](#parameters-131) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block whose font styles should be returned. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-134) [`FontStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/fontstyle/)\[\] The ordered unique list of font styles. #### Signature[#](#signature-111) ``` getTextFontStyles(id: number, from?: number, to?: number): FontStyle[] ``` * * * ### getTextCases()[#](#gettextcases) Gets the unique text cases within a range of text. ``` const textCases = engine.block.getTextCases(text); ``` #### Parameters[#](#parameters-132) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block whose text cases should be returned. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-135) [`TextCase`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/textcase/)\[\] The ordered list of text cases. #### Signature[#](#signature-112) ``` getTextCases(id: number, from?: number, to?: number): TextCase[] ``` * * * ### setTextCase()[#](#settextcase) Sets the text case for a range of text. ``` engine.block.setTextCase(text, 'Titlecase'); ``` #### Parameters[#](#parameters-133) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block whose text case should be changed. | | `textCase` | [`TextCase`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/textcase/) | `undefined` | The new text case value. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-136) `void` #### Signature[#](#signature-113) ``` setTextCase(id: number, textCase: TextCase, from?: number, to?: number): void ``` * * * ### canToggleBoldFont()[#](#cantoggleboldfont) Checks if the bold font weight can be toggled for a range of text. Returns true if any part of the range is not bold and the bold font is available. ``` const canToggleBold = engine.block.canToggleBoldFont(text); ``` #### Parameters[#](#parameters-134) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block to check. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-137) `boolean` Whether the font weight can be toggled. #### Signature[#](#signature-114) ``` canToggleBoldFont(id: number, from?: number, to?: number): boolean ``` * * * ### canToggleItalicFont()[#](#cantoggleitalicfont) Checks if the italic font style can be toggled for a range of text. Returns true if any part of the range is not italic and the italic font is available. ``` const canToggleItalic = engine.block.canToggleItalicFont(text); ``` #### Parameters[#](#parameters-135) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block to check. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-138) `boolean` Whether the font style can be toggled. #### Signature[#](#signature-115) ``` canToggleItalicFont(id: number, from?: number, to?: number): boolean ``` * * * ### toggleBoldFont()[#](#toggleboldfont) Toggles the font weight of a text range between bold and normal. If any part of the range is not bold, the entire range becomes bold. If the entire range is already bold, it becomes normal. ``` engine.block.toggleBoldFont(text); ``` #### Parameters[#](#parameters-136) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block to modify. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-139) `void` #### Signature[#](#signature-116) ``` toggleBoldFont(id: number, from?: number, to?: number): void ``` * * * ### toggleItalicFont()[#](#toggleitalicfont) Toggles the font style of a text range between italic and normal. If any part of the range is not italic, the entire range becomes italic. If the entire range is already italic, it becomes normal. ``` engine.block.toggleItalicFont(text); ``` #### Parameters[#](#parameters-137) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block to modify. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-140) `void` #### Signature[#](#signature-117) ``` toggleItalicFont(id: number, from?: number, to?: number): void ``` * * * ### setFont()[#](#setfont) Sets the font and typeface for an entire text block. Existing formatting is reset. ``` engine.block.setFont(text, font.uri, typeface); ``` #### Parameters[#](#parameters-138) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose font should be changed. | | `fontFileUri` | `string` | The URI of the new font file. | | `typeface` | [`Typeface`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/typeface/) | The typeface of the new font. | #### Returns[#](#returns-141) `void` #### Signature[#](#signature-118) ``` setFont(id: number, fontFileUri: string, typeface: Typeface): void ``` * * * ### setTypeface()[#](#settypeface) Sets the typeface for a range of text. The current formatting is retained as much as possible. ``` engine.block.setTypeface(text, typeface, 2, 5); ``` #### Parameters[#](#parameters-139) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block whose font should be changed. | | `typeface` | [`Typeface`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/typeface/) | `undefined` | The new typeface. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-142) `void` #### Signature[#](#signature-119) ``` setTypeface(id: number, typeface: Typeface, from?: number, to?: number): void ``` * * * ### getTypeface()[#](#gettypeface) Gets the base typeface of a text block. This does not return the typefaces of individual text runs. ``` const defaultTypeface = engine.block.getTypeface(text); ``` #### Parameters[#](#parameters-140) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose typeface should be queried. | #### Returns[#](#returns-143) [`Typeface`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/typeface/) the typeface property of the text block. #### Signature[#](#signature-120) ``` getTypeface(id: number): Typeface ``` * * * ### getTypefaces()[#](#gettypefaces) Gets the unique typefaces within a range of text. ``` const currentTypefaces = engine.block.getTypefaces(text); ``` #### Parameters[#](#parameters-141) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The text block whose typefaces should be queried. | | `from` | `number` | `-1` | The start index of the UTF-16 range. Defaults to the start of the current selection or text. | | `to` | `number` | `-1` | The end index of the UTF-16 range. Defaults to the end of the current selection or text. | #### Returns[#](#returns-144) [`Typeface`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/typeface/)\[\] The unique typefaces in the range. #### Signature[#](#signature-121) ``` getTypefaces(id: number, from?: number, to?: number): Typeface[] ``` * * * ### getTextCursorRange()[#](#gettextcursorrange) Gets the current text cursor or selection range. Returns the UTF-16 indices of the selected range of the text block that is currently being edited. ``` const selectedRange = engine.block.getTextCursorRange(); ``` #### Returns[#](#returns-145) [`Range`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/range/) The selected UTF-16 range or `{ from: -1, to: -1 }` if no text block is being edited. #### Signature[#](#signature-122) ``` getTextCursorRange(): Range ``` * * * ### setTextCursorRange()[#](#settextcursorrange) Sets the text cursor range (selection) within the text block that is currently being edited. #### Parameters[#](#parameters-142) | Parameter | Type | Description | | --- | --- | --- | | `range` | [`Range`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/range/) | The UTF-16 range to set as the selection. If `from` equals `to`, the cursor is positioned at that index. If `from` and `to` are set to -1, the whole text is selected. | #### Returns[#](#returns-146) `void` #### Throws[#](#throws) Error if no text block is currently being edited or if the range is invalid. #### Signature[#](#signature-123) ``` setTextCursorRange(range: Range): void ``` * * * ### getTextVisibleLineCount()[#](#gettextvisiblelinecount) Gets the number of visible lines in a text block. ``` const lineCount = engine.block.getTextVisibleLineCount(text); ``` #### Parameters[#](#parameters-143) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose line count should be returned. | #### Returns[#](#returns-147) `number` The number of lines in the text block. #### Signature[#](#signature-124) ``` getTextVisibleLineCount(id: number): number ``` * * * ### getTextVisibleLineGlobalBoundingBoxXYWH()[#](#gettextvisiblelineglobalboundingboxxywh) Gets the global bounding box of a visible line of text. The values are in the scene’s global coordinate space. ``` const lineBoundingBox = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH(text, 0); ``` #### Parameters[#](#parameters-144) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose line bounding box should be returned. | | `lineIndex` | `number` | The index of the line whose bounding box should be returned. | #### Returns[#](#returns-148) [`XYWH`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/xywh/) The bounding box of the line. #### Signature[#](#signature-125) ``` getTextVisibleLineGlobalBoundingBoxXYWH(id: number, lineIndex: number): XYWH ``` * * * ### getTextVisibleLineContent()[#](#gettextvisiblelinecontent) Gets the text content of a visible line. #### Parameters[#](#parameters-145) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The text block whose line content should be returned. | | `lineIndex` | `number` | The index of the line whose content should be returned. | #### Returns[#](#returns-149) `string` The text content of the line. #### Signature[#](#signature-126) ``` getTextVisibleLineContent(id: number, lineIndex: number): string ``` ## Block Video[#](#block-video) Manage time-based media like video and audio, including playback, timing, and controls. ### createCaptionsFromURI()[#](#createcaptionsfromuri) Creates new caption blocks from an SRT or VTT file URI. #### Parameters[#](#parameters-146) | Parameter | Type | Description | | --- | --- | --- | | `uri` | `string` | The URI for the captions file to load. Supported file formats are: SRT and VTT. | #### Returns[#](#returns-150) `Promise`<`number`\[\]> A promise that resolves with a list of the created caption blocks. #### Signature[#](#signature-127) ``` createCaptionsFromURI(uri: string): Promise ``` * * * ### ~hasDuration()~[#](#hasduration) Checks if a block has a duration property. #### Parameters[#](#parameters-147) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-151) `boolean` true if the block has a duration property. #### Deprecated[#](#deprecated-18) Use supportsDuration instead. * * * ### supportsDuration()[#](#supportsduration) Checks if a block supports a duration property. #### Parameters[#](#parameters-148) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-152) `boolean` true if the block supports a duration property. #### Signature[#](#signature-128) ``` supportsDuration(id: number): boolean ``` * * * ### setDuration()[#](#setduration) Sets the playback duration of a block. The duration defines how long the block is active in the scene during playback. #### Parameters[#](#parameters-149) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose duration should be changed. | | `duration` | `number` | The new duration in seconds. | #### Returns[#](#returns-153) `void` #### Signature[#](#signature-129) ``` setDuration(id: number, duration: number): void ``` * * * ### getDuration()[#](#getduration) Gets the playback duration of a block. #### Parameters[#](#parameters-150) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose duration should be returned. | #### Returns[#](#returns-154) `number` The block’s duration in seconds. #### Signature[#](#signature-130) ``` getDuration(id: number): number ``` * * * ### setPageDurationSource()[#](#setpagedurationsource) Sets a block as the page’s duration source. This causes the page’s total duration to be automatically determined by this block. #### Parameters[#](#parameters-151) | Parameter | Type | Description | | --- | --- | --- | | `page` | `number` | The page block for which it should be enabled. | | `id` | `number` | The block that should become the duration source. | #### Returns[#](#returns-155) `void` #### Signature[#](#signature-131) ``` setPageDurationSource(page: number, id: number): void ``` * * * ### isPageDurationSource()[#](#ispagedurationsource) Checks if a block is the duration source for its page. #### Parameters[#](#parameters-152) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose duration source property should be queried. | #### Returns[#](#returns-156) `boolean` true if the block is a duration source for a page. #### Signature[#](#signature-132) ``` isPageDurationSource(id: number): boolean ``` * * * ### supportsPageDurationSource()[#](#supportspagedurationsource) Checks if a block can be set as the page’s duration source. #### Parameters[#](#parameters-153) | Parameter | Type | Description | | --- | --- | --- | | `page` | `number` | The page to check against. | | `id` | `number` | The block to query. | #### Returns[#](#returns-157) `boolean` true, if the block can be marked as the page’s duration source. #### Signature[#](#signature-133) ``` supportsPageDurationSource(page: number, id: number): boolean ``` * * * ### removePageDurationSource()[#](#removepagedurationsource) Removes a block as the page’s duration source. If a scene or page is given, it is deactivated for all blocks within it. #### Parameters[#](#parameters-154) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose duration source property should be removed. | #### Returns[#](#returns-158) `void` #### Signature[#](#signature-134) ``` removePageDurationSource(id: number): void ``` * * * ### ~hasTimeOffset()~[#](#hastimeoffset) Checks if a block has a time offset property. #### Parameters[#](#parameters-155) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-159) `boolean` true, if the block has a time offset property. #### Deprecated[#](#deprecated-19) Use supportsTimeOffset instead. * * * ### supportsTimeOffset()[#](#supportstimeoffset) Checks if a block supports a time offset. #### Parameters[#](#parameters-156) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-160) `boolean` true, if the block supports a time offset. #### Signature[#](#signature-135) ``` supportsTimeOffset(id: number): boolean ``` * * * ### setTimeOffset()[#](#settimeoffset) Sets the time offset of a block relative to its parent. The time offset controls when the block first becomes active in the timeline. #### Parameters[#](#parameters-157) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose time offset should be changed. | | `offset` | `number` | The new time offset in seconds. | #### Returns[#](#returns-161) `void` #### Signature[#](#signature-136) ``` setTimeOffset(id: number, offset: number): void ``` * * * ### getTimeOffset()[#](#gettimeoffset) Gets the time offset of a block relative to its parent. #### Parameters[#](#parameters-158) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose time offset should be queried. | #### Returns[#](#returns-162) `number` The time offset of the block in seconds. #### Signature[#](#signature-137) ``` getTimeOffset(id: number): number ``` * * * ### ~hasTrim()~[#](#hastrim) Checks if a block has trim properties. #### Parameters[#](#parameters-159) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-163) `boolean` true, if the block has trim properties. #### Deprecated[#](#deprecated-20) Use supportsTrim instead. * * * ### supportsTrim()[#](#supportstrim) Checks if a block supports trim properties. #### Parameters[#](#parameters-160) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-164) `boolean` true, if the block supports trim properties. #### Signature[#](#signature-138) ``` supportsTrim(id: number): boolean ``` * * * ### setTrimOffset()[#](#settrimoffset) Sets the trim offset of a block’s media content. This sets the time within the media clip where playback should begin. #### Parameters[#](#parameters-161) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose trim should be updated. | | `offset` | `number` | The new trim offset, measured in timeline seconds (scaled by playback rate). | #### Returns[#](#returns-165) `void` #### Signature[#](#signature-139) ``` setTrimOffset(id: number, offset: number): void ``` * * * ### getTrimOffset()[#](#gettrimoffset) Gets the trim offset of a block’s media content. #### Parameters[#](#parameters-162) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose trim offset should be queried. | #### Returns[#](#returns-166) `number` the trim offset in seconds. #### Signature[#](#signature-140) ``` getTrimOffset(id: number): number ``` * * * ### setTrimLength()[#](#settrimlength) Sets the trim length of a block’s media content. This is the duration of the media clip that should be used for playback. #### Parameters[#](#parameters-163) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The object whose trim length should be updated. | | `length` | `number` | The new trim length in seconds. | #### Returns[#](#returns-167) `void` #### Signature[#](#signature-141) ``` setTrimLength(id: number, length: number): void ``` * * * ### getTrimLength()[#](#gettrimlength) Gets the trim length of a block’s media content. #### Parameters[#](#parameters-164) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The object whose trim length should be queried. | #### Returns[#](#returns-168) `number` The trim length of the object in seconds. #### Signature[#](#signature-142) ``` getTrimLength(id: number): number ``` * * * ### ~getTotalSceneDuration()~[#](#gettotalsceneduration) Gets the total duration of a scene in video mode. #### Parameters[#](#parameters-165) | Parameter | Type | Description | | --- | --- | --- | | `scene` | `number` | The scene whose duration is being queried. | #### Returns[#](#returns-169) `number` the total scene duration. #### Deprecated[#](#deprecated-21) Use `getDuration` and pass a page block. * * * ### setPlaying()[#](#setplaying) Sets whether a block should play its content during active playback. #### Parameters[#](#parameters-166) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block that should be updated. | | `enabled` | `boolean` | Whether the block should be playing its contents. | #### Returns[#](#returns-170) `void` #### Signature[#](#signature-143) ``` setPlaying(id: number, enabled: boolean): void ``` * * * ### isPlaying()[#](#isplaying) Checks if a block is playing its content. #### Parameters[#](#parameters-167) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-171) `boolean` whether the block is playing during playback. #### Signature[#](#signature-144) ``` isPlaying(id: number): boolean ``` * * * ### ~hasPlaybackTime()~[#](#hasplaybacktime) Checks if a block has a playback time property. #### Parameters[#](#parameters-168) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-172) `boolean` whether the block has a playback time property. #### Deprecated[#](#deprecated-22) Use supportsPlaybackTime instead. * * * ### supportsPlaybackTime()[#](#supportsplaybacktime) Checks if a block supports a playback time property. #### Parameters[#](#parameters-169) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-173) `boolean` whether the block supports a playback time property. #### Signature[#](#signature-145) ``` supportsPlaybackTime(id: number): boolean ``` * * * ### setPlaybackTime()[#](#setplaybacktime) Sets the current playback time of a block’s content. #### Parameters[#](#parameters-170) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose playback time should be updated. | | `time` | `number` | The new playback time of the block in seconds. | #### Returns[#](#returns-174) `void` #### Signature[#](#signature-146) ``` setPlaybackTime(id: number, time: number): void ``` * * * ### getPlaybackTime()[#](#getplaybacktime) Gets the current playback time of a block’s content. #### Parameters[#](#parameters-171) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-175) `number` The playback time of the block in seconds. #### Signature[#](#signature-147) ``` getPlaybackTime(id: number): number ``` * * * ### setSoloPlaybackEnabled()[#](#setsoloplaybackenabled) Enables or disables solo playback for a block. When enabled, only this block’s content will play while the rest of the scene remains paused. ``` engine.block.setSoloPlaybackEnabled(videoFill, true); ``` #### Parameters[#](#parameters-172) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or fill to update. | | `enabled` | `boolean` | Whether solo playback should be enabled. | #### Returns[#](#returns-176) `void` #### Signature[#](#signature-148) ``` setSoloPlaybackEnabled(id: number, enabled: boolean): void ``` * * * ### isSoloPlaybackEnabled()[#](#issoloplaybackenabled) Checks if solo playback is enabled for a block. ``` engine.block.isSoloPlaybackEnabled(videoFill); ``` #### Parameters[#](#parameters-173) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or fill to query. | #### Returns[#](#returns-177) `boolean` Whether solo playback is enabled for this block. #### Signature[#](#signature-149) ``` isSoloPlaybackEnabled(id: number): boolean ``` * * * ### ~hasPlaybackControl()~[#](#hasplaybackcontrol) Checks if a block has playback controls. #### Parameters[#](#parameters-174) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-178) `boolean` Whether the block has playback control. #### Deprecated[#](#deprecated-23) Use supportsPlaybackControl instead * * * ### supportsPlaybackControl()[#](#supportsplaybackcontrol) Checks if a block supports playback controls. #### Parameters[#](#parameters-175) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-179) `boolean` Whether the block supports playback control. #### Signature[#](#signature-150) ``` supportsPlaybackControl(id: number): boolean ``` * * * ### setLooping()[#](#setlooping) Sets whether a block’s media content should loop. #### Parameters[#](#parameters-176) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or video fill to update. | | `looping` | `boolean` | Whether the block should loop to the beginning or stop. | #### Returns[#](#returns-180) `void` #### Signature[#](#signature-151) ``` setLooping(id: number, looping: boolean): void ``` * * * ### isLooping()[#](#islooping) Checks if a block’s media content is set to loop. #### Parameters[#](#parameters-177) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-181) `boolean` Whether the block is looping. #### Signature[#](#signature-152) ``` isLooping(id: number): boolean ``` * * * ### setMuted()[#](#setmuted) Sets whether the audio of a block is muted. #### Parameters[#](#parameters-178) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or video fill to update. | | `muted` | `boolean` | Whether the audio should be muted. | #### Returns[#](#returns-182) `void` #### Signature[#](#signature-153) ``` setMuted(id: number, muted: boolean): void ``` * * * ### isForceMuted()[#](#isforcemuted) Checks if a block’s audio is muted due to engine rules. #### Parameters[#](#parameters-179) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-183) `boolean` Whether the block is force muted. #### Signature[#](#signature-154) ``` isForceMuted(id: number): boolean ``` * * * ### isMuted()[#](#ismuted) Checks if a block’s audio is muted. #### Parameters[#](#parameters-180) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-184) `boolean` Whether the block is muted. #### Signature[#](#signature-155) ``` isMuted(id: number): boolean ``` * * * ### setVolume()[#](#setvolume) Sets the audio volume of a block. #### Parameters[#](#parameters-181) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or video fill to update. | | `volume` | `number` | The desired volume, ranging from 0.0 to 1.0. | #### Returns[#](#returns-185) `void` #### Signature[#](#signature-156) ``` setVolume(id: number, volume: number): void ``` * * * ### getVolume()[#](#getvolume) Gets the audio volume of a block. #### Parameters[#](#parameters-182) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-186) `number` The volume, ranging from 0.0 to 1.0. #### Signature[#](#signature-157) ``` getVolume(id: number): number ``` * * * ### setPlaybackSpeed()[#](#setplaybackspeed) Sets the playback speed multiplier of a block that supports playback control. Note: This also adjusts the trim and duration of the block. Video fills running faster than 3.0x are force muted until reduced to 3.0x or below. #### Parameters[#](#parameters-183) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block or video fill to update. | | `speed` | `number` | The desired playback speed multiplier. Valid range is \[0.25, 3.0\] for audio blocks and \[0.25, infinity) for video fills. | #### Returns[#](#returns-187) `void` #### Signature[#](#signature-158) ``` setPlaybackSpeed(id: number, speed: number): void ``` * * * ### getPlaybackSpeed()[#](#getplaybackspeed) Gets the playback speed multiplier of a block that supports playback control. #### Parameters[#](#parameters-184) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-188) `number` The playback speed multiplier. #### Signature[#](#signature-159) ``` getPlaybackSpeed(id: number): number ``` * * * ### forceLoadAVResource()[#](#forceloadavresource) Forces the loading of a block’s audio/video resource. If the resource failed to load previously, it will be reloaded. #### Parameters[#](#parameters-185) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill or audio block whose resource should be loaded. | #### Returns[#](#returns-189) `Promise`<`void`\> A Promise that resolves once the resource has finished loading. #### Signature[#](#signature-160) ``` forceLoadAVResource(id: number): Promise ``` * * * ### unstable\_isAVResourceLoaded()[#](#unstable_isavresourceloaded) Checks if a block’s audio/video resource is loaded. #### Parameters[#](#parameters-186) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill or audio block. | #### Returns[#](#returns-190) `boolean` The loading state of the resource. This API is experimental and may change or be removed in future versions. * * * ### getAVResourceTotalDuration()[#](#getavresourcetotalduration) Gets the total duration of a block’s audio/video resource. #### Parameters[#](#parameters-187) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill or audio block. | #### Returns[#](#returns-191) `number` The video or audio file duration in seconds. #### Signature[#](#signature-161) ``` getAVResourceTotalDuration(id: number): number ``` * * * ### getVideoWidth()[#](#getvideowidth) Gets the width of a block’s video resource. #### Parameters[#](#parameters-188) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill block. | #### Returns[#](#returns-192) `number` The video width in pixels. #### Signature[#](#signature-162) ``` getVideoWidth(id: number): number ``` * * * ### getVideoHeight()[#](#getvideoheight) Gets the height of a block’s video resource. #### Parameters[#](#parameters-189) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill block. | #### Returns[#](#returns-193) `number` The video height in pixels. #### Signature[#](#signature-163) ``` getVideoHeight(id: number): number ``` * * * ### generateVideoThumbnailSequence()[#](#generatevideothumbnailsequence) Generate a sequence of thumbnails for the given video fill or design block. Note: There can only be one thumbnail generation request in progress for a given block. Note: During playback, the thumbnail generation will be paused. #### Parameters[#](#parameters-190) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill or design block. | | `thumbnailHeight` | `number` | The height of each thumbnail. | | `timeBegin` | `number` | The start time in seconds for the thumbnail sequence. | | `timeEnd` | `number` | The end time in seconds for the thumbnail sequence. | | `numberOfFrames` | `number` | The number of frames to generate. | | `onFrame` | (`frameIndex`, `result`) => `void` | A callback that receives the frame index and image data. | #### Returns[#](#returns-194) A function to cancel the thumbnail generation request. ``` (): void; ``` ##### Returns[#](#returns-195) `void` #### Signature[#](#signature-164) ``` generateVideoThumbnailSequence(id: number, thumbnailHeight: number, timeBegin: number, timeEnd: number, numberOfFrames: number, onFrame: (frameIndex: number, result: ImageData | Error) => void): () => void ``` * * * ### generateAudioThumbnailSequence()[#](#generateaudiothumbnailsequence) Generate a thumbnail sequence for the given audio block or video fill. A thumbnail in this case is a chunk of samples in the range of 0 to 1. In case stereo data is requested, the samples are interleaved, starting with the left channel. Note: During playback, the thumbnail generation will be paused. #### Parameters[#](#parameters-191) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The audio block or video fill. | | `samplesPerChunk` | `number` | The number of samples per chunk. | | `timeBegin` | `number` | The start time in seconds for the thumbnail sequence. | | `timeEnd` | `number` | The end time in seconds for the thumbnail sequence. | | `numberOfSamples` | `number` | The total number of samples to generate. | | `numberOfChannels` | `number` | The number of channels in the output (1 for mono, 2 for stereo). | | `onChunk` | (`chunkIndex`, `result`) => `void` | A callback that receives the chunk index and sample data. | #### Returns[#](#returns-196) A function to cancel the thumbnail generation request. ``` (): void; ``` ##### Returns[#](#returns-197) `void` #### Signature[#](#signature-165) ``` generateAudioThumbnailSequence(id: number, samplesPerChunk: number, timeBegin: number, timeEnd: number, numberOfSamples: number, numberOfChannels: number, onChunk: (chunkIndex: number, result: Error | Float32Array) => void): () => void ``` * * * ### ~getVideoFillThumbnail()~[#](#getvideofillthumbnail) Generates a thumbnail for a video fill. #### Parameters[#](#parameters-192) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill. | | `thumbnailHeight` | `number` | The height of a thumbnail. The width will be calculated from the video aspect ratio. | #### Returns[#](#returns-198) `Promise`<`Blob`\> A promise that resolves with a thumbnail encoded as a JPEG blob. #### Deprecated[#](#deprecated-24) Use `generateVideoThumbnailSequence` instead. * * * ### ~getVideoFillThumbnailAtlas()~[#](#getvideofillthumbnailatlas) Generates a thumbnail atlas for a video fill. #### Parameters[#](#parameters-193) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The video fill. | | `numberOfColumns` | `number` | The number of columns in the atlas. | | `numberOfRows` | `number` | The number of rows in the atlas. | | `thumbnailHeight` | `number` | The height of a single thumbnail. | #### Returns[#](#returns-199) `Promise`<`Blob`\> A promise that resolves with a thumbnail atlas encoded as a JPEG blob. #### Deprecated[#](#deprecated-25) Use `generateVideoThumbnailSequence` instead. * * * ### ~getPageThumbnailAtlas()~[#](#getpagethumbnailatlas) Generates a thumbnail atlas for a page. #### Parameters[#](#parameters-194) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The page. | | `numberOfColumns` | `number` | The number of columns in the atlas. | | `numberOfRows` | `number` | The number of rows in the atlas. | | `thumbnailHeight` | `number` | The height of a single thumbnail. | #### Returns[#](#returns-200) `Promise`<`Blob`\> A promise that resolves with a thumbnail atlas encoded as a JPEG blob. #### Deprecated[#](#deprecated-26) Use `generateVideoThumbnailSequence` instead. * * * ### setNativePixelBuffer()[#](#setnativepixelbuffer) Updates a pixel stream fill block with a new pixel buffer. #### Parameters[#](#parameters-195) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The pixel stream fill block. | | `buffer` | `HTMLCanvasElement` | `HTMLVideoElement` | #### Returns[#](#returns-201) `void` #### Signature[#](#signature-166) ``` setNativePixelBuffer(id: number, buffer: HTMLCanvasElement | HTMLVideoElement): void ``` ## Block Animations[#](#block-animations) Create and manage animations and timeline-based effects. ### createAnimation()[#](#createanimation) Creates a new animation block. #### Parameters[#](#parameters-196) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`AnimationType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationtype/) | The type of animation to create. | #### Returns[#](#returns-202) `number` The handle of the new animation instance. #### Signature[#](#signature-167) ``` createAnimation(type: AnimationType): number ``` * * * ### supportsAnimation()[#](#supportsanimation) Checks if a block supports animation. #### Parameters[#](#parameters-197) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-203) `boolean` Whether the block supports animation. #### Signature[#](#signature-168) ``` supportsAnimation(id: number): boolean ``` * * * ### setInAnimation()[#](#setinanimation) Sets the “in” animation of a block. #### Parameters[#](#parameters-198) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “in” animation should be set. | | `animation` | `number` | The animation to set. | #### Returns[#](#returns-204) `void` #### Signature[#](#signature-169) ``` setInAnimation(id: number, animation: number): void ``` * * * ### setLoopAnimation()[#](#setloopanimation) Sets the “loop” animation of a block. #### Parameters[#](#parameters-199) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “loop” animation should be set. | | `animation` | `number` | The animation to set. | #### Returns[#](#returns-205) `void` #### Signature[#](#signature-170) ``` setLoopAnimation(id: number, animation: number): void ``` * * * ### setOutAnimation()[#](#setoutanimation) Sets the “out” animation of a block. #### Parameters[#](#parameters-200) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “out” animation should be set. | | `animation` | `number` | The animation to set. | #### Returns[#](#returns-206) `void` #### Signature[#](#signature-171) ``` setOutAnimation(id: number, animation: number): void ``` * * * ### getInAnimation()[#](#getinanimation) Gets the “in” animation of a block. #### Parameters[#](#parameters-201) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “in” animation should be queried. | #### Returns[#](#returns-207) `number` The “in” animation of the block. #### Signature[#](#signature-172) ``` getInAnimation(id: number): number ``` * * * ### getLoopAnimation()[#](#getloopanimation) Gets the “loop” animation of a block. #### Parameters[#](#parameters-202) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “loop” animation should be queried. | #### Returns[#](#returns-208) `number` The “loop” animation of the block. #### Signature[#](#signature-173) ``` getLoopAnimation(id: number): number ``` * * * ### getOutAnimation()[#](#getoutanimation) Gets the “out” animation of a block. #### Parameters[#](#parameters-203) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose “out” animation should be queried. | #### Returns[#](#returns-209) `number` The “out” animation of the block. #### Signature[#](#signature-174) ``` getOutAnimation(id: number): number ``` ## Block Groups[#](#block-groups) Create and manage groups of blocks. ### isGroupable()[#](#isgroupable) Checks if a set of blocks can be grouped. A scene block or a block that is already part of a group cannot be grouped. ``` const groupable = engine.block.isGroupable([block1, block2]) ``` #### Parameters[#](#parameters-204) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | An array of block ids. | #### Returns[#](#returns-210) `boolean` Whether the blocks can be grouped together. #### Signature[#](#signature-175) ``` isGroupable(ids: number[]): boolean ``` * * * ### group()[#](#group) Groups multiple blocks into a new group block. ``` if (engine.block.isGroupable([block1, block2])) { const group = engine.block.group(block1, block2]);} ``` #### Parameters[#](#parameters-205) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A non-empty array of block ids. | #### Returns[#](#returns-211) `number` The block id of the created group. #### Signature[#](#signature-176) ``` group(ids: number[]): number ``` * * * ### ungroup()[#](#ungroup) Ungroups a group block, releasing its children. ``` engine.block.ungroup(group); ``` #### Parameters[#](#parameters-206) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The group id from a previous call to `group`. | #### Returns[#](#returns-212) `void` #### Signature[#](#signature-177) ``` ungroup(id: number): void ``` * * * ### enterGroup()[#](#entergroup) Changes selection to a block within a selected group. Nothing happens if the target is not a group. ``` engine.block.enterGroup(group); ``` #### Parameters[#](#parameters-207) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The group id from a previous call to `group`. | #### Returns[#](#returns-213) `void` #### Signature[#](#signature-178) ``` enterGroup(id: number): void ``` * * * ### exitGroup()[#](#exitgroup) Changes selection from a block to its parent group. Nothing happens if the block is not part of a group. ``` engine.block.exitGroup(member1); ``` #### Parameters[#](#parameters-208) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | A block id. | #### Returns[#](#returns-214) `void` #### Signature[#](#signature-179) ``` exitGroup(id: number): void ``` ## Block State[#](#block-state) Query the intrinsic state or identity of a block, such as its name, UUID, or lock status. ### getType()[#](#gettype) Gets the longhand type of a given block. #### Parameters[#](#parameters-209) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-215) [`ObjectTypeLonghand`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/objecttypelonghand/) The block’s type. #### Signature[#](#signature-180) ``` getType(id: number): ObjectTypeLonghand ``` * * * ### setName()[#](#setname) Sets the name of a block. #### Parameters[#](#parameters-210) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `name` | `string` | The name to set. | #### Returns[#](#returns-216) `void` #### Signature[#](#signature-181) ``` setName(id: number, name: string): void ``` * * * ### getName()[#](#getname) Gets the name of a block. #### Parameters[#](#parameters-211) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-217) `string` The block’s name. #### Signature[#](#signature-182) ``` getName(id: number): string ``` * * * ### getUUID()[#](#getuuid) Gets the unique universal identifier (UUID) of a block. #### Parameters[#](#parameters-212) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-218) `string` The block’s UUID. #### Signature[#](#signature-183) ``` getUUID(id: number): string ``` * * * ### isValid()[#](#isvalid) Checks if a block handle is valid. A block becomes invalid once it has been destroyed. #### Parameters[#](#parameters-213) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-219) `boolean` True, if the block is valid. #### Signature[#](#signature-184) ``` isValid(id: number): boolean ``` * * * ### referencesAnyVariables()[#](#referencesanyvariables) Checks if a block references any variables. This check does not recurse into children. #### Parameters[#](#parameters-214) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to inspect. | #### Returns[#](#returns-220) `boolean` true if the block references variables and false otherwise. #### Signature[#](#signature-185) ``` referencesAnyVariables(id: number): boolean ``` * * * ### isIncludedInExport()[#](#isincludedinexport) Checks if a block is included in exports. #### Parameters[#](#parameters-215) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-221) `boolean` true, if the block is included on the exported result, false otherwise. #### Signature[#](#signature-186) ``` isIncludedInExport(id: number): boolean ``` * * * ### setIncludedInExport()[#](#setincludedinexport) Sets whether a block should be included in exports. #### Parameters[#](#parameters-216) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose exportable state should be set. | | `enabled` | `boolean` | If true, the block will be included on the exported result. | #### Returns[#](#returns-222) `void` #### Signature[#](#signature-187) ``` setIncludedInExport(id: number, enabled: boolean): void ``` * * * ### isVisibleAtCurrentPlaybackTime()[#](#isvisibleatcurrentplaybacktime) Checks if a block is visible at the current scene playback time. #### Parameters[#](#parameters-217) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-223) `boolean` Whether the block should be visible on the canvas at the current playback time. #### Signature[#](#signature-188) ``` isVisibleAtCurrentPlaybackTime(id: number): boolean ``` * * * ### getState()[#](#getstate) Gets the current state of a block. A block’s state is determined by its own state and that of its shape, fill, and effects. ``` const state = engine.block.getState(block); ``` #### Parameters[#](#parameters-218) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-224) [`BlockState`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blockstate/) The block’s state: ‘Ready’, ‘Pending’, or ‘Error’. #### Signature[#](#signature-189) ``` getState(id: number): BlockState ``` * * * ### setState()[#](#setstate) Sets the state of a block. ``` engine.block.setState(video, {type: 'Pending', progress: 0.5});engine.block.setState(page, {type: 'Ready'});engine.block.setState(image, {type: 'Error', error: 'ImageDecoding'}); ``` #### Parameters[#](#parameters-219) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose state should be set. | | `state` | [`BlockState`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blockstate/) | The new state to set. | #### Returns[#](#returns-225) `void` #### Signature[#](#signature-190) ``` setState(id: number, state: BlockState): void ``` ## Block Crop[#](#block-crop) Crop, scale, translate, and transform block content. ### ~hasCrop()~[#](#hascrop) Checks if a block has crop properties. #### Parameters[#](#parameters-220) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-226) `boolean` true, if the block has crop properties. #### Deprecated[#](#deprecated-27) Use supportsCrop() instead. * * * ### supportsCrop()[#](#supportscrop) Checks if a block supports cropping. ``` engine.block.supportsCrop(image); ``` #### Parameters[#](#parameters-221) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-227) `boolean` true, if the block supports cropping. #### Signature[#](#signature-191) ``` supportsCrop(id: number): boolean ``` * * * ### setCropScaleX()[#](#setcropscalex) Sets the horizontal crop scale of a block. ``` engine.block.setCropScaleX(image, 2.0); ``` #### Parameters[#](#parameters-222) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `scaleX` | `number` | The scale in x direction. | #### Returns[#](#returns-228) `void` #### Signature[#](#signature-192) ``` setCropScaleX(id: number, scaleX: number): void ``` * * * ### setCropScaleY()[#](#setcropscaley) Sets the vertical crop scale of a block. ``` engine.block.setCropScaleY(image, 1.5); ``` #### Parameters[#](#parameters-223) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `scaleY` | `number` | The scale in y direction. | #### Returns[#](#returns-229) `void` #### Signature[#](#signature-193) ``` setCropScaleY(id: number, scaleY: number): void ``` * * * ### setCropRotation()[#](#setcroprotation) Sets the crop rotation of a block in radians. ``` engine.block.setCropRotation(image, Math.PI); ``` #### Parameters[#](#parameters-224) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `rotation` | `number` | The rotation in radians. | #### Returns[#](#returns-230) `void` #### Signature[#](#signature-194) ``` setCropRotation(id: number, rotation: number): void ``` * * * ### setCropScaleRatio()[#](#setcropscaleratio) Sets the uniform crop scale ratio of a block. This scales the content up or down from the center of the crop frame. ``` engine.block.setCropScaleRatio(image, 3.0); ``` #### Parameters[#](#parameters-225) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `scaleRatio` | `number` | The crop scale ratio. | #### Returns[#](#returns-231) `void` #### Signature[#](#signature-195) ``` setCropScaleRatio(id: number, scaleRatio: number): void ``` * * * ### setCropTranslationX()[#](#setcroptranslationx) Sets the horizontal crop translation of a block in percentage of the crop frame width. ``` engine.block.setCropTranslationX(image, -1.0); ``` #### Parameters[#](#parameters-226) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `translationX` | `number` | The translation in x direction. | #### Returns[#](#returns-232) `void` #### Signature[#](#signature-196) ``` setCropTranslationX(id: number, translationX: number): void ``` * * * ### setCropTranslationY()[#](#setcroptranslationy) Sets the vertical crop translation of a block in percentage of the crop frame height. ``` engine.block.setCropTranslationY(image, 1.0); ``` #### Parameters[#](#parameters-227) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be set. | | `translationY` | `number` | The translation in y direction. | #### Returns[#](#returns-233) `void` #### Signature[#](#signature-197) ``` setCropTranslationY(id: number, translationY: number): void ``` * * * ### resetCrop()[#](#resetcrop) Resets the crop of a block to its default state. The block’s content fill mode is set to ‘Cover’. ``` engine.block.resetCrop(image); ``` #### Parameters[#](#parameters-228) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be reset. | #### Returns[#](#returns-234) `void` #### Signature[#](#signature-198) ``` resetCrop(id: number): void ``` * * * ### getCropScaleX()[#](#getcropscalex) Gets the horizontal crop scale of a block. ``` const scaleX = engine.block.getCropScaleX(image); ``` #### Parameters[#](#parameters-229) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose scale should be queried. | #### Returns[#](#returns-235) `number` The scale on the x axis. #### Signature[#](#signature-199) ``` getCropScaleX(id: number): number ``` * * * ### getCropScaleY()[#](#getcropscaley) Gets the vertical crop scale of a block. ``` const scaleY = engine.block.getCropScaleY(image); ``` #### Parameters[#](#parameters-230) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose scale should be queried. | #### Returns[#](#returns-236) `number` The scale on the y axis. #### Signature[#](#signature-200) ``` getCropScaleY(id: number): number ``` * * * ### getCropRotation()[#](#getcroprotation) Gets the crop rotation of a block in radians. ``` const cropRotation = engine.block.getCropRotation(image); ``` #### Parameters[#](#parameters-231) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop rotation should be queried. | #### Returns[#](#returns-237) `number` The crop rotation in radians. #### Signature[#](#signature-201) ``` getCropRotation(id: number): number ``` * * * ### getCropScaleRatio()[#](#getcropscaleratio) Gets the uniform crop scale ratio of a block. ``` const cropScaleRatio = engine.block.getCropScaleRatio(image); ``` #### Parameters[#](#parameters-232) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop scale ratio should be queried. | #### Returns[#](#returns-238) `number` The crop scale ratio. #### Signature[#](#signature-202) ``` getCropScaleRatio(id: number): number ``` * * * ### getCropTranslationX()[#](#getcroptranslationx) Gets the horizontal crop translation of a block in percentage of the crop frame width. ``` const cropTranslationX = engine.block.getCropTranslationX(image); ``` #### Parameters[#](#parameters-233) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose translation should be queried. | #### Returns[#](#returns-239) `number` The translation on the x axis. #### Signature[#](#signature-203) ``` getCropTranslationX(id: number): number ``` * * * ### getCropTranslationY()[#](#getcroptranslationy) Gets the vertical crop translation of a block in percentage of the crop frame height. ``` const cropTranslationY = engine.block.getCropTranslationY(image); ``` #### Parameters[#](#parameters-234) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose translation should be queried. | #### Returns[#](#returns-240) `number` The translation on the y axis. #### Signature[#](#signature-204) ``` getCropTranslationY(id: number): number ``` * * * ### adjustCropToFillFrame()[#](#adjustcroptofillframe) Adjusts the crop position and scale of the given image block to fill its crop frame, while maintaining the position and size of the crop frame. ``` const adjustedScaleRatio = engine.block.adjustCropToFillFrame(image, 1.0); ``` #### Parameters[#](#parameters-235) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be adjusted. | | `minScaleRatio` | `number` | The minimal crop scale ratio to use. | #### Returns[#](#returns-241) `number` The adjusted scale ratio. #### Signature[#](#signature-205) ``` adjustCropToFillFrame(id: number, minScaleRatio: number): number ``` * * * ### flipCropHorizontal()[#](#flipcrophorizontal) Flips the content horizontally within its crop frame. ``` engine.block.flipCropHorizontal(image); ``` #### Parameters[#](#parameters-236) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be updated. | #### Returns[#](#returns-242) `void` #### Signature[#](#signature-206) ``` flipCropHorizontal(id: number): void ``` * * * ### flipCropVertical()[#](#flipcropvertical) Flips the content vertically within its crop frame. ``` engine.block.flipCropVertical(image); ``` #### Parameters[#](#parameters-237) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose crop should be updated. | #### Returns[#](#returns-243) `void` #### Signature[#](#signature-207) ``` flipCropVertical(id: number): void ``` * * * ### isCropAspectRatioLocked()[#](#iscropaspectratiolocked) Checks if the crop aspect ratio is locked for a block. When locked, crop handles will maintain the current aspect ratio during resize. ``` const isLocked = engine.block.isCropAspectRatioLocked(block); ``` #### Parameters[#](#parameters-238) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-244) `boolean` True if aspect ratio is locked, false otherwise. #### Signature[#](#signature-208) ``` isCropAspectRatioLocked(id: number): boolean ``` * * * ### setCropAspectRatioLocked()[#](#setcropaspectratiolocked) Sets whether the crop aspect ratio should be locked for a block. When enabled, crop handles will maintain the current aspect ratio. When disabled, free resizing is allowed. ``` engine.block.setCropAspectRatioLocked(block, true); ``` #### Parameters[#](#parameters-239) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `locked` | `boolean` | Whether aspect ratio should be locked. | #### Returns[#](#returns-245) `void` #### Signature[#](#signature-209) ``` setCropAspectRatioLocked(id: number, locked: boolean): void ``` ## Block Events[#](#block-events) Subscribe to user actions and state changes related to blocks. ### onSelectionChanged()[#](#onselectionchanged) Subscribes to changes in the selection. #### Parameters[#](#parameters-240) | Parameter | Type | Description | | --- | --- | --- | | `callback` | () => `void` | This function is called at the end of the engine update if the selection has changed. | #### Returns[#](#returns-246) A method to unsubscribe. ``` (): void; ``` ##### Returns[#](#returns-247) `void` #### Signature[#](#signature-210) ``` onSelectionChanged(callback: () => void): () => void ``` * * * ### onClicked()[#](#onclicked) Subscribes to block click events. #### Parameters[#](#parameters-241) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`id`) => `void` | This function is called at the end of the engine update if a block has been clicked. | #### Returns[#](#returns-248) A method to unsubscribe. ``` (): void; ``` ##### Returns[#](#returns-249) `void` #### Signature[#](#signature-211) ``` onClicked(callback: (id: number) => void): () => void ``` * * * ### onStateChanged()[#](#onstatechanged) Subscribes to state changes for a set of blocks. The state is determined by the block and its associated shape, fill, and effects. ``` const unsubscribe = engine.block.onStateChanged([], (blocks) => { blocks.forEach(block => console.log(block));}); ``` #### Parameters[#](#parameters-242) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | A list of block IDs to monitor. If empty, all blocks are monitored. | | `callback` | (`ids`) => `void` | The function to call when a state changes. | #### Returns[#](#returns-250) A function to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-251) `void` #### Signature[#](#signature-212) ``` onStateChanged(ids: number[], callback: (ids: number[]) => void): () => void ``` ## Block Utils[#](#block-utils) Check block capabilities like alignability or distributability. ### isAlignable()[#](#isalignable) Checks if a set of blocks can be aligned. #### Parameters[#](#parameters-243) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | An array of block ids. | #### Returns[#](#returns-252) `boolean` Whether the blocks can be aligned. #### Signature[#](#signature-213) ``` isAlignable(ids: number[]): boolean ``` * * * ### isDistributable()[#](#isdistributable) Checks if a set of blocks can be distributed. #### Parameters[#](#parameters-244) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | An array of block ids. | #### Returns[#](#returns-253) `boolean` Whether the blocks can be distributed. #### Signature[#](#signature-214) ``` isDistributable(ids: number[]): boolean ``` ## Block Kind[#](#block-kind) Get and set a block’s ‘kind’ identifier for custom categorization. ### getKind()[#](#getkind) Gets the kind of a given block. ``` const kind = engine.block.getKind(block); ``` #### Parameters[#](#parameters-245) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-254) `string` The block’s kind. #### Signature[#](#signature-215) ``` getKind(id: number): string ``` * * * ### setKind()[#](#setkind) Sets the kind of a given block, a custom string for categorization of blocks. ``` engine.block.setKind(text, 'title'); ``` #### Parameters[#](#parameters-246) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose kind should be changed. | | `kind` | `string` | The new kind. | #### Returns[#](#returns-255) `void` #### Signature[#](#signature-216) ``` setKind(id: number, kind: string): void ``` ## Block Properties[#](#block-properties) Get and set any block property by name using low-level, generic accessors. ### findAllProperties()[#](#findallproperties) Gets all available properties of a block. #### Parameters[#](#parameters-247) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose properties should be queried. | #### Returns[#](#returns-256) `string`\[\] A list of the property names. #### Signature[#](#signature-217) ``` findAllProperties(id: number): string[] ``` * * * ### isPropertyReadable()[#](#ispropertyreadable) Checks if a property is readable. #### Parameters[#](#parameters-248) | Parameter | Type | Description | | --- | --- | --- | | `property` | `string` | The name of the property to check. | #### Returns[#](#returns-257) `boolean` Whether the property is readable. Returns false for unknown properties. #### Signature[#](#signature-218) ``` isPropertyReadable(property: string): boolean ``` * * * ### isPropertyWritable()[#](#ispropertywritable) Checks if a property is writable. #### Parameters[#](#parameters-249) | Parameter | Type | Description | | --- | --- | --- | | `property` | `string` | The name of the property to check. | #### Returns[#](#returns-258) `boolean` Whether the property is writable. Returns false for unknown properties. #### Signature[#](#signature-219) ``` isPropertyWritable(property: string): boolean ``` * * * ### getPropertyType()[#](#getpropertytype) Gets the type of a property by its name. #### Parameters[#](#parameters-250) | Parameter | Type | Description | | --- | --- | --- | | `property` | `string` | The name of the property whose type should be queried. | #### Returns[#](#returns-259) [`PropertyType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/propertytype/) The property type. #### Signature[#](#signature-220) ``` getPropertyType(property: string): PropertyType ``` * * * ### getEnumValues()[#](#getenumvalues) Gets all possible values of an enum property. #### Type Parameters[#](#type-parameters) | Type Parameter | Default type | | --- | --- | | `T` | `string` | #### Parameters[#](#parameters-251) | Parameter | Type | Description | | --- | --- | --- | | `enumProperty` | `string` | The name of the property whose enum values should be queried. | #### Returns[#](#returns-260) `T`\[\] A list of the enum value names as a string array. #### Signature[#](#signature-221) ``` getEnumValues(enumProperty: string): T[] ``` * * * ### setBool()[#](#setbool) Sets a boolean property on a block. ``` engine.block.setBool(scene, 'scene/aspectRatioLock', false); ``` #### Parameters[#](#parameters-252) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `BoolPropertyName` | The name of the property to set. | | `value` | `boolean` | The value to set. | #### Returns[#](#returns-261) `void` #### Signature[#](#signature-222) ``` setBool(id: number, property: BoolPropertyName, value: boolean): void ``` * * * ### getBool()[#](#getbool) Gets a boolean property from a block. ``` engine.block.getBool(scene, 'scene/aspectRatioLock'); ``` #### Parameters[#](#parameters-253) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `BoolPropertyName` | The name of the property to query. | #### Returns[#](#returns-262) `boolean` The value of the property. #### Signature[#](#signature-223) ``` getBool(id: number, property: BoolPropertyName): boolean ``` * * * ### setInt()[#](#setint) Sets an integer property on a block. ``` engine.block.setInt(starShape, 'shape/star/points', points + 2); ``` #### Parameters[#](#parameters-254) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `IntPropertyName` | The name of the property to set. | | `value` | `number` | The value to set. | #### Returns[#](#returns-263) `void` #### Signature[#](#signature-224) ``` setInt(id: number, property: IntPropertyName, value: number): void ``` * * * ### getInt()[#](#getint) Gets an integer property from a block. ``` engine.block.setInt(starShape, 'shape/star/points', points + 2); ``` #### Parameters[#](#parameters-255) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `IntPropertyName` | The name of the property to query. | #### Returns[#](#returns-264) `number` The value of the property. #### Signature[#](#signature-225) ``` getInt(id: number, property: IntPropertyName): number ``` * * * ### setFloat()[#](#setfloat) Sets a float property on a block. ``` engine.block.setFloat(text, "text/letterSpacing", 0.2);engine.block.setFloat(text, "text/lineHeight", 1.2); ``` #### Parameters[#](#parameters-256) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `FloatPropertyName` | The name of the property to set. | | `value` | `number` | The value to set. | #### Returns[#](#returns-265) `void` #### Signature[#](#signature-226) ``` setFloat(id: number, property: FloatPropertyName, value: number): void ``` * * * ### getFloat()[#](#getfloat) Gets a float property from a block. ``` engine.block.getFloat(starShape, 'shape/star/innerDiameter'); ``` #### Parameters[#](#parameters-257) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `FloatPropertyName` | The name of the property to query. | #### Returns[#](#returns-266) `number` The value of the property. #### Signature[#](#signature-227) ``` getFloat(id: number, property: FloatPropertyName): number ``` * * * ### setDouble()[#](#setdouble) Sets a double-precision float property on a block. ``` engine.block.setDouble(audio, 'playback/duration', 1.0); ``` #### Parameters[#](#parameters-258) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `DoublePropertyName` | The name of the property to set. | | `value` | `number` | The value to set. | #### Returns[#](#returns-267) `void` #### Signature[#](#signature-228) ``` setDouble(id: number, property: DoublePropertyName, value: number): void ``` * * * ### getDouble()[#](#getdouble) Gets a double-precision float property from a block. ``` engine.block.getDouble(audio, 'playback/duration'); ``` #### Parameters[#](#parameters-259) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `DoublePropertyName` | The name of the property to query. | #### Returns[#](#returns-268) `number` The value of the property. #### Signature[#](#signature-229) ``` getDouble(id: number, property: DoublePropertyName): number ``` * * * ### setString()[#](#setstring) Sets a string property on a block. ``` engine.block.setString(text, 'text/text', 'Hello World');engine.block.setString(imageFill, 'fill/image/imageFileURI', 'https://example.com/sample.jpg'); ``` #### Parameters[#](#parameters-260) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `StringPropertyName` | The name of the property to set. | | `value` | `string` | The value to set. | #### Returns[#](#returns-269) `void` #### Signature[#](#signature-230) ``` setString(id: number, property: StringPropertyName, value: string): void ``` * * * ### getString()[#](#getstring) Gets a string property from a block. ``` engine.block.getString(text, 'text/text');engine.block.getString(imageFill, 'fill/image/imageFileURI'); ``` #### Parameters[#](#parameters-261) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `StringPropertyName` | The name of the property to query. | #### Returns[#](#returns-270) `string` The value of the property. #### Signature[#](#signature-231) ``` getString(id: number, property: StringPropertyName): string ``` * * * ### setColor()[#](#setcolor) Sets a color property on a block. ``` // Set the block's fill color to white.engine.block.setColor(colorFill, 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); ``` #### Parameters[#](#parameters-262) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `ColorPropertyName` | The name of the property to set. | | `value` | `Color` | The value to set. | #### Returns[#](#returns-271) `void` #### Signature[#](#signature-232) ``` setColor(id: number, property: ColorPropertyName, value: Color): void ``` * * * ### getColor()[#](#getcolor) Gets a color property from a block. ``` engine.block.getColor(colorFill, 'fill/color/value'); ``` #### Parameters[#](#parameters-263) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `ColorPropertyName` | The name of the property to query. | #### Returns[#](#returns-272) `Color` The value of the property. #### Signature[#](#signature-233) ``` getColor(id: number, property: ColorPropertyName): Color ``` * * * ### ~setColorRGBA()~[#](#setcolorrgba) Sets a color property on a block using RGBA values. #### Parameters[#](#parameters-264) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The block whose property should be set. | | `property` | `string` | `undefined` | The name of the property to set. | | `r` | `number` | `undefined` | The red color component in the range of 0 to 1. | | `g` | `number` | `undefined` | The green color component in the range of 0 to 1. | | `b` | `number` | `undefined` | The blue color component in the range of 0 to 1. | | `a` | `number` | `1` | The alpha color component in the range of 0 to 1. Defaults to 1. | #### Returns[#](#returns-273) `void` #### Deprecated[#](#deprecated-28) Use setColor() instead. * * * ### ~getColorRGBA()~[#](#getcolorrgba) Gets a color property from a block as RGBA values. #### Parameters[#](#parameters-265) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns[#](#returns-274) [`RGBA`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rgba/) A tuple of channels red, green, blue and alpha in the range of 0 to 1. #### Deprecated[#](#deprecated-29) Use getColor() instead. * * * ### ~setColorSpot()~[#](#setcolorspot) Sets a spot color property on a block. #### Parameters[#](#parameters-266) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The block whose property should be set. | | `property` | `string` | `undefined` | The name of the property to set. | | `name` | `string` | `undefined` | The name of the spot color. | | `tint` | `number` | `1` | The tint factor in the range of 0 to 1. Defaults to 1. | #### Returns[#](#returns-275) `void` #### Deprecated[#](#deprecated-30) Use setColor() instead. * * * ### ~getColorSpotName()~[#](#getcolorspotname) Gets the spot color name from a color property. #### Parameters[#](#parameters-267) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns[#](#returns-276) `string` The name of the spot color. #### Deprecated[#](#deprecated-31) Use getColor() instead. * * * ### ~getColorSpotTint()~[#](#getcolorspottint) Gets the spot color tint from a color property. #### Parameters[#](#parameters-268) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns[#](#returns-277) `number` The tint factor of the spot color. #### Deprecated[#](#deprecated-32) Use getColor() instead. * * * ### setEnum()[#](#setenum) Sets an enum property on a block. ``` engine.block.setEnum(text, 'text/horizontalAlignment', 'Center');engine.block.setEnum(text, 'text/verticalAlignment', 'Center'); ``` ##### Type Parameters[#](#type-parameters-1) | Type Parameter | | --- | | `T` _extends_ keyof `BlockEnumType` | ##### Parameters[#](#parameters-269) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `T` | The name of the property to set. | | `value` | `BlockEnumType`\[`T`\] | The enum value as a string. | ##### Returns[#](#returns-278) `void` #### Call Signature[#](#call-signature-5) ``` setEnum( id, property, value): void; ``` Sets an enum property on a block. ``` engine.block.setEnum(text, 'text/horizontalAlignment', 'Center');engine.block.setEnum(text, 'text/verticalAlignment', 'Center'); ``` ##### Parameters[#](#parameters-270) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be set. | | `property` | `string` | The name of the property to set. | | `value` | `string` | The enum value as a string. | ##### Returns[#](#returns-279) `void` #### Signatures[#](#signatures-5) ``` setEnum(id: number, property: T, value: BlockEnumType[T]): void ``` ``` setEnum(id: number, property: string, value: string): void ``` * * * ### getEnum()[#](#getenum) Gets an enum property from a block. ``` engine.block.getEnum(text, 'text/horizontalAlignment');engine.block.getEnum(text, 'text/verticalAlignment'); ``` ##### Type Parameters[#](#type-parameters-2) | Type Parameter | | --- | | `T` _extends_ keyof `BlockEnumType` | ##### Parameters[#](#parameters-271) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `T` | The name of the property to query. | ##### Returns[#](#returns-280) `BlockEnumType`\[`T`\] The value as a string. #### Call Signature[#](#call-signature-6) ``` getEnum(id, property): string; ``` Gets an enum property from a block. ``` engine.block.getEnum(text, 'text/horizontalAlignment');engine.block.getEnum(text, 'text/verticalAlignment'); ``` ##### Parameters[#](#parameters-272) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | ##### Returns[#](#returns-281) `string` The value as a string. #### Signatures[#](#signatures-6) ``` getEnum(id: number, property: T): BlockEnumType[T] ``` ``` getEnum(id: number, property: string): string ``` ## Block Strokes[#](#block-strokes) Control stroke appearance, including color, width, style, and position. ### ~hasStroke()~[#](#hasstroke) Checks if a block has a stroke property. #### Parameters[#](#parameters-273) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-282) `boolean` True if the block has a stroke property. #### Deprecated[#](#deprecated-33) Use supportsStroke() instead. * * * ### supportsStroke()[#](#supportsstroke) Checks if a block supports a stroke. #### Parameters[#](#parameters-274) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-283) `boolean` True if the block supports a stroke. #### Signature[#](#signature-234) ``` supportsStroke(id: number): boolean ``` * * * ### setStrokeEnabled()[#](#setstrokeenabled) Enables or disables the stroke of a block. ``` engine.block.setStrokeEnabled(block, true); ``` #### Parameters[#](#parameters-275) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke should be enabled or disabled. | | `enabled` | `boolean` | If true, the stroke will be enabled. | #### Returns[#](#returns-284) `void` #### Signature[#](#signature-235) ``` setStrokeEnabled(id: number, enabled: boolean): void ``` * * * ### isStrokeEnabled()[#](#isstrokeenabled) Checks if the stroke of a block is enabled. ``` const strokeIsEnabled = engine.block.isStrokeEnabled(block); ``` #### Parameters[#](#parameters-276) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke state should be queried. | #### Returns[#](#returns-285) `boolean` True if the block’s stroke is enabled. #### Signature[#](#signature-236) ``` isStrokeEnabled(id: number): boolean ``` * * * ### ~setStrokeColorRGBA()~[#](#setstrokecolorrgba) Sets the stroke color of a block using RGBA values. #### Parameters[#](#parameters-277) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The block whose stroke color should be set. | | `r` | `number` | `undefined` | The red color component in the range of 0 to 1. | | `g` | `number` | `undefined` | The green color component in the range of 0 to 1. | | `b` | `number` | `undefined` | The blue color component in the range of 0 to 1. | | `a` | `number` | `1` | The alpha color component in the range of 0 to 1. | #### Returns[#](#returns-286) `void` #### Deprecated[#](#deprecated-34) Use setStrokeColor() instead. * * * ### setStrokeColor()[#](#setstrokecolor) Sets the stroke color of a block. #### Parameters[#](#parameters-278) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke color should be set. | | `color` | `Color` | The color to set. | #### Returns[#](#returns-287) `void` #### Signature[#](#signature-237) ``` setStrokeColor(id: number, color: Color): void ``` * * * ### ~getStrokeColorRGBA()~[#](#getstrokecolorrgba) Gets the stroke color of a block as RGBA values. #### Parameters[#](#parameters-279) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke color should be queried. | #### Returns[#](#returns-288) [`RGBA`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rgba/) The stroke color. #### Deprecated[#](#deprecated-35) Use getStrokeColor() instead. * * * ### getStrokeColor()[#](#getstrokecolor) Gets the stroke color of a block. #### Parameters[#](#parameters-280) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke color should be queried. | #### Returns[#](#returns-289) `Color` The stroke color. #### Signature[#](#signature-238) ``` getStrokeColor(id: number): Color ``` * * * ### setStrokeWidth()[#](#setstrokewidth) Sets the stroke width of a block. #### Parameters[#](#parameters-281) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke width should be set. | | `width` | `number` | The stroke width to be set. | #### Returns[#](#returns-290) `void` #### Signature[#](#signature-239) ``` setStrokeWidth(id: number, width: number): void ``` * * * ### getStrokeWidth()[#](#getstrokewidth) Gets the stroke width of a block. #### Parameters[#](#parameters-282) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke width should be queried. | #### Returns[#](#returns-291) `number` The stroke’s width. #### Signature[#](#signature-240) ``` getStrokeWidth(id: number): number ``` * * * ### setStrokeStyle()[#](#setstrokestyle) Sets the stroke style of a block. #### Parameters[#](#parameters-283) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke style should be set. | | `style` | | `"Dashed"` | #### Returns[#](#returns-292) `void` #### Signature[#](#signature-241) ``` setStrokeStyle(id: number, style: "Dashed" | "DashedRound" | "Dotted" | "LongDashed" | "LongDashedRound" | "Solid"): void ``` * * * ### getStrokeStyle()[#](#getstrokestyle) Gets the stroke style of a block. #### Parameters[#](#parameters-284) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke style should be queried. | #### Returns[#](#returns-293) | `"Dashed"` | `"DashedRound"` | `"Dotted"` | `"LongDashed"` | `"LongDashedRound"` | `"Solid"` The stroke’s style. #### Signature[#](#signature-242) ``` getStrokeStyle(id: number): "Dashed" | "DashedRound" | "Dotted" | "LongDashed" | "LongDashedRound" | "Solid" ``` * * * ### setStrokePosition()[#](#setstrokeposition) Sets the stroke position of a block. #### Parameters[#](#parameters-285) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke position should be set. | | `position` | `"Center"` | `"Inner"` | #### Returns[#](#returns-294) `void` #### Signature[#](#signature-243) ``` setStrokePosition(id: number, position: "Center" | "Inner" | "Outer"): void ``` * * * ### getStrokePosition()[#](#getstrokeposition) Gets the stroke position of a block. #### Parameters[#](#parameters-286) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke position should be queried. | #### Returns[#](#returns-295) `"Center"` | `"Inner"` | `"Outer"` The stroke position. #### Signature[#](#signature-244) ``` getStrokePosition(id: number): "Center" | "Inner" | "Outer" ``` * * * ### setStrokeCornerGeometry()[#](#setstrokecornergeometry) Sets the stroke corner geometry of a block. #### Parameters[#](#parameters-287) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke corner geometry should be set. | | `cornerGeometry` | `"Bevel"` | `"Miter"` | #### Returns[#](#returns-296) `void` #### Signature[#](#signature-245) ``` setStrokeCornerGeometry(id: number, cornerGeometry: "Bevel" | "Miter" | "Round"): void ``` * * * ### getStrokeCornerGeometry()[#](#getstrokecornergeometry) Gets the stroke corner geometry of a block. #### Parameters[#](#parameters-288) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose stroke corner geometry should be queried. | #### Returns[#](#returns-297) `"Bevel"` | `"Miter"` | `"Round"` The stroke corner geometry. #### Signature[#](#signature-246) ``` getStrokeCornerGeometry(id: number): "Bevel" | "Miter" | "Round" ``` ## Block Drop Shadow[#](#block-drop-shadow) Configure drop shadow effects, including blur, color, and offset. ### ~hasDropShadow()~[#](#hasdropshadow) Checks if a block has a drop shadow property. #### Parameters[#](#parameters-289) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-298) `boolean` True if the block has a drop shadow property. #### Deprecated[#](#deprecated-36) Use supportsDropShadow() instead. * * * ### supportsDropShadow()[#](#supportsdropshadow) Checks if a block supports a drop shadow. #### Parameters[#](#parameters-290) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-299) `boolean` True if the block supports a drop shadow. #### Signature[#](#signature-247) ``` supportsDropShadow(id: number): boolean ``` * * * ### setDropShadowEnabled()[#](#setdropshadowenabled) Enables or disables the drop shadow of a block. ``` engine.block.setDropShadowEnabled(block, true); ``` #### Parameters[#](#parameters-291) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow should be enabled or disabled. | | `enabled` | `boolean` | If true, the drop shadow will be enabled. | #### Returns[#](#returns-300) `void` #### Signature[#](#signature-248) ``` setDropShadowEnabled(id: number, enabled: boolean): void ``` * * * ### isDropShadowEnabled()[#](#isdropshadowenabled) Checks if the drop shadow of a block is enabled. ``` const dropShadowIsEnabled = engine.block.isDropShadowEnabled(block); ``` #### Parameters[#](#parameters-292) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow state should be queried. | #### Returns[#](#returns-301) `boolean` True if the block’s drop shadow is enabled. #### Signature[#](#signature-249) ``` isDropShadowEnabled(id: number): boolean ``` * * * ### ~setDropShadowColorRGBA()~[#](#setdropshadowcolorrgba) Sets the drop shadow color of a block using RGBA values. #### Parameters[#](#parameters-293) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `id` | `number` | `undefined` | The block whose drop shadow color should be set. | | `r` | `number` | `undefined` | The red color component in the range of 0 to 1. | | `g` | `number` | `undefined` | The green color component in the range of 0 to 1. | | `b` | `number` | `undefined` | The blue color component in the range of 0 to 1. | | `a` | `number` | `1` | The alpha color component in the range of 0 to 1. | #### Returns[#](#returns-302) `void` #### Deprecated[#](#deprecated-37) Use setDropShadowColor() instead. * * * ### setDropShadowColor()[#](#setdropshadowcolor) Sets the drop shadow color of a block. #### Parameters[#](#parameters-294) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow color should be set. | | `color` | `Color` | The color to set. | #### Returns[#](#returns-303) `void` #### Signature[#](#signature-250) ``` setDropShadowColor(id: number, color: Color): void ``` * * * ### ~getDropShadowColorRGBA()~[#](#getdropshadowcolorrgba) Gets the drop shadow color of a block as RGBA values. #### Parameters[#](#parameters-295) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow color should be queried. | #### Returns[#](#returns-304) [`RGBA`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rgba/) The drop shadow color. #### Deprecated[#](#deprecated-38) Use getDropShadowColor instead. * * * ### getDropShadowColor()[#](#getdropshadowcolor) Gets the drop shadow color of a block. #### Parameters[#](#parameters-296) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow color should be queried. | #### Returns[#](#returns-305) `Color` The drop shadow color. #### Signature[#](#signature-251) ``` getDropShadowColor(id: number): Color ``` * * * ### setDropShadowOffsetX()[#](#setdropshadowoffsetx) Sets the drop shadow’s horizontal offset. #### Parameters[#](#parameters-297) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s X offset should be set. | | `offsetX` | `number` | The X offset to be set. | #### Returns[#](#returns-306) `void` #### Signature[#](#signature-252) ``` setDropShadowOffsetX(id: number, offsetX: number): void ``` * * * ### getDropShadowOffsetX()[#](#getdropshadowoffsetx) Gets the drop shadow’s horizontal offset. #### Parameters[#](#parameters-298) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s X offset should be queried. | #### Returns[#](#returns-307) `number` The offset. #### Signature[#](#signature-253) ``` getDropShadowOffsetX(id: number): number ``` * * * ### setDropShadowOffsetY()[#](#setdropshadowoffsety) Sets the drop shadow’s vertical offset. #### Parameters[#](#parameters-299) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s Y offset should be set. | | `offsetY` | `number` | The Y offset to be set. | #### Returns[#](#returns-308) `void` #### Signature[#](#signature-254) ``` setDropShadowOffsetY(id: number, offsetY: number): void ``` * * * ### getDropShadowOffsetY()[#](#getdropshadowoffsety) Gets the drop shadow’s vertical offset. #### Parameters[#](#parameters-300) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s Y offset should be queried. | #### Returns[#](#returns-309) `number` The offset. #### Signature[#](#signature-255) ``` getDropShadowOffsetY(id: number): number ``` * * * ### setDropShadowBlurRadiusX()[#](#setdropshadowblurradiusx) Sets the drop shadow’s horizontal blur radius. #### Parameters[#](#parameters-301) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s blur radius should be set. | | `blurRadiusX` | `number` | The blur radius to be set. | #### Returns[#](#returns-310) `void` #### Signature[#](#signature-256) ``` setDropShadowBlurRadiusX(id: number, blurRadiusX: number): void ``` * * * ### getDropShadowBlurRadiusX()[#](#getdropshadowblurradiusx) Gets the drop shadow’s horizontal blur radius. #### Parameters[#](#parameters-302) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s blur radius should be queried. | #### Returns[#](#returns-311) `number` The blur radius. #### Signature[#](#signature-257) ``` getDropShadowBlurRadiusX(id: number): number ``` * * * ### setDropShadowBlurRadiusY()[#](#setdropshadowblurradiusy) Sets the drop shadow’s vertical blur radius. #### Parameters[#](#parameters-303) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s blur radius should be set. | | `blurRadiusY` | `number` | The blur radius to be set. | #### Returns[#](#returns-312) `void` #### Signature[#](#signature-258) ``` setDropShadowBlurRadiusY(id: number, blurRadiusY: number): void ``` * * * ### getDropShadowBlurRadiusY()[#](#getdropshadowblurradiusy) Gets the drop shadow’s vertical blur radius. #### Parameters[#](#parameters-304) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s blur radius should be queried. | #### Returns[#](#returns-313) `number` The blur radius. #### Signature[#](#signature-259) ``` getDropShadowBlurRadiusY(id: number): number ``` * * * ### setDropShadowClip()[#](#setdropshadowclip) Sets the drop shadow’s clipping behavior. This only applies to shapes. #### Parameters[#](#parameters-305) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s clip should be set. | | `clip` | `boolean` | The drop shadow’s clip to be set. | #### Returns[#](#returns-314) `void` #### Signature[#](#signature-260) ``` setDropShadowClip(id: number, clip: boolean): void ``` * * * ### getDropShadowClip()[#](#getdropshadowclip) Gets the drop shadow’s clipping behavior. #### Parameters[#](#parameters-306) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose drop shadow’s clipping should be queried. | #### Returns[#](#returns-315) `boolean` The drop shadow’s clipping state. #### Signature[#](#signature-261) ``` getDropShadowClip(id: number): boolean ``` ## Block Effects[#](#block-effects) Create, manage, and apply various visual effects to blocks. ### createEffect()[#](#createeffect) Creates a new effect block. #### Parameters[#](#parameters-307) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`EffectType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/effecttype/) | The type of the effect. | #### Returns[#](#returns-316) `number` The created effect’s handle. #### Signature[#](#signature-262) ``` createEffect(type: EffectType): number ``` * * * ### ~hasEffects()~[#](#haseffects) Checks if a block supports effects. #### Parameters[#](#parameters-308) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-317) `boolean` True, if the block can render effects, false otherwise. #### Deprecated[#](#deprecated-39) Use supportsEffects instead. * * * ### supportsEffects()[#](#supportseffects) Checks if a block supports effects. #### Parameters[#](#parameters-309) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-318) `boolean` True, if the block can render effects, false otherwise. #### Signature[#](#signature-263) ``` supportsEffects(id: number): boolean ``` * * * ### getEffects()[#](#geteffects) Gets all effects attached to a block. #### Parameters[#](#parameters-310) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-319) `number`\[\] A list of effects or an error, if the block doesn’t support effects. #### Signature[#](#signature-264) ``` getEffects(id: number): number[] ``` * * * ### insertEffect()[#](#inserteffect) Inserts an effect into a block’s effect list at a given index. #### Parameters[#](#parameters-311) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `effectId` | `number` | The effect to insert. | | `index` | `number` | The index at which the effect shall be inserted. | #### Returns[#](#returns-320) `void` #### Signature[#](#signature-265) ``` insertEffect(id: number, effectId: number, index: number): void ``` * * * ### appendEffect()[#](#appendeffect) Appends an effect to a block’s effect list. #### Parameters[#](#parameters-312) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to append the effect to. | | `effectId` | `number` | The effect to append. | #### Returns[#](#returns-321) `void` #### Signature[#](#signature-266) ``` appendEffect(id: number, effectId: number): void ``` * * * ### removeEffect()[#](#removeeffect) Removes an effect from a block’s effect list at a given index. #### Parameters[#](#parameters-313) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to remove the effect from. | | `index` | `number` | The index where the effect is stored. | #### Returns[#](#returns-322) `void` #### Signature[#](#signature-267) ``` removeEffect(id: number, index: number): void ``` * * * ### ~hasEffectEnabled()~[#](#haseffectenabled) Checks if an effect block can be enabled or disabled. #### Parameters[#](#parameters-314) | Parameter | Type | Description | | --- | --- | --- | | `effectId` | `number` | The ‘effect’ block to query. | #### Returns[#](#returns-323) `boolean` True, if the block supports enabling and disabling, false otherwise. #### Deprecated[#](#deprecated-40) Calls to this function can be removed. All effects can be enabled and disabled. * * * ### setEffectEnabled()[#](#seteffectenabled) Sets the enabled state of an effect block. ``` engine.block.setEffectEnabled(effects[0], false); ``` #### Parameters[#](#parameters-315) | Parameter | Type | Description | | --- | --- | --- | | `effectId` | `number` | The ‘effect’ block to update. | | `enabled` | `boolean` | The new state. | #### Returns[#](#returns-324) `void` #### Signature[#](#signature-268) ``` setEffectEnabled(effectId: number, enabled: boolean): void ``` * * * ### isEffectEnabled()[#](#iseffectenabled) Queries if an effect block is enabled. ``` engine.block.isEffectEnabled(effects[0]); ``` #### Parameters[#](#parameters-316) | Parameter | Type | Description | | --- | --- | --- | | `effectId` | `number` | The ‘effect’ block to query. | #### Returns[#](#returns-325) `boolean` True, if the effect is enabled. False otherwise. #### Signature[#](#signature-269) ``` isEffectEnabled(effectId: number): boolean ``` ## Block Blur[#](#block-blur) Apply and configure blur effects on blocks. ### createBlur()[#](#createblur) Creates a new blur block. #### Parameters[#](#parameters-317) | Parameter | Type | Description | | --- | --- | --- | | `type` | [`BlurType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blurtype/) | The type of blur. | #### Returns[#](#returns-326) `number` The handle of the newly created blur. #### Signature[#](#signature-270) ``` createBlur(type: BlurType): number ``` * * * ### ~hasBlur()~[#](#hasblur) Checks if a block supports blur. #### Parameters[#](#parameters-318) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-327) `boolean` True, if the block supports blur. #### Deprecated[#](#deprecated-41) Use supportsBlur instead. * * * ### supportsBlur()[#](#supportsblur) Checks if a block supports blur. #### Parameters[#](#parameters-319) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-328) `boolean` True, if the block supports blur. #### Signature[#](#signature-271) ``` supportsBlur(id: number): boolean ``` * * * ### setBlur()[#](#setblur) Sets the blur effect for a block. #### Parameters[#](#parameters-320) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `blurId` | `number` | A ‘blur’ block to apply. | #### Returns[#](#returns-329) `void` #### Signature[#](#signature-272) ``` setBlur(id: number, blurId: number): void ``` * * * ### getBlur()[#](#getblur) Gets the blur block of a given design block. #### Parameters[#](#parameters-321) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-330) `number` The ‘blur’ block. #### Signature[#](#signature-273) ``` getBlur(id: number): number ``` * * * ### setBlurEnabled()[#](#setblurenabled) Enables or disables the blur effect on a block. ``` engine.block.setBlurEnabled(block, true); ``` #### Parameters[#](#parameters-322) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `enabled` | `boolean` | The new enabled value. | #### Returns[#](#returns-331) `void` #### Signature[#](#signature-274) ``` setBlurEnabled(id: number, enabled: boolean): void ``` * * * ### isBlurEnabled()[#](#isblurenabled) Checks if blur is enabled for a block. ``` const isBlurEnabled = engine.block.isBlurEnabled(block); ``` #### Parameters[#](#parameters-323) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-332) `boolean` True, if the blur is enabled. False otherwise. #### Signature[#](#signature-275) ``` isBlurEnabled(id: number): boolean ``` ## Block Placeholder[#](#block-placeholder) Manage placeholder functionality, controls, and behavior. ### setPlaceholderEnabled()[#](#setplaceholderenabled) Enables or disables the placeholder function for a block. When set to `true`, the given block becomes selectable by users and its placeholder capabilities are enabled in Adopter mode. ``` engine.block.setPlaceholderEnabled(block, true); ``` #### Parameters[#](#parameters-324) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder function should be enabled or disabled. | | `enabled` | `boolean` | Whether the function should be enabled or disabled. | #### Returns[#](#returns-333) `void` #### Signature[#](#signature-276) ``` setPlaceholderEnabled(id: number, enabled: boolean): void ``` * * * ### isPlaceholderEnabled()[#](#isplaceholderenabled) Checks if the placeholder function for a block is enabled and can be selected by users in Adopter mode. ``` const placeholderIsEnabled = engine.block.isPlaceholderEnabled(block); ``` #### Parameters[#](#parameters-325) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder function state should be queried. | #### Returns[#](#returns-334) `boolean` The enabled state of the placeholder function. #### Signature[#](#signature-277) ``` isPlaceholderEnabled(id: number): boolean ``` * * * ### ~hasPlaceholderBehavior()~[#](#hasplaceholderbehavior) Checks if a block supports placeholder behavior. #### Parameters[#](#parameters-326) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-335) `boolean` True, if the block supports placeholder behavior. #### Deprecated[#](#deprecated-42) Use supportsPlaceholderBehavior instead. * * * ### supportsPlaceholderBehavior()[#](#supportsplaceholderbehavior) Checks if a block supports placeholder behavior. ``` const placeholderBehaviorSupported = engine.block.supportsPlaceholderBehavior(block); ``` #### Parameters[#](#parameters-327) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-336) `boolean` True, if the block supports placeholder behavior. #### Signature[#](#signature-278) ``` supportsPlaceholderBehavior(id: number): boolean ``` * * * ### setPlaceholderBehaviorEnabled()[#](#setplaceholderbehaviorenabled) Enables or disables the placeholder behavior for a block. When its fill block is set to `true`, an image block will act as a placeholder, showing a control overlay and a replacement button. ``` engine.block.setPlaceholderBehaviorEnabled(block, true); ``` #### Parameters[#](#parameters-328) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder behavior should be enabled or disabled. | | `enabled` | `boolean` | Whether the placeholder behavior should be enabled or disabled. | #### Returns[#](#returns-337) `void` #### Signature[#](#signature-279) ``` setPlaceholderBehaviorEnabled(id: number, enabled: boolean): void ``` * * * ### isPlaceholderBehaviorEnabled()[#](#isplaceholderbehaviorenabled) Checks if the placeholder behavior for a block is enabled. ``` engine.block.setPlaceholderBehaviorEnabled(block, true); ``` #### Parameters[#](#parameters-329) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder behavior state should be queried. | #### Returns[#](#returns-338) `boolean` The enabled state of the placeholder behavior. #### Signature[#](#signature-280) ``` isPlaceholderBehaviorEnabled(id: number): boolean ``` * * * ### ~hasPlaceholderControls()~[#](#hasplaceholdercontrols) Checks if a block supports placeholder controls. #### Parameters[#](#parameters-330) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-339) `boolean` True, if the block supports placeholder controls. #### Deprecated[#](#deprecated-43) Use supportsPlaceholderControls instead. * * * ### supportsPlaceholderControls()[#](#supportsplaceholdercontrols) Checks if a block supports placeholder controls, e.g. a control overlay and a replacement button. #### Parameters[#](#parameters-331) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to query. | #### Returns[#](#returns-340) `boolean` True, if the block supports placeholder controls. #### Signature[#](#signature-281) ``` supportsPlaceholderControls(id: number): boolean ``` * * * ### setPlaceholderControlsOverlayEnabled()[#](#setplaceholdercontrolsoverlayenabled) Enables or disables the placeholder overlay pattern. ``` engine.block.setPlaceholderControlsOverlayEnabled(block, true); ``` #### Parameters[#](#parameters-332) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder overlay should be enabled or disabled. | | `enabled` | `boolean` | Whether the placeholder overlay should be shown or not. | #### Returns[#](#returns-341) `void` #### Signature[#](#signature-282) ``` setPlaceholderControlsOverlayEnabled(id: number, enabled: boolean): void ``` * * * ### isPlaceholderControlsOverlayEnabled()[#](#isplaceholdercontrolsoverlayenabled) Checks if the placeholder overlay pattern is enabled. ``` const overlayEnabled = engine.block.isPlaceholderControlsOverlayEnabled(block); ``` #### Parameters[#](#parameters-333) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder overlay visibility state should be queried. | #### Returns[#](#returns-342) `boolean` The visibility state of the block’s placeholder overlay pattern. #### Signature[#](#signature-283) ``` isPlaceholderControlsOverlayEnabled(id: number): boolean ``` * * * ### setPlaceholderControlsButtonEnabled()[#](#setplaceholdercontrolsbuttonenabled) Enables or disables the placeholder button. ``` engine.block.setPlaceholderControlsButtonEnabled(block, true); ``` #### Parameters[#](#parameters-334) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder button should be shown or not. | | `enabled` | `boolean` | Whether the placeholder button should be shown or not. | #### Returns[#](#returns-343) `void` #### Signature[#](#signature-284) ``` setPlaceholderControlsButtonEnabled(id: number, enabled: boolean): void ``` * * * ### isPlaceholderControlsButtonEnabled()[#](#isplaceholdercontrolsbuttonenabled) Checks if the placeholder button is enabled. ``` const buttonEnabled = engine.block.isPlaceholderControlsButtonEnabled(block); ``` #### Parameters[#](#parameters-335) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose placeholder button visibility state should be queried. | #### Returns[#](#returns-344) `boolean` The visibility state of the block’s placeholder button. #### Signature[#](#signature-285) ``` isPlaceholderControlsButtonEnabled(id: number): boolean ``` ## Block Scopes[#](#block-scopes) Manage permissions and capabilities per block. ### setScopeEnabled()[#](#setscopeenabled) Enables or disables a scope for a block. ``` // Allow the user to move the image block.engine.block.setScopeEnabled(image, 'layer/move', true); ``` #### Parameters[#](#parameters-336) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose scope should be enabled or disabled. | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scope/) | The scope to enable or disable. | | `enabled` | `boolean` | Whether the scope should be enabled or disabled. | #### Returns[#](#returns-345) `void` #### Signature[#](#signature-286) ``` setScopeEnabled(id: number, key: Scope, enabled: boolean): void ``` * * * ### isScopeEnabled()[#](#isscopeenabled) Checks if a scope is enabled for a block. ``` engine.block.isScopeEnabled(image, 'layer/move'); ``` #### Parameters[#](#parameters-337) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose scope state should be queried. | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scope/) | The scope to query. | #### Returns[#](#returns-346) `boolean` The enabled state of the scope for the given block. #### Signature[#](#signature-287) ``` isScopeEnabled(id: number, key: Scope): boolean ``` * * * ### isAllowedByScope()[#](#isallowedbyscope) Checks if an operation is allowed by a block’s scopes. ``` // This will return true when the global scope is set to 'Defer'.engine.block.isAllowedByScope(image, 'layer/move'); ``` #### Parameters[#](#parameters-338) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to check. | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scope/) | The scope to check. | #### Returns[#](#returns-347) `boolean` Whether the scope is allowed for the given block. #### Signature[#](#signature-288) ``` isAllowedByScope(id: number, key: Scope): boolean ``` ## Block Boolean Operations[#](#block-boolean-operations) Combine multiple blocks into a single new block using boolean path operations. ### isCombinable()[#](#iscombinable) Checks if a set of blocks can be combined using a boolean operation. Only graphics blocks and text blocks can be combined. All blocks must have the “lifecycle/duplicate” scope enabled. #### Parameters[#](#parameters-339) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | An array of block ids. | #### Returns[#](#returns-348) `boolean` Whether the blocks can be combined. #### Signature[#](#signature-289) ``` isCombinable(ids: number[]): boolean ``` * * * ### combine()[#](#combine) Performs a boolean operation on a set of blocks. All blocks must be combinable. See `isCombinable`. The parent, fill and sort order of the new block is that of the prioritized block. #### Parameters[#](#parameters-340) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The blocks to combine. They will be destroyed if “lifecycle/destroy” scope is enabled. | | `op` | [`BooleanOperation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/booleanoperation/) | The boolean operation to perform. | #### Returns[#](#returns-349) `number` The newly created block or an error. #### Signature[#](#signature-290) ``` combine(ids: number[], op: BooleanOperation): number ``` ## Block Cutout[#](#block-cutout) Create cutout operations and path-based modifications. ### createCutoutFromBlocks()[#](#createcutoutfromblocks) Creates a cutout block from the contours of other blocks. The path is derived from either existing vector paths or by vectorizing the block’s appearance. #### Parameters[#](#parameters-341) | Parameter | Type | Default value | Description | | --- | --- | --- | --- | | `ids` | `number`\[\] | `undefined` | The blocks whose shape will serve as the basis for the cutout’s path. | | `vectorizeDistanceThreshold` | `number` | `2` | Max deviation from the original contour during vectorization. | | `simplifyDistanceThreshold` | `number` | `4` | Max deviation for path simplification. 0 disables simplification. | | `useExistingShapeInformation` | `boolean` | `true` | If true, use existing vector paths. | #### Returns[#](#returns-350) `number` The newly created block or an error. #### Signature[#](#signature-291) ``` createCutoutFromBlocks(ids: number[], vectorizeDistanceThreshold?: number, simplifyDistanceThreshold?: number, useExistingShapeInformation?: boolean): number ``` * * * ### createCutoutFromPath()[#](#createcutoutfrompath) Creates a cutout block from an SVG path string. #### Parameters[#](#parameters-342) | Parameter | Type | Description | | --- | --- | --- | | `path` | `string` | An SVG string describing a path. | #### Returns[#](#returns-351) `number` The newly created block or an error. #### Signature[#](#signature-292) ``` createCutoutFromPath(path: string): number ``` * * * ### createCutoutFromOperation()[#](#createcutoutfromoperation) Creates a new cutout block by performing a boolean operation on existing cutout blocks. #### Parameters[#](#parameters-343) | Parameter | Type | Description | | --- | --- | --- | | `ids` | `number`\[\] | The cutout blocks with which to perform to the operation. | | `op` | [`CutoutOperation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/cutoutoperation/) | The boolean operation to perform. | #### Returns[#](#returns-352) `number` The newly created block or an error. #### Signature[#](#signature-293) ``` createCutoutFromOperation(ids: number[], op: CutoutOperation): number ``` ## Block[#](#block) ### split()[#](#split) Splits a block at the specified time. The original block will be trimmed to end at the split time, and the returned duplicate will start at the split time and continue to the original end time. ``` const duplicate = engine.block.split(video, 10.0); ``` #### Parameters[#](#parameters-344) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to split. | | `atTime` | `number` | The time (in seconds) relative to the block’s time offset where the split should occur. | | `options` | [`SplitOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/splitoptions/) | The options for configuring the split operation. | #### Returns[#](#returns-353) `number` The newly created second half of the split block. #### Signature[#](#signature-294) ``` split(id: number, atTime: number, options?: SplitOptions): number ``` ## Block Audio[#](#block-audio) ### getAudioTrackCountFromVideo()[#](#getaudiotrackcountfromvideo) Gets the number of available audio tracks in a video fill block. ``` const trackCount = engine.block.getAudioTrackCountFromVideo(videoBlock);console.log(`Video has ${trackCount} audio tracks`); ``` #### Parameters[#](#parameters-345) | Parameter | Type | Description | | --- | --- | --- | | `videoFillBlock` | `number` | The video fill block to examine. | #### Returns[#](#returns-354) `number` The number of audio tracks. #### Throws[#](#throws-1) Will throw an error if the block is not a video fill or has no audio. #### Signature[#](#signature-295) ``` getAudioTrackCountFromVideo(videoFillBlock: number): number ``` * * * ### createAudioFromVideo()[#](#createaudiofromvideo) Creates a new audio block by extracting a specific audio track from a video fill block. ``` // Extract the first audio track (usually the main mix) with trim settingsconst audioBlock = engine.block.createAudioFromVideo(videoFillBlock, 0); // Extract full audio track without trim settingsconst audioBlock = engine.block.createAudioFromVideo(videoFillBlock, 0, { keepTrimSettings: false }); // Extract a specific track, keep trim settings, and mute the original videoconst dialogueTrack = engine.block.createAudioFromVideo(videoFillBlock, 1, { keepTrimSettings: true, muteOriginalVideo: true }); ``` #### Parameters[#](#parameters-346) | Parameter | Type | Description | | --- | --- | --- | | `videoFillBlock` | `number` | The video fill block to extract audio from. | | `trackIndex` | `number` | The index of the audio track to extract (0-based). | | `options` | `AudioFromVideoOptions` | Options for the audio extraction operation. | #### Returns[#](#returns-355) `number` The handle of the newly created audio block with extracted audio from the specified track. #### Throws[#](#throws-2) Will throw an error if the track index is invalid or the block has no audio. #### Signature[#](#signature-296) ``` createAudioFromVideo(videoFillBlock: number, trackIndex: number, options?: AudioFromVideoOptions): number ``` * * * ### createAudiosFromVideo()[#](#createaudiosfromvideo) Creates multiple audio blocks by extracting all audio tracks from a video fill block. ``` // Extract all audio tracks from a video with trim settingsconst audioBlocks = engine.block.createAudiosFromVideo(videoFillBlock);console.log(`Created ${audioBlocks.length} audio blocks`); // Extract all tracks without trim settings (full audio)const audioBlocks = engine.block.createAudiosFromVideo(videoFillBlock, { keepTrimSettings: false }); // Extract all tracks with trim settings and mute the original videoconst audioBlocks = engine.block.createAudiosFromVideo(videoFillBlock, { keepTrimSettings: true, muteOriginalVideo: true }); ``` #### Parameters[#](#parameters-347) | Parameter | Type | Description | | --- | --- | --- | | `videoFillBlock` | `number` | The video fill block to extract audio from. | | `options` | `AudioFromVideoOptions` | Options for the audio extraction operation. | #### Returns[#](#returns-356) `number`\[\] An array of handles for the newly created audio blocks, one per track. #### Throws[#](#throws-3) Will throw an error if the block has no audio or extraction fails. #### Signature[#](#signature-297) ``` createAudiosFromVideo(videoFillBlock: number, options?: AudioFromVideoOptions): number[] ``` * * * ### getAudioInfoFromVideo()[#](#getaudioinfofromvideo) Gets information about all audio tracks from a video fill block. ``` // Get information about all audio tracksconst trackInfos = engine.block.getAudioInfoFromVideo(videoFillBlock);console.log(`Video has ${trackInfos.length} audio tracks`); // Display track informationtrackInfos.forEach((track, index) => { console.log(`Track ${index}: ${track.channels} channels, ${track.sampleRate}Hz, ${track.language}`);}); // Use track info to create audio blocks selectivelyconst englishTracks = trackInfos.filter(track => track.language === 'eng');const audioBlocks = englishTracks.map(track => engine.block.createAudioFromVideo(videoFillBlock, track.trackIndex)); ``` #### Parameters[#](#parameters-348) | Parameter | Type | Description | | --- | --- | --- | | `videoFillBlock` | `number` | The video fill block to analyze for audio track information. | #### Returns[#](#returns-357) `AudioTrackInfo`\[\] An array containing information about each audio track. #### Throws[#](#throws-4) Will throw an error if the block is not a video fill or has no audio. #### Signature[#](#signature-298) ``` getAudioInfoFromVideo(videoFillBlock: number): AudioTrackInfo[] ``` ## Block Metadata[#](#block-metadata) ### setMetadata()[#](#setmetadata) Sets a metadata value for a given key on a block. If the key does not exist, it will be added. #### Parameters[#](#parameters-349) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose metadata will be accessed. | | `key` | `string` | The key used to identify the desired piece of metadata. | | `value` | `string` | The value to set. | #### Returns[#](#returns-358) `void` #### Signature[#](#signature-299) ``` setMetadata(id: number, key: string, value: string): void ``` * * * ### getMetadata()[#](#getmetadata) Gets a metadata value for a given key from a block. #### Parameters[#](#parameters-350) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose metadata will be accessed. | | `key` | `string` | The key used to identify the desired piece of metadata. | #### Returns[#](#returns-359) `string` The value associated with the key. #### Signature[#](#signature-300) ``` getMetadata(id: number, key: string): string ``` * * * ### hasMetadata()[#](#hasmetadata) Checks if a block has metadata for a given key. #### Parameters[#](#parameters-351) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose metadata will be accessed. | | `key` | `string` | The key used to identify the desired piece of metadata. | #### Returns[#](#returns-360) `boolean` Whether the key exists. #### Signature[#](#signature-301) ``` hasMetadata(id: number, key: string): boolean ``` * * * ### findAllMetadata()[#](#findallmetadata) Finds all metadata keys on a block. #### Parameters[#](#parameters-352) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose metadata will be accessed. | #### Returns[#](#returns-361) `string`\[\] A list of all metadata keys on this block. #### Signature[#](#signature-302) ``` findAllMetadata(id: number): string[] ``` * * * ### removeMetadata()[#](#removemetadata) Removes metadata for a given key from a block. #### Parameters[#](#parameters-353) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block whose metadata will be accessed. | | `key` | `string` | The key used to identify the desired piece of metadata. | #### Returns[#](#returns-362) `void` #### Signature[#](#signature-303) ``` removeMetadata(id: number, key: string): void ``` ## Helper[#](#helper) Convenient high-level functions that combine multiple operations into single, easy-to-use methods for common tasks like adding media, applying effects, and positioning blocks. ### setSize()[#](#setsize) Update a block’s size. #### Parameters[#](#parameters-354) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `width` | `number` | The new width of the block. | | `height` | `number` | The new height of the block. | | `options?` | { `maintainCrop?`: `boolean`; `sizeMode?`: [`SizeMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sizemode/); } | Optional parameters for the size. Properties: - `maintainCrop` - Whether or not the crop values, if available, should be automatically adjusted. - `sizeMode` - The size mode: Absolute, Percent or Auto. | | `options.maintainCrop?` | `boolean` | \- | | `options.sizeMode?` | [`SizeMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sizemode/) | \- | #### Returns[#](#returns-363) `void` #### Signature[#](#signature-304) ``` setSize(id: number, width: number, height: number, options?: object): void ``` * * * ### setPosition()[#](#setposition) Update a block’s position. #### Parameters[#](#parameters-355) | Parameter | Type | Description | | --- | --- | --- | | `id` | `number` | The block to update. | | `x` | `number` | The new x position of the block. | | `y` | `number` | The new y position of the block. | | `options?` | { `positionMode?`: [`PositionMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionmode/); } | Optional parameters for the position. Properties: - `positionMode` - The position mode: absolute, percent or undefined. | | `options.positionMode?` | [`PositionMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionmode/) | \- | #### Returns[#](#returns-364) `void` #### Signature[#](#signature-305) ``` setPosition(id: number, x: number, y: number, options?: object): void ``` * * * ### addImage()[#](#addimage) Adds an image to the current page. The image will be automatically loaded and sized appropriately. In Video mode, timeline and animation options can be applied. #### Parameters[#](#parameters-356) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | URL or path to the image file | | `options` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/addimageoptions/) | Configuration options for the image | #### Returns[#](#returns-365) `Promise`<`number`\> Promise that resolves to the ID of the created image block #### Throws[#](#throws-5) Error if no current page exists #### Signature[#](#signature-306) ``` addImage(url: string, options?: AddImageOptions): Promise ``` * * * ### addVideo()[#](#addvideo) Adds a video block to the current scene page. The video will be positioned and sized according to the provided parameters. Timeline and animation effects can be applied. Only works in Video mode, not in Design mode. #### Parameters[#](#parameters-357) | Parameter | Type | Description | | --- | --- | --- | | `url` | `string` | URL or path to the video file | | `width` | `number` | Width of the video in scene design units | | `height` | `number` | Height of the video in scene design units | | `options` | [`AddVideoOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/addvideooptions/) | Configuration options for the video | #### Returns[#](#returns-366) `Promise`<`number`\> Promise that resolves to the ID of the created video block #### Throws[#](#throws-6) Error if called in Design mode or if no current page exists #### Signature[#](#signature-307) ``` addVideo(url: string, width: number, height: number, options?: AddVideoOptions): Promise ``` * * * ### applyAnimation()[#](#applyanimation) Applies an animation to a block. #### Parameters[#](#parameters-358) | Parameter | Type | Description | | --- | --- | --- | | `block` | `number` | The ID of the block to apply the animation to | | `animation` | [`AnimationOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationoptions/) | The animation configuration options | #### Returns[#](#returns-367) `void` #### Signature[#](#signature-308) ``` applyAnimation(block: number, animation?: AnimationOptions): void ``` * * * ### applyDropShadow()[#](#applydropshadow) Applies a drop shadow effect to any block. #### Parameters[#](#parameters-359) | Parameter | Type | Description | | --- | --- | --- | | `block` | `number` | The ID of the block to apply the shadow to | | `options` | [`DropShadowOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dropshadowoptions/) | Shadow configuration options. If not provided, enables shadow with default settings | #### Returns[#](#returns-368) `void` #### Signature[#](#signature-309) ``` applyDropShadow(block: number, options?: DropShadowOptions): void ``` * * * ### generateThumbnailAtTimeOffset()[#](#generatethumbnailattimeoffset) Generates a thumbnail image of the scene at a specific time. Only works in Video mode, not in Design mode. #### Parameters[#](#parameters-360) | Parameter | Type | Description | | --- | --- | --- | | `height` | `number` | Height of the thumbnail in scene design units (maximum 512) | | `time` | `number` | Time position in seconds to capture the thumbnail | #### Returns[#](#returns-369) `Promise`<`Blob`\> Promise that resolves to a Blob containing the PNG thumbnail image #### Throws[#](#throws-7) Error if no page exists, if called in Design mode, or if height exceeds 512 pixels #### Signature[#](#signature-310) ``` generateThumbnailAtTimeOffset(height: number, time: number): Promise ``` * * * ### getBackgroundTrack()[#](#getbackgroundtrack) Gets the background track of the current scene. The background track is the track that determines the page duration. Only works in Video mode, not in Design mode. #### Returns[#](#returns-370) `number` The ID of the background track, or null if none exists #### Throws[#](#throws-8) Error if called in Design mode #### Signature[#](#signature-311) ``` getBackgroundTrack(): number ``` * * * ### moveToBackgroundTrack()[#](#movetobackgroundtrack) Moves a block to the background track. This is useful for organizing content in video scenes where you want certain elements to be part of the background layer. The background track is the track that determines the page duration. If no background track exists, one will be created automatically. #### Parameters[#](#parameters-361) | Parameter | Type | Description | | --- | --- | --- | | `block` | `number` | The ID of the block to move to the background track | #### Returns[#](#returns-371) `void` #### Signature[#](#signature-312) ``` moveToBackgroundTrack(block: number): void ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/assetapi) # Class: AssetAPI Manage asset sources and apply assets to scenes. Asset sources provide assets like images, videos, fonts, and other media that can be applied to design blocks. This API allows registering custom asset sources, querying available assets, and applying them to scenes or specific blocks. It supports both local and remote asset sources, with extensible middleware for custom asset handling. ## Event Subscriptions[#](#event-subscriptions) Subscribe to asset source changes and lifecycle events. ### onAssetSourceAdded()[#](#onassetsourceadded) Subscribe to asset source addition events. ``` engine.asset.onAssetSourceAdded((sourceID) => { console.log(`Added source: ${sourceID}`);}); ``` #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`sourceID`) => `void` | The function called whenever an asset source is added. | #### Returns[#](#returns) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-1) `void` #### Signature[#](#signature) ``` onAssetSourceAdded(callback: (sourceID: string) => void): () => void ``` * * * ### onAssetSourceRemoved()[#](#onassetsourceremoved) Subscribe to asset source removal events. ``` engine.asset.onAssetSourceRemoved((sourceID) => { console.log(`Removed source: ${sourceID}`);}); ``` #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`sourceID`) => `void` | The function called whenever an asset source is removed. | #### Returns[#](#returns-2) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-3) `void` #### Signature[#](#signature-1) ``` onAssetSourceRemoved(callback: (sourceID: string) => void): () => void ``` * * * ### onAssetSourceUpdated()[#](#onassetsourceupdated) Subscribe to asset source content change events. ``` engine.asset.onAssetSourceUpdated((sourceID) => { console.log(`Updated source: ${sourceID}`);}); ``` #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `callback` | (`sourceID`) => `void` | The function called whenever an asset source’s contents are updated. | #### Returns[#](#returns-4) A method to unsubscribe from the event. ``` (): void; ``` ##### Returns[#](#returns-5) `void` #### Signature[#](#signature-2) ``` onAssetSourceUpdated(callback: (sourceID: string) => void): () => void ``` ## Asset Source Management[#](#asset-source-management) Register, remove, and query asset sources for different types of media. ### addSource()[#](#addsource) Add a custom asset source with unique ID. The asset source provides methods for finding assets, applying them to scenes or blocks, and managing asset lifecycle. All source operations are handled asynchronously. ``` engine.asset.addSource({ id: 'foobar', async findAssets(queryData) { return Promise.resolve({ assets: [ { id: 'logo', meta: { uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', } } ], total: 1, currentPage: queryData.page, nextPage: undefined }); },}); ``` #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `source` | [`AssetSource`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetsource/) | The asset source configuration. | #### Returns[#](#returns-6) `void` #### Signature[#](#signature-3) ``` addSource(source: AssetSource): void ``` * * * ### addLocalSource()[#](#addlocalsource) Add a local asset source. Local asset sources allow dynamic asset management through the add/remove methods. You can specify supported MIME types to restrict what assets can be added. ``` engine.asset.addLocalSource('local-source'); ``` #### Parameters[#](#parameters-4) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | Unique identifier for the asset source. | | `supportedMimeTypes?` | `string`\[\] | The mime types of assets that are allowed to be added to this local source. | | `applyAsset?` | (`asset`) => `Promise`<`number`\> | An optional callback that can be used to override the default behavior of applying a given asset result to the active scene. | | `applyAssetToBlock?` | (`asset`, `block`) => `Promise`<`void`\> | An optional callback that can be used to override the default behavior of applying an asset result to a given block. | #### Returns[#](#returns-7) `void` #### Signature[#](#signature-4) ``` addLocalSource(id: string, supportedMimeTypes?: string[], applyAsset?: (asset: CompleteAssetResult) => Promise, applyAssetToBlock?: (asset: CompleteAssetResult, block: number) => Promise): void ``` * * * ### addLocalAssetSourceFromJSONString()[#](#addlocalassetsourcefromjsonstring) Creates a new local asset source from a JSON string containing asset definitions. The JSON structure should contain a `version` field, an `id` field specifying the asset source identifier, and an `assets` array with asset definitions. Each asset should have an `id`, localized `label` object, and a `meta` object containing asset-specific properties like `uri`, `thumbUri`, `blockType`, etc. #### Parameters[#](#parameters-5) | Parameter | Type | Description | | --- | --- | --- | | `contentJSON` | `string` | The JSON string containing the asset definitions. | | `basePath?` | `string` | An optional base path with which {{base\_url}} strings in the assets should be replaced. If no value is provided, settings.basePath is used. | #### Returns[#](#returns-8) `Promise`<`string`\> The ID of the newly created asset source (as specified in the JSON’s `id` field). #### Example[#](#example) ``` const json = JSON.stringify({ "version": "2.0.0", "id": "my.custom.assets", "assets": [ { "id": "sample_asset", "label": { "en": "Sample Asset" }, "meta": { "uri": "https://example.com/asset.jpg", "thumbUri": "https://example.com/thumb.jpg", "blockType": "//ly.img.ubq/image" } } ]});const sourceId = await engine.asset.addLocalAssetSourceFromJSONString(json);console.log('Created asset source:', sourceId); // "my.custom.assets" ``` #### Signature[#](#signature-5) ``` addLocalAssetSourceFromJSONString(contentJSON: string, basePath?: string): Promise ``` * * * ### addLocalAssetSourceFromJSONURI()[#](#addlocalassetsourcefromjsonuri) Creates a new local asset source from a JSON URI. Loads and parses a JSON file from the specified URI to create an asset source. The JSON structure should contain a `version` field, an `id` field specifying the asset source identifier, and an `assets` array with asset definitions. The created asset source will have the ID specified in the JSON’s `id` field, and all assets defined in the JSON will be added to the source. Note: The parent directory of the content.json URI will be used as the base path for resolving relative URLs in the asset definitions (e.g., `{{base_url}}` placeholders). #### Parameters[#](#parameters-6) | Parameter | Type | Description | | --- | --- | --- | | `contentURI` | `string` | The URI for the JSON file to load and parse. | #### Returns[#](#returns-9) `Promise`<`string`\> The ID of the newly created asset source (as specified in the JSON’s `id` field). #### Example[#](#example-1) ``` // Load audio assets from IMG.LY's CDNconst sourceId = await engine.asset.addLocalAssetSourceFromJSONURI( 'https://cdn.img.ly/assets/demo/v2/ly.img.audio/content.json');console.log('Loaded asset source:', sourceId); // "ly.img.audio" // The parent directory (https://cdn.img.ly/assets/demo/v2/ly.img.audio/)// will be used as base path for resolving relative asset URLs // The JSON at this URL contains audio assets with structure like:// {// "version": "2.0.0",// "id": "ly.img.audio",// "assets": [// {// "id": "dance_harder",// "label": { "en": "Dance Harder" },// "meta": {// "uri": "https://cdn.img.ly/.../dance_harder.m4a",// "blockType": "//ly.img.ubq/audio",// "mimeType": "audio/x-m4a"// }// }// ]// } ``` #### Signature[#](#signature-6) ``` addLocalAssetSourceFromJSONURI(contentURI: string): Promise ``` * * * ### removeSource()[#](#removesource) Remove a registered asset source. This permanently removes the asset source and all its associated assets. Any ongoing operations with this source will be cancelled. ``` engine.asset.removeSource('asset-source-id'); ``` #### Parameters[#](#parameters-7) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | The ID of the asset source to remove. | #### Returns[#](#returns-10) `void` #### Signature[#](#signature-7) ``` removeSource(id: string): void ``` * * * ### findAllSources()[#](#findallsources) Get all registered asset source IDs. ``` engine.asset.findAllSources(); ``` #### Returns[#](#returns-11) `string`\[\] A list with the IDs of all registered asset sources. #### Signature[#](#signature-8) ``` findAllSources(): string[] ``` ## Asset Discovery[#](#asset-discovery) Search and filter assets from registered sources with advanced query options. ### findAssets()[#](#findassets) Search for assets in a specific source with advanced filtering. Supports pagination, text search, tag filtering, grouping, and sorting options. Results include asset metadata, thumbnails, and application context. ``` const result = await engine.asset.findAssets('asset-source-id', { page: 0, perPage: 100});const asset = result.assets[0]; ``` #### Parameters[#](#parameters-8) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | | `query` | [`AssetQueryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetquerydata/) | Query options to filter and sort the search results. | #### Returns[#](#returns-12) `Promise`<[`AssetsQueryResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetsqueryresult/)<[`CompleteAssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/completeassetresult/)\>> Promise resolving to paginated search results. #### Signature[#](#signature-9) ``` findAssets(sourceId: string, query: AssetQueryData): Promise> ``` * * * ### fetchAsset()[#](#fetchasset) Fetch a specific asset by ID from an asset source. ``` const asset = await engine.asset.fetchAsset('asset-source-id', 'asset-id', { locale: 'en-US'}); ``` #### Parameters[#](#parameters-9) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source to search in. | | `assetId` | `string` | The ID of the asset to fetch. | | `params` | `Pick`<[`AssetQueryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetquerydata/), `"locale"`\> | Query parameters including locale (optional). | #### Returns[#](#returns-13) `Promise`<[`CompleteAssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/completeassetresult/)\> Promise resolving to the complete asset result, or undefined if not found. #### Signature[#](#signature-10) ``` fetchAsset(sourceId: string, assetId: string, params?: Pick): Promise ``` ## Asset Information[#](#asset-information) Retrieve metadata, credits, licenses, and supported formats from asset sources. ### getGroups()[#](#getgroups) Get available asset groups from a source. Groups provide categorization for assets within a source, enabling filtered discovery. ``` const groups = engine.asset.getGroups(customSource.id); ``` #### Parameters[#](#parameters-10) | Parameter | Type | Description | | --- | --- | --- | | `id` | `string` | The ID of the asset source. | #### Returns[#](#returns-14) `Promise`<`string`\[\]> Promise resolving to list of available group names. #### Signature[#](#signature-11) ``` getGroups(id: string): Promise ``` * * * ### getSupportedMimeTypes()[#](#getsupportedmimetypes) Get supported MIME types for an asset source. Returns the file types that can be added to this source. An empty result means all MIME types are supported. ``` const mimeTypes = engine.asset.getSupportedMimeTypes('asset-source-id'); ``` #### Parameters[#](#parameters-11) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | #### Returns[#](#returns-15) `string`\[\] Array of supported MIME type strings. #### Signature[#](#signature-12) ``` getSupportedMimeTypes(sourceId: string): string[] ``` * * * ### getCredits()[#](#getcredits) Get attribution credits for an asset source. ``` const credits = engine.asset.getCredits('asset-source-id'); ``` #### Parameters[#](#parameters-12) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | #### Returns[#](#returns-16) `object` The asset source’s credits info consisting of a name and an optional URL. | Name | Type | | --- | --- | | `name` | `string` | | `url` | `string` | #### Signature[#](#signature-13) ``` getCredits(sourceId: string): object ``` * * * ### getLicense()[#](#getlicense) Get license information for an asset source. ``` const license = engine.asset.getLicense('asset-source-id'); ``` #### Parameters[#](#parameters-13) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | #### Returns[#](#returns-17) `object` The asset source’s license info consisting of a name and an optional URL. | Name | Type | | --- | --- | | `name` | `string` | | `url` | `string` | #### Signature[#](#signature-14) ``` getLicense(sourceId: string): object ``` * * * ### canManageAssets()[#](#canmanageassets) Check if an asset source supports asset management. Returns true if the source allows adding and removing assets dynamically, via ‘Add File’ and ‘Delete’ button on the UI. This is typically true for local asset sources and false for remote sources. ``` engine.asset.canManageAssets('asset-source-id'); ``` #### Parameters[#](#parameters-14) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source to check. | #### Returns[#](#returns-18) `boolean` True if the source supports asset management operations. #### Signature[#](#signature-15) ``` canManageAssets(sourceId: string): boolean ``` ## Asset Application[#](#asset-application) Apply assets to scenes, blocks, or specific properties with customizable behavior. ### registerApplyMiddleware()[#](#registerapplymiddleware) Register middleware that intercepts asset application to scenes. The middleware function receives the source ID, asset result, the original apply function, and a context object containing options about how the asset should be applied. It can perform custom logic before, after, or instead of the default asset application. #### Parameters[#](#parameters-15) | Parameter | Type | Description | | --- | --- | --- | | `middleware` | (`sourceId`, `assetResult`, `apply`, `context`) => `Promise`<`number`\> | The middleware function that is called before applying the asset. | #### Returns[#](#returns-19) `VoidFunction` A function that can be used to remove the middleware. #### Example[#](#example-2) ``` engine.asset.registerApplyMiddleware(async (sourceId, assetResult, apply, context) => { // Access context to determine placement intent console.log('Clip type:', context.clipType); // 'clip', 'overlay', or undefined console.log('Custom data:', context.myCustomField); // Access custom fields // do something before applying the asset // You still have the choice to call apply or skip it const blockId = await apply(sourceId, assetResult); // do something after applying the asset return blockId;}) ``` #### Signature[#](#signature-16) ``` registerApplyMiddleware(middleware: (sourceId: string, assetResult: AssetResult, apply: (sourceId: string, assetResult: AssetResult, options: ApplyAssetOptions) => Promise, context: ApplyAssetOptions) => Promise): VoidFunction ``` * * * ### registerApplyToBlockMiddleware()[#](#registerapplytoblockmiddleware) Register middleware that intercepts asset application to specific blocks. The middleware function receives the source ID, asset result, target block, and the original apply function. It can perform custom logic before, after, or instead of the default block asset application. #### Parameters[#](#parameters-16) | Parameter | Type | Description | | --- | --- | --- | | `middleware` | (`sourceId`, `assetResult`, `block`, `applyToBlock`) => `Promise`<`void`\> | The middleware function that is called before applying the asset. | #### Returns[#](#returns-20) `VoidFunction` A function that can be used to remove the middleware. #### Example[#](#example-3) ``` engine.asset.registerApplyToBlockMiddleware(async (sourceId, assetResult, block, applyToBlock) => { // do something before applying the asset // You still have the choice to call applyToBlock or skip it await applyToBlock(sourceId, assetResult, block); // do something after applying the asset}) ``` #### Signature[#](#signature-17) ``` registerApplyToBlockMiddleware(middleware: (sourceId: string, assetResult: AssetResult, block: number, applyToBlock: (sourceId: string, assetResult: AssetResult, block: number) => Promise) => Promise): VoidFunction ``` * * * ### apply()[#](#apply) Apply an asset to the active scene. Creates a new block configured according to the asset’s properties and adds it to the scene. The behavior can be customized by providing an `applyAsset` function when registering the asset source, or by passing context options to guide middleware behavior. #### Parameters[#](#parameters-17) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | A single asset result from a `findAssets` query. | | `options?` | [`ApplyAssetOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/applyassetoptions/) | Optional configuration for asset application. | #### Returns[#](#returns-21) `Promise`<`number`\> Promise resolving to the created block ID, or undefined if no block was created. #### Examples[#](#examples) ``` // Default behaviorawait engine.asset.apply('asset-source-id', assetResult.assets[0]); ``` ``` // Foreground overlay placementawait engine.asset.apply('asset-source-id', assetResult.assets[0], { clipType: 'overlay'}); ``` #### Signature[#](#signature-18) ``` apply(sourceId: string, assetResult: AssetResult, options?: ApplyAssetOptions): Promise ``` * * * ### applyToBlock()[#](#applytoblock) Apply an asset to a specific block. Modifies the target block’s properties according to the asset’s configuration. The behavior can be customized by providing an `applyAssetToBlock` function when registering the asset source. ``` await engine.asset.applyToBlock('asset-source-id', assetResult.assets[0]); ``` #### Parameters[#](#parameters-18) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | A single asset result from a `findAssets` query. | | `block` | `number` | The block to apply the asset to. | #### Returns[#](#returns-22) `Promise`<`void`\> #### Signature[#](#signature-19) ``` applyToBlock(sourceId: string, assetResult: AssetResult, block: number): Promise ``` * * * ### applyProperty()[#](#applyproperty) Apply a specific asset property to the currently selected element. Allows applying individual properties (like colors, fonts, or effects) from an asset without creating a new block. The behavior can be customized by providing an `applyAssetProperty` function. ``` const asset = assetResult.assets[0];if (asset.payload && asset.payload.properties) { for (const property of asset.payload.properties) { await engine.asset.applyProperty('asset-source-id', asset, property); }} ``` #### Parameters[#](#parameters-19) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The ID of the asset source. | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | A single asset result from a `findAssets` query. | | `property` | [`AssetProperty`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetproperty/) | The specific asset property to apply. | #### Returns[#](#returns-23) `Promise`<`void`\> #### Signature[#](#signature-20) ``` applyProperty(sourceId: string, assetResult: AssetResult, property: AssetProperty): Promise ``` * * * ### defaultApplyAsset()[#](#defaultapplyasset) Apply an asset using the engine’s default implementation. The default implementation already handles various different kinds of assets and acts as a good starting point. ``` engine.asset.addSource({ id: 'foobar', async findAssets(queryData) { return Promise.resolve({ assets: [ { id: 'logo', meta: { uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', } } ], total: 1, currentPage: queryData.page, nextPage: undefined }); }, async applyAsset(assetResult) { return engine.asset.defaultApplyAsset(assetResult); },}); ``` #### Parameters[#](#parameters-20) | Parameter | Type | Description | | --- | --- | --- | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | A single asset result from a `findAssets` query. | #### Returns[#](#returns-24) `Promise`<`number`\> Promise resolving to the created block ID, or undefined if no block was created. #### Signature[#](#signature-21) ``` defaultApplyAsset(assetResult: AssetResult): Promise ``` * * * ### defaultApplyAssetToBlock()[#](#defaultapplyassettoblock) Apply an asset to a block using the engine’s default implementation. The default implementation already handles various different kinds of assets and acts as a good starting point. ``` engine.asset.addSource({ id: 'foobar', async findAssets(queryData) { return Promise.resolve({ assets: [ { id: 'logo', meta: { uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', } } ], total: 1, currentPage: queryData.page, nextPage: undefined }); }, async applyAssetToBlock(assetResult, block) { engine.asset.defaultApplyAssetToBlock(assetResult, block); },}); ``` #### Parameters[#](#parameters-21) | Parameter | Type | Description | | --- | --- | --- | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | A single asset result from a `findAssets` query. | | `block` | `number` | The block to apply the asset to. | #### Returns[#](#returns-25) `Promise`<`void`\> #### Signature[#](#signature-22) ``` defaultApplyAssetToBlock(assetResult: AssetResult, block: number): Promise ``` ## Asset Lifecycle[#](#asset-lifecycle) Add, remove, and manage assets within local asset sources. ### addAssetToSource()[#](#addassettosource) Add an asset to a local asset source. Only works with local asset sources that support asset management. The asset will be validated against the source’s supported MIME types. ``` engine.asset.addAssetToSource('local-source', { id: 'asset-id', label: { en: 'My Asset' }, meta: { uri: 'https://example.com/asset.jpg', mimeType: 'image/jpeg' }}); ``` #### Parameters[#](#parameters-22) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The local asset source ID that the asset should be added to. | | `asset` | [`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetdefinition/) | The asset definition to add to the source. | #### Returns[#](#returns-26) `void` #### Signature[#](#signature-23) ``` addAssetToSource(sourceId: string, asset: AssetDefinition): void ``` * * * ### removeAssetFromSource()[#](#removeassetfromsource) Remove an asset from a local asset source. Only works with local asset sources that support asset management. The asset will be permanently deleted from the source. ``` engine.asset.removeAssetFromSource('local-source', 'asset-id'); ``` #### Parameters[#](#parameters-23) | Parameter | Type | Description | | --- | --- | --- | | `sourceId` | `string` | The id of the local asset source that currently contains the asset. | | `assetId` | `string` | The id of the asset to be removed. | #### Returns[#](#returns-27) `void` #### Signature[#](#signature-24) ``` removeAssetFromSource(sourceId: string, assetId: string): void ``` * * * ### assetSourceContentsChanged()[#](#assetsourcecontentschanged) Notify the engine that an asset source’s contents have changed. This triggers refresh of any UI components that display assets from this source and notifies subscribers to the asset source update events. ``` engine.asset.assetSourceContentsChanged('asset-source-id'); ``` #### Parameters[#](#parameters-24) | Parameter | Type | Description | | --- | --- | --- | | `sourceID` | `string` | The asset source whose contents changed. | #### Returns[#](#returns-28) `void` #### Signature[#](#signature-25) ``` assetSourceContentsChanged(sourceID: string): void ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/classes/actionsapi) # Class: ActionsAPI ActionsAPI provides a centralized way to manage and customize actions for various user interactions in the Creative Engine SDK. This API allows you to: * Register custom actions for events (export, load, download, etc.) * Use default implementations when no custom action is registered * Maintain consistent behavior across different UI components ## Constructors[#](#constructors) ### Constructor[#](#constructor) `ActionsAPI` ## Methods[#](#methods) ### register()[#](#register) Registers a custom action for a specific event type. #### Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` _extends_ [`ActionId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionid/) | #### Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `actionId` | `T` | The event type to register an action for | | `action` | [`ActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionfunction/)<`T`\> | The custom action function | #### Returns[#](#returns) `void` #### Example[#](#example) ``` actionsAPI.register('downloadFile', async (blob, mimeType) => { // Custom download logic await customDownloadAction(blob, mimeType);}); ``` #### Signature[#](#signature) ``` register(actionId: T, action: ActionFunction): void ``` * * * ### get()[#](#get) Returns the custom export video action if registered, otherwise returns the default. #### Type Parameters[#](#type-parameters-1) | Type Parameter | Default type | | --- | --- | | `T` _extends_ [`ActionId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionid/) | \- | | `C` | [`CustomActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/customactionfunction/) | #### Parameters[#](#parameters-1) | Parameter | Type | Description | | --- | --- | --- | | `actionId` | `T` | The event type to get an action for | #### Returns[#](#returns-1) [`ActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionfunction/)<`T`, `C`\> #### Example[#](#example-1) ``` const exportAction = actionsAPI.get('export');if (exportAction) { const result = await exportAction(options);} ``` #### Signature[#](#signature-1) ``` get(actionId: T): ActionFunction ``` * * * ### run()[#](#run) Executes a registered action with the provided parameters. Throws an error if the action is not registered. #### Type Parameters[#](#type-parameters-2) | Type Parameter | Default type | | --- | --- | | `T` _extends_ [`ActionId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionid/) | \- | | `C` | [`CustomActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/customactionfunction/) | #### Parameters[#](#parameters-2) | Parameter | Type | Description | | --- | --- | --- | | `actionId` | `T` | The event type to execute | | …`args` | [`ActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionfunction/)<`T`, `C`\> _extends_ [`CustomActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/customactionfunction/) ? `Parameters`<[`ActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionfunction/)<[`ActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionfunction/)<`T`, `C`\>>> : `never`\[\] | The arguments to pass to the action | #### Returns[#](#returns-2) `Promise`<[`ActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionfunction/)<`T`, `C`\> _extends_ (…`args`) => `R` ? `R` : `never`\> The result of the action execution #### Throws[#](#throws) Error if the action is not registered #### Example[#](#example-2) ``` try { const result = await actionsAPI.run('exportDesign', exportOptions); console.log('Export completed', result);} catch (error) { console.error('Export action not registered');} ``` #### Signature[#](#signature-2) ``` run(actionId: T, args: ActionFunction extends CustomActionFunction ? Parameters>> : never[]): Promise extends (args: any[]) => R ? R : never> ``` * * * ### list()[#](#list) Returns all registered action IDs. This method retrieves a list of all action identifiers that are available. #### Parameters[#](#parameters-3) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `matcher?`: `string`; } | Optional configuration object with the following properties: - `matcher`: Optional pattern to match against. Use `*` for wildcard matching. | | `options.matcher?` | `string` | \- | #### Returns[#](#returns-3) [`ActionId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionid/)\[\] An array of action IDs currently registered in the store #### Example[#](#example-3) ``` const registeredActions = actionsAPI.list();console.log('Available actions:', registeredActions);// Output: ['saveScene', 'exportDesign', 'customAction1', ...] // Find all export-related actions using wildcardconst exportActions = actionsAPI.list({ matcher: 'export*' });console.log('Export actions:', exportActions);// Output: ['exportDesign', 'exportScene', ...] ``` #### Signature[#](#signature-3) ``` list(options?: object): ActionId[] ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/userinterface) # Interface: UserInterface Specifies the configuration for the user interface of the Creative Editor SDK. The `UserInterface` interface provides a set of properties that control the appearance and behavior of the user interface. These options include settings for the base URL, scale, elements, stylesheets, visibility, small viewport optimization, color palette, color libraries, typeface libraries, page presets libraries, crop presets libraries, and page formats. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `baseURL?` | `string` | \- | | ~`scale?`~ | [`ScaleConfig`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scaleconfig/) | **Deprecated** The `scale` property is deprecated. Please use `cesdk.ui.setScale()` and `cesdk.ui.getScale()` methods instead for runtime scale management. | | `elements?` | [`UserInterfaceElements`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelements/) | \- | | `stylesheets?` | `object` | \- | | `stylesheets.disableShadowDOM?` | `boolean` | \- | | `hide?` | `boolean` | \- | | `smallViewportOptimization?` | `boolean` | \- | | ~`colorPalette?`~ | [`PaletteColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/palettecolor/)\[\] | **Deprecated** Add a local asset source using `cesdk.engine.asset.addLocalSource()` and populate it with color assets, then use `cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: [...] })` to configure which sources to display. **Example** `// Before (deprecated): const config = { ui: { colorPalette: ['#FF0000', '#00FF00', '#0000FF'] } }; // After (recommended): // Add a local source for custom colors engine.asset.addLocalSource('my.custom.colors'); engine.asset.addAssetToSource('my.custom.colors', { id: 'red', label: { en: 'Red' }, payload: { color: { colorSpace: 'sRGB', r: 1.0, g: 0.0, b: 0.0, a: 1.0 } } }); // ... add more colors // Update the asset library entry to use your custom source cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['ly.img.scene.colors', 'my.custom.colors'] });` | | ~`colorLibraries?`~ | `string`\[\] | **Deprecated** Add asset sources using `cesdk.engine.asset.addAssetSource()` or `cesdk.engine.asset.addLocalSource()`, then use `cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: [...] })` to configure which sources to display. **Example** `// Before (deprecated): const config = { ui: { colorLibraries: ['ly.img.colors.defaultPalette', 'my.custom.colors'] } }; // After (recommended): // Add a local source for custom colors engine.asset.addLocalSource('my.custom.colors'); // Add color assets to the source engine.asset.addAssetToSource('my.custom.colors', { id: 'custom-color-1', payload: { color: { colorSpace: 'sRGB', r: 1.0, g: 0.0, b: 0.0 } } }); // Update the library entry to use your sources cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['ly.img.colors.defaultPalette', 'my.custom.colors'] });` | | ~`typefaceLibraries?`~ | `string`\[\] | **Deprecated** Add asset sources using `cesdk.engine.asset.addAssetSource()` or `cesdk.engine.asset.addLocalSource()`, then use `cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: [...] })` to configure which sources to display. **Example** `// Before (deprecated): const config = { ui: { typefaceLibraries: ['ly.img.typeface', 'my.custom.fonts'] } }; // After (recommended): // Add a local source for custom typefaces engine.asset.addLocalSource('my.custom.fonts'); // Add typeface assets to the source engine.asset.addAssetToSource('my.custom.fonts', { id: 'custom-font-1', meta: { uri: 'https://example.com/font.ttf' } }); // Update the library entry to use your sources cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: ['ly.img.typeface', 'my.custom.fonts'] });` | | ~`pagePresetsLibraries?`~ | `string`\[\] | (`engine`) => `string`\[\] | | ~`cropPresetsLibraries?`~ | `string`\[\] | (`engine`) => `string`\[\] | | ~`pageFormats?`~ | `object` | **Deprecated** Add a local asset source using `cesdk.engine.asset.addLocalSource()` and populate it with page format assets, then use `cesdk.ui.updateAssetLibraryEntry('ly.img.pagePresets', { sourceIds: [...] })` to configure which sources to display. **Example** `// Before (deprecated): const config = { ui: { pageFormats: { 'custom-format': { width: 800, height: 600, unit: 'Pixel' } } } }; // After (recommended): // Add a local source for custom page formats engine.asset.addLocalSource('my.custom.pageFormats'); engine.asset.addAssetToSource('my.custom.pageFormats', { id: 'custom-format', label: { en: 'Custom Format' }, payload: { transformPreset: { type: 'FixedSize', width: 800, height: 600, designUnit: 'Pixel' } } }); // Update the asset library entry to use your custom source cesdk.ui.updateAssetLibraryEntry('ly.img.pagePresets', { sourceIds: ['my.custom.pageFormats'] });` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations) # Interface: Translations Complete translation type that includes both built-in and custom translations. ## Extends[#](#extends) * [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`UnknownTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unknowntranslations/) ## Indexable[#](#indexable) ``` [key: string]: | string | {} ``` ## Properties[#](#properties) | Property | Type | Inherited from | | --- | --- | --- | | `action.align` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.bottom` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.bottom`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.bottom.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.bottom.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.elements` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.elements`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.horizontalCenter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.horizontalCenter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.horizontalCenter.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.horizontalCenter.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.left.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.left.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.right.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.right.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.toPage` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.toPage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.top` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.top`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.top.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.top.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.verticalCenter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.verticalCenter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.align.verticalCenter.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.align.verticalCenter.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.arrange` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.arrange`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.arrange.alwaysOnBottom` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.arrange.alwaysOnBottom`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.arrange.alwaysOnTop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.arrange.alwaysOnTop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.arrange.bringForward` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.arrange.bringForward`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.arrange.moveLeft` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.arrange.moveLeft`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.arrange.moveRight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.arrange.moveRight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.arrange.sendBackward` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.arrange.sendBackward`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.arrange.toBack` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.arrange.toBack`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.arrange.toFront` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.arrange.toFront`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.audio.delete` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.audio.delete`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.audio.duplicate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.audio.duplicate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.audio.replace` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.audio.replace`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.backgroundClip.add` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.backgroundClip.add`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.add` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.add`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.copy` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.copy`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.delete` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.delete`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.delete_plural` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.delete_plural`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.duplicate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.duplicate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.flipX` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.flipX`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.flipY` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.flipY`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.lock` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.lock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.lock.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.lock.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.move` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.move`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.paste` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.paste`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.rename` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.rename`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.resize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.resize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.rotate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.rotate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.toggleVisibility` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.toggleVisibility`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.unlock` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.unlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.block.unlock.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.block.unlock.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.clip.add` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.clip.add`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.closeInspector` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.closeInspector`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.continue` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.continue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.crop.contentFillMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.crop.contentFillMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.crop.exit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.crop.exit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.crop.mirrorX` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.crop.mirrorX`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.crop.mirrorY` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.crop.mirrorY`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.crop.reset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.crop.reset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.crop.turn` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.crop.turn`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.crop.turnAndMirror` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.crop.turnAndMirror`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.cutoutOffset.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.cutoutOffset.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.cutoutSmoothing.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.cutoutSmoothing.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.cutoutType.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.cutoutType.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.distribute` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.distribute`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.distribute.horizontally` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.distribute.horizontally`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.distribute.horizontally.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.distribute.horizontally.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.distribute.vertically` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.distribute.vertically`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.distribute.vertically.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.distribute.vertically.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.editText` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.editText`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.effect.add` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.effect.add`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.effect.remove` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.effect.remove`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.enterGroup` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.enterGroup`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.fillType.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.fillType.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.filter.add` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.filter.add`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.filter.remove` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.filter.remove`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.gradient.addStop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.gradient.addStop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.gradient.removeStop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.gradient.removeStop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.group` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.group`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.blur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.blur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.crop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.crop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.effect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.effect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.filter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.filter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.inpainting` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.inpainting`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.matting` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.matting`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.matting.staging` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.matting.staging`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.replace` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.replace`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.smartCrop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.smartCrop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.smartImage` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.smartImage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.smartImage.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.smartImage.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.image.superResolution` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.image.superResolution`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.loop.disable` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.loop.disable`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.loop.enable` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.loop.enable`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.mute` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.mute`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.page.add` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.page.add`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.page.changeFormat` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.page.changeFormat`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.page.delete` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.page.delete`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.pageMove.down` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.pageMove.down`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.pageMove.down.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.pageMove.down.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.pageMove.left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.pageMove.left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.pageMove.left.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.pageMove.left.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.pageMove.right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.pageMove.right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.pageMove.right.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.pageMove.right.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.pageMove.up` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.pageMove.up`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.pageMove.up.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.pageMove.up.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.placeholder.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.placeholder.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.placeholder.create` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.placeholder.create`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.placeholder.remove` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.placeholder.remove`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.position` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.position`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.property.reset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.property.reset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.property.update` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.property.update`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.resize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.resize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.scene.load` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.scene.load`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.scene.new` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.scene.new`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.selectGroup` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.selectGroup`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.setAsClip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.setAsClip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.setAsOverlay` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.setAsOverlay`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.shadow.angle.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.shadow.angle.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.shadow.angle.rotate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.shadow.angle.rotate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.shadow.blur.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.shadow.blur.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.shadow.color.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.shadow.color.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.shadow.distance.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.shadow.distance.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.showInspector` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.showInspector`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.splitClip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.splitClip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.splitClip.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.splitClip.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.strokeCornerGeometry.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.strokeCornerGeometry.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.strokePosition.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.strokePosition.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.strokeStyle.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.strokeStyle.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.autoHeight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.autoHeight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.autoHeight.automatic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.autoHeight.automatic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.autoHeight.notification` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.autoHeight.notification`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.autoSize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.autoSize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.autoSize.automatic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.autoSize.automatic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.autoSize.notification` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.autoSize.notification`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.changeCase` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.changeCase`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.fixedFrame` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.fixedFrame`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.fixedFrame.automatic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.fixedFrame.automatic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.text.fixedFrame.notification` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.text.fixedFrame.notification`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.ungroup` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.ungroup`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.unmute` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.unmute`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.video.replace` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.video.replace`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.audio` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.audio`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.caption` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.caption`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.cutout` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.cutout`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.ellipse` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.ellipse`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.graphic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.graphic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.group` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.group`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.image` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.image`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.line` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.line`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.page` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.page`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.polygon` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.polygon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.rect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.rect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.scene` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.scene`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.star` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.star`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.sticker` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.sticker`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.vector_path` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.vector_path`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `block.video` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`block.video`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.aqua` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.aqua`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.black` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.black`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.blue` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.blue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.cyan` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.cyan`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.green` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.green`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.magenta` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.magenta`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.orange` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.orange`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.purple` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.purple`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.red` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.red`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.transparent` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.transparent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `color.yellow` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`color.yellow`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.add` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.add`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.advanced` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.advanced`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.arrange` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.arrange`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.axis.x` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.axis.x`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.axis.y` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.axis.y`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.back` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.back`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.cancel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.cancel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.close` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.close`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.cmyk` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.cmyk`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.colorValue` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.colorValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.confirm` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.confirm`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.controlKey` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.controlKey`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.shiftKey` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.shiftKey`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.altKey` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.altKey`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.custom` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.custom`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.defaultDuration` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.defaultDuration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.defaultDuration.inUnit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.defaultDuration.inUnit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.delete` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.delete`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.done` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.done`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.download` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.download`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.duplicate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.duplicate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.edit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.edit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.editColor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.editColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.export` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.export`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.fill` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.fill`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.formats` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.formats`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.height` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.height`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.height.inUnit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.height.inUnit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.hue` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.hue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.image` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.image`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.inch` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.inch`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.load` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.load`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.lock` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.lock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.millimeter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.millimeter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.mixed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.mixed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.mode.design` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.mode.design`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.mode.preview` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.mode.preview`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.mode.template` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.mode.template`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.more` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.more`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.nearestColorName` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.nearestColorName`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.off` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.off`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.on` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.on`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.opacity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.opacity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.page` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.page`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.pause` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.pause`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.pixel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.pixel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.pixelScale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.pixelScale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.placeholder` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.placeholder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.play` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.play`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.position` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.position`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.presets` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.presets`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.properties` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.properties`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.property` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.property`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.redo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.redo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.reloadPage` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.reloadPage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.replace` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.replace`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.reset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.reset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.resolution` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.resolution`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.role` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.role`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.role.adopter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.role.adopter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.role.creator` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.role.creator`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.role.presenter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.role.presenter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.role.viewer` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.role.viewer`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.rotateAndFlip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.rotateAndFlip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.rotation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.rotation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.rotation.inUnit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.rotation.inUnit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.save` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.save`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.select` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.select`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.size` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.size`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.spotColor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.spotColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.srgb` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.srgb`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.style` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.style`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.tint` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.tint`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.transform` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.transform`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.trim` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.trim`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.undo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.undo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.unit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.unit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.unit.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.unit.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.unlock` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.unlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.video` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.video`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.width` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.width`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `common.width.inUnit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`common.width.inUnit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.alignAndArrange` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.alignAndArrange`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetPanelAutoCloseSettings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetPanelAutoCloseSettings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetPanelAutoCloseSettings.false` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetPanelAutoCloseSettings.false`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetPanelAutoCloseSettings.false.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetPanelAutoCloseSettings.false.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetPanelAutoCloseSettings.true` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetPanelAutoCloseSettings.true`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetPanelAutoCloseSettings.true.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetPanelAutoCloseSettings.true.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetPanelFloatingSettings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetPanelFloatingSettings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetPanelFloatingSettings.fixed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetPanelFloatingSettings.fixed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetPanelFloatingSettings.fixed.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetPanelFloatingSettings.fixed.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetPanelFloatingSettings.floating` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetPanelFloatingSettings.floating`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetPanelFloatingSettings.floating.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetPanelFloatingSettings.floating.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetSettings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetSettings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetSettings.adjustments` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetSettings.adjustments`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetSettings.blur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetSettings.blur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetSettings.crop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetSettings.crop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetSettings.effects` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetSettings.effects`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetSettings.filters` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetSettings.filters`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetSettings.opacity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetSettings.opacity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetSettings.text.advanced` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetSettings.text.advanced`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetSettings.text.color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetSettings.text.color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.assetSettings.transform` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.assetSettings.transform`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.audio.properties` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.audio.properties`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.audio.source` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.audio.source`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.audio.trim` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.audio.trim`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.audio.trim.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.audio.trim.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.audio.trim.duration` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.audio.trim.duration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.audio.trim.duration.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.audio.trim.duration.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.audio.trim.play` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.audio.trim.play`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.audio.trim.play.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.audio.trim.play.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.canvas` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.canvas`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.canvas.openLibrary` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.canvas.openLibrary`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.canvas.state.error` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.canvas.state.error`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.canvas.state.unsupported` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.canvas.state.unsupported`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.caption` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.caption`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.caption.more` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.caption.more`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorPicker.colorItem` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorPicker.colorItem`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorPicker.colorItem.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorPicker.colorItem.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorPicker.colorItem.hexInput` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorPicker.colorItem.hexInput`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorPicker.colorItem.transparent` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorPicker.colorItem.transparent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorPicker.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorPicker.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorPicker.hsl.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorPicker.hsl.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorPicker.hueGradient` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorPicker.hueGradient`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorSchemeSelect.accent` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorSchemeSelect.accent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorSchemeSelect.accent.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorSchemeSelect.accent.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorSchemeSelect.active` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorSchemeSelect.active`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorSchemeSelect.active.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorSchemeSelect.active.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorSchemeSelect.background` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorSchemeSelect.background`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.colorSchemeSelect.background.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.colorSchemeSelect.background.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.contentFill` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.contentFill`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.contentFill.color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.contentFill.color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.contentFill.color.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.contentFill.color.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.contentFill.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.contentFill.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.contentFill.image` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.contentFill.image`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.contentFill.options` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.contentFill.options`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.contentFill.options.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.contentFill.options.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.contentFill.video` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.contentFill.video`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.cutout` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.cutout`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dnd.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dnd.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dnd.prompt` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dnd.prompt`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dockIconSizeSelect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dockIconSizeSelect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dockIconSizeSelect.large` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dockIconSizeSelect.large`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dockIconSizeSelect.large.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dockIconSizeSelect.large.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dockIconSizeSelect.normal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dockIconSizeSelect.normal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dockIconSizeSelect.normal.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dockIconSizeSelect.normal.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dockLabelVisibilityToggle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dockLabelVisibilityToggle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dockLabelVisibilityToggle.hide` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dockLabelVisibilityToggle.hide`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dockLabelVisibilityToggle.hide.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dockLabelVisibilityToggle.hide.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dockLabelVisibilityToggle.show` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dockLabelVisibilityToggle.show`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.dockLabelVisibilityToggle.show.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.dockLabelVisibilityToggle.show.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.fileOperation.archiveScene` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.fileOperation.archiveScene`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.fileOperation.exportImage` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.fileOperation.exportImage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.fileOperation.exportPDF` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.fileOperation.exportPDF`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.fileOperation.exportScene` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.fileOperation.exportScene`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.fileOperation.exportVideo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.fileOperation.exportVideo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.fileOperation.importArchive` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.fileOperation.importArchive`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.fileOperation.importScene` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.fileOperation.importScene`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.fileOperation.more` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.fileOperation.more`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.fileOperation.save` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.fileOperation.save`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.fileOperation.share` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.fileOperation.share`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorBar` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorBar`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorPanelFloatingSettings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorPanelFloatingSettings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorPanelFloatingSettings.fixed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorPanelFloatingSettings.fixed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorPanelFloatingSettings.fixed.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorPanelFloatingSettings.fixed.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorPanelFloatingSettings.floating` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorPanelFloatingSettings.floating`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorPanelFloatingSettings.floating.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorPanelFloatingSettings.floating.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorPositionSelect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorPositionSelect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorPositionSelect.left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorPositionSelect.left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorPositionSelect.left.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorPositionSelect.left.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorPositionSelect.right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorPositionSelect.right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.inspectorPositionSelect.right.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.inspectorPositionSelect.right.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.languageSelect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.languageSelect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.languageSelect.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.languageSelect.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.addFile` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.addFile`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.breadcrumbRoot` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.breadcrumbRoot`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.clearSearch` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.clearSearch`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.elements` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.elements`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.enterSection` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.enterSection`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.error` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.error`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.loading` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.loading`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.noItems` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.noItems`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.noMoreItems` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.noMoreItems`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.removeAssetConfirmation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.removeAssetConfirmation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.removeAssetConfirmation.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.removeAssetConfirmation.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.library.searchPlaceholder` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.library.searchPlaceholder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.librarySettings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.librarySettings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.librarySettings.elementLibrary` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.librarySettings.elementLibrary`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.librarySettings.imageLibrary` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.librarySettings.imageLibrary`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.librarySettings.templateLibrary` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.librarySettings.templateLibrary`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.librarySettings.textLibrary` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.librarySettings.textLibrary`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.librarySettings.uploadLibrary` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.librarySettings.uploadLibrary`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageResize.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageResize.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageResizePanel.apply` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageResizePanel.apply`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageResizePanel.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageResizePanel.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageSettings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageSettings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageSettings.format` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageSettings.format`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageSettings.manage` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageSettings.manage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleAppendPageNameToggle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleAppendPageNameToggle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleAppendPageNameToggle.hide` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleAppendPageNameToggle.hide`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleAppendPageNameToggle.hide.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleAppendPageNameToggle.hide.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleAppendPageNameToggle.show` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleAppendPageNameToggle.show`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleAppendPageNameToggle.show.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleAppendPageNameToggle.show.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleDefaultTitleVisibilityToggle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleDefaultTitleVisibilityToggle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleDefaultTitleVisibilityToggle.hide` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleDefaultTitleVisibilityToggle.hide`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleDefaultTitleVisibilityToggle.hide.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleDefaultTitleVisibilityToggle.hide.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleDefaultTitleVisibilityToggle.show` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleDefaultTitleVisibilityToggle.show`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleDefaultTitleVisibilityToggle.show.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleDefaultTitleVisibilityToggle.show.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleShowOnSinglePageToggle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleShowOnSinglePageToggle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleShowOnSinglePageToggle.hide` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleShowOnSinglePageToggle.hide`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleShowOnSinglePageToggle.hide.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleShowOnSinglePageToggle.hide.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleShowOnSinglePageToggle.show` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleShowOnSinglePageToggle.show`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleShowOnSinglePageToggle.show.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleShowOnSinglePageToggle.show.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleVisibilityToggle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleVisibilityToggle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleVisibilityToggle.hide` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleVisibilityToggle.hide`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleVisibilityToggle.hide.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleVisibilityToggle.hide.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleVisibilityToggle.show` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleVisibilityToggle.show`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.pageTitleVisibilityToggle.show.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.pageTitleVisibilityToggle.show.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.appearance` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.appearance`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.appearance.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.appearance.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.arrange` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.arrange`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.arrange.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.arrange.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.audio` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.audio`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.audio.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.audio.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.create` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.create`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.disableAll` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.disableAll`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.enableAll` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.enableAll`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.fill` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.fill`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.fill.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.fill.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.general` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.general`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.general.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.general.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.settings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.settings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.settingsMenu` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.settingsMenu`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.shape` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.shape`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.shape.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.shape.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.stroke` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.stroke`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.stroke.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.stroke.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.placeholder.text.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.placeholder.text.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.propertyPopover.header` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.propertyPopover.header`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.replacePanelAutoCloseSettings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.replacePanelAutoCloseSettings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.replacePanelAutoCloseSettings.false` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.replacePanelAutoCloseSettings.false`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.replacePanelAutoCloseSettings.false.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.replacePanelAutoCloseSettings.false.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.replacePanelAutoCloseSettings.true` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.replacePanelAutoCloseSettings.true`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.replacePanelAutoCloseSettings.true.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.replacePanelAutoCloseSettings.true.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.replacePanelFloatingSettings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.replacePanelFloatingSettings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.replacePanelFloatingSettings.fixed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.replacePanelFloatingSettings.fixed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.replacePanelFloatingSettings.fixed.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.replacePanelFloatingSettings.fixed.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.replacePanelFloatingSettings.floating` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.replacePanelFloatingSettings.floating`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.replacePanelFloatingSettings.floating.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.replacePanelFloatingSettings.floating.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.roleSelect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.roleSelect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.roleSelect.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.roleSelect.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.scalingSelect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.scalingSelect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.scalingSelect.large` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.scalingSelect.large`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.scalingSelect.large.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.scalingSelect.large.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.scalingSelect.normal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.scalingSelect.normal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.scalingSelect.normal.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.scalingSelect.normal.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settings.toggle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settings.toggle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settings.toggle.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settings.toggle.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.appearance` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.appearance`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.assetPanel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.assetPanel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.dock` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.dock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.documentation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.documentation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.general` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.general`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.header` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.header`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.inspectorPanel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.inspectorPanel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.page` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.page`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.pageLabel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.pageLabel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.replacePanel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.replacePanel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.singlePageMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.singlePageMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.settingsPanel.singlePageVisibilitySelect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.settingsPanel.singlePageVisibilitySelect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.themeSelect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.themeSelect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.themeSelect.dark` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.themeSelect.dark`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.themeSelect.dark.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.themeSelect.dark.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.themeSelect.dialog` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.themeSelect.dialog`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.themeSelect.dialog.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.themeSelect.dialog.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.themeSelect.generate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.themeSelect.generate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.themeSelect.light` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.themeSelect.light`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.themeSelect.light.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.themeSelect.light.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.themeSelect.system` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.themeSelect.system`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.themeSelect.system.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.themeSelect.system.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.audio.options.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.audio.options.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.collapse` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.collapse`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.expand` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.expand`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.pause.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.pause.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.play.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.play.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.scale.down` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.scale.down`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.scale.down.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.scale.down.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.scale.fit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.scale.fit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.scale.fit.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.scale.fit.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.scale.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.scale.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.scale.up` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.scale.up`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.scale.up.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.scale.up.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.timeline.video.options.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.timeline.video.options.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.topbar.back` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.topbar.back`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.topbar.close` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.topbar.close`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.undo.redo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.undo.redo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.undo.undo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.undo.undo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.video.properties` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.video.properties`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.video.source` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.video.source`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.video.trim` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.video.trim`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.video.trim.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.video.trim.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.video.trim.duration` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.video.trim.duration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.video.trim.duration.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.video.trim.duration.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.video.trim.play` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.video.trim.play`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.video.trim.play.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.video.trim.play.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.video.unsupported` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.video.unsupported`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.video.unsupported.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.video.unsupported.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.viewSelect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.viewSelect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.viewSelect.advanced` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.viewSelect.advanced`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.viewSelect.advanced.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.viewSelect.advanced.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.viewSelect.default` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.viewSelect.default`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.viewSelect.default.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.viewSelect.default.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.welcome.text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.welcome.text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.zoom.autoFit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.zoom.autoFit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.zoom.fitPage` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.zoom.fitPage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.zoom.fitSelection` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.zoom.fitSelection`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.zoom.in` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.zoom.in`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.zoom.label.auto` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.zoom.label.auto`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.zoom.options` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.zoom.options`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.zoom.out` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.zoom.out`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.zoom.shortcut` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.zoom.shortcut`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.zoom.to` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.zoom.to`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `dialog.export.abort.message` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`dialog.export.abort.message`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `dialog.export.abort.title` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`dialog.export.abort.title`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `dialog.export.action` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`dialog.export.action`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `dialog.export.error.message.1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`dialog.export.error.message.1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `dialog.export.error.message.2` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`dialog.export.error.message.2`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `dialog.export.error.title` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`dialog.export.error.title`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `dialog.export.message` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`dialog.export.message`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `dialog.export.success.message` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`dialog.export.success.message`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `dialog.export.success.title` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`dialog.export.success.title`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `dialog.export.title` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`dialog.export.title`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `editor.scope.canvas` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`editor.scope.canvas`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `editor.scope.global` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`editor.scope.global`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `editor.scope.videoTimeline` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`editor.scope.videoTimeline`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `element.transform.resize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`element.transform.resize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `element.transform.rotate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`element.transform.rotate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.applyAsset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.applyAsset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.applyAsset.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.applyAsset.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.booleanOperation.effectlessDifference` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.booleanOperation.effectlessDifference`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.booleanOperation.effectlessDifference.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.booleanOperation.effectlessDifference.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.booleanOperation.effectlessUnion` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.booleanOperation.effectlessUnion`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.booleanOperation.effectlessUnion.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.booleanOperation.effectlessUnion.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.booleanOperation.emptyShape` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.booleanOperation.emptyShape`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.booleanOperation.emptyShape.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.booleanOperation.emptyShape.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.cta.generic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.cta.generic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.cta.generic.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.cta.generic.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.generic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.generic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.generic.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.generic.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.replaceAsset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.replaceAsset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.replaceAsset.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.replaceAsset.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.upload` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.upload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.upload.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.upload.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `error.upload.sizeExceeded` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`error.upload.sizeExceeded`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.adjustments` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.adjustments`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.adjustments.basic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.adjustments.basic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.adjustments.refinements` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.adjustments.refinements`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.adjustments.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.adjustments.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.alwaysOnBottom` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.alwaysOnBottom`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.alwaysOnTop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.alwaysOnTop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.animations` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.animations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.animations.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.animations.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.appearance` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.appearance`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.aspectLock` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.aspectLock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.aspectLock.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.aspectLock.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.audio.duration.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.audio.duration.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.audio.duration.reset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.audio.duration.reset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.audio.mute` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.audio.mute`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.bleedMargin.select` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.bleedMargin.select`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.blur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.blur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.blur.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.blur.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.booleanoperations` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.booleanoperations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.booleanoperations.exclude` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.booleanoperations.exclude`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.booleanoperations.intersect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.booleanoperations.intersect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.booleanoperations.subtract` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.booleanoperations.subtract`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.booleanoperations.union` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.booleanoperations.union`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.canvas` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.canvas`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.add` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.add`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.addAfter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.addAfter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.content` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.content`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.create` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.create`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.delete` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.delete`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.deleteAll` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.deleteAll`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.edit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.edit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.file` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.file`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.hideTimings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.hideTimings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.import` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.import`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.import.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.import.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.import.error.message` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.import.error.message`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.import.error.title` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.import.error.title`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.in` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.in`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.inputLabel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.inputLabel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.mergePrevious` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.mergePrevious`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.more` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.more`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.out` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.out`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.showTimings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.showTimings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.caption.style` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.caption.style`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.character` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.character`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.clipContent` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.clipContent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.clipContent.off.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.clipContent.off.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.clipContent.on.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.clipContent.on.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.clipLines` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.clipLines`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.clipLines.off.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.clipLines.off.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.clipLines.on.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.clipLines.on.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.colorMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.colorMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.colorMode.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.colorMode.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.cutoutOffset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.cutoutOffset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.cutoutSmoothing` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.cutoutSmoothing`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.cutoutType` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.cutoutType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.cutoutType.dashed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.cutoutType.dashed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.cutoutType.solid` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.cutoutType.solid`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.duration` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.duration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.duration.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.duration.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.effect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.effect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.effect.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.effect.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.export` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.export`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.filter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.filter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.filter.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.filter.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.fontSelect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.fontSelect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.fontSelect.fallback` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.fontSelect.fallback`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.fontSize.select` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.fontSize.select`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.fontSize.selectMax` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.fontSize.selectMax`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.fontSize.selectMin` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.fontSize.selectMin`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.fontStyle.toggle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.fontStyle.toggle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.gradient.activateColorStop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.gradient.activateColorStop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.gradient.colorPosition` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.gradient.colorPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.gradient.colorStop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.gradient.colorStop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.gradient.colorStop.active` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.gradient.colorStop.active`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.gradient.colorStop.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.gradient.colorStop.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.gradient.flip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.gradient.flip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.gradient.gradientAngle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.gradient.gradientAngle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.gradient.rotate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.gradient.rotate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.hspSelectiveAdjustments` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.hspSelectiveAdjustments`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.insertVariable` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.insertVariable`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.keyShortcut` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.keyShortcut`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.layer` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.layer`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.multiSelection.notice` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.multiSelection.notice`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.multiSelection.title` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.multiSelection.title`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.opacity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.opacity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.opacity.options` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.opacity.options`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.options` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.options`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.options.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.options.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.page.titleTemplate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.page.titleTemplate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.pages` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.pages`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.preset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.preset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.preset.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.preset.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.preset.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.preset.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.propertyToggle.disable` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.propertyToggle.disable`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.propertyToggle.enable` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.propertyToggle.enable`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.propertyToggle.hidden` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.propertyToggle.hidden`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.propertyToggle.visible` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.propertyToggle.visible`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.rename` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.rename`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.resolution.select` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.resolution.select`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.selection` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.selection`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shadow.angle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shadow.angle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shadow.angle.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shadow.angle.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shadow.blur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shadow.blur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shadow.blur.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shadow.blur.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shadow.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shadow.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shadow.distance` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shadow.distance`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shadow.distance.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shadow.distance.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shadow.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shadow.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shadow.valueLabel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shadow.valueLabel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shape` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shape`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.shape.options` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.shape.options`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.showInExport` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.showInExport`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.sliderInput.toggleNumberInput` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.sliderInput.toggleNumberInput`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.stroke` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.stroke`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.text.advanced` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.text.advanced`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.text.advanced.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.text.advanced.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.text.placeholder` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.text.placeholder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.time.end` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.time.end`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.time.start` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.time.start`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.transform` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.transform`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.transform.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.transform.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.typefaceSelect.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.typefaceSelect.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.typefaceSelect.noResults` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.typefaceSelect.noResults`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.typefaceSelect.search` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.typefaceSelect.search`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.typefaceSelect.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.typefaceSelect.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.unit.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.unit.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.uploadAudio` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.uploadAudio`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.uploadFiles` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.uploadFiles`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.uploadImage` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.uploadImage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.uploadVideo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.uploadVideo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.video` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.video`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.video.duration.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.video.duration.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `input.video.duration.reset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.video.duration.reset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.animations.ly.img.animations.in.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.animations.ly.img.animations.in.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.animations.ly.img.animations.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.animations.ly.img.animations.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.animations.ly.img.animations.loop.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.animations.ly.img.animations.loop.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.animations.ly.img.animations.out.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.animations.ly.img.animations.out.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.audio.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.audio.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.audio.upload.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.audio.upload.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.colors.defaultPalette.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.colors.defaultPalette.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.colors.documentColors.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.colors.documentColors.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.crop.presets.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.crop.presets.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.image.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.image.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.image.upload.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.image.upload.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.local.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.local.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.facebook.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.facebook.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.hd-video.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.hd-video.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.instagram.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.instagram.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.iso-standard-print.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.iso-standard-print.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.linkedIn.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.linkedIn.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.north-american-print.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.north-american-print.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.other-print.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.other-print.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.pinterest.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.pinterest.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.tiktok.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.tiktok.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.video.facebook.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.video.facebook.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.video.hd-video.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.video.hd-video.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.video.instagram.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.video.instagram.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.video.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.video.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.video.linkedIn.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.video.linkedIn.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.video.pinterest.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.video.pinterest.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.video.tiktok.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.video.tiktok.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.video.x.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.video.x.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.video.youtube.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.video.youtube.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.x.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.x.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.page.presets.youtube.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.page.presets.youtube.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.sticker.3Dstickers.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.sticker.3Dstickers.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.sticker.craft.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.sticker.craft.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.sticker.doodle.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.sticker.doodle.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.sticker.emoji.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.sticker.emoji.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.sticker.emoticons.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.sticker.emoticons.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.sticker.hand.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.sticker.hand.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.sticker.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.sticker.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.sticker.marker.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.sticker.marker.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.sticker.sketches.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.sticker.sketches.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.template.confirmation.abort` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.template.confirmation.abort`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.template.confirmation.body` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.template.confirmation.body`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.template.confirmation.confirm` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.template.confirmation.confirm`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.template.confirmation.headline` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.template.confirmation.headline`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.template.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.template.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.text.headline.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.text.headline.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.text.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.text.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.text.paragraph.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.text.paragraph.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.text.title.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.text.title.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.textAnimations.ly.img.animations.in.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.textAnimations.ly.img.animations.in.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.textAnimations.ly.img.animations.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.textAnimations.ly.img.animations.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.textAnimations.ly.img.animations.loop.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.textAnimations.ly.img.animations.loop.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.textAnimations.ly.img.animations.out.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.textAnimations.ly.img.animations.out.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.textComponents.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.textComponents.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.upload.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.upload.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vectorpath.abstract-filled.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vectorpath.abstract-filled.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vectorpath.abstract-gradient.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vectorpath.abstract-gradient.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vectorpath.abstract-image.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vectorpath.abstract-image.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vectorpath.abstract-outline.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vectorpath.abstract-outline.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vectorpath.filled.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vectorpath.filled.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vectorpath.gradient.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vectorpath.gradient.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vectorpath.image.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vectorpath.image.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vectorpath.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vectorpath.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vectorpath.outline.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vectorpath.outline.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.video.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.video.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.video.template.confirmation.abort` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.video.template.confirmation.abort`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.video.template.confirmation.body` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.video.template.confirmation.body`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.video.template.confirmation.confirm` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.video.template.confirmation.confirm`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.video.template.confirmation.headline` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.video.template.confirmation.headline`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.video.template.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.video.template.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.video.upload.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.video.upload.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.unsplash.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.unsplash.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `meta.currentLanguage` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`meta.currentLanguage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `notification.redo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`notification.redo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `notification.undo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`notification.undo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.american-legal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.american-legal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.american-letter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.american-letter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.business-card` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.business-card`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.custom` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.custom`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.din-a0` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.din-a0`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.din-a1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.din-a1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.din-a2` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.din-a2`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.din-a3` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.din-a3`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.din-a4` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.din-a4`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.din-a5` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.din-a5`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.din-a6` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.din-a6`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.din-a65` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.din-a65`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.din-b5` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.din-b5`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.format2k` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.format2k`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.format4k` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.format4k`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.fullhd` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.fullhd`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.hd` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.hd`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.instagram-photo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.instagram-photo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.instagram-profile` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.instagram-profile`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.instagram-story` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.instagram-story`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.qhd` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.qhd`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.social-feed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.social-feed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.social-story` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.social-story`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.square` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.square`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.twitter-header` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.twitter-header`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.twitter-image` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.twitter-image`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.document.twitter-profile` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.document.twitter-profile`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.template.blank_1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.template.blank_1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.template.business_card_1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.template.business_card_1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.template.collage_1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.template.collage_1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.template.instagram_photo_1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.template.instagram_photo_1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.template.instagram_story_1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.template.instagram_story_1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.template.postcard_1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.template.postcard_1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.template.postcard_2` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.template.postcard_2`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.template.poster_1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.template.poster_1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `preset.template.presentation_4` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`preset.template.presentation_4`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.blacks` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.blacks`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.brightness` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.brightness`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.clarity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.clarity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.contrast` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.contrast`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.exposure` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.exposure`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.gamma` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.gamma`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.highlights` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.highlights`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.saturation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.saturation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.shadows` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.shadows`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.sharpness` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.sharpness`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.temperature` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.temperature`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.adjustments.whites` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.adjustments.whites`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.baseline` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.baseline`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.baseline.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.baseline.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.baseline.direction.Down` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.baseline.direction.Down`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.baseline.direction.Left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.baseline.direction.Left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.baseline.direction.Right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.baseline.direction.Right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.baseline.direction.Up` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.baseline.direction.Up`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.block_swipe_text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.block_swipe_text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.block_swipe_text.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.block_swipe_text.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.block_swipe_text.direction.Down` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.block_swipe_text.direction.Down`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.block_swipe_text.direction.Left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.block_swipe_text.direction.Left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.block_swipe_text.direction.Right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.block_swipe_text.direction.Right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.block_swipe_text.direction.Up` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.block_swipe_text.direction.Up`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.block_swipe_text.useTextColor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.block_swipe_text.useTextColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.blur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.blur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.blur.fade` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.blur.fade`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.blur.intensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.blur.intensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.blur_loop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.blur_loop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.blur_loop.intensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.blur_loop.intensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.breathing_loop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.breathing_loop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.breathing_loop.intensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.breathing_loop.intensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.crop_zoom` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.crop_zoom`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.crop_zoom.fade` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.crop_zoom.fade`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.crop_zoom.scale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.crop_zoom.scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.fade` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.fade`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.fade_loop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.fade_loop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.grow` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.grow`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.grow.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.grow.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.grow.direction.All` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.grow.direction.All`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.grow.direction.Horizontal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.grow.direction.Horizontal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.grow.direction.Vertical` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.grow.direction.Vertical`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.jump_loop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.jump_loop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.jump_loop.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.jump_loop.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.jump_loop.direction.Down` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.jump_loop.direction.Down`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.jump_loop.direction.Left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.jump_loop.direction.Left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.jump_loop.direction.Right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.jump_loop.direction.Right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.jump_loop.direction.Up` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.jump_loop.direction.Up`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.jump_loop.intensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.jump_loop.intensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.ken_burns` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.ken_burns`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.ken_burns.cropScale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.ken_burns.cropScale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.ken_burns.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.ken_burns.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.ken_burns.direction.Down` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.ken_burns.direction.Down`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.ken_burns.direction.Left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.ken_burns.direction.Left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.ken_burns.direction.Right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.ken_burns.direction.Right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.ken_burns.direction.Up` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.ken_burns.direction.Up`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.ken_burns.fade` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.ken_burns.fade`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.ken_burns.travelDistanceRatio` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.ken_burns.travelDistanceRatio`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.ken_burns.zoomIntensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.ken_burns.zoomIntensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.merge_text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.merge_text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.merge_text.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.merge_text.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.merge_text.direction.Left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.merge_text.direction.Left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.merge_text.direction.Right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.merge_text.direction.Right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.merge_text.intensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.merge_text.intensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.none` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.none`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pan` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pan`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pan.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pan.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pan.direction.Down` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pan.direction.Down`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pan.direction.Left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pan.direction.Left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pan.direction.Right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pan.direction.Right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pan.direction.Up` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pan.direction.Up`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pan.distance` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pan.distance`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pan.fade` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pan.fade`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pulsating_loop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pulsating_loop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.pulsating_loop.intensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.pulsating_loop.intensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.slide` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.slide`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.slide.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.slide.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.slide.direction.Down` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.slide.direction.Down`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.slide.direction.Left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.slide.direction.Left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.slide.direction.Right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.slide.direction.Right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.slide.direction.Up` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.slide.direction.Up`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.slide.distance` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.slide.distance`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.slide.fade` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.slide.fade`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spin` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spin`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spin.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spin.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spin.direction.Clockwise` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spin.direction.Clockwise`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spin.direction.CounterClockwise` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spin.direction.CounterClockwise`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spin.fade` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spin.fade`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spin.intensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spin.intensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spin_loop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spin_loop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spin_loop.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spin_loop.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spin_loop.direction.Clockwise` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spin_loop.direction.Clockwise`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spin_loop.direction.CounterClockwise` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spin_loop.direction.CounterClockwise`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spread_text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spread_text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spread_text.fade` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spread_text.fade`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.spread_text.intensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.spread_text.intensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.squeeze_loop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.squeeze_loop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.sway_loop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.sway_loop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.sway_loop.intensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.sway_loop.intensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.typewriter_text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.typewriter_text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.typewriter_text.writingStyle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.typewriter_text.writingStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.typewriter_text.writingStyle.Character` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.typewriter_text.writingStyle.Character`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.typewriter_text.writingStyle.Word` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.typewriter_text.writingStyle.Word`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.wipe` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.wipe`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.wipe.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.wipe.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.wipe.direction.Down` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.wipe.direction.Down`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.wipe.direction.Left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.wipe.direction.Left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.wipe.direction.Right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.wipe.direction.Right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.wipe.direction.Up` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.wipe.direction.Up`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.zoom` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.zoom`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.zoom.fade` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.zoom.fade`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing.EaseInBack` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing.EaseInBack`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing.EaseInOutBack` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing.EaseInOutBack`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing.EaseInOutQuint` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing.EaseInOutQuint`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing.EaseInOutSpring` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing.EaseInOutSpring`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing.EaseInQuint` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing.EaseInQuint`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing.EaseInSpring` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing.EaseInSpring`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing.EaseOutBack` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing.EaseOutBack`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing.EaseOutQuint` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing.EaseOutQuint`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing.EaseOutSpring` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing.EaseOutSpring`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animationEasing.Linear` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animationEasing.Linear`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.autoSize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.autoSize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.autoSize.autoHeight.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.autoSize.autoHeight.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.autoSize.autoSize.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.autoSize.autoSize.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.autoSize.fixedFrame.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.autoSize.fixedFrame.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.backgroundColor.color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.backgroundColor.color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.backgroundColor.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.backgroundColor.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.bleedMargin` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.bleedMargin`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.ColorBurn` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.ColorBurn`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.ColorDodge` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.ColorDodge`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Darken` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Darken`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.DarkenColor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.DarkenColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Difference` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Difference`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Divide` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Divide`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Exclusion` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Exclusion`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.HardLight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.HardLight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.HardMix` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.HardMix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Hue` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Hue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Lighten` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Lighten`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.LightenColor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.LightenColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.LinearBurn` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.LinearBurn`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.LinearDodge` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.LinearDodge`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.LinearLight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.LinearLight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Luminosity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Luminosity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Multiply` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Multiply`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Normal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Normal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Overlay` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Overlay`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.PassThrough` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.PassThrough`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.PinLight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.PinLight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Saturation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Saturation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Screen` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Screen`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.SoftLight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.SoftLight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.Subtract` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.Subtract`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.VividLight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.VividLight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blendMode.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blendMode.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.extrudeBlur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.extrudeBlur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.extrudeBlur.amount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.extrudeBlur.amount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.linearBlur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.linearBlur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.linearBlur.blurRadius` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.linearBlur.blurRadius`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.linearBlur.x1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.linearBlur.x1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.linearBlur.x2` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.linearBlur.x2`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.linearBlur.y1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.linearBlur.y1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.linearBlur.y2` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.linearBlur.y2`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.mirroredBlur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.mirroredBlur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.mirroredBlur.blurRadius` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.mirroredBlur.blurRadius`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.mirroredBlur.gradientSize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.mirroredBlur.gradientSize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.mirroredBlur.size` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.mirroredBlur.size`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.mirroredBlur.x1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.mirroredBlur.x1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.mirroredBlur.x2` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.mirroredBlur.x2`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.mirroredBlur.y1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.mirroredBlur.y1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.mirroredBlur.y2` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.mirroredBlur.y2`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.radialBlur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.radialBlur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.radialBlur.blurRadius` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.radialBlur.blurRadius`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.radialBlur.gradientRadius` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.radialBlur.gradientRadius`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.radialBlur.radius` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.radialBlur.radius`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.radialBlur.x` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.radialBlur.x`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.radialBlur.y` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.radialBlur.y`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.uniformBlur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.uniformBlur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.blur.uniformBlur.intensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.blur.uniformBlur.intensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.caption.scale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.caption.scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.color.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.color.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.cornerRadius` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.cornerRadius`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillMode.contain` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillMode.contain`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillMode.cover` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillMode.cover`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillMode.crop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillMode.crop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillMode.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillMode.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.offset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.offset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.offset.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.offset.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.scale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.scale.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.scale.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.size` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.size`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.size.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.size.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.straighten` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.straighten`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.transform` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.transform`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.dropShadow.color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.dropShadow.color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.duoToneFilterIntensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.duoToneFilterIntensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.duotoneFilter.breezy` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.duotoneFilter.breezy`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.duotoneFilter.clash` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.duotoneFilter.clash`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.duotoneFilter.deepblue` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.duotoneFilter.deepblue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.duotoneFilter.desert` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.duotoneFilter.desert`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.duotoneFilter.frog` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.duotoneFilter.frog`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.duotoneFilter.peach` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.duotoneFilter.peach`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.duotoneFilter.plum` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.duotoneFilter.plum`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.duotoneFilter.sunset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.duotoneFilter.sunset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.crossCut` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.crossCut`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.crossCut.offset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.crossCut.offset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.crossCut.slices` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.crossCut.slices`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.crossCut.speedV` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.crossCut.speedV`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.crossCut.time` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.crossCut.time`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.dotPattern` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.dotPattern`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.dotPattern.blur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.dotPattern.blur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.dotPattern.dots` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.dotPattern.dots`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.dotPattern.size` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.dotPattern.size`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.extrudeBlur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.extrudeBlur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.extrudeBlur.amount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.extrudeBlur.amount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.glow` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.glow`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.glow.amount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.glow.amount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.glow.darkness` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.glow.darkness`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.glow.size` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.glow.size`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.greenScreen` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.greenScreen`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.greenScreen.colorMatch` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.greenScreen.colorMatch`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.greenScreen.fromColor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.greenScreen.fromColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.greenScreen.fromColor.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.greenScreen.fromColor.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.greenScreen.smoothness` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.greenScreen.smoothness`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.greenScreen.spill` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.greenScreen.spill`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.halfTone` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.halfTone`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.halfTone.angle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.halfTone.angle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.halfTone.scale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.halfTone.scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.joggle.amount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.joggle.amount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.joggle.time` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.joggle.time`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.linocut` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.linocut`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.linocut.scale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.linocut.scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.liquid` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.liquid`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.liquid.amount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.liquid.amount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.liquid.scale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.liquid.scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.liquid.speed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.liquid.speed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.liquid.time` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.liquid.time`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.mirror` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.mirror`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.mirror.side` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.mirror.side`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.outliner` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.outliner`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.outliner.amount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.outliner.amount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.outliner.passthrough` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.outliner.passthrough`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.pixelize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.pixelize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.pixelize.horizontalPixelSize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.pixelize.horizontalPixelSize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.pixelize.verticalPixelSize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.pixelize.verticalPixelSize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.posterize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.posterize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.posterize.levels` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.posterize.levels`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.psychedelic.amount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.psychedelic.amount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.psychedelic.offset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.psychedelic.offset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.psychedelic.time` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.psychedelic.time`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.radialPixel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.radialPixel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.radialPixel.radius` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.radialPixel.radius`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.radialPixel.segments` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.radialPixel.segments`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.radiate.centerBrightness` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.radiate.centerBrightness`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.radiate.colorize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.radiate.colorize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.radiate.powerCurve` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.radiate.powerCurve`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.recolor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.recolor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.recolor.brightnessMatch` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.recolor.brightnessMatch`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.recolor.colorMatch` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.recolor.colorMatch`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.recolor.fromColor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.recolor.fromColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.recolor.fromColor.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.recolor.fromColor.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.recolor.smoothness` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.recolor.smoothness`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.recolor.toColor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.recolor.toColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.recolor.toColor.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.recolor.toColor.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.scanlines.count` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.scanlines.count`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.scanlines.linesAmount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.scanlines.linesAmount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.scanlines.noiseAmount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.scanlines.noiseAmount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.scanlines.time` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.scanlines.time`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.separate.amount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.separate.amount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.separate.time` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.separate.time`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.sharpie` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.sharpie`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.shifter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.shifter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.shifter.amount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.shifter.amount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.shifter.angle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.shifter.angle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.tiltShift` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.tiltShift`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.tiltShift.amount` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.tiltShift.amount`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.tiltShift.position` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.tiltShift.position`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.tvGlitch` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.tvGlitch`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.tvGlitch.distortion` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.tvGlitch.distortion`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.tvGlitch.distortion2` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.tvGlitch.distortion2`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.tvGlitch.rollSpeed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.tvGlitch.rollSpeed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.tvGlitch.speed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.tvGlitch.speed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.tvGlitch.time` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.tvGlitch.time`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.vignette` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.vignette`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.vignette.darkness` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.vignette.darkness`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.vignette.offset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.vignette.offset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.waves.size` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.waves.size`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.waves.speed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.waves.speed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.waves.strength` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.waves.strength`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.effect.waves.time` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.effect.waves.time`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.fill` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.fill`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.fill.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.fill.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.fill.solid.color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.fill.solid.color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.fillType` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.fillType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.fillType.gradient` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.fillType.gradient`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.fillType.gradient.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.fillType.gradient.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.fillType.solid` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.fillType.solid`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.fillType.solid.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.fillType.solid.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.flip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.flip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.flip.x` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.flip.x`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.flip.y` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.flip.y`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.gradientType.conical` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.gradientType.conical`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.gradientType.linear` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.gradientType.linear`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.gradientType.radial` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.gradientType.radial`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.hspSelectiveAdjustments.hue` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.hspSelectiveAdjustments.hue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.hspSelectiveAdjustments.perceivedBrightness` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.hspSelectiveAdjustments.perceivedBrightness`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.hspSelectiveAdjustments.saturation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.hspSelectiveAdjustments.saturation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.innerDiameter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.innerDiameter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.layout` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.layout`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.layout.horizontal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.layout.horizontal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.layout.vertical` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.layout.vertical`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.letterSpacing` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.letterSpacing`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lineHeight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lineHeight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lineWidth` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lineWidth`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lineWidth.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lineWidth.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.ad1920` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.ad1920`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.ancient` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.ancient`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.bleached` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.bleached`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.bleachedblue` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.bleachedblue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.blues` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.blues`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.blueshadows` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.blueshadows`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.breeze` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.breeze`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.bw` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.bw`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.celsius` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.celsius`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.chest` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.chest`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.classic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.classic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.colorful` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.colorful`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.cool` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.cool`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.cottoncandy` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.cottoncandy`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.creamy` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.creamy`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.eighties` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.eighties`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.elder` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.elder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.evening` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.evening`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.fall` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.fall`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.fixie` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.fixie`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.food` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.food`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.fridge` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.fridge`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.front` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.front`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.glam` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.glam`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.gobblin` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.gobblin`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.highcarb` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.highcarb`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.highcontrast` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.highcontrast`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.k1` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.k1`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.k2` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.k2`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.k6` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.k6`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.kdynamic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.kdynamic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.keen` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.keen`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.lenin` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.lenin`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.litho` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.litho`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.lomo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.lomo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.lomo100` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.lomo100`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.lucid` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.lucid`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.mellow` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.mellow`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.neat` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.neat`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.nogreen` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.nogreen`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.orchid` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.orchid`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.pale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.pale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.pitched` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.pitched`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.plate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.plate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.pola669` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.pola669`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.polasx` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.polasx`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.pro400` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.pro400`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.quozi` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.quozi`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.sepiahigh` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.sepiahigh`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.settled` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.settled`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.seventies` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.seventies`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.sin` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.sin`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.soft` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.soft`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.steel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.steel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.summer` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.summer`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.sunset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.sunset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.tender` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.tender`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.texas` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.texas`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.twilight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.twilight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.winter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.winter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilter.x400` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.x400`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.lutFilterIntensity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilterIntensity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.opacity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.opacity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.orientation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.orientation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.orientation.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.orientation.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.orientation.flip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.orientation.flip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.orientation.landscape` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.orientation.landscape`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.orientation.portrait` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.orientation.portrait`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.orientation.select.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.orientation.select.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.orientation.square` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.orientation.square`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.outlineColor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.outlineColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.outlineWidth` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.outlineWidth`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.paragraphSpacing` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.paragraphSpacing`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.placeholderBehavior.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.placeholderBehavior.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.placeholderBehavior.text.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.placeholderBehavior.text.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.placeholderBehavior.graphic.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.placeholderBehavior.graphic.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.playback.duration` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.playback.duration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.points` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.points`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.position` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.position`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.position.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.position.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.sides` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.sides`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeColor` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeColor.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeColor.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeCornerGeometry` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeCornerGeometry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeCornerGeometry.bevel` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeCornerGeometry.bevel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeCornerGeometry.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeCornerGeometry.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeCornerGeometry.miter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeCornerGeometry.miter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeCornerGeometry.round` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeCornerGeometry.round`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokePosition` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokePosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokePosition.center` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokePosition.center`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokePosition.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokePosition.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokePosition.inner` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokePosition.inner`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokePosition.outer` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokePosition.outer`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokePositionAndCornerGeometry` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokePositionAndCornerGeometry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokePositionAndCornerGeometry.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokePositionAndCornerGeometry.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeStyle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeStyle.dashed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeStyle.dashed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeStyle.dashedRound` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeStyle.dashedRound`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeStyle.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeStyle.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeStyle.dotted` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeStyle.dotted`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeStyle.longDashed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeStyle.longDashed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeStyle.longDashedRound` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeStyle.longDashedRound`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeStyle.solid` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeStyle.solid`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeWidth` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeWidth`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.strokeWidth.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.strokeWidth.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textAlignment.horizontal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textAlignment.horizontal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textAlignment.horizontal.center` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textAlignment.horizontal.center`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textAlignment.horizontal.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textAlignment.horizontal.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textAlignment.horizontal.left` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textAlignment.horizontal.left`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textAlignment.horizontal.right` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textAlignment.horizontal.right`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textAlignment.vertical` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textAlignment.vertical`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textAlignment.vertical.bottom` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textAlignment.vertical.bottom`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textAlignment.vertical.center` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textAlignment.vertical.center`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textAlignment.vertical.top` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textAlignment.vertical.top`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textBackground` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textBackground`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textBackground.cornerRadius` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textBackground.cornerRadius`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textBackground.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textBackground.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textBackground.horizontalPadding` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textBackground.horizontalPadding`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textBackground.horizontalPadding.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textBackground.horizontalPadding.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textBackground.options.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textBackground.options.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textBackground.padding` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textBackground.padding`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textBackground.padding.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textBackground.padding.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textBackground.verticalPadding` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textBackground.verticalPadding`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textBackground.verticalPadding.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textBackground.verticalPadding.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textCase` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textCase`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textCase.lowercase` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textCase.lowercase`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textCase.normal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textCase.normal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textCase.titlecase` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textCase.titlecase`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textCase.uppercase` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textCase.uppercase`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textWritingStyle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textWritingStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textWritingStyle.Block` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textWritingStyle.Block`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textWritingStyle.Character` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textWritingStyle.Character`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textWritingStyle.Line` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textWritingStyle.Line`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.textWritingStyle.Word` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textWritingStyle.Word`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.volume` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.volume`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.adjustments` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.adjustments`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.adjustments.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.adjustments.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.animations` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.animations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.animations.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.animations.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.blur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.blur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.blur.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.blur.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.effect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.effect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.effect.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.effect.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.filter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.filter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.filter.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.filter.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.shadow` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.shadow`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.appearance.shadow.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.appearance.shadow.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.audio.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.audio.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.audio.change.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.audio.change.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.editor.select` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.editor.select`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.fill.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.fill.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.fill.change.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.fill.change.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.fill.change.text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.fill.change.text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.fill.change.text.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.fill.change.text.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.fill.change.graphic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.fill.change.graphic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.fill.change.graphic.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.fill.change.graphic.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.fill.changeType` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.fill.changeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.fill.changeType.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.fill.changeType.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.blendMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.blendMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.blendMode.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.blendMode.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.crop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.crop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.crop.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.crop.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.flip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.flip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.flip.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.flip.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.move` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.move`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.move.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.move.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.opacity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.opacity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.opacity.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.opacity.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.resize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.resize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.resize.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.resize.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.resize.allPages` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.resize.allPages`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.rotate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.rotate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.layer.rotate.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.rotate.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.lifecycle.destroy` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.lifecycle.destroy`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.lifecycle.destroy.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.lifecycle.destroy.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.lifecycle.duplicate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.lifecycle.duplicate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.lifecycle.duplicate.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.lifecycle.duplicate.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.shape.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.shape.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.shape.change.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.shape.change.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.stroke.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.stroke.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.stroke.change.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.stroke.change.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.text.character` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.text.character`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.text.character.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.text.character.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.text.edit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.text.edit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.text.edit.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.text.edit.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `scope.text.edit.placeholder.tooltip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.text.edit.placeholder.tooltip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.autoSize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.autoSize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.autoSize.abbreviation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.autoSize.abbreviation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.bold` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.bold`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.italic` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.italic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.normal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.normal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.size` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.size`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.sizeRange` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.sizeRange`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.style` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.style`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.typeface` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.typeface`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.typeface.mixed.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.typeface.mixed.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.weight.100` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.weight.100`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.weight.200` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.weight.200`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.weight.300` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.weight.300`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.weight.400` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.weight.400`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.weight.500` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.weight.500`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.weight.600` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.weight.600`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.weight.700` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.weight.700`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.weight.800` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.weight.800`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `typography.weight.900` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`typography.weight.900`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `variables.address.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`variables.address.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `variables.city.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`variables.city.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `variables.company_name.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`variables.company_name.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `variables.first_name.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`variables.first_name.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `variables.last_name.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`variables.last_name.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `warning.invalidType` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`warning.invalidType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/typeface) # Interface: Typeface Represents a typeface. The Typeface interface defines the structure of a typeface within the Creative Editor SDK. It includes properties for the name and fonts. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `name` | `string` | The unique name of this typeface | | `fonts` | [`Font`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/font/)\[\] | The list of all fonts that are part of this typeface. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/transientresource) # Interface: TransientResource Represents a transient resource. The `TransientResource` interface provides a set of properties that describe a transient resource, including a URL and the size of the resource. ## Properties[#](#properties) | Property | Type | | --- | --- | | `URL` | `string` | | `size` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textoptions) # Interface: TextOptions Represents options for text. The `TextOptions` interface provides a set of properties that control the behavior and appearance of text. These options include settings for the content and alignment. ## Properties[#](#properties) | Property | Type | | --- | --- | | `content` | `string` | | `align?` | `"left"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textinputoptions) # Interface: TextInputOptions Represents options for a text input. The `TextInputOptions` interface provides a set of properties that control the behavior and appearance of a text input. These options include settings for the input label, input label position, value, value setter, disabled state, placeholder, suffix, and requireConfirm. ## Extends[#](#extends) * [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)<`string`\> ## Properties[#](#properties) | Property | Type | Default value | Description | Inherited from | | --- | --- | --- | --- | --- | | `inputLabel?` | `string` | `string`\[\] | `undefined` | \- | | `inputLabelPosition?` | `"top"` | `"left"` | `undefined` | \- | | `value` | `string` | `undefined` | \- | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`value`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `setValue` | (`value`) => `void` | `undefined` | \- | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`setValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `isDisabled?` | `boolean` | `undefined` | \- | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`isDisabled`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `suffix?` | `Partial` | `undefined` | \- | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `requireConfirm?` | `boolean` | `true` | Whether to require explicit confirmation (Enter/Escape/blur) before applying changes. When true, changes are only applied when user presses Enter/ESC or blurs the input. When false, changes are applied immediately on every keystroke. | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textareaoptions) # Interface: TextAreaOptions Represents options for a text area. The `TextAreaOptions` interface provides a set of properties that control the behavior and appearance of a text area. These options include settings for the input label, input label position, value, value setter, disabled state, placeholder, and suffix. ## Extends[#](#extends) * [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)<`string`\> ## Properties[#](#properties) | Property | Type | Inherited from | | --- | --- | --- | | `inputLabel?` | `string` | `string`\[\] | | `inputLabelPosition?` | `"top"` | `"left"` | | `value` | `string` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`value`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `setValue` | (`value`) => `void` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`setValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `isDisabled?` | `boolean` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`isDisabled`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `suffix?` | `Partial` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `placeholder?` | `string` | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/spotcolor) # Interface: SpotColor Represents a spot color value. Defines a spot color value with a name, tint, and external reference. * ‘name’: The name of the spot color. * ‘tint’: The tint factor. * ‘externalReference’: The external reference of the spot color. ## Properties[#](#properties) | Property | Type | | --- | --- | | `name` | `string` | | `tint` | `number` | | `externalReference` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/source) # Interface: Source A single source width an intrinsic width & height. ## Properties[#](#properties) | Property | Type | | --- | --- | | `uri` | `string` | | `width` | `number` | | `height` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/slideroptions) # Interface: SliderOptions Represents options for a slider. The `SliderOptions` interface provides a set of properties that control the behavior and appearance of a slider. These options include settings for the input label, input label position, value, value setter, disabled state, minimum value, maximum value, step value, centered state, and suffix. ## Extends[#](#extends) * [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)<`number`\> ## Properties[#](#properties) | Property | Type | Inherited from | | --- | --- | --- | | `inputLabel?` | `string` | `string`\[\] | | `inputLabelPosition?` | `"top"` | `"left"` | | `value` | `number` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`value`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `setValue` | (`value`) => `void` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`setValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `isDisabled?` | `boolean` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`isDisabled`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `suffix?` | `Partial` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `min` | `number` | \- | | `max` | `number` | \- | | `step?` | `number` | \- | | `centered?` | `boolean` | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/selectvalue) # Interface: SelectValue Represents a value for a select input. The `SelectValue` interface provides a set of properties that describe a value for a select input. These options include settings for the ID, label, and icon. ## Properties[#](#properties) | Property | Type | | --- | --- | | `id` | `string` | | `label` | `string` | | `icon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/selectoptions) # Interface: SelectOptions Represents options for a select input. The `SelectOptions` interface provides a set of properties that control the behavior and appearance of a select input. These options include settings for the input label, input label position, value, value setter, disabled state, icon, tooltip, loading state, loading progress, suffix, and values. ## Extends[#](#extends) * [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)<[`SelectValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/selectvalue/)\> ## Properties[#](#properties) | Property | Type | Overrides | Inherited from | | --- | --- | --- | --- | | `inputLabelPosition?` | `"top"` | `"left"` | \- | | `value` | [`SelectValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/selectvalue/) | \- | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`value`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `setValue` | (`value`) => `void` | \- | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`setValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `icon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | \- | \- | | `inputLabel?` | `string` | `string`\[\] | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`inputLabel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `tooltip?` | `string` | `string`\[\] | \- | | `isDisabled?` | `boolean` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`isDisabled`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | \- | | `isLoading?` | `boolean` | \- | \- | | `loadingProgress?` | `number` | \- | \- | | `suffix?` | `Partial` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | \- | | `values` | [`SelectValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/selectvalue/)\[\] | \- | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/sectionoptions) # Interface: SectionOptions Represents options for a section. The `SectionOptions` interface provides a set of properties that control the behavior and appearance of a section. These options include settings for the title and children. ## Properties[#](#properties) | Property | Type | | --- | --- | | `title?` | `string` | | `children?` | () => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/rgbcolor) # Interface: RGBColor Represents an RGB color value. Defines an RGB color value with components between 0 and 1. * ‘r’: The red component. * ‘g’: The green component. * ‘b’: The blue component. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `r` | `number` | Red | | `g` | `number` | Green | | `b` | `number` | Blue | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/rgbacolor) # Interface: RGBAColor Represents an RGBA color value. Defines an RGBA color value with components between 0 and 1. * ‘r’: The red component. * ‘g’: The green component. * ‘b’: The blue component. * ‘a’: The alpha component. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `r` | `number` | Red | | `g` | `number` | Green | | `b` | `number` | Blue | | `a` | `number` | Alpha | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/replaceassetlibraryentriescontext) # Interface: ReplaceAssetLibraryEntriesContext Provides context for replacing asset library entries, including selected blocks and default entry IDs. ## Properties[#](#properties) | Property | Type | | --- | --- | | `selectedBlocks` | `object`\[\] | | `defaultEntryIds` | `string`\[\] | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/registeredactions) # Interface: RegisteredActions Represents a collection of action functions used throughout the application. Each property corresponds to a specific UI action or event that can be customized. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `saveScene` | [`SaveSceneAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/savesceneaction/) | Action invoked to handle scene saving. | | `shareScene` | [`ShareSceneAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sharesceneaction/) | Action invoked to handle scene sharing. | | `exportDesign` | [`ExportAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/exportaction/) | Action invoked to handle export actions. | | `importScene` | [`ImportSceneAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/importsceneaction/) | Action invoked to handle import actions. | | `exportScene` | [`ExportSceneAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/exportsceneaction/) | Action invoked to handle scene export actions. | | `uploadFile` | [`UploadAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uploadaction/) | Action invoked to handle file uploads. | | `onUnsupportedBrowser` | [`OnUnsupportedBrowserAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onunsupportedbrowseraction/) | Action invoked when an unsupported browser is detected. | | `addClip` | `VoidFunction` | Action invoked when the add clip button is pressed in the video timeline | | `zoom.toBlock` | [`ZoomToBlockAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtoblockaction/) | Action for zooming to a specific block | | `zoom.toPage` | [`ZoomToPageAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtopageaction/) | Action for zooming to a page (current, first, last, or by index) with optional padding | | `zoom.toSelection` | [`ZoomToSelectionAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtoselectionaction/) | Action for zooming to the current selection | | `zoom.in` | [`ZoomInAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoominaction/) | Action for zooming in by one step | | `zoom.out` | [`ZoomOutAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomoutaction/) | Action for zooming out by one step | | `zoom.toLevel` | [`ZoomToLevelAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtolevelaction/) | Action for setting zoom to a specific level | | `scroll.toPage` | [`ScrollToPageAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scrolltopageaction/) | Action for scrolling to a specific page | | `scroll.toBlock` | [`ScrollToBlockAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scrolltoblockaction/) | Action for scrolling to a specific block | | `timeline.zoom.in` | [`TimelineZoomInAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoominaction/) | Action for zooming in the video timeline | | `timeline.zoom.out` | [`TimelineZoomOutAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomoutaction/) | Action for zooming out the video timeline | | `timeline.zoom.fit` | [`TimelineZoomToFitAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomtofitaction/) | Action for fitting the video timeline to show all content | | `timeline.zoom.toLevel` | [`TimelineZoomToLevelAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomtolevelaction/) | Action for setting the video timeline zoom to a specific level | | `timeline.zoom.reset` | [`TimelineZoomResetAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomresetaction/) | Action for resetting the video timeline zoom to default | | `timeline.expand` | [`TimelineExpandAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelineexpandaction/) | Action for expanding the video timeline | | `timeline.collapse` | [`TimelineCollapseAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinecollapseaction/) | Action for collapsing the video timeline | | `copy` | [`CopyAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/copyaction/) | Action for copying selected blocks to the clipboard | | `paste` | [`PasteAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pasteaction/) | Action for pasting blocks from the clipboard | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/range) # Interface: Range An open range. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `from` | `number` | The starting value of the range | | `to` | `number` | The non-inclusive ending value of the range | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext) # Interface: OrderContext Interface representing the context for ordering components. * `editMode`: The current edit mode. ## Properties[#](#properties) | Property | Type | | --- | --- | | `editMode` | [`EditMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/editmode/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren) # Interface: OrderComponentWithChildren Represents a custom dock component. The CustomDockComponent interface defines the structure of a custom dock component. It includes properties for the ID and payload. ## Extends[#](#extends) * [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<`I`\> ## Extended by[#](#extended-by) * [`CanvasMenuOptionsComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuoptionscomponent/) ## Type Parameters[#](#type-parameters) | Type Parameter | Default type | | --- | --- | | `I` _extends_ [`ComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentid/) | \- | | `C` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)<`I`\> | ## Indexable[#](#indexable) ``` [key: string]: unknown ``` ## Properties[#](#properties) | Property | Type | Description | Inherited from | | --- | --- | --- | --- | | `id` | `I` | \- | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/).[`id`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | | `key?` | `string` | \- | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/).[`key`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | | `children?` | (`OrderComponentWithChildren`<`I`, `C`\> | `I` | `C`)\[\] | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent) # Interface: OrderComponent Represents an order component. The OrderComponent interface defines the structure of an order component. It includes properties for the ID, key, and payload. ## Extends[#](#extends) * [`ComponentPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) ## Extended by[#](#extended-by) * [`CanvasMenuActionButton`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuactionbutton/) * [`CanvasMenuCustomActionButton`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenucustomactionbutton/) * [`NavigationBarActionButton`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/navigationbaractionbutton/) * [`NavigationBarCustomActionButton`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/navigationbarcustomactionbutton/) * [`OrderComponentWithChildren`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/) ## Type Parameters[#](#type-parameters) | Type Parameter | Default type | | --- | --- | | `I` | [`ComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentid/) | ## Indexable[#](#indexable) ``` [key: string]: unknown ``` ## Properties[#](#properties) | Property | Type | | --- | --- | | `id` | `I` | | `key?` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/numberinputoptions) # Interface: NumberInputOptions Represents options for a number input. The `NumberInputOptions` interface provides a set of properties that control the behavior and appearance of a number input. These options include settings for the input label, input label position, value, value setter, disabled state, minimum value, maximum value, step value, suffix, and requireConfirm. ## Extends[#](#extends) * [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)<`number`\> ## Properties[#](#properties) | Property | Type | Default value | Description | Inherited from | | --- | --- | --- | --- | --- | | `inputLabel?` | `string` | `string`\[\] | `undefined` | \- | | `inputLabelPosition?` | `"top"` | `"left"` | `undefined` | \- | | `value` | `number` | `undefined` | \- | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`value`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `setValue` | (`value`) => `void` | `undefined` | \- | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`setValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `isDisabled?` | `boolean` | `undefined` | \- | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`isDisabled`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `suffix?` | `Partial` | `undefined` | \- | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `min?` | `number` | `undefined` | \- | \- | | `max?` | `number` | `undefined` | \- | \- | | `step?` | `number` | `undefined` | \- | \- | | `requireConfirm?` | `boolean` | `true` | Whether to require explicit confirmation (Enter/Escape/blur) before applying changes. When true, changes are only applied when user presses Enter/ESC or blurs the input. When false, changes are applied immediately on every keystroke. | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/notification) # Interface: Notification Represents a notification configuration. The Notification interface defines the structure of a notification configuration within the Creative Editor SDK. It includes properties for the type, message, duration, onDismiss callback, and action. This interface provides a comprehensive way to define and manage notifications, allowing for flexibility in how they are presented and interacted with by users. ## Properties[#](#properties) | Property | Type | | --- | --- | | `type?` | [`NotificationType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/notificationtype/) | | `message` | `string` | | `duration?` | [`NotificationDuration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/notificationduration/) | | `onDismiss?` | () => `void` | | `action?` | `object` | | `action.label` | `string` | | `action.onClick` | (`context`) => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/navigationbarcustomactionbutton) # Interface: NavigationBarCustomActionButton Interface representing a generic Action Button in the navigation bar component. Note: This component requires a key and has a required label, unlike other action buttons. ## Extends[#](#extends) * [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) ## Indexable[#](#indexable) ``` [key: string]: unknown ``` ## Properties[#](#properties) | Property | Type | Overrides | | --- | --- | --- | | `id` | `"ly.img.action.navigationBar"` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/).[`id`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | | `key` | `string` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/).[`key`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | | `onClick` | () => `void` | `Promise`<`void`\> | | `label` | `string` | \- | | `icon?` | `string` | \- | | `variant?` | `"regular"` | `"plain"` | | `color?` | `"accent"` | `"danger"` | | `isDisabled?` | `boolean` | \- | | `isLoading?` | `boolean` | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/navigationbaractionbutton) # Interface: NavigationBarActionButton Base interface for action buttons in the navigation bar. Contains common properties shared across all action button types. * `onClick`: Handler invoked when the button is clicked. * `label`: Optional label for the button. * `icon`: Optional icon name to display on the button. * `variant`: Optional style variant of the button, either ‘regular’ or ‘plain’. * `color`: Optional color which can be either ‘accent’ or ‘danger’. * `isDisabled`: Optional disabled property. * `isLoading`: Optional loading property. ## Extends[#](#extends) * [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) ## Indexable[#](#indexable) ``` [key: string]: unknown ``` ## Properties[#](#properties) | Property | Type | Overrides | Inherited from | | --- | --- | --- | --- | | `id` | | `"ly.img.back.navigationBar"` | `"ly.img.close.navigationBar"` | | `onClick` | () => `void` | `Promise`<`void`\> | \- | | `label?` | `string` | \- | \- | | `icon?` | `string` | \- | \- | | `variant?` | `"regular"` | `"plain"` | \- | | `color?` | `"accent"` | `"danger"` | \- | | `isDisabled?` | `boolean` | \- | \- | | `isLoading?` | `boolean` | \- | \- | | `key?` | `string` | \- | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/).[`key`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/mediapreviewoptions) # Interface: MediaPreviewOptions Represents options for a media preview. The `MediaPreviewOptions` interface provides a set of properties that control the behavior and appearance of a media preview. These options include settings for the size, preview, and action. ## Properties[#](#properties) | Property | Type | | --- | --- | | `size?` | `"small"` | | `preview?` | [`PreviewType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/previewtype/) | | `action?` | [`ButtonOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/buttonoptions/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/logger) # Interface: Logger Represents a logger function. The Logger interface defines the structure of a logger function within the Creative Editor SDK. It includes a method for logging messages with an optional log level. ``` Logger(message, level?): void; ``` Represents a logger function. The Logger interface defines the structure of a logger function within the Creative Editor SDK. It includes a method for logging messages with an optional log level. ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `message` | `string` | | `level?` | [`LogLevel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/loglevel/) | ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/libraryoptions) # Interface: LibraryOptions Represents options for a library. The `LibraryOptions` interface provides a set of properties that control the behavior and appearance of a library. These options include settings for the entries, select handler, and searchable state. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `entries` | | `string`\[\] | | `onSelect?` | (`asset`) => `Promise`<`void`\> | \- | | `searchable?` | `boolean` | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions) # Interface: InputOptions Represents options for an input. The `InputOptions` interface provides a set of properties that control the behavior and appearance of an input. These options include settings for the input label, input label position, value, value setter, disabled state, and suffix. ## Extended by[#](#extended-by) * [`CheckboxOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/checkboxoptions/) * [`ColorInputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/colorinputoptions/) * [`NumberInputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/numberinputoptions/) * [`SelectOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/selectoptions/) * [`SliderOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/slideroptions/) * [`TextAreaOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textareaoptions/) * [`TextInputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textinputoptions/) ## Type Parameters[#](#type-parameters) | Type Parameter | Default type | | --- | --- | | `T` | \- | | `P` | `"top"` | ## Properties[#](#properties) | Property | Type | | --- | --- | | `inputLabel?` | `string` | | `inputLabelPosition?` | `P` | | `value` | `T` | | `setValue` | (`value`) => `void` | | `isDisabled?` | `boolean` | | `suffix?` | `Partial` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/htmlcreativeenginecanvaselement) # Interface: HTMLCreativeEngineCanvasElement A wrapper around a plain canvas The idea is to shield the user from the weird semantics of changing width and height of a canvas by making this a opaque block element instead and managing the internal render resolution of the canvas dynamically ## Extends[#](#extends) * `HTMLElement` ## Methods[#](#methods) ### clear()[#](#clear) ``` clear(): void; ``` Clear the canvas This is useful when mounting the canvas into a new position in the DOM. If the canvas is not cleared, it will appear in the new DOM position, with its contents stretched to the new size. It will re-render correctly during the next animation frame, but for a brief moment the canvas contents can flash distorted. Call `clear()` before mounting into the DOM to avoid this. This will cause the canvas to be cleared until rendering the next frame. #### Returns[#](#returns) `void` * * * ### animate()[#](#animate) ``` animate(keyframes, options?): Animation; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animate) #### Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `keyframes` | `Keyframe`\[\] | | `options?` | `number` | #### Returns[#](#returns-1) `Animation` #### Inherited from[#](#inherited-from) ``` HTMLElement.animate ``` * * * ### getAnimations()[#](#getanimations) ``` getAnimations(options?): Animation[]; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAnimations) #### Parameters[#](#parameters-1) | Parameter | Type | | --- | --- | | `options?` | `GetAnimationsOptions` | #### Returns[#](#returns-2) `Animation`\[\] #### Inherited from[#](#inherited-from-1) ``` HTMLElement.getAnimations ``` * * * ### after()[#](#after) ``` after(...nodes): void; ``` Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/after) #### Parameters[#](#parameters-2) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-3) `void` #### Inherited from[#](#inherited-from-2) ``` HTMLElement.after ``` * * * ### before()[#](#before) ``` before(...nodes): void; ``` Inserts nodes just before node, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/before) #### Parameters[#](#parameters-3) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-4) `void` #### Inherited from[#](#inherited-from-3) ``` HTMLElement.before ``` * * * ### remove()[#](#remove) ``` remove(): void; ``` Removes node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/remove) #### Returns[#](#returns-5) `void` #### Inherited from[#](#inherited-from-4) ``` HTMLElement.remove ``` * * * ### replaceWith()[#](#replacewith) ``` replaceWith(...nodes): void; ``` Replaces node with nodes, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/replaceWith) #### Parameters[#](#parameters-4) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-6) `void` #### Inherited from[#](#inherited-from-5) ``` HTMLElement.replaceWith ``` * * * ### attachShadow()[#](#attachshadow) ``` attachShadow(init): ShadowRoot; ``` Creates a shadow root for element and returns it. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/attachShadow) #### Parameters[#](#parameters-5) | Parameter | Type | | --- | --- | | `init` | `ShadowRootInit` | #### Returns[#](#returns-7) `ShadowRoot` #### Inherited from[#](#inherited-from-6) ``` HTMLElement.attachShadow ``` * * * ### checkVisibility()[#](#checkvisibility) ``` checkVisibility(options?): boolean; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/checkVisibility) #### Parameters[#](#parameters-6) | Parameter | Type | | --- | --- | | `options?` | `CheckVisibilityOptions` | #### Returns[#](#returns-8) `boolean` #### Inherited from[#](#inherited-from-7) ``` HTMLElement.checkVisibility ``` * * * ### closest()[#](#closest) #### Call Signature[#](#call-signature) ``` closest(selector): HTMLElementTagNameMap[K]; ``` Returns the first (starting at element) inclusive ancestor that matches selectors, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/closest) ##### Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementTagNameMap` | ##### Parameters[#](#parameters-7) | Parameter | Type | | --- | --- | | `selector` | `K` | ##### Returns[#](#returns-9) `HTMLElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-8) ``` HTMLElement.closest ``` #### Call Signature[#](#call-signature-1) ``` closest(selector): SVGElementTagNameMap[K]; ``` ##### Type Parameters[#](#type-parameters-1) | Type Parameter | | --- | | `K` _extends_ keyof `SVGElementTagNameMap` | ##### Parameters[#](#parameters-8) | Parameter | Type | | --- | --- | | `selector` | `K` | ##### Returns[#](#returns-10) `SVGElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-9) ``` HTMLElement.closest ``` #### Call Signature[#](#call-signature-2) ``` closest(selector): MathMLElementTagNameMap[K]; ``` ##### Type Parameters[#](#type-parameters-2) | Type Parameter | | --- | | `K` _extends_ keyof `MathMLElementTagNameMap` | ##### Parameters[#](#parameters-9) | Parameter | Type | | --- | --- | | `selector` | `K` | ##### Returns[#](#returns-11) `MathMLElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-10) ``` HTMLElement.closest ``` #### Call Signature[#](#call-signature-3) ``` closest(selectors): E; ``` ##### Type Parameters[#](#type-parameters-3) | Type Parameter | Default type | | --- | --- | | `E` _extends_ `Element` | `Element` | ##### Parameters[#](#parameters-10) | Parameter | Type | | --- | --- | | `selectors` | `string` | ##### Returns[#](#returns-12) `E` ##### Inherited from[#](#inherited-from-11) ``` HTMLElement.closest ``` * * * ### computedStyleMap()[#](#computedstylemap) ``` computedStyleMap(): StylePropertyMapReadOnly; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/computedStyleMap) #### Returns[#](#returns-13) `StylePropertyMapReadOnly` #### Inherited from[#](#inherited-from-12) ``` HTMLElement.computedStyleMap ``` * * * ### getAttribute()[#](#getattribute) ``` getAttribute(qualifiedName): string; ``` Returns element’s first attribute whose qualified name is qualifiedName, and null if there is no such attribute otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttribute) #### Parameters[#](#parameters-11) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | #### Returns[#](#returns-14) `string` #### Inherited from[#](#inherited-from-13) ``` HTMLElement.getAttribute ``` * * * ### getAttributeNS()[#](#getattributens) ``` getAttributeNS(namespace, localName): string; ``` Returns element’s attribute whose namespace is namespace and local name is localName, and null if there is no such attribute otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNS) #### Parameters[#](#parameters-12) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `localName` | `string` | #### Returns[#](#returns-15) `string` #### Inherited from[#](#inherited-from-14) ``` HTMLElement.getAttributeNS ``` * * * ### getAttributeNames()[#](#getattributenames) ``` getAttributeNames(): string[]; ``` Returns the qualified names of all element’s attributes. Can contain duplicates. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNames) #### Returns[#](#returns-16) `string`\[\] #### Inherited from[#](#inherited-from-15) ``` HTMLElement.getAttributeNames ``` * * * ### getAttributeNode()[#](#getattributenode) ``` getAttributeNode(qualifiedName): Attr; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNode) #### Parameters[#](#parameters-13) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | #### Returns[#](#returns-17) `Attr` #### Inherited from[#](#inherited-from-16) ``` HTMLElement.getAttributeNode ``` * * * ### getAttributeNodeNS()[#](#getattributenodens) ``` getAttributeNodeNS(namespace, localName): Attr; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNodeNS) #### Parameters[#](#parameters-14) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `localName` | `string` | #### Returns[#](#returns-18) `Attr` #### Inherited from[#](#inherited-from-17) ``` HTMLElement.getAttributeNodeNS ``` * * * ### getBoundingClientRect()[#](#getboundingclientrect) ``` getBoundingClientRect(): DOMRect; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect) #### Returns[#](#returns-19) `DOMRect` #### Inherited from[#](#inherited-from-18) ``` HTMLElement.getBoundingClientRect ``` * * * ### getClientRects()[#](#getclientrects) ``` getClientRects(): DOMRectList; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getClientRects) #### Returns[#](#returns-20) `DOMRectList` #### Inherited from[#](#inherited-from-19) ``` HTMLElement.getClientRects ``` * * * ### getElementsByClassName()[#](#getelementsbyclassname) ``` getElementsByClassName(classNames): HTMLCollectionOf; ``` Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getElementsByClassName) #### Parameters[#](#parameters-15) | Parameter | Type | | --- | --- | | `classNames` | `string` | #### Returns[#](#returns-21) `HTMLCollectionOf`<`Element`\> #### Inherited from[#](#inherited-from-20) ``` HTMLElement.getElementsByClassName ``` * * * ### getElementsByTagName()[#](#getelementsbytagname) #### Call Signature[#](#call-signature-4) ``` getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getElementsByTagName) ##### Type Parameters[#](#type-parameters-4) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementTagNameMap` | ##### Parameters[#](#parameters-16) | Parameter | Type | | --- | --- | | `qualifiedName` | `K` | ##### Returns[#](#returns-22) `HTMLCollectionOf`<`HTMLElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-21) ``` HTMLElement.getElementsByTagName ``` #### Call Signature[#](#call-signature-5) ``` getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Type Parameters[#](#type-parameters-5) | Type Parameter | | --- | | `K` _extends_ keyof `SVGElementTagNameMap` | ##### Parameters[#](#parameters-17) | Parameter | Type | | --- | --- | | `qualifiedName` | `K` | ##### Returns[#](#returns-23) `HTMLCollectionOf`<`SVGElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-22) ``` HTMLElement.getElementsByTagName ``` #### Call Signature[#](#call-signature-6) ``` getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Type Parameters[#](#type-parameters-6) | Type Parameter | | --- | | `K` _extends_ keyof `MathMLElementTagNameMap` | ##### Parameters[#](#parameters-18) | Parameter | Type | | --- | --- | | `qualifiedName` | `K` | ##### Returns[#](#returns-24) `HTMLCollectionOf`<`MathMLElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-23) ``` HTMLElement.getElementsByTagName ``` #### Call Signature[#](#call-signature-7) ``` getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Type Parameters[#](#type-parameters-7) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementDeprecatedTagNameMap` | ##### Parameters[#](#parameters-19) | Parameter | Type | | --- | --- | | `qualifiedName` | `K` | ##### Returns[#](#returns-25) `HTMLCollectionOf`<`HTMLElementDeprecatedTagNameMap`\[`K`\]> ##### Deprecated[#](#deprecated) ##### Inherited from[#](#inherited-from-24) ``` HTMLElement.getElementsByTagName ``` #### Call Signature[#](#call-signature-8) ``` getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Parameters[#](#parameters-20) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | ##### Returns[#](#returns-26) `HTMLCollectionOf`<`Element`\> ##### Inherited from[#](#inherited-from-25) ``` HTMLElement.getElementsByTagName ``` * * * ### getElementsByTagNameNS()[#](#getelementsbytagnamens) #### Call Signature[#](#call-signature-9) ``` getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getElementsByTagNameNS) ##### Parameters[#](#parameters-21) | Parameter | Type | | --- | --- | | `namespaceURI` | `"http://www.w3.org/1999/xhtml"` | | `localName` | `string` | ##### Returns[#](#returns-27) `HTMLCollectionOf`<`HTMLElement`\> ##### Inherited from[#](#inherited-from-26) ``` HTMLElement.getElementsByTagNameNS ``` #### Call Signature[#](#call-signature-10) ``` getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; ``` ##### Parameters[#](#parameters-22) | Parameter | Type | | --- | --- | | `namespaceURI` | `"http://www.w3.org/2000/svg"` | | `localName` | `string` | ##### Returns[#](#returns-28) `HTMLCollectionOf`<`SVGElement`\> ##### Inherited from[#](#inherited-from-27) ``` HTMLElement.getElementsByTagNameNS ``` #### Call Signature[#](#call-signature-11) ``` getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; ``` ##### Parameters[#](#parameters-23) | Parameter | Type | | --- | --- | | `namespaceURI` | `"http://www.w3.org/1998/Math/MathML"` | | `localName` | `string` | ##### Returns[#](#returns-29) `HTMLCollectionOf`<`MathMLElement`\> ##### Inherited from[#](#inherited-from-28) ``` HTMLElement.getElementsByTagNameNS ``` #### Call Signature[#](#call-signature-12) ``` getElementsByTagNameNS(namespace, localName): HTMLCollectionOf; ``` ##### Parameters[#](#parameters-24) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `localName` | `string` | ##### Returns[#](#returns-30) `HTMLCollectionOf`<`Element`\> ##### Inherited from[#](#inherited-from-29) ``` HTMLElement.getElementsByTagNameNS ``` * * * ### getHTML()[#](#gethtml) ``` getHTML(options?): string; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getHTML) #### Parameters[#](#parameters-25) | Parameter | Type | | --- | --- | | `options?` | `GetHTMLOptions` | #### Returns[#](#returns-31) `string` #### Inherited from[#](#inherited-from-30) ``` HTMLElement.getHTML ``` * * * ### hasAttribute()[#](#hasattribute) ``` hasAttribute(qualifiedName): boolean; ``` Returns true if element has an attribute whose qualified name is qualifiedName, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasAttribute) #### Parameters[#](#parameters-26) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | #### Returns[#](#returns-32) `boolean` #### Inherited from[#](#inherited-from-31) ``` HTMLElement.hasAttribute ``` * * * ### hasAttributeNS()[#](#hasattributens) ``` hasAttributeNS(namespace, localName): boolean; ``` Returns true if element has an attribute whose namespace is namespace and local name is localName. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasAttributeNS) #### Parameters[#](#parameters-27) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `localName` | `string` | #### Returns[#](#returns-33) `boolean` #### Inherited from[#](#inherited-from-32) ``` HTMLElement.hasAttributeNS ``` * * * ### hasAttributes()[#](#hasattributes) ``` hasAttributes(): boolean; ``` Returns true if element has attributes, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasAttributes) #### Returns[#](#returns-34) `boolean` #### Inherited from[#](#inherited-from-33) ``` HTMLElement.hasAttributes ``` * * * ### hasPointerCapture()[#](#haspointercapture) ``` hasPointerCapture(pointerId): boolean; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasPointerCapture) #### Parameters[#](#parameters-28) | Parameter | Type | | --- | --- | | `pointerId` | `number` | #### Returns[#](#returns-35) `boolean` #### Inherited from[#](#inherited-from-34) ``` HTMLElement.hasPointerCapture ``` * * * ### insertAdjacentElement()[#](#insertadjacentelement) ``` insertAdjacentElement(where, element): Element; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentElement) #### Parameters[#](#parameters-29) | Parameter | Type | | --- | --- | | `where` | `InsertPosition` | | `element` | `Element` | #### Returns[#](#returns-36) `Element` #### Inherited from[#](#inherited-from-35) ``` HTMLElement.insertAdjacentElement ``` * * * ### insertAdjacentHTML()[#](#insertadjacenthtml) ``` insertAdjacentHTML(position, string): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML) #### Parameters[#](#parameters-30) | Parameter | Type | | --- | --- | | `position` | `InsertPosition` | | `string` | `string` | #### Returns[#](#returns-37) `void` #### Inherited from[#](#inherited-from-36) ``` HTMLElement.insertAdjacentHTML ``` * * * ### insertAdjacentText()[#](#insertadjacenttext) ``` insertAdjacentText(where, data): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentText) #### Parameters[#](#parameters-31) | Parameter | Type | | --- | --- | | `where` | `InsertPosition` | | `data` | `string` | #### Returns[#](#returns-38) `void` #### Inherited from[#](#inherited-from-37) ``` HTMLElement.insertAdjacentText ``` * * * ### matches()[#](#matches) ``` matches(selectors): boolean; ``` Returns true if matching selectors against element’s root yields element, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/matches) #### Parameters[#](#parameters-32) | Parameter | Type | | --- | --- | | `selectors` | `string` | #### Returns[#](#returns-39) `boolean` #### Inherited from[#](#inherited-from-38) ``` HTMLElement.matches ``` * * * ### releasePointerCapture()[#](#releasepointercapture) ``` releasePointerCapture(pointerId): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/releasePointerCapture) #### Parameters[#](#parameters-33) | Parameter | Type | | --- | --- | | `pointerId` | `number` | #### Returns[#](#returns-40) `void` #### Inherited from[#](#inherited-from-39) ``` HTMLElement.releasePointerCapture ``` * * * ### removeAttribute()[#](#removeattribute) ``` removeAttribute(qualifiedName): void; ``` Removes element’s first attribute whose qualified name is qualifiedName. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttribute) #### Parameters[#](#parameters-34) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | #### Returns[#](#returns-41) `void` #### Inherited from[#](#inherited-from-40) ``` HTMLElement.removeAttribute ``` * * * ### removeAttributeNS()[#](#removeattributens) ``` removeAttributeNS(namespace, localName): void; ``` Removes element’s attribute whose namespace is namespace and local name is localName. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttributeNS) #### Parameters[#](#parameters-35) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `localName` | `string` | #### Returns[#](#returns-42) `void` #### Inherited from[#](#inherited-from-41) ``` HTMLElement.removeAttributeNS ``` * * * ### removeAttributeNode()[#](#removeattributenode) ``` removeAttributeNode(attr): Attr; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttributeNode) #### Parameters[#](#parameters-36) | Parameter | Type | | --- | --- | | `attr` | `Attr` | #### Returns[#](#returns-43) `Attr` #### Inherited from[#](#inherited-from-42) ``` HTMLElement.removeAttributeNode ``` * * * ### requestFullscreen()[#](#requestfullscreen) ``` requestFullscreen(options?): Promise; ``` Displays element fullscreen and resolves promise when done. When supplied, options’s navigationUI member indicates whether showing navigation UI while in fullscreen is preferred or not. If set to “show”, navigation simplicity is preferred over screen space, and if set to “hide”, more screen space is preferred. User agents are always free to honor user preference over the application’s. The default value “auto” indicates no application preference. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/requestFullscreen) #### Parameters[#](#parameters-37) | Parameter | Type | | --- | --- | | `options?` | `FullscreenOptions` | #### Returns[#](#returns-44) `Promise`<`void`\> #### Inherited from[#](#inherited-from-43) ``` HTMLElement.requestFullscreen ``` * * * ### requestPointerLock()[#](#requestpointerlock) ``` requestPointerLock(options?): Promise; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/requestPointerLock) #### Parameters[#](#parameters-38) | Parameter | Type | | --- | --- | | `options?` | `PointerLockOptions` | #### Returns[#](#returns-45) `Promise`<`void`\> #### Inherited from[#](#inherited-from-44) ``` HTMLElement.requestPointerLock ``` * * * ### scroll()[#](#scroll) #### Call Signature[#](#call-signature-13) ``` scroll(options?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scroll) ##### Parameters[#](#parameters-39) | Parameter | Type | | --- | --- | | `options?` | `ScrollToOptions` | ##### Returns[#](#returns-46) `void` ##### Inherited from[#](#inherited-from-45) ``` HTMLElement.scroll ``` #### Call Signature[#](#call-signature-14) ``` scroll(x, y): void; ``` ##### Parameters[#](#parameters-40) | Parameter | Type | | --- | --- | | `x` | `number` | | `y` | `number` | ##### Returns[#](#returns-47) `void` ##### Inherited from[#](#inherited-from-46) ``` HTMLElement.scroll ``` * * * ### scrollBy()[#](#scrollby) #### Call Signature[#](#call-signature-15) ``` scrollBy(options?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollBy) ##### Parameters[#](#parameters-41) | Parameter | Type | | --- | --- | | `options?` | `ScrollToOptions` | ##### Returns[#](#returns-48) `void` ##### Inherited from[#](#inherited-from-47) ``` HTMLElement.scrollBy ``` #### Call Signature[#](#call-signature-16) ``` scrollBy(x, y): void; ``` ##### Parameters[#](#parameters-42) | Parameter | Type | | --- | --- | | `x` | `number` | | `y` | `number` | ##### Returns[#](#returns-49) `void` ##### Inherited from[#](#inherited-from-48) ``` HTMLElement.scrollBy ``` * * * ### scrollIntoView()[#](#scrollintoview) ``` scrollIntoView(arg?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView) #### Parameters[#](#parameters-43) | Parameter | Type | | --- | --- | | `arg?` | `boolean` | #### Returns[#](#returns-50) `void` #### Inherited from[#](#inherited-from-49) ``` HTMLElement.scrollIntoView ``` * * * ### scrollTo()[#](#scrollto) #### Call Signature[#](#call-signature-17) ``` scrollTo(options?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTo) ##### Parameters[#](#parameters-44) | Parameter | Type | | --- | --- | | `options?` | `ScrollToOptions` | ##### Returns[#](#returns-51) `void` ##### Inherited from[#](#inherited-from-50) ``` HTMLElement.scrollTo ``` #### Call Signature[#](#call-signature-18) ``` scrollTo(x, y): void; ``` ##### Parameters[#](#parameters-45) | Parameter | Type | | --- | --- | | `x` | `number` | | `y` | `number` | ##### Returns[#](#returns-52) `void` ##### Inherited from[#](#inherited-from-51) ``` HTMLElement.scrollTo ``` * * * ### setAttribute()[#](#setattribute) ``` setAttribute(qualifiedName, value): void; ``` Sets the value of element’s first attribute whose qualified name is qualifiedName to value. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttribute) #### Parameters[#](#parameters-46) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | | `value` | `string` | #### Returns[#](#returns-53) `void` #### Inherited from[#](#inherited-from-52) ``` HTMLElement.setAttribute ``` * * * ### setAttributeNS()[#](#setattributens) ``` setAttributeNS( namespace, qualifiedName, value): void; ``` Sets the value of element’s attribute whose namespace is namespace and local name is localName to value. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttributeNS) #### Parameters[#](#parameters-47) | Parameter | Type | | --- | --- | | `namespace` | `string` | | `qualifiedName` | `string` | | `value` | `string` | #### Returns[#](#returns-54) `void` #### Inherited from[#](#inherited-from-53) ``` HTMLElement.setAttributeNS ``` * * * ### setAttributeNode()[#](#setattributenode) ``` setAttributeNode(attr): Attr; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttributeNode) #### Parameters[#](#parameters-48) | Parameter | Type | | --- | --- | | `attr` | `Attr` | #### Returns[#](#returns-55) `Attr` #### Inherited from[#](#inherited-from-54) ``` HTMLElement.setAttributeNode ``` * * * ### setAttributeNodeNS()[#](#setattributenodens) ``` setAttributeNodeNS(attr): Attr; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttributeNodeNS) #### Parameters[#](#parameters-49) | Parameter | Type | | --- | --- | | `attr` | `Attr` | #### Returns[#](#returns-56) `Attr` #### Inherited from[#](#inherited-from-55) ``` HTMLElement.setAttributeNodeNS ``` * * * ### setHTMLUnsafe()[#](#sethtmlunsafe) ``` setHTMLUnsafe(html): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setHTMLUnsafe) #### Parameters[#](#parameters-50) | Parameter | Type | | --- | --- | | `html` | `string` | #### Returns[#](#returns-57) `void` #### Inherited from[#](#inherited-from-56) ``` HTMLElement.setHTMLUnsafe ``` * * * ### setPointerCapture()[#](#setpointercapture) ``` setPointerCapture(pointerId): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setPointerCapture) #### Parameters[#](#parameters-51) | Parameter | Type | | --- | --- | | `pointerId` | `number` | #### Returns[#](#returns-58) `void` #### Inherited from[#](#inherited-from-57) ``` HTMLElement.setPointerCapture ``` * * * ### toggleAttribute()[#](#toggleattribute) ``` toggleAttribute(qualifiedName, force?): boolean; ``` If force is not given, “toggles” qualifiedName, removing it if it is present and adding it if it is not present. If force is true, adds qualifiedName. If force is false, removes qualifiedName. Returns true if qualifiedName is now present, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/toggleAttribute) #### Parameters[#](#parameters-52) | Parameter | Type | | --- | --- | | `qualifiedName` | `string` | | `force?` | `boolean` | #### Returns[#](#returns-59) `boolean` #### Inherited from[#](#inherited-from-58) ``` HTMLElement.toggleAttribute ``` * * * ### ~webkitMatchesSelector()~[#](#webkitmatchesselector) ``` webkitMatchesSelector(selectors): boolean; ``` #### Parameters[#](#parameters-53) | Parameter | Type | | --- | --- | | `selectors` | `string` | #### Returns[#](#returns-60) `boolean` #### Deprecated[#](#deprecated-1) This is a legacy alias of `matches`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/matches) #### Inherited from[#](#inherited-from-59) ``` HTMLElement.webkitMatchesSelector ``` * * * ### dispatchEvent()[#](#dispatchevent) ``` dispatchEvent(event): boolean; ``` Dispatches a synthetic event event to target and returns true if either event’s cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent) #### Parameters[#](#parameters-54) | Parameter | Type | | --- | --- | | `event` | `Event` | #### Returns[#](#returns-61) `boolean` #### Inherited from[#](#inherited-from-60) ``` HTMLElement.dispatchEvent ``` * * * ### attachInternals()[#](#attachinternals) ``` attachInternals(): ElementInternals; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/attachInternals) #### Returns[#](#returns-62) `ElementInternals` #### Inherited from[#](#inherited-from-61) ``` HTMLElement.attachInternals ``` * * * ### click()[#](#click) ``` click(): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/click) #### Returns[#](#returns-63) `void` #### Inherited from[#](#inherited-from-62) ``` HTMLElement.click ``` * * * ### hidePopover()[#](#hidepopover) ``` hidePopover(): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/hidePopover) #### Returns[#](#returns-64) `void` #### Inherited from[#](#inherited-from-63) ``` HTMLElement.hidePopover ``` * * * ### showPopover()[#](#showpopover) ``` showPopover(): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/showPopover) #### Returns[#](#returns-65) `void` #### Inherited from[#](#inherited-from-64) ``` HTMLElement.showPopover ``` * * * ### togglePopover()[#](#togglepopover) ``` togglePopover(force?): boolean; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/togglePopover) #### Parameters[#](#parameters-55) | Parameter | Type | | --- | --- | | `force?` | `boolean` | #### Returns[#](#returns-66) `boolean` #### Inherited from[#](#inherited-from-65) ``` HTMLElement.togglePopover ``` * * * ### addEventListener()[#](#addeventlistener) #### Call Signature[#](#call-signature-19) ``` addEventListener( type, listener, options?): void; ``` ##### Type Parameters[#](#type-parameters-8) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementEventMap` | ##### Parameters[#](#parameters-56) | Parameter | Type | | --- | --- | | `type` | `K` | | `listener` | (`this`, `ev`) => `any` | | `options?` | `boolean` | ##### Returns[#](#returns-67) `void` ##### Inherited from[#](#inherited-from-66) ``` HTMLElement.addEventListener ``` #### Call Signature[#](#call-signature-20) ``` addEventListener( type, listener, options?): void; ``` ##### Parameters[#](#parameters-57) | Parameter | Type | | --- | --- | | `type` | `string` | | `listener` | `EventListenerOrEventListenerObject` | | `options?` | `boolean` | ##### Returns[#](#returns-68) `void` ##### Inherited from[#](#inherited-from-67) ``` HTMLElement.addEventListener ``` * * * ### removeEventListener()[#](#removeeventlistener) #### Call Signature[#](#call-signature-21) ``` removeEventListener( type, listener, options?): void; ``` ##### Type Parameters[#](#type-parameters-9) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementEventMap` | ##### Parameters[#](#parameters-58) | Parameter | Type | | --- | --- | | `type` | `K` | | `listener` | (`this`, `ev`) => `any` | | `options?` | `boolean` | ##### Returns[#](#returns-69) `void` ##### Inherited from[#](#inherited-from-68) ``` HTMLElement.removeEventListener ``` #### Call Signature[#](#call-signature-22) ``` removeEventListener( type, listener, options?): void; ``` ##### Parameters[#](#parameters-59) | Parameter | Type | | --- | --- | | `type` | `string` | | `listener` | `EventListenerOrEventListenerObject` | | `options?` | `boolean` | ##### Returns[#](#returns-70) `void` ##### Inherited from[#](#inherited-from-69) ``` HTMLElement.removeEventListener ``` * * * ### blur()[#](#blur) ``` blur(): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/blur) #### Returns[#](#returns-71) `void` #### Inherited from[#](#inherited-from-70) ``` HTMLElement.blur ``` * * * ### focus()[#](#focus) ``` focus(options?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/focus) #### Parameters[#](#parameters-60) | Parameter | Type | | --- | --- | | `options?` | `FocusOptions` | #### Returns[#](#returns-72) `void` #### Inherited from[#](#inherited-from-71) ``` HTMLElement.focus ``` * * * ### appendChild()[#](#appendchild) ``` appendChild(node): T; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/appendChild) #### Type Parameters[#](#type-parameters-10) | Type Parameter | | --- | | `T` _extends_ `Node` | #### Parameters[#](#parameters-61) | Parameter | Type | | --- | --- | | `node` | `T` | #### Returns[#](#returns-73) `T` #### Inherited from[#](#inherited-from-72) ``` HTMLElement.appendChild ``` * * * ### cloneNode()[#](#clonenode) ``` cloneNode(deep?): Node; ``` Returns a copy of node. If deep is true, the copy also includes the node’s descendants. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) #### Parameters[#](#parameters-62) | Parameter | Type | | --- | --- | | `deep?` | `boolean` | #### Returns[#](#returns-74) `Node` #### Inherited from[#](#inherited-from-73) ``` HTMLElement.cloneNode ``` * * * ### compareDocumentPosition()[#](#comparedocumentposition) ``` compareDocumentPosition(other): number; ``` Returns a bitmask indicating the position of other relative to node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/compareDocumentPosition) #### Parameters[#](#parameters-63) | Parameter | Type | | --- | --- | | `other` | `Node` | #### Returns[#](#returns-75) `number` #### Inherited from[#](#inherited-from-74) ``` HTMLElement.compareDocumentPosition ``` * * * ### contains()[#](#contains) ``` contains(other): boolean; ``` Returns true if other is an inclusive descendant of node, and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/contains) #### Parameters[#](#parameters-64) | Parameter | Type | | --- | --- | | `other` | `Node` | #### Returns[#](#returns-76) `boolean` #### Inherited from[#](#inherited-from-75) ``` HTMLElement.contains ``` * * * ### getRootNode()[#](#getrootnode) ``` getRootNode(options?): Node; ``` Returns node’s root. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/getRootNode) #### Parameters[#](#parameters-65) | Parameter | Type | | --- | --- | | `options?` | `GetRootNodeOptions` | #### Returns[#](#returns-77) `Node` #### Inherited from[#](#inherited-from-76) ``` HTMLElement.getRootNode ``` * * * ### hasChildNodes()[#](#haschildnodes) ``` hasChildNodes(): boolean; ``` Returns whether node has children. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/hasChildNodes) #### Returns[#](#returns-78) `boolean` #### Inherited from[#](#inherited-from-77) ``` HTMLElement.hasChildNodes ``` * * * ### insertBefore()[#](#insertbefore) ``` insertBefore(node, child): T; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/insertBefore) #### Type Parameters[#](#type-parameters-11) | Type Parameter | | --- | | `T` _extends_ `Node` | #### Parameters[#](#parameters-66) | Parameter | Type | | --- | --- | | `node` | `T` | | `child` | `Node` | #### Returns[#](#returns-79) `T` #### Inherited from[#](#inherited-from-78) ``` HTMLElement.insertBefore ``` * * * ### isDefaultNamespace()[#](#isdefaultnamespace) ``` isDefaultNamespace(namespace): boolean; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isDefaultNamespace) #### Parameters[#](#parameters-67) | Parameter | Type | | --- | --- | | `namespace` | `string` | #### Returns[#](#returns-80) `boolean` #### Inherited from[#](#inherited-from-79) ``` HTMLElement.isDefaultNamespace ``` * * * ### isEqualNode()[#](#isequalnode) ``` isEqualNode(otherNode): boolean; ``` Returns whether node and otherNode have the same properties. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isEqualNode) #### Parameters[#](#parameters-68) | Parameter | Type | | --- | --- | | `otherNode` | `Node` | #### Returns[#](#returns-81) `boolean` #### Inherited from[#](#inherited-from-80) ``` HTMLElement.isEqualNode ``` * * * ### isSameNode()[#](#issamenode) ``` isSameNode(otherNode): boolean; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isSameNode) #### Parameters[#](#parameters-69) | Parameter | Type | | --- | --- | | `otherNode` | `Node` | #### Returns[#](#returns-82) `boolean` #### Inherited from[#](#inherited-from-81) ``` HTMLElement.isSameNode ``` * * * ### lookupNamespaceURI()[#](#lookupnamespaceuri) ``` lookupNamespaceURI(prefix): string; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/lookupNamespaceURI) #### Parameters[#](#parameters-70) | Parameter | Type | | --- | --- | | `prefix` | `string` | #### Returns[#](#returns-83) `string` #### Inherited from[#](#inherited-from-82) ``` HTMLElement.lookupNamespaceURI ``` * * * ### lookupPrefix()[#](#lookupprefix) ``` lookupPrefix(namespace): string; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/lookupPrefix) #### Parameters[#](#parameters-71) | Parameter | Type | | --- | --- | | `namespace` | `string` | #### Returns[#](#returns-84) `string` #### Inherited from[#](#inherited-from-83) ``` HTMLElement.lookupPrefix ``` * * * ### normalize()[#](#normalize) ``` normalize(): void; ``` Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/normalize) #### Returns[#](#returns-85) `void` #### Inherited from[#](#inherited-from-84) ``` HTMLElement.normalize ``` * * * ### removeChild()[#](#removechild) ``` removeChild(child): T; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/removeChild) #### Type Parameters[#](#type-parameters-12) | Type Parameter | | --- | | `T` _extends_ `Node` | #### Parameters[#](#parameters-72) | Parameter | Type | | --- | --- | | `child` | `T` | #### Returns[#](#returns-86) `T` #### Inherited from[#](#inherited-from-85) ``` HTMLElement.removeChild ``` * * * ### replaceChild()[#](#replacechild) ``` replaceChild(node, child): T; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/replaceChild) #### Type Parameters[#](#type-parameters-13) | Type Parameter | | --- | | `T` _extends_ `Node` | #### Parameters[#](#parameters-73) | Parameter | Type | | --- | --- | | `node` | `Node` | | `child` | `T` | #### Returns[#](#returns-87) `T` #### Inherited from[#](#inherited-from-86) ``` HTMLElement.replaceChild ``` * * * ### append()[#](#append) ``` append(...nodes): void; ``` Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/append) #### Parameters[#](#parameters-74) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-88) `void` #### Inherited from[#](#inherited-from-87) ``` HTMLElement.append ``` * * * ### prepend()[#](#prepend) ``` prepend(...nodes): void; ``` Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/prepend) #### Parameters[#](#parameters-75) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-89) `void` #### Inherited from[#](#inherited-from-88) ``` HTMLElement.prepend ``` * * * ### querySelector()[#](#queryselector) #### Call Signature[#](#call-signature-23) ``` querySelector(selectors): HTMLElementTagNameMap[K]; ``` Returns the first element that is a descendant of node that matches selectors. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/querySelector) ##### Type Parameters[#](#type-parameters-14) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementTagNameMap` | ##### Parameters[#](#parameters-76) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-90) `HTMLElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-89) ``` HTMLElement.querySelector ``` #### Call Signature[#](#call-signature-24) ``` querySelector(selectors): SVGElementTagNameMap[K]; ``` ##### Type Parameters[#](#type-parameters-15) | Type Parameter | | --- | | `K` _extends_ keyof `SVGElementTagNameMap` | ##### Parameters[#](#parameters-77) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-91) `SVGElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-90) ``` HTMLElement.querySelector ``` #### Call Signature[#](#call-signature-25) ``` querySelector(selectors): MathMLElementTagNameMap[K]; ``` ##### Type Parameters[#](#type-parameters-16) | Type Parameter | | --- | | `K` _extends_ keyof `MathMLElementTagNameMap` | ##### Parameters[#](#parameters-78) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-92) `MathMLElementTagNameMap`\[`K`\] ##### Inherited from[#](#inherited-from-91) ``` HTMLElement.querySelector ``` #### Call Signature[#](#call-signature-26) ``` querySelector(selectors): HTMLElementDeprecatedTagNameMap[K]; ``` ##### Type Parameters[#](#type-parameters-17) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementDeprecatedTagNameMap` | ##### Parameters[#](#parameters-79) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-93) `HTMLElementDeprecatedTagNameMap`\[`K`\] ##### Deprecated[#](#deprecated-2) ##### Inherited from[#](#inherited-from-92) ``` HTMLElement.querySelector ``` #### Call Signature[#](#call-signature-27) ``` querySelector(selectors): E; ``` ##### Type Parameters[#](#type-parameters-18) | Type Parameter | Default type | | --- | --- | | `E` _extends_ `Element` | `Element` | ##### Parameters[#](#parameters-80) | Parameter | Type | | --- | --- | | `selectors` | `string` | ##### Returns[#](#returns-94) `E` ##### Inherited from[#](#inherited-from-93) ``` HTMLElement.querySelector ``` * * * ### querySelectorAll()[#](#queryselectorall) #### Call Signature[#](#call-signature-28) ``` querySelectorAll(selectors): NodeListOf; ``` Returns all element descendants of node that match selectors. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll) ##### Type Parameters[#](#type-parameters-19) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementTagNameMap` | ##### Parameters[#](#parameters-81) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-95) `NodeListOf`<`HTMLElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-94) ``` HTMLElement.querySelectorAll ``` #### Call Signature[#](#call-signature-29) ``` querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters[#](#type-parameters-20) | Type Parameter | | --- | | `K` _extends_ keyof `SVGElementTagNameMap` | ##### Parameters[#](#parameters-82) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-96) `NodeListOf`<`SVGElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-95) ``` HTMLElement.querySelectorAll ``` #### Call Signature[#](#call-signature-30) ``` querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters[#](#type-parameters-21) | Type Parameter | | --- | | `K` _extends_ keyof `MathMLElementTagNameMap` | ##### Parameters[#](#parameters-83) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-97) `NodeListOf`<`MathMLElementTagNameMap`\[`K`\]> ##### Inherited from[#](#inherited-from-96) ``` HTMLElement.querySelectorAll ``` #### Call Signature[#](#call-signature-31) ``` querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters[#](#type-parameters-22) | Type Parameter | | --- | | `K` _extends_ keyof `HTMLElementDeprecatedTagNameMap` | ##### Parameters[#](#parameters-84) | Parameter | Type | | --- | --- | | `selectors` | `K` | ##### Returns[#](#returns-98) `NodeListOf`<`HTMLElementDeprecatedTagNameMap`\[`K`\]> ##### Deprecated[#](#deprecated-3) ##### Inherited from[#](#inherited-from-97) ``` HTMLElement.querySelectorAll ``` #### Call Signature[#](#call-signature-32) ``` querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters[#](#type-parameters-23) | Type Parameter | Default type | | --- | --- | | `E` _extends_ `Element` | `Element` | ##### Parameters[#](#parameters-85) | Parameter | Type | | --- | --- | | `selectors` | `string` | ##### Returns[#](#returns-99) `NodeListOf`<`E`\> ##### Inherited from[#](#inherited-from-98) ``` HTMLElement.querySelectorAll ``` * * * ### replaceChildren()[#](#replacechildren) ``` replaceChildren(...nodes): void; ``` Replace all children of node with nodes, while replacing strings in nodes with equivalent Text nodes. Throws a “HierarchyRequestError” DOMException if the constraints of the node tree are violated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/replaceChildren) #### Parameters[#](#parameters-86) | Parameter | Type | | --- | --- | | …`nodes` | (`string` | #### Returns[#](#returns-100) `void` #### Inherited from[#](#inherited-from-99) ``` HTMLElement.replaceChildren ``` ## Properties[#](#properties) | Property | Modifier | Type | Description | Inherited from | | --- | --- | --- | --- | --- | | `ariaAtomic` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaAtomic) | `HTMLElement.ariaAtomic` | | `ariaAutoComplete` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaAutoComplete) | `HTMLElement.ariaAutoComplete` | | `ariaBrailleLabel` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaBrailleLabel) | `HTMLElement.ariaBrailleLabel` | | `ariaBrailleRoleDescription` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaBrailleRoleDescription) | `HTMLElement.ariaBrailleRoleDescription` | | `ariaBusy` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaBusy) | `HTMLElement.ariaBusy` | | `ariaChecked` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaChecked) | `HTMLElement.ariaChecked` | | `ariaColCount` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaColCount) | `HTMLElement.ariaColCount` | | `ariaColIndex` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaColIndex) | `HTMLElement.ariaColIndex` | | `ariaColSpan` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaColSpan) | `HTMLElement.ariaColSpan` | | `ariaCurrent` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaCurrent) | `HTMLElement.ariaCurrent` | | `ariaDescription` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaDescription) | `HTMLElement.ariaDescription` | | `ariaDisabled` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaDisabled) | `HTMLElement.ariaDisabled` | | `ariaExpanded` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaExpanded) | `HTMLElement.ariaExpanded` | | `ariaHasPopup` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaHasPopup) | `HTMLElement.ariaHasPopup` | | `ariaHidden` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaHidden) | `HTMLElement.ariaHidden` | | `ariaInvalid` | `public` | `string` | \- | `HTMLElement.ariaInvalid` | | `ariaKeyShortcuts` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaKeyShortcuts) | `HTMLElement.ariaKeyShortcuts` | | `ariaLabel` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel) | `HTMLElement.ariaLabel` | | `ariaLevel` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLevel) | `HTMLElement.ariaLevel` | | `ariaLive` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLive) | `HTMLElement.ariaLive` | | `ariaModal` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaModal) | `HTMLElement.ariaModal` | | `ariaMultiLine` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaMultiLine) | `HTMLElement.ariaMultiLine` | | `ariaMultiSelectable` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaMultiSelectable) | `HTMLElement.ariaMultiSelectable` | | `ariaOrientation` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaOrientation) | `HTMLElement.ariaOrientation` | | `ariaPlaceholder` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaPlaceholder) | `HTMLElement.ariaPlaceholder` | | `ariaPosInSet` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaPosInSet) | `HTMLElement.ariaPosInSet` | | `ariaPressed` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaPressed) | `HTMLElement.ariaPressed` | | `ariaReadOnly` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaReadOnly) | `HTMLElement.ariaReadOnly` | | `ariaRequired` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRequired) | `HTMLElement.ariaRequired` | | `ariaRoleDescription` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRoleDescription) | `HTMLElement.ariaRoleDescription` | | `ariaRowCount` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRowCount) | `HTMLElement.ariaRowCount` | | `ariaRowIndex` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRowIndex) | `HTMLElement.ariaRowIndex` | | `ariaRowSpan` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRowSpan) | `HTMLElement.ariaRowSpan` | | `ariaSelected` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaSelected) | `HTMLElement.ariaSelected` | | `ariaSetSize` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaSetSize) | `HTMLElement.ariaSetSize` | | `ariaSort` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaSort) | `HTMLElement.ariaSort` | | `ariaValueMax` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaValueMax) | `HTMLElement.ariaValueMax` | | `ariaValueMin` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaValueMin) | `HTMLElement.ariaValueMin` | | `ariaValueNow` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaValueNow) | `HTMLElement.ariaValueNow` | | `ariaValueText` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaValueText) | `HTMLElement.ariaValueText` | | `role` | `public` | `string` | \- | `HTMLElement.role` | | `attributes` | `readonly` | `NamedNodeMap` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/attributes) | `HTMLElement.attributes` | | `classList` | `readonly` | `DOMTokenList` | Allows for manipulation of element’s class content attribute as a set of whitespace-separated tokens through a DOMTokenList object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList) | `HTMLElement.classList` | | `className` | `public` | `string` | Returns the value of element’s class content attribute. Can be set to change it. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/className) | `HTMLElement.className` | | `clientHeight` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientHeight) | `HTMLElement.clientHeight` | | `clientLeft` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientLeft) | `HTMLElement.clientLeft` | | `clientTop` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientTop) | `HTMLElement.clientTop` | | `clientWidth` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientWidth) | `HTMLElement.clientWidth` | | `id` | `public` | `string` | Returns the value of element’s id content attribute. Can be set to change it. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id) | `HTMLElement.id` | | `innerHTML` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) | `HTMLElement.innerHTML` | | `localName` | `readonly` | `string` | Returns the local name. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/localName) | `HTMLElement.localName` | | `namespaceURI` | `readonly` | `string` | Returns the namespace. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/namespaceURI) | `HTMLElement.namespaceURI` | | `onfullscreenchange` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/fullscreenchange_event) | `HTMLElement.onfullscreenchange` | | `onfullscreenerror` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/fullscreenerror_event) | `HTMLElement.onfullscreenerror` | | `outerHTML` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/outerHTML) | `HTMLElement.outerHTML` | | `ownerDocument` | `readonly` | `Document` | Returns the node document. Returns null for documents. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/ownerDocument) | `HTMLElement.ownerDocument` | | `part` | `readonly` | `DOMTokenList` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/part) | `HTMLElement.part` | | `prefix` | `readonly` | `string` | Returns the namespace prefix. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/prefix) | `HTMLElement.prefix` | | `scrollHeight` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollHeight) | `HTMLElement.scrollHeight` | | `scrollLeft` | `public` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollLeft) | `HTMLElement.scrollLeft` | | `scrollTop` | `public` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTop) | `HTMLElement.scrollTop` | | `scrollWidth` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollWidth) | `HTMLElement.scrollWidth` | | `shadowRoot` | `readonly` | `ShadowRoot` | Returns element’s shadow root, if any, and if shadow root’s mode is “open”, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/shadowRoot) | `HTMLElement.shadowRoot` | | `slot` | `public` | `string` | Returns the value of element’s slot content attribute. Can be set to change it. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/slot) | `HTMLElement.slot` | | `tagName` | `readonly` | `string` | Returns the HTML-uppercased qualified name. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) | `HTMLElement.tagName` | | `attributeStyleMap` | `readonly` | `StylePropertyMap` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/attributeStyleMap) | `HTMLElement.attributeStyleMap` | | `style` | `readonly` | `CSSStyleDeclaration` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/style) | `HTMLElement.style` | | `contentEditable` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/contentEditable) | `HTMLElement.contentEditable` | | `enterKeyHint` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/enterKeyHint) | `HTMLElement.enterKeyHint` | | `inputMode` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/inputMode) | `HTMLElement.inputMode` | | `isContentEditable` | `readonly` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/isContentEditable) | `HTMLElement.isContentEditable` | | `onabort` | `public` | (`this`, `ev`) => `any` | Fires when the user aborts the download. | `HTMLElement.onabort` | | `onanimationcancel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationcancel_event) | `HTMLElement.onanimationcancel` | | `onanimationend` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationend_event) | `HTMLElement.onanimationend` | | `onanimationiteration` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationiteration_event) | `HTMLElement.onanimationiteration` | | `onanimationstart` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationstart_event) | `HTMLElement.onanimationstart` | | `onauxclick` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/auxclick_event) | `HTMLElement.onauxclick` | | `onbeforeinput` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/beforeinput_event) | `HTMLElement.onbeforeinput` | | `onbeforetoggle` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/beforetoggle_event) | `HTMLElement.onbeforetoggle` | | `onblur` | `public` | (`this`, `ev`) => `any` | Fires when the object loses the input focus. | `HTMLElement.onblur` | | `oncancel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/cancel_event) | `HTMLElement.oncancel` | | `oncanplay` | `public` | (`this`, `ev`) => `any` | Occurs when playback is possible, but would require further buffering. | `HTMLElement.oncanplay` | | `oncanplaythrough` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/canplaythrough_event) | `HTMLElement.oncanplaythrough` | | `onchange` | `public` | (`this`, `ev`) => `any` | Fires when the contents of the object or selection have changed. | `HTMLElement.onchange` | | `onclick` | `public` | (`this`, `ev`) => `any` | Fires when the user clicks the left mouse button on the object | `HTMLElement.onclick` | | `onclose` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/close_event) | `HTMLElement.onclose` | | `oncontextlost` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/webglcontextlost_event) | `HTMLElement.oncontextlost` | | `oncontextmenu` | `public` | (`this`, `ev`) => `any` | Fires when the user clicks the right mouse button in the client area, opening the context menu. | `HTMLElement.oncontextmenu` | | `oncontextrestored` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/contextrestored_event) | `HTMLElement.oncontextrestored` | | `oncopy` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/copy_event) | `HTMLElement.oncopy` | | `oncuechange` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTrackElement/cuechange_event) | `HTMLElement.oncuechange` | | `oncut` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/cut_event) | `HTMLElement.oncut` | | `ondblclick` | `public` | (`this`, `ev`) => `any` | Fires when the user double-clicks the object. | `HTMLElement.ondblclick` | | `ondrag` | `public` | (`this`, `ev`) => `any` | Fires on the source object continuously during a drag operation. | `HTMLElement.ondrag` | | `ondragend` | `public` | (`this`, `ev`) => `any` | Fires on the source object when the user releases the mouse at the close of a drag operation. | `HTMLElement.ondragend` | | `ondragenter` | `public` | (`this`, `ev`) => `any` | Fires on the target element when the user drags the object to a valid drop target. | `HTMLElement.ondragenter` | | `ondragleave` | `public` | (`this`, `ev`) => `any` | Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation. | `HTMLElement.ondragleave` | | `ondragover` | `public` | (`this`, `ev`) => `any` | Fires on the target element continuously while the user drags the object over a valid drop target. | `HTMLElement.ondragover` | | `ondragstart` | `public` | (`this`, `ev`) => `any` | Fires on the source object when the user starts to drag a text selection or selected object. | `HTMLElement.ondragstart` | | `ondrop` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/drop_event) | `HTMLElement.ondrop` | | `ondurationchange` | `public` | (`this`, `ev`) => `any` | Occurs when the duration attribute is updated. | `HTMLElement.ondurationchange` | | `onemptied` | `public` | (`this`, `ev`) => `any` | Occurs when the media element is reset to its initial state. | `HTMLElement.onemptied` | | `onended` | `public` | (`this`, `ev`) => `any` | Occurs when the end of playback is reached. | `HTMLElement.onended` | | `onerror` | `public` | `OnErrorEventHandlerNonNull` | Fires when an error occurs during object loading. **Param** The event. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/error_event) | `HTMLElement.onerror` | | `onfocus` | `public` | (`this`, `ev`) => `any` | Fires when the object receives focus. | `HTMLElement.onfocus` | | `onformdata` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/formdata_event) | `HTMLElement.onformdata` | | `ongotpointercapture` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/gotpointercapture_event) | `HTMLElement.ongotpointercapture` | | `oninput` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/input_event) | `HTMLElement.oninput` | | `oninvalid` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/invalid_event) | `HTMLElement.oninvalid` | | `onkeydown` | `public` | (`this`, `ev`) => `any` | Fires when the user presses a key. | `HTMLElement.onkeydown` | | ~`onkeypress`~ | `public` | (`this`, `ev`) => `any` | Fires when the user presses an alphanumeric key. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keypress_event) | `HTMLElement.onkeypress` | | `onkeyup` | `public` | (`this`, `ev`) => `any` | Fires when the user releases a key. | `HTMLElement.onkeyup` | | `onload` | `public` | (`this`, `ev`) => `any` | Fires immediately after the browser loads the object. | `HTMLElement.onload` | | `onloadeddata` | `public` | (`this`, `ev`) => `any` | Occurs when media data is loaded at the current playback position. | `HTMLElement.onloadeddata` | | `onloadedmetadata` | `public` | (`this`, `ev`) => `any` | Occurs when the duration and dimensions of the media have been determined. | `HTMLElement.onloadedmetadata` | | `onloadstart` | `public` | (`this`, `ev`) => `any` | Occurs when Internet Explorer begins looking for media data. | `HTMLElement.onloadstart` | | `onlostpointercapture` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/lostpointercapture_event) | `HTMLElement.onlostpointercapture` | | `onmousedown` | `public` | (`this`, `ev`) => `any` | Fires when the user clicks the object with either mouse button. | `HTMLElement.onmousedown` | | `onmouseenter` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseenter_event) | `HTMLElement.onmouseenter` | | `onmouseleave` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseleave_event) | `HTMLElement.onmouseleave` | | `onmousemove` | `public` | (`this`, `ev`) => `any` | Fires when the user moves the mouse over the object. | `HTMLElement.onmousemove` | | `onmouseout` | `public` | (`this`, `ev`) => `any` | Fires when the user moves the mouse pointer outside the boundaries of the object. | `HTMLElement.onmouseout` | | `onmouseover` | `public` | (`this`, `ev`) => `any` | Fires when the user moves the mouse pointer into the object. | `HTMLElement.onmouseover` | | `onmouseup` | `public` | (`this`, `ev`) => `any` | Fires when the user releases a mouse button while the mouse is over the object. | `HTMLElement.onmouseup` | | `onpaste` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/paste_event) | `HTMLElement.onpaste` | | `onpause` | `public` | (`this`, `ev`) => `any` | Occurs when playback is paused. | `HTMLElement.onpause` | | `onplay` | `public` | (`this`, `ev`) => `any` | Occurs when the play method is requested. | `HTMLElement.onplay` | | `onplaying` | `public` | (`this`, `ev`) => `any` | Occurs when the audio or video has started playing. | `HTMLElement.onplaying` | | `onpointercancel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointercancel_event) | `HTMLElement.onpointercancel` | | `onpointerdown` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerdown_event) | `HTMLElement.onpointerdown` | | `onpointerenter` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerenter_event) | `HTMLElement.onpointerenter` | | `onpointerleave` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerleave_event) | `HTMLElement.onpointerleave` | | `onpointermove` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointermove_event) | `HTMLElement.onpointermove` | | `onpointerout` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerout_event) | `HTMLElement.onpointerout` | | `onpointerover` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerover_event) | `HTMLElement.onpointerover` | | `onpointerup` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerup_event) | `HTMLElement.onpointerup` | | `onprogress` | `public` | (`this`, `ev`) => `any` | Occurs to indicate progress while downloading media data. | `HTMLElement.onprogress` | | `onratechange` | `public` | (`this`, `ev`) => `any` | Occurs when the playback rate is increased or decreased. | `HTMLElement.onratechange` | | `onreset` | `public` | (`this`, `ev`) => `any` | Fires when the user resets a form. | `HTMLElement.onreset` | | `onresize` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement/resize_event) | `HTMLElement.onresize` | | `onscroll` | `public` | (`this`, `ev`) => `any` | Fires when the user repositions the scroll box in the scroll bar on the object. | `HTMLElement.onscroll` | | `onscrollend` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/scrollend_event) | `HTMLElement.onscrollend` | | `onsecuritypolicyviolation` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/securitypolicyviolation_event) | `HTMLElement.onsecuritypolicyviolation` | | `onseeked` | `public` | (`this`, `ev`) => `any` | Occurs when the seek operation ends. | `HTMLElement.onseeked` | | `onseeking` | `public` | (`this`, `ev`) => `any` | Occurs when the current playback position is moved. | `HTMLElement.onseeking` | | `onselect` | `public` | (`this`, `ev`) => `any` | Fires when the current selection changes. | `HTMLElement.onselect` | | `onselectionchange` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/selectionchange_event) | `HTMLElement.onselectionchange` | | `onselectstart` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/selectstart_event) | `HTMLElement.onselectstart` | | `onslotchange` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLSlotElement/slotchange_event) | `HTMLElement.onslotchange` | | `onstalled` | `public` | (`this`, `ev`) => `any` | Occurs when the download has stopped. | `HTMLElement.onstalled` | | `onsubmit` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/submit_event) | `HTMLElement.onsubmit` | | `onsuspend` | `public` | (`this`, `ev`) => `any` | Occurs if the load operation has been intentionally halted. | `HTMLElement.onsuspend` | | `ontimeupdate` | `public` | (`this`, `ev`) => `any` | Occurs to indicate the current playback position. | `HTMLElement.ontimeupdate` | | `ontoggle` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/toggle_event) | `HTMLElement.ontoggle` | | `ontouchcancel?` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/touchcancel_event) | `HTMLElement.ontouchcancel` | | `ontouchend?` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/touchend_event) | `HTMLElement.ontouchend` | | `ontouchmove?` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/touchmove_event) | `HTMLElement.ontouchmove` | | `ontouchstart?` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/touchstart_event) | `HTMLElement.ontouchstart` | | `ontransitioncancel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitioncancel_event) | `HTMLElement.ontransitioncancel` | | `ontransitionend` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionend_event) | `HTMLElement.ontransitionend` | | `ontransitionrun` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionrun_event) | `HTMLElement.ontransitionrun` | | `ontransitionstart` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionstart_event) | `HTMLElement.ontransitionstart` | | `onvolumechange` | `public` | (`this`, `ev`) => `any` | Occurs when the volume is changed, or playback is muted or unmuted. | `HTMLElement.onvolumechange` | | `onwaiting` | `public` | (`this`, `ev`) => `any` | Occurs when playback stops because the next frame of a video resource is not available. | `HTMLElement.onwaiting` | | ~`onwebkitanimationend`~ | `public` | (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationend`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationend_event) | `HTMLElement.onwebkitanimationend` | | ~`onwebkitanimationiteration`~ | `public` | (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationiteration`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationiteration_event) | `HTMLElement.onwebkitanimationiteration` | | ~`onwebkitanimationstart`~ | `public` | (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationstart`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationstart_event) | `HTMLElement.onwebkitanimationstart` | | ~`onwebkittransitionend`~ | `public` | (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `ontransitionend`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionend_event) | `HTMLElement.onwebkittransitionend` | | `onwheel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/wheel_event) | `HTMLElement.onwheel` | | `accessKey` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKey) | `HTMLElement.accessKey` | | `accessKeyLabel` | `readonly` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKeyLabel) | `HTMLElement.accessKeyLabel` | | `autocapitalize` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/autocapitalize) | `HTMLElement.autocapitalize` | | `dir` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dir) | `HTMLElement.dir` | | `draggable` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/draggable) | `HTMLElement.draggable` | | `hidden` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/hidden) | `HTMLElement.hidden` | | `inert` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/inert) | `HTMLElement.inert` | | `innerText` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/innerText) | `HTMLElement.innerText` | | `lang` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/lang) | `HTMLElement.lang` | | `offsetHeight` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetHeight) | `HTMLElement.offsetHeight` | | `offsetLeft` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetLeft) | `HTMLElement.offsetLeft` | | `offsetParent` | `readonly` | `Element` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetParent) | `HTMLElement.offsetParent` | | `offsetTop` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetTop) | `HTMLElement.offsetTop` | | `offsetWidth` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetWidth) | `HTMLElement.offsetWidth` | | `outerText` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/outerText) | `HTMLElement.outerText` | | `popover` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/popover) | `HTMLElement.popover` | | `spellcheck` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/spellcheck) | `HTMLElement.spellcheck` | | `title` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/title) | `HTMLElement.title` | | `translate` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/translate) | `HTMLElement.translate` | | `autofocus` | `public` | `boolean` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/autofocus) | `HTMLElement.autofocus` | | `dataset` | `readonly` | `DOMStringMap` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dataset) | `HTMLElement.dataset` | | `nonce?` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/nonce) | `HTMLElement.nonce` | | `tabIndex` | `public` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/tabIndex) | `HTMLElement.tabIndex` | | `baseURI` | `readonly` | `string` | Returns node’s node document’s document base URL. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/baseURI) | `HTMLElement.baseURI` | | `childNodes` | `readonly` | `NodeListOf`<`ChildNode`\> | Returns the children. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/childNodes) | `HTMLElement.childNodes` | | `firstChild` | `readonly` | `ChildNode` | Returns the first child. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/firstChild) | `HTMLElement.firstChild` | | `isConnected` | `readonly` | `boolean` | Returns true if node is connected and false otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isConnected) | `HTMLElement.isConnected` | | `lastChild` | `readonly` | `ChildNode` | Returns the last child. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/lastChild) | `HTMLElement.lastChild` | | `nextSibling` | `readonly` | `ChildNode` | Returns the next sibling. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nextSibling) | `HTMLElement.nextSibling` | | `nodeName` | `readonly` | `string` | Returns a string appropriate for the type of node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeName) | `HTMLElement.nodeName` | | `nodeType` | `readonly` | `number` | Returns the type of node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeType) | `HTMLElement.nodeType` | | `nodeValue` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeValue) | `HTMLElement.nodeValue` | | `parentElement` | `readonly` | `HTMLElement` | Returns the parent element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/parentElement) | `HTMLElement.parentElement` | | `parentNode` | `readonly` | `ParentNode` | Returns the parent. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/parentNode) | `HTMLElement.parentNode` | | `previousSibling` | `readonly` | `ChildNode` | Returns the previous sibling. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/previousSibling) | `HTMLElement.previousSibling` | | `textContent` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/textContent) | `HTMLElement.textContent` | | `ELEMENT_NODE` | `readonly` | `1` | node is an element. | `HTMLElement.ELEMENT_NODE` | | `ATTRIBUTE_NODE` | `readonly` | `2` | \- | `HTMLElement.ATTRIBUTE_NODE` | | `TEXT_NODE` | `readonly` | `3` | node is a Text node. | `HTMLElement.TEXT_NODE` | | `CDATA_SECTION_NODE` | `readonly` | `4` | node is a CDATASection node. | `HTMLElement.CDATA_SECTION_NODE` | | `ENTITY_REFERENCE_NODE` | `readonly` | `5` | \- | `HTMLElement.ENTITY_REFERENCE_NODE` | | `ENTITY_NODE` | `readonly` | `6` | \- | `HTMLElement.ENTITY_NODE` | | `PROCESSING_INSTRUCTION_NODE` | `readonly` | `7` | node is a ProcessingInstruction node. | `HTMLElement.PROCESSING_INSTRUCTION_NODE` | | `COMMENT_NODE` | `readonly` | `8` | node is a Comment node. | `HTMLElement.COMMENT_NODE` | | `DOCUMENT_NODE` | `readonly` | `9` | node is a document. | `HTMLElement.DOCUMENT_NODE` | | `DOCUMENT_TYPE_NODE` | `readonly` | `10` | node is a doctype. | `HTMLElement.DOCUMENT_TYPE_NODE` | | `DOCUMENT_FRAGMENT_NODE` | `readonly` | `11` | node is a DocumentFragment node. | `HTMLElement.DOCUMENT_FRAGMENT_NODE` | | `NOTATION_NODE` | `readonly` | `12` | \- | `HTMLElement.NOTATION_NODE` | | `DOCUMENT_POSITION_DISCONNECTED` | `readonly` | `1` | Set when node and other are not in the same tree. | `HTMLElement.DOCUMENT_POSITION_DISCONNECTED` | | `DOCUMENT_POSITION_PRECEDING` | `readonly` | `2` | Set when other is preceding node. | `HTMLElement.DOCUMENT_POSITION_PRECEDING` | | `DOCUMENT_POSITION_FOLLOWING` | `readonly` | `4` | Set when other is following node. | `HTMLElement.DOCUMENT_POSITION_FOLLOWING` | | `DOCUMENT_POSITION_CONTAINS` | `readonly` | `8` | Set when other is an ancestor of node. | `HTMLElement.DOCUMENT_POSITION_CONTAINS` | | `DOCUMENT_POSITION_CONTAINED_BY` | `readonly` | `16` | Set when other is a descendant of node. | `HTMLElement.DOCUMENT_POSITION_CONTAINED_BY` | | `DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | `readonly` | `32` | \- | `HTMLElement.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | | `nextElementSibling` | `readonly` | `Element` | Returns the first following sibling that is an element, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/nextElementSibling) | `HTMLElement.nextElementSibling` | | `previousElementSibling` | `readonly` | `Element` | Returns the first preceding sibling that is an element, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/previousElementSibling) | `HTMLElement.previousElementSibling` | | `childElementCount` | `readonly` | `number` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/childElementCount) | `HTMLElement.childElementCount` | | `children` | `readonly` | `HTMLCollection` | Returns the child elements. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/children) | `HTMLElement.children` | | `firstElementChild` | `readonly` | `Element` | Returns the first child that is an element, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/firstElementChild) | `HTMLElement.firstElementChild` | | `lastElementChild` | `readonly` | `Element` | Returns the last child that is an element, and null otherwise. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/lastElementChild) | `HTMLElement.lastElementChild` | | `assignedSlot` | `readonly` | `HTMLSlotElement` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/assignedSlot) | `HTMLElement.assignedSlot` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/headingoptions) # Interface: HeadingOptions Represents options for a heading. The `HeadingOptions` interface provides a set of properties that control the behavior and appearance of a heading. These options include settings for the content. ## Properties[#](#properties) | Property | Type | | --- | --- | | `content` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/gradientcolorstop) # Interface: GradientColorStop Represents a gradient color stop. Defines a gradient color stop with a color and a stop position. * ‘color’: The color value. * ‘stop’: The relative position of the color within the gradient in the range \[0, 1\]. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `color` | `Color` | A color value within a gradient. | | `stop` | `number` | The relative position of the color within the gradient in the range \[0, 1\]. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/font) # Interface: Font Represents a font. The Font interface defines the structure of a font within the Creative Editor SDK. It includes properties for the uri, subFamily, weight, and style. ## Properties[#](#properties) | Property | Type | | --- | --- | | `uri` | `string` | | `subFamily` | `string` | | `weight?` | [`FontWeight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/fontweight/) | | `style?` | [`FontStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/fontstyle/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/engineplugin) # Interface: EnginePlugin Represents an engine plugin. Defines the structure of an engine plugin, including its name, version, and initialization function. * ‘name’: The name of the plugin. * ‘version’: The version of the plugin. * ‘initialize’: The function to initialize the plugin with the provided context. Can be synchronous or asynchronous. ## Properties[#](#properties) | Property | Type | | --- | --- | | `name` | `string` | | `version` | `string` | | `initialize` | (`context`) => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/exportoptions) # Interface: ExportOptions Specifies options for exporting design blocks to various formats. The `ExportOptions` interface provides a set of properties that control the behavior and quality of the exported content. These options include settings for JPEG, WebP, PNG, and PDF exports, as well as options for resizing and adding underlayers. ## Extends[#](#extends) * `Pick`<[`EngineExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineexportoptions/), | `"pngCompressionLevel"` | `"jpegQuality"` | `"webpQuality"` | `"exportPdfWithHighCompatibility"` | `"exportPdfWithUnderlayer"` | `"underlayerSpotColorName"` | `"underlayerOffset"`\> ## Properties[#](#properties) | Property | Type | Default value | Description | Inherited from | | --- | --- | --- | --- | --- | | `pngCompressionLevel?` | `number` | `5.` | The PNG compression level to use, when exporting to PNG. Valid values are 0 to 9, higher means smaller, but slower. Quality is not affected. Ignored for other encodings. | `Pick.pngCompressionLevel` | | `jpegQuality?` | `number` | `0.9` | The JPEG quality to use when encoding to JPEG. Valid values are (0-1\], higher means better quality. Ignored for other encodings. | `Pick.jpegQuality` | | `webpQuality?` | `number` | `undefined` | The WebP quality to use when encoding to WebP. Valid values are (0-1\], higher means better quality. WebP uses a special lossless encoding that usually produces smaller file sizes than PNG. Ignored for other encodings. Defaults to 1.0. | `Pick.webpQuality` | | `exportPdfWithHighCompatibility?` | `boolean` | `undefined` | Export the PDF document with a higher compatibility to different PDF viewers. Bitmap images and some effects like gradients will be rasterized with the DPI setting instead of embedding them directly. | `Pick.exportPdfWithHighCompatibility` | | `exportPdfWithUnderlayer?` | `boolean` | `undefined` | Export the PDF document with an underlayer. An underlayer is generated by adding a graphics block behind the existing elements of the shape of the elements on the page. | `Pick.exportPdfWithUnderlayer` | | `underlayerSpotColorName?` | `string` | `undefined` | The name of the spot color to be used for the underlayer’s fill. | `Pick.underlayerSpotColorName` | | `underlayerOffset?` | `number` | `undefined` | The adjustment in size of the shape of the underlayer. | `Pick.underlayerOffset` | | `mimeType` | [`MimeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/mimetype/) | `undefined` | The mime type of the exported blob | \- | | `pages?` | `number`\[\] | `undefined` | The pages to export with the selected page as the default | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/engineconfiguration) # Interface: \_EngineConfiguration Specifies the configuration for the Creative Editor SDK. The `Configuration` interface provides a set of properties that control the behavior and settings of the editor. These options include settings for the base URL, license, user ID, core settings, logger, feature flags, presets, force WebGL1, audio output, and role. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `baseURL` | `string` | \- | | `license?` | `string` | \- | | `userId?` | `string` | \- | | `core` | `object` | \- | | `core.baseURL` | `string` | \- | | `logger` | [`Logger`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/logger/) | \- | | `featureFlags?` | `object` | \- | | ~`presets`~ | `object` | **Deprecated** This config key is not used anymore and will be removed. | | `presets.typefaces?` | `object` | **Deprecated** The configuration option `presets.typefaces` does not exist anymore. Custom typefaces should be defined as asset sources using the `cesdk.engine.asset.addSource` or `cesdk.engine.asset.addLocalSource` instead. | | `forceWebGL1?` | `boolean` | By default the engine tries to create a webgl2 context. If this fails it falls back to trying to create a webgl1 context. If this configuration option is set to true, it will no longer try to create a webgl2 context and always create a webgl1 context. | | `audioOutput?` | `"auto"` | `"none"` | | `role?` | [`RoleString`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rolestring/) | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/editorplugin) # Interface: EditorPlugin Represents an editor plugin. This interface defines the structure of an editor plugin, including its name, version, and initialization function. ## Properties[#](#properties) | Property | Type | | --- | --- | | `name` | `string` | | `version` | `string` | | `initialize` | (`context`) => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dropdownoptions) # Interface: DropdownOptions Represents options for a dropdown. The `DropdownOptions` interface provides a set of properties that control the behavior and appearance of a dropdown. These options include settings for the input label, input label position, label, tooltip, variant, color, size, icon, disabled state, loading state, loading progress, children, and suffix. ## Properties[#](#properties) | Property | Type | | --- | --- | | `inputLabel?` | `string` | | `inputLabelPosition?` | `"top"` | | `label?` | `string` | | `tooltip?` | `string` | | `variant?` | `"regular"` | | `color?` | `"accent"` | | `size?` | `"normal"` | | `icon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | | `isDisabled?` | `boolean` | | `isLoading?` | `boolean` | | `loadingProgress?` | `number` | | `children?` | | | `suffix?` | `Partial` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dropdownchildrencontext) # Interface: DropdownChildrenContext Represents the context for the children of a dropdown. The `DropdownChildrenContext` interface provides a set of properties that describe the context for the children of a dropdown. These options include settings for the close function. ## Properties[#](#properties) | Property | Type | | --- | --- | | `close` | () => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dialog) # Interface: Dialog Represents a dialog configuration. The Dialog interface defines the structure of a dialog configuration within the Creative Editor SDK. It includes properties for the type, size, content, progress, actions, cancel action, onClose callback, and whether clicking outside the dialog should close it. This interface provides a comprehensive way to define and manage dialogs, allowing for flexibility in how they are presented and interacted with by users. ## Properties[#](#properties) | Property | Type | | --- | --- | | `type?` | [`DialogType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogtype/) | | `size?` | [`DialogSize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogsize/) | | `content` | [`DialogContent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogcontent/) | | `progress?` | [`DialogProgress`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogprogress/) | | `actions?` | | | `cancel?` | [`DialogAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogaction/) | | `onClose?` | () => `void` | | `clickOutsideToClose?` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/customdockcomponent) # Interface: CustomDockComponent Represents a custom dock component. The CustomDockComponent interface defines the structure of a custom dock component. It includes properties for the ID and payload. ## Extends[#](#extends) * [`ComponentPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) ## Indexable[#](#indexable) ``` [key: string]: unknown ``` ## Properties[#](#properties) | Property | Type | | --- | --- | | `id` | [`ComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentid/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload) # Interface: ComponentPayload Represents the payload of a component. The ComponentPayload interface defines the structure of the payload that can be associated with a component. It includes a catch-all type for custom payloads. ## Extended by[#](#extended-by) * [`CustomDockComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/customdockcomponent/) * [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) ## Indexable[#](#indexable) ``` [key: string]: unknown ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentoptions) # Interface: ComponentOptions Represents options for a component. The `ComponentOptions` interface provides a set of properties that control the behavior and appearance of a component. These options include settings for the component ID, payload, and focusable state. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `componentId` | `string` | The unique identifier for the registered component. | | `payload?` | `any` | Optional payload to pass to the component. | | `focusable?` | `boolean` | Whether the component should be focusable (default: true) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/completeassetresult) # Interface: CompleteAssetResult Asset results that are returned from the engine. They contain additional information about the context of the asset. ## Extends[#](#extends) * [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) ## Properties[#](#properties) | Property | Type | Description | Overrides | Inherited from | | --- | --- | --- | --- | --- | | `id` | `string` | The unique id of this asset. | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`id`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | | `groups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetgroups/) | Groups of the asset. | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`groups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | | `meta?` | [`AssetMetaData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetmetadata/) | Asset-specific and custom meta information | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`meta`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | | `payload?` | [`AssetPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetpayload/) | Structured asset-specific data | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`payload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | | `locale?` | `string` | The locale of the label and tags | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`locale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | | `label?` | `string` | The label of the result. Used for description and tooltips. | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | | `tags?` | `string`\[\] | The tags of this asset. Used for filtering and free-text searching. | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`tags`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | | `credits?` | `object` | Credits for the artist of the asset | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`credits`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | | `credits.name` | `string` | \- | \- | \- | | `credits.url?` | `string` | \- | \- | \- | | `license?` | `object` | License for this asset. Overwrites the source license if present | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`license`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | | `license.name` | `string` | \- | \- | \- | | `license.url?` | `string` | \- | \- | \- | | `utm?` | `object` | UTM parameters for the links inside the credits | \- | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`utm`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | | `utm.source?` | `string` | \- | \- | \- | | `utm.medium?` | `string` | \- | \- | \- | | `context` | `object` | Context how an asset was added or shall be used in the future. This is added to all assets coming from the engine. | \- | \- | | `context.sourceId` | `string` | \- | \- | \- | | `active` | `boolean` | This is optional in `AssetResult` but always present here | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/).[`active`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/colorinputoptions) # Interface: ColorInputOptions Represents options for a color input. The `ColorInputOptions` interface provides a set of properties that control the behavior and appearance of a color input. These options include settings for the input label, input label position, value, value setter, disabled state, label, and suffix. ## Extends[#](#extends) * [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)<`Color`\> ## Properties[#](#properties) | Property | Type | Inherited from | | --- | --- | --- | | `label?` | `string` | `string`\[\] | | `inputLabel?` | `string` | `string`\[\] | | `inputLabelPosition?` | `"top"` | `"left"` | | `value` | `Color` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`value`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `setValue` | (`value`) => `void` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`setValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `isDisabled?` | `boolean` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`isDisabled`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `suffix?` | `Partial` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/cmykcolor) # Interface: CMYKColor Represents a CMYK color value. Defines a CMYK color value with components between 0 and 1. * ‘c’: The cyan component. * ‘m’: The magenta component. * ‘y’: The yellow component. * ‘k’: The black component. * ‘tint’: The tint factor. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `c` | `number` | Cyan | | `m` | `number` | Magenta | | `y` | `number` | Yellow | | `k` | `number` | Black | | `tint` | `number` | The tint factor | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/checkboxoptions) # Interface: CheckboxOptions Represents options for a checkbox. The `CheckboxOptions` interface provides a set of properties that control the behavior and appearance of a checkbox. These options include settings for the input label, input label position, value, value setter, disabled state, icon, and suffix. ## Extends[#](#extends) * [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)<`boolean`, `"left"` | `"right"`\> ## Properties[#](#properties) | Property | Type | Inherited from | | --- | --- | --- | | `icon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | \- | | `inputLabel?` | `string` | `string`\[\] | | `inputLabelPosition?` | `"left"` | `"right"` | | `value` | `boolean` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`value`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `setValue` | (`value`) => `void` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`setValue`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `isDisabled?` | `boolean` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`isDisabled`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `suffix?` | `Partial` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/cesdkconfiguration) # Interface: CESDKConfiguration Represents the configuration settings for the Creative Editor SDK. This interface defines various settings such as locale, theme, development mode, user interface, internationalization, accessibility, callbacks, feature flags, and logger. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`locale`~ | `string` | **Deprecated** The `locale` property is deprecated. Please use the `setLocale()` property to configure localization. | | ~`theme`~ | [`ThemeConfig`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/themeconfig/) | **Deprecated** The `theme` property is deprecated. Please use `ui.setTheme()` to configure theming. | | `devMode` | `boolean` | \- | | `ui` | [`UserInterface`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/userinterface/) | \- | | ~`i18n`~ | [`I18n`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/i18n/) | **Deprecated** The `i18n` property is deprecated. Please use the `setTranslations()` method to configure internationalization. | | `a11y` | [`A11y`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/a11y/) | \- | | ~`callbacks`~ | [`Callbacks`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/callbacks/) | **Deprecated** The `callbacks` property is deprecated in favor of the `cesdk.actions` API and navigation bar order APIs. | | `featureFlags?` | `object` | \- | | `logger` | [`Logger`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/logger/) | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuoptionscomponent) # Interface: CanvasMenuOptionsComponent Interface representing the canvas menu options dropdown component. This component can contain children components that are rendered in a dropdown menu. * `children`: Optional array of child component IDs or components to render in the dropdown. * `icon`: Optional icon name to display on the dropdown button. * `variant`: Optional style variant of the dropdown button, either ‘regular’ or ‘plain’. * `tooltip`: Optional tooltip text to display when hovering over the dropdown button. ## Extends[#](#extends) * [`OrderComponentWithChildren`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/)<[`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/), [`CanvasMenuActionButton`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuactionbutton/)\> ## Indexable[#](#indexable) ``` [key: string]: unknown ``` ## Properties[#](#properties) | Property | Type | Description | Overrides | Inherited from | | --- | --- | --- | --- | --- | | `id` | `"ly.img.options.canvasMenu"` | \- | [`OrderComponentWithChildren`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/).[`id`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/) | \- | | `icon?` | `string` | \- | \- | \- | | `variant?` | `"regular"` | `"plain"` | \- | \- | | `tooltip?` | `string` | \- | \- | \- | | `key?` | `string` | \- | \- | [`OrderComponentWithChildren`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/).[`key`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/) | | `children?` | ( | [`CanvasMenuActionButton`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuactionbutton/) | [`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/) | [`OrderComponentWithChildren`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/)<[`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/), [`CanvasMenuActionButton`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuactionbutton/)\>)\[\] | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenucustomactionbutton) # Interface: CanvasMenuCustomActionButton Interface representing a custom canvas menu action button. Note: This component requires a key and has a required label, unlike other action buttons. ## Extends[#](#extends) * [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) ## Indexable[#](#indexable) ``` [key: string]: unknown ``` ## Properties[#](#properties) | Property | Type | Overrides | | --- | --- | --- | | `id` | `"ly.img.action.canvasMenu"` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/).[`id`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | | `key` | `string` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/).[`key`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | | `onClick` | () => `void` | `Promise`<`void`\> | | `label` | `string` | \- | | `icon?` | `string` | \- | | `variant?` | `"regular"` | `"plain"` | | `isDisabled?` | `boolean` | \- | | `shortcut?` | `string` | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuactionbutton) # Interface: CanvasMenuActionButton Base interface for action buttons in the canvas menu. Contains common properties shared across all canvas menu button types. * `onClick`: Handler invoked when the button is clicked. * `label`: Optional label for the button. * `icon`: Optional icon name to display on the button. * `variant`: Optional style variant of the button, either ‘regular’ or ‘plain’. * `isDisabled`: Optional disabled property. * `shortcut`: Optional keyboard shortcut displayed alongside the action. ## Extends[#](#extends) * [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) ## Indexable[#](#indexable) ``` [key: string]: unknown ``` ## Properties[#](#properties) | Property | Type | Overrides | Inherited from | | --- | --- | --- | --- | | `id` | | `"ly.img.flipX.canvasMenu"` | `"ly.img.flipY.canvasMenu"` | | `onClick?` | () => `void` | `Promise`<`void`\> | \- | | `label?` | `string` | \- | \- | | `icon?` | `string` | \- | \- | | `variant?` | `"regular"` | `"plain"` | \- | | `isDisabled?` | `boolean` | \- | \- | | `shortcut?` | `string` | \- | \- | | `key?` | `string` | \- | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/).[`key`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/buttonoptions) # Interface: ButtonOptions Represents options for a button. The `ButtonOptions` interface provides a set of properties that control the behavior and appearance of a button. These options include settings for the input label, input label position, label, label alignment, tooltip, click handler, variant, color, size, icon, trailing icon, active state, selected state, disabled state, loading state, loading progress, suffix, and keyboard shortcut. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `inputLabel?` | `string` | `string`\[\] | | `inputLabelPosition?` | `"top"` | `"left"` | | `label?` | `string` | `string`\[\] | | `labelAlignment?` | `"left"` | `"center"` | | `tooltip?` | `string` | `string`\[\] | | `onClick?` | () => `void` | \- | | `variant?` | `"regular"` | `"plain"` | | `color?` | `"accent"` | `"danger"` | | `size?` | `"normal"` | `"large"` | | `icon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | \- | | `trailingIcon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | \- | | `isActive?` | `boolean` | \- | | `isSelected?` | `boolean` | \- | | `isDisabled?` | `boolean` | \- | | `isLoading?` | `boolean` | \- | | `loadingProgress?` | `number` | \- | | `suffix?` | `Partial` | \- | | `shortcut?` | `string` | Keyboard shortcut to display (e.g., ‘Meta+C’, ‘Meta+V’, ‘Alt+D’). Automatically renders OS-appropriate modifiers (⌘ on macOS, Ctrl on Windows/Linux). Hidden on small viewports. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations) # Interface: BuiltinTranslations Built-in translation keys provided by the Creative Editor SDK. ## Extended by[#](#extended-by) * [`Translations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations/) ## Properties[#](#properties) | Property | Type | | --- | --- | | `action.align` | `string` | | `action.align.bottom` | `string` | | `action.align.bottom.description` | `string` | | `action.align.elements` | `string` | | `action.align.horizontalCenter` | `string` | | `action.align.horizontalCenter.description` | `string` | | `action.align.left` | `string` | | `action.align.left.description` | `string` | | `action.align.right` | `string` | | `action.align.right.description` | `string` | | `action.align.toPage` | `string` | | `action.align.top` | `string` | | `action.align.top.description` | `string` | | `action.align.verticalCenter` | `string` | | `action.align.verticalCenter.description` | `string` | | `action.arrange` | `string` | | `action.arrange.alwaysOnBottom` | `string` | | `action.arrange.alwaysOnTop` | `string` | | `action.arrange.bringForward` | `string` | | `action.arrange.moveLeft` | `string` | | `action.arrange.moveRight` | `string` | | `action.arrange.sendBackward` | `string` | | `action.arrange.toBack` | `string` | | `action.arrange.toFront` | `string` | | `action.audio.delete` | `string` | | `action.audio.duplicate` | `string` | | `action.audio.replace` | `string` | | `action.backgroundClip.add` | `string` | | `action.block.add` | `string` | | `action.block.copy` | `string` | | `action.block.delete` | `string` | | `action.block.delete_plural` | `string` | | `action.block.duplicate` | `string` | | `action.block.flipX` | `string` | | `action.block.flipY` | `string` | | `action.block.lock` | `string` | | `action.block.lock.description` | `string` | | `action.block.move` | `string` | | `action.block.paste` | `string` | | `action.block.rename` | `string` | | `action.block.resize` | `string` | | `action.block.rotate` | `string` | | `action.block.toggleVisibility` | `string` | | `action.block.unlock` | `string` | | `action.block.unlock.description` | `string` | | `action.clip.add` | `string` | | `action.closeInspector` | `string` | | `action.continue` | `string` | | `action.crop.contentFillMode` | `string` | | `action.crop.exit` | `string` | | `action.crop.mirrorX` | `string` | | `action.crop.mirrorY` | `string` | | `action.crop.reset` | `string` | | `action.crop.turn` | `string` | | `action.crop.turnAndMirror` | `string` | | `action.cutoutOffset.change` | `string` | | `action.cutoutSmoothing.change` | `string` | | `action.cutoutType.change` | `string` | | `action.distribute` | `string` | | `action.distribute.horizontally` | `string` | | `action.distribute.horizontally.description` | `string` | | `action.distribute.vertically` | `string` | | `action.distribute.vertically.description` | `string` | | `action.editText` | `string` | | `action.effect.add` | `string` | | `action.effect.remove` | `string` | | `action.enterGroup` | `string` | | `action.fillType.change` | `string` | | `action.filter.add` | `string` | | `action.filter.remove` | `string` | | `action.gradient.addStop` | `string` | | `action.gradient.removeStop` | `string` | | `action.group` | `string` | | `action.image.blur` | `string` | | `action.image.crop` | `string` | | `action.image.effect` | `string` | | `action.image.filter` | `string` | | `action.image.inpainting` | `string` | | `action.image.matting` | `string` | | `action.image.matting.staging` | `string` | | `action.image.replace` | `string` | | `action.image.smartCrop` | `string` | | `action.image.smartImage` | `string` | | `action.image.smartImage.description` | `string` | | `action.image.superResolution` | `string` | | `action.loop.disable` | `string` | | `action.loop.enable` | `string` | | `action.mute` | `string` | | `action.page.add` | `string` | | `action.page.changeFormat` | `string` | | `action.page.delete` | `string` | | `action.pageMove.down` | `string` | | `action.pageMove.down.description` | `string` | | `action.pageMove.left` | `string` | | `action.pageMove.left.description` | `string` | | `action.pageMove.right` | `string` | | `action.pageMove.right.description` | `string` | | `action.pageMove.up` | `string` | | `action.pageMove.up.description` | `string` | | `action.placeholder.change` | `string` | | `action.placeholder.create` | `string` | | `action.placeholder.remove` | `string` | | `action.position` | `string` | | `action.property.reset` | `string` | | `action.property.update` | `string` | | `action.resize` | `string` | | `action.scene.load` | `string` | | `action.scene.new` | `string` | | `action.selectGroup` | `string` | | `action.setAsClip` | `string` | | `action.setAsOverlay` | `string` | | `action.shadow.angle.change` | `string` | | `action.shadow.angle.rotate` | `string` | | `action.shadow.blur.change` | `string` | | `action.shadow.color.change` | `string` | | `action.shadow.distance.change` | `string` | | `action.showInspector` | `string` | | `action.splitClip` | `string` | | `action.splitClip.description` | `string` | | `action.strokeCornerGeometry.change` | `string` | | `action.strokePosition.change` | `string` | | `action.strokeStyle.change` | `string` | | `action.text.autoHeight` | `string` | | `action.text.autoHeight.automatic` | `string` | | `action.text.autoHeight.notification` | `string` | | `action.text.autoSize` | `string` | | `action.text.autoSize.automatic` | `string` | | `action.text.autoSize.notification` | `string` | | `action.text.change` | `string` | | `action.text.changeCase` | `string` | | `action.text.fixedFrame` | `string` | | `action.text.fixedFrame.automatic` | `string` | | `action.text.fixedFrame.notification` | `string` | | `action.ungroup` | `string` | | `action.unmute` | `string` | | `action.video.replace` | `string` | | `block.audio` | `string` | | `block.caption` | `string` | | `block.cutout` | `string` | | `block.ellipse` | `string` | | `block.graphic` | `string` | | `block.group` | `string` | | `block.image` | `string` | | `block.line` | `string` | | `block.page` | `string` | | `block.polygon` | `string` | | `block.rect` | `string` | | `block.scene` | `string` | | `block.star` | `string` | | `block.sticker` | `string` | | `block.text` | `string` | | `block.vector_path` | `string` | | `block.video` | `string` | | `color.aqua` | `string` | | `color.black` | `string` | | `color.blue` | `string` | | `color.cyan` | `string` | | `color.green` | `string` | | `color.magenta` | `string` | | `color.orange` | `string` | | `color.purple` | `string` | | `color.red` | `string` | | `color.transparent` | `string` | | `color.yellow` | `string` | | `common.add` | `string` | | `common.advanced` | `string` | | `common.arrange` | `string` | | `common.axis.x` | `string` | | `common.axis.y` | `string` | | `common.back` | `string` | | `common.cancel` | `string` | | `common.close` | `string` | | `common.cmyk` | `string` | | `common.color` | `string` | | `common.colorValue` | `string` | | `common.confirm` | `string` | | `common.controlKey` | `string` | | `common.shiftKey` | `string` | | `common.altKey` | `string` | | `common.custom` | `string` | | `common.defaultDuration` | `string` | | `common.defaultDuration.inUnit` | `string` | | `common.delete` | `string` | | `common.done` | `string` | | `common.download` | `string` | | `common.duplicate` | `string` | | `common.edit` | `string` | | `common.editColor` | `string` | | `common.export` | `string` | | `common.fill` | `string` | | `common.formats` | `string` | | `common.height` | `string` | | `common.height.inUnit` | `string` | | `common.hue` | `string` | | `common.image` | `string` | | `common.inch` | `string` | | `common.load` | `string` | | `common.lock` | `string` | | `common.millimeter` | `string` | | `common.mixed` | `string` | | `common.mode.design` | `string` | | `common.mode.preview` | `string` | | `common.mode.template` | `string` | | `common.more` | `string` | | `common.nearestColorName` | `string` | | `common.off` | `string` | | `common.on` | `string` | | `common.opacity` | `string` | | `common.page` | `string` | | `common.pause` | `string` | | `common.pixel` | `string` | | `common.pixelScale` | `string` | | `common.placeholder` | `string` | | `common.play` | `string` | | `common.position` | `string` | | `common.presets` | `string` | | `common.properties` | `string` | | `common.property` | `string` | | `common.redo` | `string` | | `common.reloadPage` | `string` | | `common.replace` | `string` | | `common.reset` | `string` | | `common.resolution` | `string` | | `common.role` | `string` | | `common.role.adopter` | `string` | | `common.role.creator` | `string` | | `common.role.presenter` | `string` | | `common.role.viewer` | `string` | | `common.rotateAndFlip` | `string` | | `common.rotation` | `string` | | `common.rotation.inUnit` | `string` | | `common.save` | `string` | | `common.select` | `string` | | `common.size` | `string` | | `common.spotColor` | `string` | | `common.srgb` | `string` | | `common.style` | `string` | | `common.tint` | `string` | | `common.transform` | `string` | | `common.trim` | `string` | | `common.undo` | `string` | | `common.unit` | `string` | | `common.unit.description` | `string` | | `common.unlock` | `string` | | `common.video` | `string` | | `common.width` | `string` | | `common.width.inUnit` | `string` | | `component.alignAndArrange` | `string` | | `component.assetPanelAutoCloseSettings` | `string` | | `component.assetPanelAutoCloseSettings.false` | `string` | | `component.assetPanelAutoCloseSettings.false.description` | `string` | | `component.assetPanelAutoCloseSettings.true` | `string` | | `component.assetPanelAutoCloseSettings.true.description` | `string` | | `component.assetPanelFloatingSettings` | `string` | | `component.assetPanelFloatingSettings.fixed` | `string` | | `component.assetPanelFloatingSettings.fixed.description` | `string` | | `component.assetPanelFloatingSettings.floating` | `string` | | `component.assetPanelFloatingSettings.floating.description` | `string` | | `component.assetSettings` | `string` | | `component.assetSettings.adjustments` | `string` | | `component.assetSettings.blur` | `string` | | `component.assetSettings.crop` | `string` | | `component.assetSettings.effects` | `string` | | `component.assetSettings.filters` | `string` | | `component.assetSettings.opacity` | `string` | | `component.assetSettings.text.advanced` | `string` | | `component.assetSettings.text.color` | `string` | | `component.assetSettings.transform` | `string` | | `component.audio.properties` | `string` | | `component.audio.source` | `string` | | `component.audio.trim` | `string` | | `component.audio.trim.description` | `string` | | `component.audio.trim.duration` | `string` | | `component.audio.trim.duration.description` | `string` | | `component.audio.trim.play` | `string` | | `component.audio.trim.play.description` | `string` | | `component.canvas` | `string` | | `component.canvas.openLibrary` | `string` | | `component.canvas.state.error` | `string` | | `component.canvas.state.unsupported` | `string` | | `component.caption` | `string` | | `component.caption.more` | `string` | | `component.colorPicker.colorItem` | `string` | | `component.colorPicker.colorItem.description` | `string` | | `component.colorPicker.colorItem.hexInput` | `string` | | `component.colorPicker.colorItem.transparent` | `string` | | `component.colorPicker.description` | `string` | | `component.colorPicker.hsl.description` | `string` | | `component.colorPicker.hueGradient` | `string` | | `component.colorSchemeSelect.accent` | `string` | | `component.colorSchemeSelect.accent.description` | `string` | | `component.colorSchemeSelect.active` | `string` | | `component.colorSchemeSelect.active.description` | `string` | | `component.colorSchemeSelect.background` | `string` | | `component.colorSchemeSelect.background.description` | `string` | | `component.contentFill` | `string` | | `component.contentFill.color` | `string` | | `component.contentFill.color.description` | `string` | | `component.contentFill.description` | `string` | | `component.contentFill.image` | `string` | | `component.contentFill.options` | `string` | | `component.contentFill.options.description` | `string` | | `component.contentFill.video` | `string` | | `component.cutout` | `string` | | `component.dnd.description` | `string` | | `component.dnd.prompt` | `string` | | `component.dockIconSizeSelect` | `string` | | `component.dockIconSizeSelect.large` | `string` | | `component.dockIconSizeSelect.large.description` | `string` | | `component.dockIconSizeSelect.normal` | `string` | | `component.dockIconSizeSelect.normal.description` | `string` | | `component.dockLabelVisibilityToggle` | `string` | | `component.dockLabelVisibilityToggle.hide` | `string` | | `component.dockLabelVisibilityToggle.hide.description` | `string` | | `component.dockLabelVisibilityToggle.show` | `string` | | `component.dockLabelVisibilityToggle.show.description` | `string` | | `component.fileOperation.archiveScene` | `string` | | `component.fileOperation.exportImage` | `string` | | `component.fileOperation.exportPDF` | `string` | | `component.fileOperation.exportScene` | `string` | | `component.fileOperation.exportVideo` | `string` | | `component.fileOperation.importArchive` | `string` | | `component.fileOperation.importScene` | `string` | | `component.fileOperation.more` | `string` | | `component.fileOperation.save` | `string` | | `component.fileOperation.share` | `string` | | `component.inspectorBar` | `string` | | `component.inspectorPanelFloatingSettings` | `string` | | `component.inspectorPanelFloatingSettings.fixed` | `string` | | `component.inspectorPanelFloatingSettings.fixed.description` | `string` | | `component.inspectorPanelFloatingSettings.floating` | `string` | | `component.inspectorPanelFloatingSettings.floating.description` | `string` | | `component.inspectorPositionSelect` | `string` | | `component.inspectorPositionSelect.left` | `string` | | `component.inspectorPositionSelect.left.description` | `string` | | `component.inspectorPositionSelect.right` | `string` | | `component.inspectorPositionSelect.right.description` | `string` | | `component.languageSelect` | `string` | | `component.languageSelect.description` | `string` | | `component.library` | `string` | | `component.library.addFile` | `string` | | `component.library.breadcrumbRoot` | `string` | | `component.library.clearSearch` | `string` | | `component.library.elements` | `string` | | `component.library.enterSection` | `string` | | `component.library.error` | `string` | | `component.library.loading` | `string` | | `component.library.noItems` | `string` | | `component.library.noMoreItems` | `string` | | `component.library.removeAssetConfirmation` | `string` | | `component.library.removeAssetConfirmation.description` | `string` | | `component.library.searchPlaceholder` | `string` | | `component.librarySettings` | `string` | | `component.librarySettings.elementLibrary` | `string` | | `component.librarySettings.imageLibrary` | `string` | | `component.librarySettings.templateLibrary` | `string` | | `component.librarySettings.textLibrary` | `string` | | `component.librarySettings.uploadLibrary` | `string` | | `component.pageResize.label` | `string` | | `component.pageResizePanel.apply` | `string` | | `component.pageResizePanel.label` | `string` | | `component.pageSettings` | `string` | | `component.pageSettings.format` | `string` | | `component.pageSettings.manage` | `string` | | `component.pageTitleAppendPageNameToggle` | `string` | | `component.pageTitleAppendPageNameToggle.hide` | `string` | | `component.pageTitleAppendPageNameToggle.hide.description` | `string` | | `component.pageTitleAppendPageNameToggle.show` | `string` | | `component.pageTitleAppendPageNameToggle.show.description` | `string` | | `component.pageTitleDefaultTitleVisibilityToggle` | `string` | | `component.pageTitleDefaultTitleVisibilityToggle.hide` | `string` | | `component.pageTitleDefaultTitleVisibilityToggle.hide.description` | `string` | | `component.pageTitleDefaultTitleVisibilityToggle.show` | `string` | | `component.pageTitleDefaultTitleVisibilityToggle.show.description` | `string` | | `component.pageTitleShowOnSinglePageToggle` | `string` | | `component.pageTitleShowOnSinglePageToggle.hide` | `string` | | `component.pageTitleShowOnSinglePageToggle.hide.description` | `string` | | `component.pageTitleShowOnSinglePageToggle.show` | `string` | | `component.pageTitleShowOnSinglePageToggle.show.description` | `string` | | `component.pageTitleVisibilityToggle` | `string` | | `component.pageTitleVisibilityToggle.hide` | `string` | | `component.pageTitleVisibilityToggle.hide.description` | `string` | | `component.pageTitleVisibilityToggle.show` | `string` | | `component.pageTitleVisibilityToggle.show.description` | `string` | | `component.placeholder.appearance` | `string` | | `component.placeholder.appearance.description` | `string` | | `component.placeholder.arrange` | `string` | | `component.placeholder.arrange.description` | `string` | | `component.placeholder.audio` | `string` | | `component.placeholder.audio.description` | `string` | | `component.placeholder.create` | `string` | | `component.placeholder.disableAll` | `string` | | `component.placeholder.enableAll` | `string` | | `component.placeholder.fill` | `string` | | `component.placeholder.fill.description` | `string` | | `component.placeholder.general` | `string` | | `component.placeholder.general.description` | `string` | | `component.placeholder.settings` | `string` | | `component.placeholder.settingsMenu` | `string` | | `component.placeholder.shape` | `string` | | `component.placeholder.shape.description` | `string` | | `component.placeholder.stroke` | `string` | | `component.placeholder.stroke.description` | `string` | | `component.placeholder.text` | `string` | | `component.placeholder.text.description` | `string` | | `component.propertyPopover.header` | `string` | | `component.replacePanelAutoCloseSettings` | `string` | | `component.replacePanelAutoCloseSettings.false` | `string` | | `component.replacePanelAutoCloseSettings.false.description` | `string` | | `component.replacePanelAutoCloseSettings.true` | `string` | | `component.replacePanelAutoCloseSettings.true.description` | `string` | | `component.replacePanelFloatingSettings` | `string` | | `component.replacePanelFloatingSettings.fixed` | `string` | | `component.replacePanelFloatingSettings.fixed.description` | `string` | | `component.replacePanelFloatingSettings.floating` | `string` | | `component.replacePanelFloatingSettings.floating.description` | `string` | | `component.roleSelect` | `string` | | `component.roleSelect.description` | `string` | | `component.scalingSelect` | `string` | | `component.scalingSelect.large` | `string` | | `component.scalingSelect.large.description` | `string` | | `component.scalingSelect.normal` | `string` | | `component.scalingSelect.normal.description` | `string` | | `component.settings.toggle` | `string` | | `component.settings.toggle.description` | `string` | | `component.settingsPanel.appearance` | `string` | | `component.settingsPanel.assetPanel` | `string` | | `component.settingsPanel.dock` | `string` | | `component.settingsPanel.documentation` | `string` | | `component.settingsPanel.general` | `string` | | `component.settingsPanel.header` | `string` | | `component.settingsPanel.inspectorPanel` | `string` | | `component.settingsPanel.page` | `string` | | `component.settingsPanel.pageLabel` | `string` | | `component.settingsPanel.replacePanel` | `string` | | `component.settingsPanel.singlePageMode` | `string` | | `component.settingsPanel.singlePageVisibilitySelect` | `string` | | `component.themeSelect` | `string` | | `component.themeSelect.dark` | `string` | | `component.themeSelect.dark.description` | `string` | | `component.themeSelect.dialog` | `string` | | `component.themeSelect.dialog.description` | `string` | | `component.themeSelect.generate` | `string` | | `component.themeSelect.light` | `string` | | `component.themeSelect.light.description` | `string` | | `component.themeSelect.system` | `string` | | `component.themeSelect.system.description` | `string` | | `component.timeline.audio.options.description` | `string` | | `component.timeline.collapse` | `string` | | `component.timeline.expand` | `string` | | `component.timeline.label` | `string` | | `component.timeline.pause.description` | `string` | | `component.timeline.play.description` | `string` | | `component.timeline.scale.down` | `string` | | `component.timeline.scale.down.description` | `string` | | `component.timeline.scale.fit` | `string` | | `component.timeline.scale.fit.description` | `string` | | `component.timeline.scale.label` | `string` | | `component.timeline.scale.up` | `string` | | `component.timeline.scale.up.description` | `string` | | `component.timeline.video.options.description` | `string` | | `component.topbar.back` | `string` | | `component.topbar.close` | `string` | | `component.undo.redo` | `string` | | `component.undo.undo` | `string` | | `component.video.properties` | `string` | | `component.video.source` | `string` | | `component.video.trim` | `string` | | `component.video.trim.description` | `string` | | `component.video.trim.duration` | `string` | | `component.video.trim.duration.description` | `string` | | `component.video.trim.play` | `string` | | `component.video.trim.play.description` | `string` | | `component.video.unsupported` | `string` | | `component.video.unsupported.description` | `string` | | `component.viewSelect` | `string` | | `component.viewSelect.advanced` | `string` | | `component.viewSelect.advanced.description` | `string` | | `component.viewSelect.default` | `string` | | `component.viewSelect.default.description` | `string` | | `component.welcome.text` | `string` | | `component.zoom.autoFit` | `string` | | `component.zoom.fitPage` | `string` | | `component.zoom.fitSelection` | `string` | | `component.zoom.in` | `string` | | `component.zoom.label.auto` | `string` | | `component.zoom.options` | `string` | | `component.zoom.out` | `string` | | `component.zoom.shortcut` | `string` | | `component.zoom.to` | `string` | | `dialog.export.abort.message` | `string` | | `dialog.export.abort.title` | `string` | | `dialog.export.action` | `string` | | `dialog.export.error.message.1` | `string` | | `dialog.export.error.message.2` | `string` | | `dialog.export.error.title` | `string` | | `dialog.export.message` | `string` | | `dialog.export.success.message` | `string` | | `dialog.export.success.title` | `string` | | `dialog.export.title` | `string` | | `editor.scope.canvas` | `string` | | `editor.scope.global` | `string` | | `editor.scope.videoTimeline` | `string` | | `element.transform.resize` | `string` | | `element.transform.rotate` | `string` | | `error.applyAsset` | `string` | | `error.applyAsset.description` | `string` | | `error.booleanOperation.effectlessDifference` | `string` | | `error.booleanOperation.effectlessDifference.description` | `string` | | `error.booleanOperation.effectlessUnion` | `string` | | `error.booleanOperation.effectlessUnion.description` | `string` | | `error.booleanOperation.emptyShape` | `string` | | `error.booleanOperation.emptyShape.description` | `string` | | `error.cta.generic` | `string` | | `error.cta.generic.description` | `string` | | `error.generic` | `string` | | `error.generic.description` | `string` | | `error.replaceAsset` | `string` | | `error.replaceAsset.description` | `string` | | `error.upload` | `string` | | `error.upload.description` | `string` | | `error.upload.sizeExceeded` | `string` | | `input.adjustments` | `string` | | `input.adjustments.basic` | `string` | | `input.adjustments.refinements` | `string` | | `input.adjustments.tooltip` | `string` | | `input.alwaysOnBottom` | `string` | | `input.alwaysOnTop` | `string` | | `input.animations` | `string` | | `input.animations.description` | `string` | | `input.appearance` | `string` | | `input.aspectLock` | `string` | | `input.aspectLock.description` | `string` | | `input.audio.duration.description` | `string` | | `input.audio.duration.reset` | `string` | | `input.audio.mute` | `string` | | `input.bleedMargin.select` | `string` | | `input.blur` | `string` | | `input.blur.tooltip` | `string` | | `input.booleanoperations` | `string` | | `input.booleanoperations.exclude` | `string` | | `input.booleanoperations.intersect` | `string` | | `input.booleanoperations.subtract` | `string` | | `input.booleanoperations.union` | `string` | | `input.canvas` | `string` | | `input.caption` | `string` | | `input.caption.add` | `string` | | `input.caption.addAfter` | `string` | | `input.caption.content` | `string` | | `input.caption.create` | `string` | | `input.caption.delete` | `string` | | `input.caption.deleteAll` | `string` | | `input.caption.edit` | `string` | | `input.caption.file` | `string` | | `input.caption.hideTimings` | `string` | | `input.caption.import` | `string` | | `input.caption.import.description` | `string` | | `input.caption.import.error.message` | `string` | | `input.caption.import.error.title` | `string` | | `input.caption.in` | `string` | | `input.caption.inputLabel` | `string` | | `input.caption.mergePrevious` | `string` | | `input.caption.more` | `string` | | `input.caption.out` | `string` | | `input.caption.showTimings` | `string` | | `input.caption.style` | `string` | | `input.character` | `string` | | `input.clipContent` | `string` | | `input.clipContent.off.description` | `string` | | `input.clipContent.on.description` | `string` | | `input.clipLines` | `string` | | `input.clipLines.off.description` | `string` | | `input.clipLines.on.description` | `string` | | `input.colorMode` | `string` | | `input.colorMode.description` | `string` | | `input.cutoutOffset` | `string` | | `input.cutoutSmoothing` | `string` | | `input.cutoutType` | `string` | | `input.cutoutType.dashed` | `string` | | `input.cutoutType.solid` | `string` | | `input.duration` | `string` | | `input.duration.description` | `string` | | `input.effect` | `string` | | `input.effect.tooltip` | `string` | | `input.export` | `string` | | `input.filter` | `string` | | `input.filter.tooltip` | `string` | | `input.fontSelect` | `string` | | `input.fontSelect.fallback` | `string` | | `input.fontSize.select` | `string` | | `input.fontSize.selectMax` | `string` | | `input.fontSize.selectMin` | `string` | | `input.fontStyle.toggle` | `string` | | `input.gradient.activateColorStop` | `string` | | `input.gradient.colorPosition` | `string` | | `input.gradient.colorStop` | `string` | | `input.gradient.colorStop.active` | `string` | | `input.gradient.colorStop.description` | `string` | | `input.gradient.flip` | `string` | | `input.gradient.gradientAngle` | `string` | | `input.gradient.rotate` | `string` | | `input.hspSelectiveAdjustments` | `string` | | `input.insertVariable` | `string` | | `input.keyShortcut` | `string` | | `input.layer` | `string` | | `input.multiSelection.notice` | `string` | | `input.multiSelection.title` | `string` | | `input.opacity` | `string` | | `input.opacity.options` | `string` | | `input.options` | `string` | | `input.options.description` | `string` | | `input.page.titleTemplate` | `string` | | `input.pages` | `string` | | `input.preset` | `string` | | `input.preset.description` | `string` | | `input.preset.tooltip` | `string` | | `input.propertyToggle.disable` | `string` | | `input.propertyToggle.enable` | `string` | | `input.propertyToggle.hidden` | `string` | | `input.propertyToggle.visible` | `string` | | `input.rename` | `string` | | `input.resolution.select` | `string` | | `input.selection` | `string` | | `input.shadow.angle` | `string` | | `input.shadow.angle.description` | `string` | | `input.shadow.blur` | `string` | | `input.shadow.blur.description` | `string` | | `input.shadow.description` | `string` | | `input.shadow.distance` | `string` | | `input.shadow.distance.description` | `string` | | `input.shadow.label` | `string` | | `input.shadow.valueLabel` | `string` | | `input.shape` | `string` | | `input.shape.options` | `string` | | `input.showInExport` | `string` | | `input.sliderInput.toggleNumberInput` | `string` | | `input.stroke` | `string` | | `input.text.advanced` | `string` | | `input.text.advanced.description` | `string` | | `input.text.placeholder` | `string` | | `input.time.end` | `string` | | `input.time.start` | `string` | | `input.transform` | `string` | | `input.transform.description` | `string` | | `input.typefaceSelect.description` | `string` | | `input.typefaceSelect.noResults` | `string` | | `input.typefaceSelect.search` | `string` | | `input.typefaceSelect.tooltip` | `string` | | `input.unit.tooltip` | `string` | | `input.uploadAudio` | `string` | | `input.uploadFiles` | `string` | | `input.uploadImage` | `string` | | `input.uploadVideo` | `string` | | `input.video` | `string` | | `input.video.duration.description` | `string` | | `input.video.duration.reset` | `string` | | `libraries.ly.img.animations.ly.img.animations.in.label` | `string` | | `libraries.ly.img.animations.ly.img.animations.label` | `string` | | `libraries.ly.img.animations.ly.img.animations.loop.label` | `string` | | `libraries.ly.img.animations.ly.img.animations.out.label` | `string` | | `libraries.ly.img.audio.label` | `string` | | `libraries.ly.img.audio.upload.label` | `string` | | `libraries.ly.img.colors.defaultPalette.label` | `string` | | `libraries.ly.img.colors.documentColors.label` | `string` | | `libraries.ly.img.crop.presets.label` | `string` | | `libraries.ly.img.image.label` | `string` | | `libraries.ly.img.image.upload.label` | `string` | | `libraries.ly.img.local.label` | `string` | | `libraries.ly.img.page.presets.facebook.label` | `string` | | `libraries.ly.img.page.presets.hd-video.label` | `string` | | `libraries.ly.img.page.presets.instagram.label` | `string` | | `libraries.ly.img.page.presets.iso-standard-print.label` | `string` | | `libraries.ly.img.page.presets.label` | `string` | | `libraries.ly.img.page.presets.linkedIn.label` | `string` | | `libraries.ly.img.page.presets.north-american-print.label` | `string` | | `libraries.ly.img.page.presets.other-print.label` | `string` | | `libraries.ly.img.page.presets.pinterest.label` | `string` | | `libraries.ly.img.page.presets.tiktok.label` | `string` | | `libraries.ly.img.page.presets.video.facebook.label` | `string` | | `libraries.ly.img.page.presets.video.hd-video.label` | `string` | | `libraries.ly.img.page.presets.video.instagram.label` | `string` | | `libraries.ly.img.page.presets.video.label` | `string` | | `libraries.ly.img.page.presets.video.linkedIn.label` | `string` | | `libraries.ly.img.page.presets.video.pinterest.label` | `string` | | `libraries.ly.img.page.presets.video.tiktok.label` | `string` | | `libraries.ly.img.page.presets.video.x.label` | `string` | | `libraries.ly.img.page.presets.video.youtube.label` | `string` | | `libraries.ly.img.page.presets.x.label` | `string` | | `libraries.ly.img.page.presets.youtube.label` | `string` | | `libraries.ly.img.sticker.3Dstickers.label` | `string` | | `libraries.ly.img.sticker.craft.label` | `string` | | `libraries.ly.img.sticker.doodle.label` | `string` | | `libraries.ly.img.sticker.emoji.label` | `string` | | `libraries.ly.img.sticker.emoticons.label` | `string` | | `libraries.ly.img.sticker.hand.label` | `string` | | `libraries.ly.img.sticker.label` | `string` | | `libraries.ly.img.sticker.marker.label` | `string` | | `libraries.ly.img.sticker.sketches.label` | `string` | | `libraries.ly.img.template.confirmation.abort` | `string` | | `libraries.ly.img.template.confirmation.body` | `string` | | `libraries.ly.img.template.confirmation.confirm` | `string` | | `libraries.ly.img.template.confirmation.headline` | `string` | | `libraries.ly.img.template.label` | `string` | | `libraries.ly.img.text.headline.label` | `string` | | `libraries.ly.img.text.label` | `string` | | `libraries.ly.img.text.paragraph.label` | `string` | | `libraries.ly.img.text.title.label` | `string` | | `libraries.ly.img.textAnimations.ly.img.animations.in.label` | `string` | | `libraries.ly.img.textAnimations.ly.img.animations.label` | `string` | | `libraries.ly.img.textAnimations.ly.img.animations.loop.label` | `string` | | `libraries.ly.img.textAnimations.ly.img.animations.out.label` | `string` | | `libraries.ly.img.textComponents.label` | `string` | | `libraries.ly.img.upload.label` | `string` | | `libraries.ly.img.vectorpath.abstract-filled.label` | `string` | | `libraries.ly.img.vectorpath.abstract-gradient.label` | `string` | | `libraries.ly.img.vectorpath.abstract-image.label` | `string` | | `libraries.ly.img.vectorpath.abstract-outline.label` | `string` | | `libraries.ly.img.vectorpath.filled.label` | `string` | | `libraries.ly.img.vectorpath.gradient.label` | `string` | | `libraries.ly.img.vectorpath.image.label` | `string` | | `libraries.ly.img.vectorpath.label` | `string` | | `libraries.ly.img.vectorpath.outline.label` | `string` | | `libraries.ly.img.video.label` | `string` | | `libraries.ly.img.video.template.confirmation.abort` | `string` | | `libraries.ly.img.video.template.confirmation.body` | `string` | | `libraries.ly.img.video.template.confirmation.confirm` | `string` | | `libraries.ly.img.video.template.confirmation.headline` | `string` | | `libraries.ly.img.video.template.label` | `string` | | `libraries.ly.img.video.upload.label` | `string` | | `libraries.unsplash.label` | `string` | | `meta.currentLanguage` | `string` | | `notification.redo` | `string` | | `notification.undo` | `string` | | `preset.document.american-legal` | `string` | | `preset.document.american-letter` | `string` | | `preset.document.business-card` | `string` | | `preset.document.custom` | `string` | | `preset.document.din-a0` | `string` | | `preset.document.din-a1` | `string` | | `preset.document.din-a2` | `string` | | `preset.document.din-a3` | `string` | | `preset.document.din-a4` | `string` | | `preset.document.din-a5` | `string` | | `preset.document.din-a6` | `string` | | `preset.document.din-a65` | `string` | | `preset.document.din-b5` | `string` | | `preset.document.format2k` | `string` | | `preset.document.format4k` | `string` | | `preset.document.fullhd` | `string` | | `preset.document.hd` | `string` | | `preset.document.instagram-photo` | `string` | | `preset.document.instagram-profile` | `string` | | `preset.document.instagram-story` | `string` | | `preset.document.qhd` | `string` | | `preset.document.social-feed` | `string` | | `preset.document.social-story` | `string` | | `preset.document.square` | `string` | | `preset.document.twitter-header` | `string` | | `preset.document.twitter-image` | `string` | | `preset.document.twitter-profile` | `string` | | `preset.template.blank_1` | `string` | | `preset.template.business_card_1` | `string` | | `preset.template.collage_1` | `string` | | `preset.template.instagram_photo_1` | `string` | | `preset.template.instagram_story_1` | `string` | | `preset.template.postcard_1` | `string` | | `preset.template.postcard_2` | `string` | | `preset.template.poster_1` | `string` | | `preset.template.presentation_4` | `string` | | `property.adjustments.blacks` | `string` | | `property.adjustments.brightness` | `string` | | `property.adjustments.clarity` | `string` | | `property.adjustments.contrast` | `string` | | `property.adjustments.exposure` | `string` | | `property.adjustments.gamma` | `string` | | `property.adjustments.highlights` | `string` | | `property.adjustments.saturation` | `string` | | `property.adjustments.shadows` | `string` | | `property.adjustments.sharpness` | `string` | | `property.adjustments.temperature` | `string` | | `property.adjustments.whites` | `string` | | `property.animation.baseline` | `string` | | `property.animation.baseline.direction` | `string` | | `property.animation.baseline.direction.Down` | `string` | | `property.animation.baseline.direction.Left` | `string` | | `property.animation.baseline.direction.Right` | `string` | | `property.animation.baseline.direction.Up` | `string` | | `property.animation.block_swipe_text` | `string` | | `property.animation.block_swipe_text.direction` | `string` | | `property.animation.block_swipe_text.direction.Down` | `string` | | `property.animation.block_swipe_text.direction.Left` | `string` | | `property.animation.block_swipe_text.direction.Right` | `string` | | `property.animation.block_swipe_text.direction.Up` | `string` | | `property.animation.block_swipe_text.useTextColor` | `string` | | `property.animation.blur` | `string` | | `property.animation.blur.fade` | `string` | | `property.animation.blur.intensity` | `string` | | `property.animation.blur_loop` | `string` | | `property.animation.blur_loop.intensity` | `string` | | `property.animation.breathing_loop` | `string` | | `property.animation.breathing_loop.intensity` | `string` | | `property.animation.crop_zoom` | `string` | | `property.animation.crop_zoom.fade` | `string` | | `property.animation.crop_zoom.scale` | `string` | | `property.animation.fade` | `string` | | `property.animation.fade_loop` | `string` | | `property.animation.grow` | `string` | | `property.animation.grow.direction` | `string` | | `property.animation.grow.direction.All` | `string` | | `property.animation.grow.direction.Horizontal` | `string` | | `property.animation.grow.direction.Vertical` | `string` | | `property.animation.jump_loop` | `string` | | `property.animation.jump_loop.direction` | `string` | | `property.animation.jump_loop.direction.Down` | `string` | | `property.animation.jump_loop.direction.Left` | `string` | | `property.animation.jump_loop.direction.Right` | `string` | | `property.animation.jump_loop.direction.Up` | `string` | | `property.animation.jump_loop.intensity` | `string` | | `property.animation.ken_burns` | `string` | | `property.animation.ken_burns.cropScale` | `string` | | `property.animation.ken_burns.direction` | `string` | | `property.animation.ken_burns.direction.Down` | `string` | | `property.animation.ken_burns.direction.Left` | `string` | | `property.animation.ken_burns.direction.Right` | `string` | | `property.animation.ken_burns.direction.Up` | `string` | | `property.animation.ken_burns.fade` | `string` | | `property.animation.ken_burns.travelDistanceRatio` | `string` | | `property.animation.ken_burns.zoomIntensity` | `string` | | `property.animation.merge_text` | `string` | | `property.animation.merge_text.direction` | `string` | | `property.animation.merge_text.direction.Left` | `string` | | `property.animation.merge_text.direction.Right` | `string` | | `property.animation.merge_text.intensity` | `string` | | `property.animation.none` | `string` | | `property.animation.pan` | `string` | | `property.animation.pan.direction` | `string` | | `property.animation.pan.direction.Down` | `string` | | `property.animation.pan.direction.Left` | `string` | | `property.animation.pan.direction.Right` | `string` | | `property.animation.pan.direction.Up` | `string` | | `property.animation.pan.distance` | `string` | | `property.animation.pan.fade` | `string` | | `property.animation.pop` | `string` | | `property.animation.pulsating_loop` | `string` | | `property.animation.pulsating_loop.intensity` | `string` | | `property.animation.slide` | `string` | | `property.animation.slide.direction` | `string` | | `property.animation.slide.direction.Down` | `string` | | `property.animation.slide.direction.Left` | `string` | | `property.animation.slide.direction.Right` | `string` | | `property.animation.slide.direction.Up` | `string` | | `property.animation.slide.distance` | `string` | | `property.animation.slide.fade` | `string` | | `property.animation.spin` | `string` | | `property.animation.spin.direction` | `string` | | `property.animation.spin.direction.Clockwise` | `string` | | `property.animation.spin.direction.CounterClockwise` | `string` | | `property.animation.spin.fade` | `string` | | `property.animation.spin.intensity` | `string` | | `property.animation.spin_loop` | `string` | | `property.animation.spin_loop.direction` | `string` | | `property.animation.spin_loop.direction.Clockwise` | `string` | | `property.animation.spin_loop.direction.CounterClockwise` | `string` | | `property.animation.spread_text` | `string` | | `property.animation.spread_text.fade` | `string` | | `property.animation.spread_text.intensity` | `string` | | `property.animation.squeeze_loop` | `string` | | `property.animation.sway_loop` | `string` | | `property.animation.sway_loop.intensity` | `string` | | `property.animation.typewriter_text` | `string` | | `property.animation.typewriter_text.writingStyle` | `string` | | `property.animation.typewriter_text.writingStyle.Character` | `string` | | `property.animation.typewriter_text.writingStyle.Word` | `string` | | `property.animation.wipe` | `string` | | `property.animation.wipe.direction` | `string` | | `property.animation.wipe.direction.Down` | `string` | | `property.animation.wipe.direction.Left` | `string` | | `property.animation.wipe.direction.Right` | `string` | | `property.animation.wipe.direction.Up` | `string` | | `property.animation.zoom` | `string` | | `property.animation.zoom.fade` | `string` | | `property.animationEasing` | `string` | | `property.animationEasing.EaseInBack` | `string` | | `property.animationEasing.EaseInOutBack` | `string` | | `property.animationEasing.EaseInOutQuint` | `string` | | `property.animationEasing.EaseInOutSpring` | `string` | | `property.animationEasing.EaseInQuint` | `string` | | `property.animationEasing.EaseInSpring` | `string` | | `property.animationEasing.EaseOutBack` | `string` | | `property.animationEasing.EaseOutQuint` | `string` | | `property.animationEasing.EaseOutSpring` | `string` | | `property.animationEasing.Linear` | `string` | | `property.autoSize` | `string` | | `property.autoSize.autoHeight.description` | `string` | | `property.autoSize.autoSize.description` | `string` | | `property.autoSize.fixedFrame.description` | `string` | | `property.backgroundColor.color` | `string` | | `property.backgroundColor.description` | `string` | | `property.bleedMargin` | `string` | | `property.blendMode` | `string` | | `property.blendMode.Color` | `string` | | `property.blendMode.ColorBurn` | `string` | | `property.blendMode.ColorDodge` | `string` | | `property.blendMode.Darken` | `string` | | `property.blendMode.DarkenColor` | `string` | | `property.blendMode.Difference` | `string` | | `property.blendMode.Divide` | `string` | | `property.blendMode.Exclusion` | `string` | | `property.blendMode.HardLight` | `string` | | `property.blendMode.HardMix` | `string` | | `property.blendMode.Hue` | `string` | | `property.blendMode.Lighten` | `string` | | `property.blendMode.LightenColor` | `string` | | `property.blendMode.LinearBurn` | `string` | | `property.blendMode.LinearDodge` | `string` | | `property.blendMode.LinearLight` | `string` | | `property.blendMode.Luminosity` | `string` | | `property.blendMode.Multiply` | `string` | | `property.blendMode.Normal` | `string` | | `property.blendMode.Overlay` | `string` | | `property.blendMode.PassThrough` | `string` | | `property.blendMode.PinLight` | `string` | | `property.blendMode.Saturation` | `string` | | `property.blendMode.Screen` | `string` | | `property.blendMode.SoftLight` | `string` | | `property.blendMode.Subtract` | `string` | | `property.blendMode.VividLight` | `string` | | `property.blendMode.description` | `string` | | `property.blendMode.tooltip` | `string` | | `property.blur.extrudeBlur` | `string` | | `property.blur.extrudeBlur.amount` | `string` | | `property.blur.linearBlur` | `string` | | `property.blur.linearBlur.blurRadius` | `string` | | `property.blur.linearBlur.x1` | `string` | | `property.blur.linearBlur.x2` | `string` | | `property.blur.linearBlur.y1` | `string` | | `property.blur.linearBlur.y2` | `string` | | `property.blur.mirroredBlur` | `string` | | `property.blur.mirroredBlur.blurRadius` | `string` | | `property.blur.mirroredBlur.gradientSize` | `string` | | `property.blur.mirroredBlur.size` | `string` | | `property.blur.mirroredBlur.x1` | `string` | | `property.blur.mirroredBlur.x2` | `string` | | `property.blur.mirroredBlur.y1` | `string` | | `property.blur.mirroredBlur.y2` | `string` | | `property.blur.radialBlur` | `string` | | `property.blur.radialBlur.blurRadius` | `string` | | `property.blur.radialBlur.gradientRadius` | `string` | | `property.blur.radialBlur.radius` | `string` | | `property.blur.radialBlur.x` | `string` | | `property.blur.radialBlur.y` | `string` | | `property.blur.uniformBlur` | `string` | | `property.blur.uniformBlur.intensity` | `string` | | `property.caption.scale` | `string` | | `property.color` | `string` | | `property.color.description` | `string` | | `property.cornerRadius` | `string` | | `property.crop` | `string` | | `property.crop.contentFillMode` | `string` | | `property.crop.contentFillMode.contain` | `string` | | `property.crop.contentFillMode.cover` | `string` | | `property.crop.contentFillMode.crop` | `string` | | `property.crop.contentFillMode.description` | `string` | | `property.crop.offset` | `string` | | `property.crop.offset.description` | `string` | | `property.crop.scale` | `string` | | `property.crop.scale.description` | `string` | | `property.crop.size` | `string` | | `property.crop.size.description` | `string` | | `property.crop.straighten` | `string` | | `property.crop.tooltip` | `string` | | `property.crop.transform` | `string` | | `property.dropShadow.color` | `string` | | `property.duoToneFilterIntensity` | `string` | | `property.duotoneFilter.breezy` | `string` | | `property.duotoneFilter.clash` | `string` | | `property.duotoneFilter.deepblue` | `string` | | `property.duotoneFilter.desert` | `string` | | `property.duotoneFilter.frog` | `string` | | `property.duotoneFilter.peach` | `string` | | `property.duotoneFilter.plum` | `string` | | `property.duotoneFilter.sunset` | `string` | | `property.effect.crossCut` | `string` | | `property.effect.crossCut.offset` | `string` | | `property.effect.crossCut.slices` | `string` | | `property.effect.crossCut.speedV` | `string` | | `property.effect.crossCut.time` | `string` | | `property.effect.dotPattern` | `string` | | `property.effect.dotPattern.blur` | `string` | | `property.effect.dotPattern.dots` | `string` | | `property.effect.dotPattern.size` | `string` | | `property.effect.extrudeBlur` | `string` | | `property.effect.extrudeBlur.amount` | `string` | | `property.effect.glow` | `string` | | `property.effect.glow.amount` | `string` | | `property.effect.glow.darkness` | `string` | | `property.effect.glow.size` | `string` | | `property.effect.greenScreen` | `string` | | `property.effect.greenScreen.colorMatch` | `string` | | `property.effect.greenScreen.fromColor` | `string` | | `property.effect.greenScreen.fromColor.description` | `string` | | `property.effect.greenScreen.smoothness` | `string` | | `property.effect.greenScreen.spill` | `string` | | `property.effect.halfTone` | `string` | | `property.effect.halfTone.angle` | `string` | | `property.effect.halfTone.scale` | `string` | | `property.effect.joggle.amount` | `string` | | `property.effect.joggle.time` | `string` | | `property.effect.linocut` | `string` | | `property.effect.linocut.scale` | `string` | | `property.effect.liquid` | `string` | | `property.effect.liquid.amount` | `string` | | `property.effect.liquid.scale` | `string` | | `property.effect.liquid.speed` | `string` | | `property.effect.liquid.time` | `string` | | `property.effect.mirror` | `string` | | `property.effect.mirror.side` | `string` | | `property.effect.outliner` | `string` | | `property.effect.outliner.amount` | `string` | | `property.effect.outliner.passthrough` | `string` | | `property.effect.pixelize` | `string` | | `property.effect.pixelize.horizontalPixelSize` | `string` | | `property.effect.pixelize.verticalPixelSize` | `string` | | `property.effect.posterize` | `string` | | `property.effect.posterize.levels` | `string` | | `property.effect.psychedelic.amount` | `string` | | `property.effect.psychedelic.offset` | `string` | | `property.effect.psychedelic.time` | `string` | | `property.effect.radialPixel` | `string` | | `property.effect.radialPixel.radius` | `string` | | `property.effect.radialPixel.segments` | `string` | | `property.effect.radiate.centerBrightness` | `string` | | `property.effect.radiate.colorize` | `string` | | `property.effect.radiate.powerCurve` | `string` | | `property.effect.recolor` | `string` | | `property.effect.recolor.brightnessMatch` | `string` | | `property.effect.recolor.colorMatch` | `string` | | `property.effect.recolor.fromColor` | `string` | | `property.effect.recolor.fromColor.description` | `string` | | `property.effect.recolor.smoothness` | `string` | | `property.effect.recolor.toColor` | `string` | | `property.effect.recolor.toColor.description` | `string` | | `property.effect.scanlines.count` | `string` | | `property.effect.scanlines.linesAmount` | `string` | | `property.effect.scanlines.noiseAmount` | `string` | | `property.effect.scanlines.time` | `string` | | `property.effect.separate.amount` | `string` | | `property.effect.separate.time` | `string` | | `property.effect.sharpie` | `string` | | `property.effect.shifter` | `string` | | `property.effect.shifter.amount` | `string` | | `property.effect.shifter.angle` | `string` | | `property.effect.tiltShift` | `string` | | `property.effect.tiltShift.amount` | `string` | | `property.effect.tiltShift.position` | `string` | | `property.effect.tvGlitch` | `string` | | `property.effect.tvGlitch.distortion` | `string` | | `property.effect.tvGlitch.distortion2` | `string` | | `property.effect.tvGlitch.rollSpeed` | `string` | | `property.effect.tvGlitch.speed` | `string` | | `property.effect.tvGlitch.time` | `string` | | `property.effect.vignette` | `string` | | `property.effect.vignette.darkness` | `string` | | `property.effect.vignette.offset` | `string` | | `property.effect.waves.size` | `string` | | `property.effect.waves.speed` | `string` | | `property.effect.waves.strength` | `string` | | `property.effect.waves.time` | `string` | | `property.fill` | `string` | | `property.fill.description` | `string` | | `property.fill.solid.color` | `string` | | `property.fillType` | `string` | | `property.fillType.gradient` | `string` | | `property.fillType.gradient.description` | `string` | | `property.fillType.solid` | `string` | | `property.fillType.solid.description` | `string` | | `property.flip` | `string` | | `property.flip.x` | `string` | | `property.flip.y` | `string` | | `property.gradientType.conical` | `string` | | `property.gradientType.linear` | `string` | | `property.gradientType.radial` | `string` | | `property.hspSelectiveAdjustments.hue` | `string` | | `property.hspSelectiveAdjustments.perceivedBrightness` | `string` | | `property.hspSelectiveAdjustments.saturation` | `string` | | `property.innerDiameter` | `string` | | `property.layout` | `string` | | `property.layout.horizontal` | `string` | | `property.layout.vertical` | `string` | | `property.letterSpacing` | `string` | | `property.lineHeight` | `string` | | `property.lineWidth` | `string` | | `property.lineWidth.description` | `string` | | `property.lutFilter.ad1920` | `string` | | `property.lutFilter.ancient` | `string` | | `property.lutFilter.bleached` | `string` | | `property.lutFilter.bleachedblue` | `string` | | `property.lutFilter.blues` | `string` | | `property.lutFilter.blueshadows` | `string` | | `property.lutFilter.breeze` | `string` | | `property.lutFilter.bw` | `string` | | `property.lutFilter.celsius` | `string` | | `property.lutFilter.chest` | `string` | | `property.lutFilter.classic` | `string` | | `property.lutFilter.colorful` | `string` | | `property.lutFilter.cool` | `string` | | `property.lutFilter.cottoncandy` | `string` | | `property.lutFilter.creamy` | `string` | | `property.lutFilter.eighties` | `string` | | `property.lutFilter.elder` | `string` | | `property.lutFilter.evening` | `string` | | `property.lutFilter.fall` | `string` | | `property.lutFilter.fixie` | `string` | | `property.lutFilter.food` | `string` | | `property.lutFilter.fridge` | `string` | | `property.lutFilter.front` | `string` | | `property.lutFilter.glam` | `string` | | `property.lutFilter.gobblin` | `string` | | `property.lutFilter.highcarb` | `string` | | `property.lutFilter.highcontrast` | `string` | | `property.lutFilter.k1` | `string` | | `property.lutFilter.k2` | `string` | | `property.lutFilter.k6` | `string` | | `property.lutFilter.kdynamic` | `string` | | `property.lutFilter.keen` | `string` | | `property.lutFilter.lenin` | `string` | | `property.lutFilter.litho` | `string` | | `property.lutFilter.lomo` | `string` | | `property.lutFilter.lomo100` | `string` | | `property.lutFilter.lucid` | `string` | | `property.lutFilter.mellow` | `string` | | `property.lutFilter.neat` | `string` | | `property.lutFilter.nogreen` | `string` | | `property.lutFilter.orchid` | `string` | | `property.lutFilter.pale` | `string` | | `property.lutFilter.pitched` | `string` | | `property.lutFilter.plate` | `string` | | `property.lutFilter.pola669` | `string` | | `property.lutFilter.polasx` | `string` | | `property.lutFilter.pro400` | `string` | | `property.lutFilter.quozi` | `string` | | `property.lutFilter.sepiahigh` | `string` | | `property.lutFilter.settled` | `string` | | `property.lutFilter.seventies` | `string` | | `property.lutFilter.sin` | `string` | | `property.lutFilter.soft` | `string` | | `property.lutFilter.steel` | `string` | | `property.lutFilter.summer` | `string` | | `property.lutFilter.sunset` | `string` | | `property.lutFilter.tender` | `string` | | `property.lutFilter.texas` | `string` | | `property.lutFilter.twilight` | `string` | | `property.lutFilter.winter` | `string` | | `property.lutFilter.x400` | `string` | | `property.lutFilterIntensity` | `string` | | `property.opacity` | `string` | | `property.orientation` | `string` | | `property.orientation.description` | `string` | | `property.orientation.flip` | `string` | | `property.orientation.landscape` | `string` | | `property.orientation.portrait` | `string` | | `property.orientation.select.label` | `string` | | `property.orientation.square` | `string` | | `property.outlineColor` | `string` | | `property.outlineWidth` | `string` | | `property.paragraphSpacing` | `string` | | `property.placeholderBehavior.description` | `string` | | `property.placeholderBehavior.text.tooltip` | `string` | | `property.placeholderBehavior.graphic.tooltip` | `string` | | `property.playback.duration` | `string` | | `property.points` | `string` | | `property.position` | `string` | | `property.position.description` | `string` | | `property.sides` | `string` | | `property.strokeColor` | `string` | | `property.strokeColor.description` | `string` | | `property.strokeCornerGeometry` | `string` | | `property.strokeCornerGeometry.bevel` | `string` | | `property.strokeCornerGeometry.description` | `string` | | `property.strokeCornerGeometry.miter` | `string` | | `property.strokeCornerGeometry.round` | `string` | | `property.strokePosition` | `string` | | `property.strokePosition.center` | `string` | | `property.strokePosition.description` | `string` | | `property.strokePosition.inner` | `string` | | `property.strokePosition.outer` | `string` | | `property.strokePositionAndCornerGeometry` | `string` | | `property.strokePositionAndCornerGeometry.description` | `string` | | `property.strokeStyle` | `string` | | `property.strokeStyle.dashed` | `string` | | `property.strokeStyle.dashedRound` | `string` | | `property.strokeStyle.description` | `string` | | `property.strokeStyle.dotted` | `string` | | `property.strokeStyle.longDashed` | `string` | | `property.strokeStyle.longDashedRound` | `string` | | `property.strokeStyle.solid` | `string` | | `property.strokeWidth` | `string` | | `property.strokeWidth.description` | `string` | | `property.textAlignment.horizontal` | `string` | | `property.textAlignment.horizontal.center` | `string` | | `property.textAlignment.horizontal.description` | `string` | | `property.textAlignment.horizontal.left` | `string` | | `property.textAlignment.horizontal.right` | `string` | | `property.textAlignment.vertical` | `string` | | `property.textAlignment.vertical.bottom` | `string` | | `property.textAlignment.vertical.center` | `string` | | `property.textAlignment.vertical.top` | `string` | | `property.textBackground` | `string` | | `property.textBackground.cornerRadius` | `string` | | `property.textBackground.description` | `string` | | `property.textBackground.horizontalPadding` | `string` | | `property.textBackground.horizontalPadding.description` | `string` | | `property.textBackground.options.description` | `string` | | `property.textBackground.padding` | `string` | | `property.textBackground.padding.description` | `string` | | `property.textBackground.verticalPadding` | `string` | | `property.textBackground.verticalPadding.description` | `string` | | `property.textCase` | `string` | | `property.textCase.lowercase` | `string` | | `property.textCase.normal` | `string` | | `property.textCase.titlecase` | `string` | | `property.textCase.uppercase` | `string` | | `property.textWritingStyle` | `string` | | `property.textWritingStyle.Block` | `string` | | `property.textWritingStyle.Character` | `string` | | `property.textWritingStyle.Line` | `string` | | `property.textWritingStyle.Word` | `string` | | `property.volume` | `string` | | `scope.appearance.adjustments` | `string` | | `scope.appearance.adjustments.tooltip` | `string` | | `scope.appearance.animations` | `string` | | `scope.appearance.animations.tooltip` | `string` | | `scope.appearance.blur` | `string` | | `scope.appearance.blur.tooltip` | `string` | | `scope.appearance.effect` | `string` | | `scope.appearance.effect.tooltip` | `string` | | `scope.appearance.filter` | `string` | | `scope.appearance.filter.tooltip` | `string` | | `scope.appearance.shadow` | `string` | | `scope.appearance.shadow.tooltip` | `string` | | `scope.audio.change` | `string` | | `scope.audio.change.tooltip` | `string` | | `scope.editor.select` | `string` | | `scope.fill.change` | `string` | | `scope.fill.change.tooltip` | `string` | | `scope.fill.change.text` | `string` | | `scope.fill.change.text.tooltip` | `string` | | `scope.fill.change.graphic` | `string` | | `scope.fill.change.graphic.tooltip` | `string` | | `scope.fill.changeType` | `string` | | `scope.fill.changeType.tooltip` | `string` | | `scope.layer.blendMode` | `string` | | `scope.layer.blendMode.tooltip` | `string` | | `scope.layer.crop` | `string` | | `scope.layer.crop.tooltip` | `string` | | `scope.layer.flip` | `string` | | `scope.layer.flip.tooltip` | `string` | | `scope.layer.move` | `string` | | `scope.layer.move.tooltip` | `string` | | `scope.layer.opacity` | `string` | | `scope.layer.opacity.tooltip` | `string` | | `scope.layer.resize` | `string` | | `scope.layer.resize.tooltip` | `string` | | `scope.layer.resize.allPages` | `string` | | `scope.layer.rotate` | `string` | | `scope.layer.rotate.tooltip` | `string` | | `scope.lifecycle.destroy` | `string` | | `scope.lifecycle.destroy.tooltip` | `string` | | `scope.lifecycle.duplicate` | `string` | | `scope.lifecycle.duplicate.tooltip` | `string` | | `scope.shape.change` | `string` | | `scope.shape.change.tooltip` | `string` | | `scope.stroke.change` | `string` | | `scope.stroke.change.tooltip` | `string` | | `scope.text.character` | `string` | | `scope.text.character.tooltip` | `string` | | `scope.text.edit` | `string` | | `scope.text.edit.tooltip` | `string` | | `scope.text.edit.placeholder.tooltip` | `string` | | `typography.autoSize` | `string` | | `typography.autoSize.abbreviation` | `string` | | `typography.bold` | `string` | | `typography.italic` | `string` | | `typography.normal` | `string` | | `typography.size` | `string` | | `typography.sizeRange` | `string` | | `typography.style` | `string` | | `typography.typeface` | `string` | | `typography.typeface.mixed.description` | `string` | | `typography.weight.100` | `string` | | `typography.weight.200` | `string` | | `typography.weight.300` | `string` | | `typography.weight.400` | `string` | | `typography.weight.500` | `string` | | `typography.weight.600` | `string` | | `typography.weight.700` | `string` | | `typography.weight.800` | `string` | | `typography.weight.900` | `string` | | `variables.address.label` | `string` | | `variables.city.label` | `string` | | `variables.company_name.label` | `string` | | `variables.first_name.label` | `string` | | `variables.last_name.label` | `string` | | `warning.invalidType` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/buttongroupoptions) # Interface: ButtonGroupOptions Represents options for a button group. The `ButtonGroupOptions` interface provides a set of properties that control the behavior and appearance of a button group. These options include settings for the input label, input label position, children, and suffix. ## Properties[#](#properties) | Property | Type | | --- | --- | | `inputLabel?` | `string` | | `inputLabelPosition?` | `"top"` | | `children?` | () => `void` | | `suffix?` | `Partial` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builderrenderfunctioncontext) # Interface: BuilderRenderFunctionContext Represents the context for rendering a builder function. The `BuilderRenderFunctionContext` interface provides a set of properties that describe the context for rendering a builder function. These options include settings for the builder, engine, state, payload, render optimized small viewport, and experimental APIs. ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `P` | ## Properties[#](#properties) | Property | Modifier | Type | Description | | --- | --- | --- | --- | | `builder` | `public` | [`Builder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builder/) | \- | | `cesdk` | `public` | [`CreativeEditorSDK`](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeeditorsdk/) | \- | | `engine` | `public` | [`CreativeEngine`](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeengine/) | \- | | `state` | `public` | { <`T`\> (`id`, `defaultValue`): `object`; <`T`\> (`id`): `object`; } | State object that can be used to store and retrieve local values. It will take a unique identifier for this state that can be used to access this store later. `const { value, setValue } = state('unique-id', 'default-value');` If no default value is set, the `value` property may be undefined if no value was set before: `const { value, setValue } = state('unique-id', 'default-value');` **Param** The unique identifier for the state. **Param** The default value for the state. | | `payload?` | `public` | `P` | \- | | `renderOptimizedSmallViewport` | `public` | `boolean` | \- | | `experimental` | `public` | [`BuilderRenderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/builderrendercontext/) | PLEASE NOTE: This contains experimental APIs. Use them with caution since they might change without warning and might be replaced with a completely different concept or maybe not at all. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/buffer) # Interface: Buffer Represents a buffer of data. The `Buffer` interface provides a set of properties that describe a buffer of data, including a handle and the buffer itself. ## Properties[#](#properties) | Property | Type | | --- | --- | | `handle` | `string` | | `buffer` | `Uint8Array` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builder) # Interface: Builder Interface for all available builder. Depending on the context different implementation might be used. A “Button” in the canvas menu might render different component than a button in the topbar or a panel. ## Properties[#](#properties) | Property | Type | | --- | --- | | `Button` | (`id`, `options`) => `void` | | `ButtonGroup` | (`id`, `options`) => `void` | | `Checkbox` | (`id`, `options`) => `void` | | `Dropdown` | (`id`, `options`) => `void` | | `MediaPreview` | (`id`, `options`) => `void` | | `Section` | (`id`, `options`) => `void` | | `Separator` | (`id`) => `void` | | `TextArea` | (`id`, `options`) => `void` | | `TextInput` | (`id`, `options`) => `void` | | `NumberInput` | (`id`, `options`) => `void` | | `ColorInput` | (`id`, `options`) => `void` | | `Slider` | (`id`, `options`) => `void` | | `Library` | (`id`, `options`) => `void` | | `Heading` | (`id`, `options`) => `void` | | `Text` | (`id`, `options`) => `void` | | `Select` | (`id`, `options`) => `void` | | `Component` | (`id`, `options`) => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/blockevent) # Interface: BlockEvent Represents an event related to a design block. The `BlockEvent` interface provides a set of properties that describe an event related to a design block, including the block ID and the type of event. ## Properties[#](#properties) | Property | Type | | --- | --- | | `block` | `number` | | `type` | `"Created"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetstringproperty) # Interface: AssetStringProperty Asset string property definition ## Properties[#](#properties) | Property | Type | | --- | --- | | `property` | `string` | | `type` | `"String"` | | `value` | `string` | | `defaultValue` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetsqueryresult) # Interface: AssetsQueryResult Return type of a `findAssets` query. ## Type Parameters[#](#type-parameters) | Type Parameter | Default type | | --- | --- | | `T` _extends_ [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) | ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `assets` | `T`\[\] | The assets in the requested page | | `currentPage` | `number` | The current, requested page | | `nextPage?` | `number` | The next page to query if it exists | | `total` | `number` | How many assets are there in total for the current query regardless of the page | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetspotcolor) # Interface: AssetSpotColor Asset Color payload SpotColor representation ## Properties[#](#properties) | Property | Type | | --- | --- | | `colorSpace` | `"SpotColor"` | | `name` | `string` | | `externalReference` | `string` | | `representation` | | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetsource) # Interface: AssetSource A source of assets ## Methods[#](#methods) ### findAssets()[#](#findassets) ``` findAssets(queryData): Promise>; ``` Find all asset for the given type and the provided query data. #### Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `queryData` | [`AssetQueryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetquerydata/) | #### Returns[#](#returns) `Promise`<[`AssetsQueryResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetsqueryresult/)<[`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/)\>> * * * ### addAsset()?[#](#addasset) ``` optional addAsset(asset): void; ``` Adds the given asset to this source. Throws an error if the asset source does not support adding assets. #### Parameters[#](#parameters-1) | Parameter | Type | | --- | --- | | `asset` | [`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetdefinition/) | #### Returns[#](#returns-1) `void` * * * ### removeAsset()?[#](#removeasset) ``` optional removeAsset(assetId): void; ``` Removes the given asset from this source. #### Parameters[#](#parameters-2) | Parameter | Type | | --- | --- | | `assetId` | `string` | #### Returns[#](#returns-2) `void` * * * ### getSupportedMimeTypes()?[#](#getsupportedmimetypes) ``` optional getSupportedMimeTypes(): string[]; ``` Generates a list of supported mime types for this source. #### Returns[#](#returns-3) `string`\[\] a list of the mime types should be supported by this source ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `id` | `string` | The unique id of the API | | `fetchAsset?` | (`id`, `params?`) => `Promise`<[`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/)\> | Fetch an asset by id. | | `getGroups?` | () => `Promise`<`string`\[\]> | Return every available group | | `credits?` | `object` | Credits for the source/api | | `credits.name` | `string` | \- | | `credits.url?` | `string` | \- | | `license?` | `object` | General license for all asset from this source | | `license.name` | `string` | \- | | `license.url?` | `string` | \- | | ~`canManageAssets?`~ | `boolean` | Can the source add and remove assets dynamically? If `false` methods like `addAsset` and `removeAsset` will throw an error. **Deprecated** Will be removed in v1.11. Use `canAdd` and `canRemove` in the asset library configuration | | `applyAsset?` | (`asset`) => `Promise`<`number`\> | Apply the given asset result to the active scene. You can override this with custom behavior. | | `applyAssetToBlock?` | (`asset`, `block`) => `Promise`<`void`\> | Apply the given asset result to the given block. You can override this with custom behavior. | | `applyAssetProperty?` | (`asset`, `property`) => `Promise`<`void`\> | Apply a property of the given asset result to the active scene. You can override this with custom behavior. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetrgbcolor) # Interface: AssetRGBColor Asset Color payload RGB representation ## Properties[#](#properties) | Property | Type | | --- | --- | | `colorSpace` | `"sRGB"` | | `r` | `number` | | `g` | `number` | | `b` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult) # Interface: AssetResult Single asset result of a query from the engine. ## Extends[#](#extends) * [`Asset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) ## Extended by[#](#extended-by) * [`CompleteAssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/completeassetresult/) ## Properties[#](#properties) | Property | Type | Description | Inherited from | | --- | --- | --- | --- | | `id` | `string` | The unique id of this asset. | [`Asset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/).[`id`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) | | `groups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetgroups/) | Groups of the asset. | [`Asset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/).[`groups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) | | `meta?` | [`AssetMetaData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetmetadata/) | Asset-specific and custom meta information | [`Asset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/).[`meta`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) | | `payload?` | [`AssetPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetpayload/) | Structured asset-specific data | [`Asset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/).[`payload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) | | `locale?` | `string` | The locale of the label and tags | \- | | `label?` | `string` | The label of the result. Used for description and tooltips. | \- | | `tags?` | `string`\[\] | The tags of this asset. Used for filtering and free-text searching. | \- | | `active?` | `boolean` | If the asset is marked as active, i.e., used in a currently selected element. | \- | | `credits?` | `object` | Credits for the artist of the asset | \- | | `credits.name` | `string` | \- | \- | | `credits.url?` | `string` | \- | \- | | `license?` | `object` | License for this asset. Overwrites the source license if present | \- | | `license.name` | `string` | \- | \- | | `license.url?` | `string` | \- | \- | | `utm?` | `object` | UTM parameters for the links inside the credits | \- | | `utm.source?` | `string` | \- | \- | | `utm.medium?` | `string` | \- | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetquerydata) # Interface: AssetQueryData Defines a request for querying assets ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `query?` | `string` | A query string used for (fuzzy) searching of labels and tags | | `page` | `number` | The current page queried for paginated views. | | `tags?` | `string` | `string`\[\] | | `groups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetgroups/) | Query only these groups | | `excludeGroups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetgroups/) | Filter out assets with this groups | | `locale?` | `string` | Choose the locale of the labels and tags for localized search and filtering | | `perPage` | `number` | The number of results queried. How many assets shall be returned regardless of the total number of assets available. Together with `page` this can be used for pagination. | | `sortingOrder?` | [`SortingOrder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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. | | `sortKey?` | `string` | The key that identifies the meta data value to sort by or ‘id’ to sort by the asset ID. If empty, the assets are sorted by the index. | | `sortActiveFirst?` | `boolean` | Sort assets that are marked as active first. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetpayload) # Interface: AssetPayload Asset payload ## Properties[#](#properties) | Property | Type | | --- | --- | | `color?` | [`AssetColor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetcolor/) | | `sourceSet?` | [`Source`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/source/)\[\] | | `typeface?` | [`Typeface`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/typeface/) | | `transformPreset?` | [`AssetTransformPreset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assettransformpreset/) | | `properties?` | [`AssetProperty`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetproperty/)\[\] | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetnumberproperty) # Interface: AssetNumberProperty Asset number property definition ## Properties[#](#properties) | Property | Type | | --- | --- | | `property` | `string` | | `type` | `"Int"` | | `value` | `number` | | `defaultValue` | `number` | | `min` | `number` | | `max` | `number` | | `step` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry) # Interface: AssetLibraryEntry Represents an entry in the asset library, combining data and view configurations. ## Extends[#](#extends) * [`AssetLibraryEntryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/).[`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) ## Properties[#](#properties) | Property | Type | Description | Inherited from | | --- | --- | --- | --- | | `id` | `string` | \- | [`AssetLibraryEntryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/).[`id`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/) | | `sourceIds` | `string`\[\] | (`context`) => `string`\[\] | \- | | `sceneMode?` | | `"Design"` | `"Video"` | | `excludeGroups?` | `string`\[\] | \- | [`AssetLibraryEntryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/).[`excludeGroups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/) | | `includeGroups?` | `string`\[\] | \- | [`AssetLibraryEntryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/).[`includeGroups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/) | | `title?` | `string` | (`options`) => `string` | \- | | `canAdd?` | `boolean` | (`sourceId`) => `boolean` | If `true` an upload button will be shown and the uploaded file will be added to the source. If a function is used it will be called with the current asset source id. The asset source needs to support `addAsset`. | | `canRemove?` | `boolean` | (`sourceId`) => `boolean` | If `true` the asset can be removed from the asset source. If a function is used it will be called with the current asset source id. The asset source needs to support `removeAsset`. | | `showGroupOverview?` | `boolean` | \- | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`showGroupOverview`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `isSearchable?` | `boolean` | Indicates whether this asset library entry supports searching. When set to false, this entry’s assets cannot be searched. The search field in the panel will only be shown if at least one visible entry is searchable. Defaults to true (entry is searchable). | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`isSearchable`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `promptBeforeApply?` | | `boolean` | { `show`: `boolean`; `sourceIds?`: `string`\[\]; } | | `icon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | \- | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`icon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `previewLength?` | `number` | Determines how many asset results will be show in an overview or section overview. | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`previewLength`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `previewBackgroundType?` | `"cover"` | `"contain"` | Determines if the thumbUri is set as a background that will be contained or covered by the card in an overview or section overview. | | `gridBackgroundType?` | `"cover"` | `"contain"` | Determines if the thumbUri is set as a background that will be contained or covered by the card in the grid view | | `gridColumns?` | `number` | Number of columns in the grid view | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`gridColumns`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `gridItemHeight?` | `"auto"` | `"square"` | Determines the height of an item in the grid view. - `auto` automatically determine height yielding a masonry-like grid view - `square` every card will have the same square size | | `cardBackgroundPreferences?` | | [`CardBackground`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/cardbackground/)\[\] | (`asset`) => [`CustomCardBackground`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardbackground/) | | `cardBorder?` | `boolean` | Draws a border around the card if set to true | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`cardBorder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `cardLabel?` | (`assetResult`) => `string` | Overwrite the label of a card for a specific asset result | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`cardLabel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `cardStyle?` | (`assetResult`) => `Record`<`string`, `string`\> | Add custom styles to a card for a specific asset result | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`cardStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `cardLabelStyle?` | (`assetResult`) => `Record`<`string`, `string`\> | Add custom styles to a label for a specific asset result | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`cardLabelStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `cardLabelPosition?` | (`assetResult`) => `"inside"` | `"below"` | Position the label inside or below the card. Defaults to ‘inside’. | | `cardLabelTruncateLines?` | (`assetResult`) => `"single"` | `"multi"` | Control label truncation to occur at end of first line (‘single’), or at end of second line (‘multi’). Defaults to ‘multi’. | | `disableTooltips?` | `boolean` | Control whether tooltips should be disabled for asset library cards. When set to true, tooltips will not be shown on cards. Defaults to false (tooltips are shown). | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`disableTooltips`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `sortBy?` | | [`SortingOrder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sortingorder/) | { `sortKey?`: `string`; `sortingOrder?`: [`SortingOrder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sortingorder/); } | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetfreeaspectratio) # Interface: AssetFreeAspectRatio Asset transform preset payload free aspect ratio ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"FreeAspectRatio"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetfixedsize) # Interface: AssetFixedSize Asset transform preset payload fixed size ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"FixedSize"` | | `width` | `number` | | `height` | `number` | | `designUnit` | `"Pixel"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetenumproperty) # Interface: AssetEnumProperty Asset enum property definition ## Properties[#](#properties) | Property | Type | | --- | --- | | `property` | `string` | | `type` | `"Enum"` | | `value` | `string` | | `defaultValue` | `string` | | `options` | `string`\[\] | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetfixedaspectratio) # Interface: AssetFixedAspectRatio Asset transform preset payload fixed aspect ratio ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"FixedAspectRatio"` | | `width` | `number` | | `height` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetdefinition) # Interface: AssetDefinition Definition of an asset used if an asset is added to an asset source. ## Extends[#](#extends) * [`Asset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) ## Properties[#](#properties) | Property | Type | Description | Inherited from | | --- | --- | --- | --- | | `id` | `string` | The unique id of this asset. | [`Asset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/).[`id`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) | | `groups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetgroups/) | Groups of the asset. | [`Asset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/).[`groups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) | | `meta?` | [`AssetMetaData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetmetadata/) | Asset-specific and custom meta information | [`Asset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/).[`meta`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) | | `payload?` | [`AssetPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetpayload/) | Structured asset-specific data | [`Asset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/).[`payload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset/) | | `label?` | `Record`<`string`, `string`\> | Label used to display in aria-label and as a tooltip. Will be also searched in a query and should be localized | \- | | `tags?` | `Record`<`string`, `string`\[\]> | Tags for this asset. Can be used for filtering, but is also useful for free-text search. Since the label is searched as well as used for tooltips you do not want to overdo it, but still add things which are searched. Thus, it should be localized similar to the `label`. | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetcolorproperty) # Interface: AssetColorProperty Asset color property definition ## Properties[#](#properties) | Property | Type | | --- | --- | | `property` | `string` | | `type` | `"Color"` | | `value` | `Color` | | `defaultValue` | `Color` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetcmykcolor) # Interface: AssetCMYKColor Asset Color payload CMYK representation ## Properties[#](#properties) | Property | Type | | --- | --- | | `colorSpace` | `"CMYK"` | | `c` | `number` | | `m` | `number` | | `y` | `number` | | `k` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetbooleanproperty) # Interface: AssetBooleanProperty Asset boolean property definition ## Properties[#](#properties) | Property | Type | | --- | --- | | `property` | `string` | | `type` | `"Boolean"` | | `value` | `boolean` | | `defaultValue` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/asset) # Interface: Asset Generic asset information ## Extended by[#](#extended-by) * [`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetdefinition/) * [`AssetResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetresult/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `id` | `string` | The unique id of this asset. | | `groups?` | [`AssetGroups`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetgroups/) | Groups of the asset. | | `meta?` | [`AssetMetaData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetmetadata/) | Asset-specific and custom meta information | | `payload?` | [`AssetPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetpayload/) | Structured asset-specific data | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/applyassetoptions) # Interface: ApplyAssetOptions Options for applying an asset to the scene. ## Indexable[#](#indexable) ``` [key: string]: unknown ``` Additional custom context options. Allows passing arbitrary data to middleware for custom placement logic. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `clipType?` | `"clip"` | `"overlay"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/addvideooptions) # Interface: AddVideoOptions Options for adding videos to the scene. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `sizeMode?` | [`SizeMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sizemode/) | How the video should be sized and positioned | | `positionMode?` | [`PositionMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionmode/) | How the position should be interpreted | | `x?` | `number` | X position in scene design units | | `y?` | `number` | Y position in scene design units | | `cornerRadius?` | `number` | Corner radius for rounded corners in scene design units | | `timeline?` | `object` | Timeline configuration | | `timeline.timeOffset?` | `number` | Start time offset in seconds | | `timeline.duration?` | `number` | Duration in seconds | | `shadow?` | [`DropShadowOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dropshadowoptions/) | Drop shadow configuration | | `animation?` | [`AnimationOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationoptions/) | Animation configuration | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtoselectionaction) # Type Alias: ZoomToSelectionAction ``` type ZoomToSelectionAction = (options?) => Promise; ``` Action function for zooming to the current selection ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `padding?`: | `number` | | `options.padding?` | | `number` | | `options.animate?` | | `boolean` | | `options.autoFit?` | `boolean` | Whether to enable auto-fit mode after zooming (default: false) | ## Returns[#](#returns) `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtolevelaction) # Type Alias: ZoomToLevelAction ``` type ZoomToLevelAction = (level, options?) => void | Promise; ``` Action function for setting zoom to a specific level ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `level` | `number` | \- | | `options?` | { `animate?`: | `boolean` | | `options.animate?` | | `boolean` | | `options.minZoom?` | `number` | Minimum allowed zoom level (default: 0.125) | | `options.maxZoom?` | `number` | Maximum allowed zoom level (default: 32) | ## Returns[#](#returns) `void` | `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtopageaction) # Type Alias: ZoomToPageAction ``` type ZoomToPageAction = (options?) => Promise; ``` Action function for zooming to a page with optional padding ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `page?`: `"current"` | `"first"` | | `options.page?` | `"current"` | `"first"` | | `options.padding?` | | `number` | | `options.animate?` | | `boolean` | | `options.autoFit?` | `boolean` | Whether to enable auto-fit mode after zooming (default: false) | ## Returns[#](#returns) `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomoutaction) # Type Alias: ZoomOutAction ``` type ZoomOutAction = (options?) => void | Promise; ``` Action function for zooming out by one step ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `stepSize?`: `number`; `animate?`: | `boolean` | | `options.stepSize?` | `number` | Custom step size for zoom out (default uses predefined steps) | | `options.animate?` | | `boolean` | | `options.minZoom?` | `number` | Minimum allowed zoom level (default: 0.125) | ## Returns[#](#returns) `void` | `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtoblockaction) # Type Alias: ZoomToBlockAction ``` type ZoomToBlockAction = (blockId, options?) => Promise; ``` Action function for zooming to a specific block ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `blockId` | `number` | \- | | `options?` | { `padding?`: | `number` | | `options.padding?` | | `number` | | `options.animate?` | | `boolean` | | `options.autoFit?` | `boolean` | Whether to enable auto-fit mode after zooming (default: false) | ## Returns[#](#returns) `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomoptions) # Type Alias: ZoomOptions ``` type ZoomOptions = object; ``` Options for zooming to a block with optional animation. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `padding?` | | `number` | | `animate?` | | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoominaction) # Type Alias: ZoomInAction ``` type ZoomInAction = (options?) => void | Promise; ``` Action function for zooming in by one step ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `stepSize?`: `number`; `animate?`: | `boolean` | | `options.stepSize?` | `number` | Custom step size for zoom in (default uses predefined steps) | | `options.animate?` | | `boolean` | | `options.maxZoom?` | `number` | Maximum allowed zoom level (default: 32) | ## Returns[#](#returns) `void` | `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomautofitaxis) # Type Alias: ZoomAutoFitAxis ``` type ZoomAutoFitAxis = "Horizontal" | "Vertical" | "Both"; ``` The axis(es) for which to auto-fit. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/xywh) # Type Alias: XYWH ``` type XYWH = [number, number, number, number]; ``` Describes a rectangle on the screen. The `XYWH` type is a tuple that contains four numbers representing the x and y coordinates of the top-left corner of the rectangle, as well as the width and height of the rectangle. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/viewstyle) # Type Alias: ViewStyle ``` type ViewStyle = "advanced" | "default"; ``` Represents the view style options in the Creative Editor SDK. This type defines the possible view styles, which are ‘advanced’ and ‘default’. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videoexportoptions) # Type Alias: VideoExportOptions ``` type VideoExportOptions = object; ``` Represents the options for exporting a video. Defines the possible options for exporting a video. * ‘mimeType’: The MIME type of the output video file. * ‘onProgress’: A callback which reports on the progress of the export. * ‘h264Profile’: Determines the encoder feature set and in turn the quality, size and speed of the encoding process. * ‘h264Level’: Controls the H.264 encoding level. * ‘videoBitrate’: The video bitrate in bits per second. * ‘audioBitrate’: The audio bitrate in bits per second. * ‘timeOffset’: The time offset in seconds of the scene’s timeline from which the video will start. * ‘duration’: The duration in seconds of the final video. * ‘framerate’: The target framerate of the exported video in Hz. * ‘targetWidth’: An optional target width used in conjunction with target height. * ‘targetHeight’: An optional target height used in conjunction with target width. * ‘abortSignal’: An abort signal that can be used to cancel the export. ## Properties[#](#properties) | Property | Type | Default value | Description | | --- | --- | --- | --- | | `mimeType?` | [`VideoMimeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videomimetype/) | `'video/mp4'` | The MIME type of the output video file. | | `onProgress?` | (`numberOfRenderedFrames`, `numberOfEncodedFrames`, `totalNumberOfFrames`) => `void` | `undefined` | A callback which reports on the progress of the export. | | `h264Profile?` | `number` | `77 (Main)` | Determines the encoder feature set and in turn the quality, size and speed of the encoding process. | | `h264Level?` | `number` | `52` | Controls the H.264 encoding level. This relates to parameters used by the encoder such as bit rate, timings and motion vectors. Defined by the spec are levels 1.0 up to 6.2. To arrive at an integer value, the level is multiplied by ten. E.g. to get level 5.2, pass a value of 52. | | `videoBitrate?` | `number` | `undefined` | The video bitrate in bits per second. Maximum bitrate is determined by h264Profile and h264Level. If the value is 0, the bitrate is automatically determined by the engine. | | `audioBitrate?` | `number` | `undefined` | The audio bitrate in bits per second. If the value is 0, the bitrate is automatically determined by the engine (128kbps for stereo AAC stream). | | `timeOffset?` | `number` | `0` | The time offset in seconds of the scene’s timeline from which the video will start. | | `duration?` | `number` | `The duration of the scene.` | The duration in seconds of the final video. | | `framerate?` | `number` | `30` | The target framerate of the exported video in Hz. | | `targetWidth?` | `number` | `undefined` | An optional target width used in conjunction with target height. If used, the block will be rendered large enough, that it fills the target size entirely while maintaining its aspect ratio. | | `targetHeight?` | `number` | `undefined` | An optional target height used in conjunction with target width. If used, the block will be rendered large enough, that it fills the target size entirely while maintaining its aspect ratio. | | `allowTextOverhang?` | `boolean` | `false` | If true, the export will include text bounding boxes that account for glyph overhangs. When enabled, text blocks with glyphs that extend beyond their frame (e.g., decorative fonts with swashes) will be exported with the full glyph bounds visible, preventing text clipping. | | `abortSignal?` | `AbortSignal` | `undefined` | An abortsignal that can be used to cancel the export. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videomimetype) # Type Alias: VideoMimeType ``` type VideoMimeType = Extract; ``` Represents the video MIME types used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uploadaction) # Type Alias: UploadAction ``` type UploadAction = (file, onProgress, context?) => Promise; ``` Action function for uploading files to asset sources. ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `file` | `File` | The file to upload | | `onProgress` | (`progress`) => `void` | Progress action that receives upload progress (0-100) | | `context?` | [`UploadCallbackContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uploadcallbackcontext/) | Optional context information for the upload operation | ## Returns[#](#returns) `Promise`<[`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetdefinition/)\> A promise that resolves with the uploaded asset definition --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/verticalblockalignment) # Type Alias: VerticalBlockAlignment ``` type VerticalBlockAlignment = TextVerticalAlignment; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unknowntranslations) # Type Alias: UnknownTranslations ``` type UnknownTranslations = object; ``` Allows for custom translation keys beyond the built-in ones. ## Index Signature[#](#index-signature) ``` [key: string]: | string | {} ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unknownpanelpayload) # Type Alias: UnknownPanelPayload ``` type UnknownPanelPayload = object; ``` Represents an unknown payload for a panel in the Creative Editor SDK. This type defines a generic payload with unknown keys and values. ## Index Signature[#](#index-signature) ``` [key: string]: unknown ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/typefacedefinition) # Type Alias: TypefaceDefinition ``` type TypefaceDefinition = object; ``` Represents a typeface definition used in the editor. ## Deprecated[#](#deprecated) This type definition is not used anymore and will be removed. Defines the structure of a typeface definition, including metadata, family name, and font details. * ‘meta’: Optional metadata for the typeface, including default status, library, and categories. * ‘family’: The name of the typeface family. * ‘fonts’: An array of font definitions, each containing a font URL, weight, and style. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`meta?`~ | `object` | **Deprecated** The meta field is not used anymore | | `meta.default?` | `boolean` | \- | | `meta.library?` | `string` | \- | | `meta.categories?` | `string`\[\] | \- | | ~`family`~ | `string` | \- | | ~`fonts`~ | `object`\[\] | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomtofitaction) # Type Alias: TimelineZoomToFitAction ``` type TimelineZoomToFitAction = () => void; ``` Action function for fitting the video timeline to show all content ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomtolevelaction) # Type Alias: TimelineZoomToLevelAction ``` type TimelineZoomToLevelAction = (level) => void; ``` Action function for setting the video timeline zoom to a specific level ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `level` | `number` | ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomresetaction) # Type Alias: TimelineZoomResetAction ``` type TimelineZoomResetAction = () => void; ``` Action function for resetting the video timeline zoom to default level (1.0) ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomoutaction) # Type Alias: TimelineZoomOutAction ``` type TimelineZoomOutAction = () => void; ``` Action function for zooming out the video timeline by one step ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoominaction) # Type Alias: TimelineZoomInAction ``` type TimelineZoomInAction = () => void; ``` Action function for zooming in the video timeline by one step ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinecollapseaction) # Type Alias: TimelineCollapseAction ``` type TimelineCollapseAction = () => void; ``` Action function for collapsing the video timeline ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelineexpandaction) # Type Alias: TimelineExpandAction ``` type TimelineExpandAction = () => void; ``` Action function for expanding the video timeline ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/textcase) # Type Alias: TextCase ``` type TextCase = "Normal" | "Uppercase" | "Lowercase" | "Titlecase"; ``` Represents the text case of a text block. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix) # Type Alias: Suffix ``` type Suffix = Partial>; ``` Represents additional options for a button, which can be used as a suffix. The `Suffix` type provides a set of properties that control the appearance and behavior of a button suffix. These options include settings for the label, tooltip, click handler, variant, color, size, icon, trailing icon, active state, selected state, disabled state, loading state, and loading progress. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/strokestyle) # Type Alias: StrokeStyle ``` type StrokeStyle = typeof StrokeStyleValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/strokeposition) # Type Alias: StrokePosition ``` type StrokePosition = typeof StrokePositionValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/strokecornergeometry) # Type Alias: StrokeCornerGeometry ``` type StrokeCornerGeometry = typeof StrokeCornerGeometryValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/splitoptions) # Type Alias: SplitOptions ``` type SplitOptions = object; ``` Options for configuring block split operations. ## Properties[#](#properties) | Property | Type | Default value | Description | | --- | --- | --- | --- | | `attachToParent?` | `boolean` | `true` | Whether or not the new block will be attached to the same parent as the original. | | `createParentTrackIfNeeded?` | `boolean` | `false` | Whether to create a parent track if needed and add both blocks to it. Only used when attachToParent is true. | | `selectNewBlock?` | `boolean` | `true` | Whether to select the newly created block after splitting. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sortingorder) # Type Alias: SortingOrder ``` type SortingOrder = "None" | "Ascending" | "Descending"; ``` 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. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sizemode) # Type Alias: SizeMode ``` type SizeMode = WidthMode | HeightMode; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sharesceneaction) # Type Alias: ShareSceneAction ``` type ShareSceneAction = () => void | Promise; ``` Action function for handling scene sharing operations. ## Returns[#](#returns) `void` | `Promise`<`void`\> A promise that resolves when the share operation is complete, or void for synchronous operations --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/shapetypeshorthand) # Type Alias: ShapeTypeShorthand ``` type ShapeTypeShorthand = typeof SHAPE_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/shapetypelonghand) # Type Alias: ShapeTypeLonghand ``` type ShapeTypeLonghand = `//ly.img.ubq/shape/${ShapeTypeShorthand}`; ``` The longhand block type IDs for the blocks. These are the IDs used to create new shapes using `cesdk.engine.block.createShape(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingtype) # Type Alias: SettingType ``` type SettingType = "Bool" | "Int" | "Float" | "String" | "Color" | "Enum"; ``` Represents the type of a setting. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/shapetype) # Type Alias: ShapeType ``` type ShapeType = | ShapeTypeShorthand | ShapeTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/shapetypeshorthand/) and [ShapeTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/shapetypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingsfloat) # Type Alias: SettingsFloat ``` type SettingsFloat = SettingFloatPropertyName; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingsstring) # Type Alias: SettingsString ``` type SettingsString = SettingStringPropertyName; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingsenum) # Type Alias: SettingsEnum ``` type SettingsEnum = SettingEnumType; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingscolorrgba) # Type Alias: SettingsColorRGBA ``` type SettingsColorRGBA = SettingsColor; ``` Represents the color settings available in the editor. ## Deprecated[#](#deprecated) Use SettingsColor instead. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingscolor) # Type Alias: SettingsColor ``` type SettingsColor = SettingColorPropertyName; ``` Represents the color settings available in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/settingsbool) # Type Alias: SettingsBool ``` type SettingsBool = SettingBoolPropertyName; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scrolltopageaction) # Type Alias: ScrollToPageAction ``` type ScrollToPageAction = (options?) => Promise; ``` Action function for scrolling to a specific page ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `options?` | { `pageId?`: `number`; `animate?`: `boolean`; } | \- | | `options.pageId?` | `number` | The page ID to scroll to (defaults to current page) | | `options.animate?` | `boolean` | Whether to animate the scroll (default: false) | ## Returns[#](#returns) `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scrolltoblockaction) # Type Alias: ScrollToBlockAction ``` type ScrollToBlockAction = (blockId, options?) => Promise; ``` Action function for scrolling to a specific block ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `blockId` | `number` | \- | | `options?` | { `animate?`: `boolean`; } | \- | | `options.animate?` | `boolean` | Whether to animate the scroll (default: false) | ## Returns[#](#returns) `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scenemode) # Type Alias: SceneMode ``` type SceneMode = typeof SceneModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scope) # Type Alias: Scope ``` type Scope = | "text/edit" | "text/character" | "fill/change" | "fill/changeType" | "stroke/change" | "shape/change" | "layer/move" | "layer/resize" | "layer/rotate" | "layer/flip" | "layer/crop" | "layer/opacity" | "layer/blendMode" | "layer/visibility" | "layer/clipping" | "appearance/adjustments" | "appearance/filter" | "appearance/effect" | "appearance/blur" | "appearance/shadow" | "appearance/animation" | "lifecycle/destroy" | "lifecycle/duplicate" | "editor/add" | "editor/select"; ``` Represents the various scopes that define the capabilities and permissions within the Creative Editor SDK. Each scope corresponds to a specific functionality or action that can be performed within the editor. The `Scope` type is used to control access to different features and operations, allowing for fine-grained control over what actions are permitted. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scenelayout) # Type Alias: SceneLayout ``` type SceneLayout = typeof SceneLayoutValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/savesceneaction) # Type Alias: SaveSceneAction ``` type SaveSceneAction = () => void | Promise; ``` Action function for handling scene saving operations. ## Returns[#](#returns) `void` | `Promise`<`void`\> A promise that resolves when the save operation is complete, or void for synchronous operations --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rolestring) # Type Alias: RoleString ``` type RoleString = "Creator" | "Adopter" | "Viewer" | "Presenter"; ``` Represents a role string. The RoleString type defines the possible roles within the Creative Editor SDK. Each role corresponds to a different level of access and permissions, allowing for flexibility in how users are managed. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/propertytype) # Type Alias: PropertyType ``` type PropertyType = | "Bool" | "Int" | "Float" | "String" | "Color" | "Enum" | "Struct" | "Double" | "SourceSet"; ``` Represents the various types of properties that can be associated with design blocks. Each type corresponds to a different kind of data that can be used to define the properties of a design block within the system. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/rgba) # Type Alias: RGBA ``` type RGBA = [number, number, number, number]; ``` Represents a color in the RGBA color space. The `RGBA` type is a tuple that contains four numbers representing the red, green, blue, and alpha components of the color. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/previewtypecolor) # Type Alias: PreviewTypeColor ``` type PreviewTypeColor = object; ``` Represents a color preview. The `PreviewTypeColor` type provides a set of properties that describe a color preview. These options include settings for the type and color. ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"color"` | | `color` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/previewtypeimage) # Type Alias: PreviewTypeImage ``` type PreviewTypeImage = object; ``` Represents an image preview. The `PreviewTypeImage` type provides a set of properties that describe an image preview. These options include settings for the type and URI. ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"image"` | | `uri` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/previewtype) # Type Alias: PreviewType ``` type PreviewType = | PreviewTypeImage | PreviewTypeColor; ``` Represents a preview, which can be either an image or a color. The `PreviewType` type provides a set of values that describe a preview. These options include settings for the image or color preview. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionmode) # Type Alias: PositionMode ``` type PositionMode = PositionXMode | PositionYMode; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pasteaction) # Type Alias: PasteAction ``` type PasteAction = () => void | Promise; ``` Action function for pasting blocks from the clipboard ## Returns[#](#returns) `void` | `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneloptions) # Type Alias: PanelOptions ``` type PanelOptions = object; ``` Represents the options for a panel in the Creative Editor SDK. This interface defines the options for a panel, including whether it is closable by the user, its position, whether it is floating, and its payload. ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` _extends_ [`PanelId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | ## Properties[#](#properties) | Property | Type | | --- | --- | | `closableByUser?` | `boolean` | | `position?` | [`PanelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/enumerations/panelposition/) | | `floating?` | `boolean` | | `payload?` | [`PanelPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelpayload/)<`T`\> | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelpayload) # Type Alias: PanelPayload ``` type PanelPayload = T extends "//ly.img.panel/assetLibrary" ? AssetLibraryPanelPayload : UnknownPanelPayload; ``` Represents the payload for a panel in the Creative Editor SDK. This type defines the payload based on the panel ID. ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` _extends_ [`PanelId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid) # Type Alias: PanelId ``` type PanelId = | "//ly.img.panel/assetLibrary" | "//ly.img.panel/assetLibrary.replace" | "//ly.img.panel/settings" | "//ly.img.panel/inspector" | string & object; ``` Represents a unique identifier for a panel in the Creative Editor SDK. This type defines specific panel IDs and allows for custom panel IDs. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/palettecolor) # Type Alias: PaletteColor ``` type PaletteColor = | HexColorString | RGBColor | RGBAColor | SpotColor; ``` Represents a color definition for the custom color palette. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneldisposer) # Type Alias: PanelDisposer ``` type PanelDisposer = () => void; ``` Represents a function that disposes of a panel. The `PanelDisposer` type provides a function that, when called, disposes of the panel. ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher) # Type Alias: OrderComponentMatcher ``` type OrderComponentMatcher = | "first" | "last" | number | C["id"] | Partial | (component, index) => boolean; ``` Represents a matcher for order components. The OrderComponentMatcher type defines the possible matchers for order components. It includes predefined matchers for component IDs, partial components, and custom matchers. ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `C` _extends_ [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pageformatdefinition) # Type Alias: PageFormatDefinition ``` type PageFormatDefinition = object; ``` Represents the definition of a page format in the Creative Editor SDK. This interface defines the width, height, unit, and optional fixed orientation for a page format. ## Properties[#](#properties) | Property | Type | | --- | --- | | `default?` | `boolean` | | `width` | `number` | | `height` | `number` | | `unit` | [`DesignUnit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designunit/) | | `fixedOrientation?` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/optional) # Type Alias: Optional ``` type Optional = Omit & Partial; ``` Turn value at K of T into a Partial ## Type Parameters[#](#type-parameters) | Type Parameter | | --- | | `T` | | `K` _extends_ keyof `T` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onexportvideooptions) # Type Alias: OnExportVideoOptions ``` type OnExportVideoOptions = VideoExportOptions & object; ``` This interface extends the base VideoExportOptions with additional information about the export, including which design blocks were exported and the mimeType. ## Type declaration[#](#type-declaration) | Name | Type | | --- | --- | | `mimeType` | [`VideoMimeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videomimetype/) | | `exportedBlocks?` | [`DesignBlockId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblockid/)\[\] | ## See[#](#see) * VideoExportOptions For base export configuration options * DesignBlockId For design block identifier type --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onunsupportedbrowseraction) # Type Alias: OnUnsupportedBrowserAction ``` type OnUnsupportedBrowserAction = () => void; ``` Action function that is invoked when an unsupported browser is detected. This allows custom handling of unsupported browser scenarios. ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/offscreencanvas) # Type Alias: OffscreenCanvas ``` type OffscreenCanvas = object; ``` A simplified placeholder type for `OffscreenCanvas`, to avoid a dependency on `@types/offscreencanvas` ## Properties[#](#properties) | Property | Type | | --- | --- | | `width` | `number` | | `height` | `number` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onexportoptions) # Type Alias: OnExportOptions ``` type OnExportOptions = EngineExportOptions & object; ``` This interface extends the base ExportOptions with additional information about the export, including which design blocks were exported and the mimeType. ## Type declaration[#](#type-declaration) | Name | Type | | --- | --- | | `mimeType` | `Required`<[`EngineExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineexportoptions/)\>\[`"mimeType"`\] | | `exportedBlocks?` | [`DesignBlockId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblockid/)\[\] | ## See[#](#see) * ExportOptions For base export configuration options * DesignBlockId For design block identifier type --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/objecttypeshorthand) # Type Alias: ObjectTypeShorthand ``` type ObjectTypeShorthand = | DesignBlockTypeShorthand | `shape/${ShapeTypeShorthand}` | `fill/${FillTypeShorthand}` | `effect/${EffectTypeShorthand}` | `blur/${BlurTypeShorthand}` | `animation/${AnimationTypeShorthand}`; ``` 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. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/objecttypelonghand) # Type Alias: ObjectTypeLonghand ``` type ObjectTypeLonghand = | DesignBlockTypeLonghand | ShapeTypeLonghand | FillTypeLonghand | EffectTypeLonghand | BlurTypeLonghand | AnimationTypeLonghand; ``` 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. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/objecttype) # Type Alias: ObjectType ``` type ObjectType = | ObjectTypeShorthand | ObjectTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/objecttypeshorthand/) and [ObjectTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/objecttypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/notificationtype) # Type Alias: NotificationType ``` type NotificationType = "success" | "error" | "info" | "warning" | "loading"; ``` Represents the type of notification. The NotificationType enum defines the various types of notifications that can be displayed within the Creative Editor SDK. Each type corresponds to a different visual style and behavior, allowing for flexibility in how notifications are presented to users. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/notificationduration) # Type Alias: NotificationDuration ``` type NotificationDuration = number | "infinite" | "short" | "medium" | "long"; ``` Represents the duration of the notification. The NotificationDuration type defines the possible durations for notifications within the Creative Editor SDK. Each duration corresponds to a different time span, allowing for flexibility in how long notifications are displayed to users. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponents) # Type Alias: NavigationBarComponents ``` type NavigationBarComponents = | NavigationBarActionButton | NavigationBarCustomActionButton; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarordercomponent) # Type Alias: NavigationBarOrderComponent ``` type NavigationBarOrderComponent = | NavigationBarComponents| OrderComponentWithChildren; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid) # Type Alias: NavigationBarComponentId ``` type NavigationBarComponentId = | "ly.img.separator" | "ly.img.spacer" | "ly.img.back.navigationBar" | "ly.img.undoRedo.navigationBar" | "ly.img.pageResize.navigationBar" | "ly.img.title.navigationBar" | "ly.img.zoom.navigationBar" | "ly.img.preview.navigationBar" | "ly.img.actions.navigationBar" | "ly.img.close.navigationBar" | "ly.img.saveScene.navigationBar" | "ly.img.exportImage.navigationBar" | "ly.img.exportPDF.navigationBar" | "ly.img.exportVideo.navigationBar" | "ly.img.shareScene.navigationBar" | "ly.img.exportScene.navigationBar" | "ly.img.exportArchive.navigationBar" | "ly.img.importScene.navigationBar" | "ly.img.importArchive.navigationBar" | "ly.img.action.navigationBar" | string & object; ``` A list of the component IDs that can be used in the navigation bar. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/loglevel) # Type Alias: LogLevel ``` type LogLevel = "Info" | "Warning" | "Error"; ``` Provides logging functionality for the Creative Editor SDK. The `Logger` interface and associated types define a standardized way to log messages at different severity levels within the SDK. This allows developers to track the behavior of the editor, diagnose issues, and understand the flow of operations. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/mimetype) # Type Alias: MimeType ``` type MimeType = typeof MimeType[keyof typeof MimeType]; ``` Represents the MIME types used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/localekey) # Type Alias: LocaleKey ``` type LocaleKey = "en" | "de" | string; ``` Represents the supported locale keys for the Creative Editor SDK. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/isenabledfeaturecontext) # Type Alias: IsEnabledFeatureContext ``` type IsEnabledFeatureContext = object; ``` Represents the context for determining if a feature is enabled. This type includes the `CreativeEngine` instance. ## Properties[#](#properties) | Property | Type | | --- | --- | | `engine` | [`CreativeEngine`](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeengine/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid) # Type Alias: InspectorBarComponentId ``` type InspectorBarComponentId = | "ly.img.separator" | "ly.img.spacer" | "ly.img.spacer" | "ly.img.video.caption.inspectorBar" | "ly.img.shape.options.inspectorBar" | "ly.img.cutout.type.inspectorBar" | "ly.img.cutout.offset.inspectorBar" | "ly.img.cutout.smoothing.inspectorBar" | "ly.img.group.create.inspectorBar" | "ly.img.group.ungroup.inspectorBar" | "ly.img.audio.replace.inspectorBar" | "ly.img.separator" | "ly.img.text.typeFace.inspectorBar" | "ly.img.text.style.inspectorBar" | "ly.img.text.bold.inspectorBar" | "ly.img.text.italic.inspectorBar" | "ly.img.text.fontSize.inspectorBar" | "ly.img.text.alignHorizontal.inspectorBar" | "ly.img.text.advanced.inspectorBar" | "ly.img.combine.inspectorBar" | "ly.img.separator" | "ly.img.fill.inspectorBar" | "ly.img.trim.inspectorBar" | "ly.img.volume.inspectorBar" | "ly.img.crop.inspectorBar" | "ly.img.separator" | "ly.img.stroke.inspectorBar" | "ly.img.separator" | "ly.img.text.background.inspectorBar" | "ly.img.separator" | "ly.img.animations.inspectorBar" | "ly.img.separator" | "ly.img.adjustment.inspectorBar" | "ly.img.filter.inspectorBar" | "ly.img.effect.inspectorBar" | "ly.img.blur.inspectorBar" | "ly.img.separator" | "ly.img.shadow.inspectorBar" | "ly.img.separator" | "ly.img.opacityOptions.inspectorBar" | "ly.img.separator" | "ly.img.position.inspectorBar" | "ly.img.spacer" | "ly.img.separator" | "ly.img.inspectorToggle.inspectorBar" | "ly.img.trimControls.inspectorBar" | "ly.img.cropControls.inspectorBar" | string & object; ``` Represents the ID of an inspector bar component. The InspectorBarComponentId type defines the possible IDs for components that can be used in the inspector bar. It includes predefined IDs for separators, spacers, and various inspector items, as well as a catch-all type for custom IDs. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/importsceneaction) # Type Alias: ImportSceneAction ``` type ImportSceneAction = (options) => void | Promise; ``` Action function for handling scene import operations. ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `options` | { `format?`: `"scene"` | `"archive"`; } | | `options.format?` | `"scene"` | `"archive"` | ## Returns[#](#returns) `void` | `Promise`<`void`\> A promise that resolves with the imported scene data as a string, or the scene data directly --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/insertordercomponentlocation) # Type Alias: InsertOrderComponentLocation ``` type InsertOrderComponentLocation = "before" | "after" | "replace" | "asChild"; ``` Represents the location for inserting an order component. The `InsertOrderComponentLocation` type provides a set of values that control the location where a new component should be inserted relative to an existing component. These options include settings for inserting the component before, after, replacing, or as a child of the matched component. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/imagemimetype) # Type Alias: ImageMimeType ``` type ImageMimeType = Extract; ``` Represents the image MIME types used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/horizontalblockalignment) # Type Alias: HorizontalBlockAlignment ``` type HorizontalBlockAlignment = TextHorizontalAlignment; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/historyid) # Type Alias: HistoryId ``` type HistoryId = number; ``` A numerical identifier for a history stack --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/hexcolorstring) # Type Alias: HexColorString ``` type HexColorString = string; ``` Represents a hexadecimal color value (RGB or RGBA) that starts with a ’#’. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/gradientstoprgba) # Type Alias: GradientstopRGBA ``` type GradientstopRGBA = [number, number, number, number, number]; ``` Represents a gradient stop in the RGBA color space. The `GradientstopRGBA` type is a tuple that contains five numbers representing the stop position and the red, green, blue, and alpha components of the color. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/fontweight) # Type Alias: FontWeight ``` type FontWeight = | "thin" | "extraLight" | "light" | "normal" | "medium" | "semiBold" | "bold" | "extraBold" | "heavy"; ``` Represents the weight of a font. The FontWeight type defines the possible weights of a font within the Creative Editor SDK. Each weight corresponds to a different thickness, allowing for flexibility in how fonts are styled. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/fontstyle) # Type Alias: FontStyle ``` type FontStyle = "normal" | "italic"; ``` Represents the style of a font. The FontStyle type defines the possible styles of a font within the Creative Editor SDK. Each style corresponds to a different appearance, allowing for flexibility in how fonts are styled. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filltypeshorthand) # Type Alias: FillTypeShorthand ``` type FillTypeShorthand = typeof FILL_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filltypelonghand) # Type Alias: FillTypeLonghand ``` type FillTypeLonghand = `//ly.img.ubq/fill/${FillTypeShorthand}`; ``` The longhand block type IDs for the fill blocks. These are the IDs used to create new fills using `cesdk.engine.block.createFill(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filemimetype) # Type Alias: FileMimeType ``` type FileMimeType = | "image/png" | "image/jpeg" | "image/webp" | "image/x-tga" | "audio/wav" | "video/mp4" | "video/quicktime" | "video/webm" | "video/matroska" | "application/octet-stream" | "application/pdf" | "application/zip" | "text/plain;charset=UTF-8"; ``` Represents the MIME types for files supported by the file operations in UtilsAPI. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filltype) # Type Alias: FillType ``` type FillType = | FillTypeShorthand | FillTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filltypeshorthand/) and [FillTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filltypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featurepredicatecontext) # Type Alias: FeaturePredicateContext ``` type FeaturePredicateContext = IsEnabledFeatureContext & object; ``` Represents the context for enabling a feature. This type extends `IsEnabledFeatureContext` and includes a function to check the previous enable state and a function to get the default predicate. ## Type declaration[#](#type-declaration) | Name | Type | | --- | --- | | `isPreviousEnable()` | () => `boolean` | | `defaultPredicate()` | () => `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featurepredicate) # Type Alias: FeaturePredicate ``` type FeaturePredicate = boolean | (context) => boolean; ``` The feature predicate is used to enable or disable a feature based on the boolean or the return value of the function. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid) # Type Alias: FeatureId ``` type FeatureId = | "ly.img.navigation.bar" | "ly.img.navigation.back" | "ly.img.navigation.close" | "ly.img.navigation.undoRedo" | "ly.img.navigation.zoom" | "ly.img.navigation.actions" | "ly.img.delete" | "ly.img.duplicate" | "ly.img.placeholder" | "ly.img.placeholder.general" | "ly.img.placeholder.arrange" | "ly.img.placeholder.fill" | "ly.img.placeholder.shape" | "ly.img.placeholder.stroke" | "ly.img.placeholder.text" | "ly.img.placeholder.appearance" | "ly.img.placeholder.general.opacity" | "ly.img.placeholder.general.blendMode" | "ly.img.placeholder.general.duplicate" | "ly.img.placeholder.general.delete" | "ly.img.placeholder.arrange.move" | "ly.img.placeholder.arrange.resize" | "ly.img.placeholder.arrange.rotate" | "ly.img.placeholder.arrange.flip" | "ly.img.placeholder.fill.change" | "ly.img.placeholder.fill.changeType" | "ly.img.placeholder.fill.actAsPlaceholder" | "ly.img.placeholder.fill.crop" | "ly.img.placeholder.shape.change" | "ly.img.placeholder.stroke.change" | "ly.img.placeholder.text.edit" | "ly.img.placeholder.text.actAsPlaceholder" | "ly.img.placeholder.text.character" | "ly.img.placeholder.appearance.adjustments" | "ly.img.placeholder.appearance.filter" | "ly.img.placeholder.appearance.effect" | "ly.img.placeholder.appearance.blur" | "ly.img.placeholder.appearance.shadow" | "ly.img.placeholder.appearance.animations" | "ly.img.preview" | "ly.img.page.move" | "ly.img.page.add" | "ly.img.group" | "ly.img.replace" | "ly.img.text.edit" | "ly.img.text.typeface" | "ly.img.text.fontSize" | "ly.img.text.fontStyle" | "ly.img.text.alignment" | "ly.img.text.advanced" | "ly.img.text.background" | "ly.img.adjustment" | "ly.img.filter" | "ly.img.filter.lut" | "ly.img.filter.duotone" | "ly.img.effect" | "ly.img.blur" | "ly.img.shadow" | "ly.img.cutout" | "ly.img.fill" | "ly.img.shape.options" | "ly.img.combine" | "ly.img.trim" | "ly.img.crop" | "ly.img.crop.size" | "ly.img.crop.rotation" | "ly.img.crop.flip" | "ly.img.crop.fillMode" | "ly.img.crop.scale" | "ly.img.crop.position" | "ly.img.crop.panel.autoOpen" | "ly.img.volume" | "ly.img.playbackSpeed" | "ly.img.stroke" | "ly.img.position" | "ly.img.animations" | "ly.img.opacity" | "ly.img.blendMode" | "ly.img.video.timeline" | "ly.img.video.clips" | "ly.img.video.overlays" | "ly.img.video.audio" | "ly.img.video.addClip" | "ly.img.video.controls" | "ly.img.video.controls.toggle" | "ly.img.video.controls.background" | "ly.img.video.controls.playback" | "ly.img.video.controls.loop" | "ly.img.video.controls.split" | "ly.img.video.controls.timelineZoom" | "ly.img.video.caption" | "ly.img.transform.position" | "ly.img.transform.size" | "ly.img.transform.rotation" | "ly.img.transform.flip" | "ly.img.inspector.bar" | "ly.img.inspector.toggle" | "ly.img.page.resize" | "ly.img.dock" | "ly.img.canvas.bar" | "ly.img.canvas.menu" | "ly.img.inspector" | "ly.img.settings" | "ly.img.library.panel" | "ly.img.notifications" | "ly.img.notifications.undo" | "ly.img.notifications.redo" | string & object; ``` All built-in CE.SDK Feature Ids. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/exportsceneaction) # Type Alias: ExportSceneAction ``` type ExportSceneAction = (options) => void | Promise; ``` Action function for handling scene export operations. ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `options` | { `format`: `"scene"` | `"archive"`; } | | `options.format` | `"scene"` | `"archive"` | ## Returns[#](#returns) `void` | `Promise`<`void`\> A promise that resolves when the export operation is complete, or void for synchronous operations --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineplugincontext) # Type Alias: EnginePluginContext ``` type EnginePluginContext = object; ``` Represents the context for an engine plugin. Defines the context provided to an engine plugin, including APIs for assets, blocks, scenes, editor, events, and variables. * ‘engine’: The engine instance containing APIs for asset, block, scene, editor, event, and variable management. ## Properties[#](#properties) | Property | Type | | --- | --- | | `engine` | [`CreativeEngine`](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeengine/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/exportaction) # Type Alias: ExportAction ``` type ExportAction = (options?) => void | Promise; ``` Action function for handling export operations. Can be called with or without options to customize the export behavior. Supports both standard and video export workflows through a generic type parameter. The return type is automatically inferred based on the input options type. ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | `options?` | | [`EngineExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineexportoptions/) | ## Returns[#](#returns) `void` | `Promise`<`void`\> A promise that resolves when the export operation is complete, or void for synchronous operations --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/engineexportoptions) # Type Alias: EngineExportOptions ``` type EngineExportOptions = object; ``` Represents the options for exporting a design block. Defines the possible options for exporting a design block. * ‘mimeType’: The MIME type of the output file. * ‘pngCompressionLevel’: The PNG compression level to use, when exporting to PNG. * ‘jpegQuality’: The JPEG quality to use when encoding to JPEG. * ‘webpQuality’: The WebP quality to use when encoding to WebP. * ‘targetWidth’: An optional target width used in conjunction with target height. * ‘targetHeight’: An optional target height used in conjunction with target width. * ‘exportPdfWithHighCompatibility’: Export the PDF document with a higher compatibility to different PDF viewers. * ‘exportPdfWithUnderlayer’: Export the PDF document with an underlayer. * ‘underlayerSpotColorName’: The name of the spot color to be used for the underlayer’s fill. * ‘underlayerOffset’: The adjustment in size of the shape of the underlayer. * ‘abortSignal’: An abort signal that can be used to cancel the export. ## Properties[#](#properties) | Property | Type | Default value | Description | | --- | --- | --- | --- | | `mimeType?` | | [`ImageMimeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/imagemimetype/) | `Exclude`<[`ApplicationMimeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/applicationmimetype/), `"application/zip"`\> | | `pngCompressionLevel?` | `number` | `5.` | The PNG compression level to use, when exporting to PNG. Valid values are 0 to 9, higher means smaller, but slower. Quality is not affected. Ignored for other encodings. | | `jpegQuality?` | `number` | `0.9` | The JPEG quality to use when encoding to JPEG. Valid values are (0-1\], higher means better quality. Ignored for other encodings. | | `webpQuality?` | `number` | `undefined` | The WebP quality to use when encoding to WebP. Valid values are (0-1\], higher means better quality. WebP uses a special lossless encoding that usually produces smaller file sizes than PNG. Ignored for other encodings. Defaults to 1.0. | | `targetWidth?` | `number` | `undefined` | An optional target width used in conjunction with target height. If used, the block will be rendered large enough, that it fills the target size entirely while maintaining its aspect ratio. | | `targetHeight?` | `number` | `undefined` | An optional target height used in conjunction with target width. If used, the block will be rendered large enough, that it fills the target size entirely while maintaining its aspect ratio. | | `exportPdfWithHighCompatibility?` | `boolean` | `undefined` | Export the PDF document with a higher compatibility to different PDF viewers. Bitmap images and some effects like gradients will be rasterized with the DPI setting instead of embedding them directly. | | `exportPdfWithUnderlayer?` | `boolean` | `undefined` | Export the PDF document with an underlayer. An underlayer is generated by adding a graphics block behind the existing elements of the shape of the elements on the page. | | `underlayerSpotColorName?` | `string` | `undefined` | The name of the spot color to be used for the underlayer’s fill. | | `underlayerOffset?` | `number` | `undefined` | The adjustment in size of the shape of the underlayer. | | `allowTextOverhang?` | `boolean` | `false` | If true, the export will include text bounding boxes that account for glyph overhangs. When enabled, text blocks with glyphs that extend beyond their frame (e.g., decorative fonts with swashes) will be exported with the full glyph bounds visible, preventing text clipping. | | `abortSignal?` | `AbortSignal` | `undefined` | An abortsignal that can be used to cancel the export. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/effecttypeshorthand) # Type Alias: EffectTypeShorthand ``` type EffectTypeShorthand = typeof EFFECT_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/effecttypelonghand) # Type Alias: EffectTypeLonghand ``` type EffectTypeLonghand = `//ly.img.ubq/effect/${EffectTypeShorthand}`; ``` The longhand block type IDs for the effect blocks. These are the IDs used to create new effects using `cesdk.engine.block.createEffect(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/effecttype) # Type Alias: EffectType ``` type EffectType = | EffectTypeShorthand | EffectTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/effecttypeshorthand/) and [EffectTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/effecttypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/editmode) # Type Alias: EditMode ``` type EditMode = "Transform" | "Crop" | "Text" | "Playback" | "Trim" | string & object; ``` Represents the current edit mode of the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/editorplugincontext) # Type Alias: EditorPluginContext ``` type EditorPluginContext = EnginePluginContext & object; ``` Represents the context for an editor plugin. This type extends the `EnginePluginContext` with an optional `cesdk` property. ## Type declaration[#](#type-declaration) | Name | Type | | --- | --- | | `cesdk?` | [`CreativeEditorSDK`](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeeditorsdk/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dropshadowoptions) # Type Alias: DropShadowOptions ``` type DropShadowOptions = object; ``` Options for configuring drop shadow effects on blocks. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `color?` | `Color` | The color of the drop shadow | | `offset?` | `object` | The offset position of the shadow | | `offset.x?` | `number` | Horizontal offset in scene design units | | `offset.y?` | `number` | Vertical offset in scene design units | | `blur?` | `object` | The blur radius of the shadow | | `blur.x?` | `number` | Horizontal blur radius in scene design units | | `blur.y?` | `number` | Vertical blur radius in scene design units | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid) # Type Alias: DockOrderComponentId ``` type DockOrderComponentId = "ly.img.separator" | "ly.img.spacer" | string & object; ``` Represents the ID of a dock order component. The DockOrderComponentId type defines the possible IDs for components that can be used in the dock order. It includes predefined IDs for separators and spacers, as well as a catch-all type for custom IDs. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponent) # Type Alias: DockOrderComponent ``` type DockOrderComponent = | CustomDockComponent | AssetLibraryDockComponent; ``` Represents a dock order component. The DockOrderComponent type defines the possible structures for a dock order component. It includes predefined structures for custom dock components and asset library dock components. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogtype) # Type Alias: DialogType ``` type DialogType = "regular" | "success" | "error" | "info" | "warning" | "loading"; ``` Represents the type of dialog. The DialogType enum defines the various types of dialogs that can be created within the Creative Editor SDK. Each type corresponds to a different visual style and behavior, allowing for flexibility in how dialogs are presented to users. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogsize) # Type Alias: DialogSize ``` type DialogSize = "regular" | "large"; ``` Represents the size of the dialog. The DialogSize enum defines the possible sizes for dialogs within the Creative Editor SDK. Each size corresponds to a different dimension, allowing for flexibility in how dialogs are displayed to users. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogprogress) # Type Alias: DialogProgress ``` type DialogProgress = | number | "indeterminate" | { value: number; max: number;}; ``` Represents the progress of the dialog. The DialogProgress type defines the structure of the progress indicator that can be displayed within a dialog. It can be a number, ‘indeterminate’, or an object containing a value and a max, providing flexibility in how progress is indicated to users. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogcontent) # Type Alias: DialogContent ``` type DialogContent = | string | { title?: string; message: string | string[];}; ``` Represents the content of the dialog. The DialogContent type defines the structure of the content that can be displayed within a dialog. It can be a simple string or an object containing a title and a message, providing flexibility in how information is presented to users. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogaction) # Type Alias: DialogAction ``` type DialogAction = object; ``` Represents an action in the dialog. The DialogAction type defines the structure of an action that can be performed within a dialog. It includes properties for the variant, color, label, and a callback function to handle the action when clicked, providing flexibility in how user interactions are managed. ## Properties[#](#properties) | Property | Type | | --- | --- | | `variant?` | `"regular"` | | `color?` | `"accent"` | | `label` | `string` | | `onClick` | (`context`) => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designunit) # Type Alias: DesignUnit ``` type DesignUnit = typeof SceneDesignUnitValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblocktypeshorthand) # Type Alias: DesignBlockTypeShorthand ``` type DesignBlockTypeShorthand = typeof DESIGN_BLOCK_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblocktypelonghand) # Type Alias: DesignBlockTypeLonghand ``` type DesignBlockTypeLonghand = `//ly.img.ubq/${DesignBlockTypeShorthand}`; ``` 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)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblocktype) # Type Alias: DesignBlockType ``` type DesignBlockType = | DesignBlockTypeShorthand | DesignBlockTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblocktypeshorthand/) and [DesignBlockTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblocktypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/designblockid) # Type Alias: DesignBlockId ``` type DesignBlockId = number; ``` A numerical identifier for a design block --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/demoassetsourceid) # Type Alias: DemoAssetSourceId ``` type DemoAssetSourceId = | "ly.img.template" | "ly.img.image.upload" | "ly.img.video.upload" | "ly.img.audio.upload" | "ly.img.image" | "ly.img.video" | "ly.img.video.template" | "ly.img.audio" | "ly.img.textComponents"; ``` Represents the default demo asset source IDs used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/defaultassetsourceid) # Type Alias: DefaultAssetSourceId ``` type DefaultAssetSourceId = | "ly.img.sticker" | "ly.img.vectorpath" | "ly.img.colors.defaultPalette" | "ly.img.filter.lut" | "ly.img.filter.duotone" | "ly.img.effect" | "ly.img.blur" | "ly.img.typeface" | "ly.img.page.presets" | "ly.img.page.presets.video" | "ly.img.crop.presets" | "ly.img.captionPresets"; ``` Represents the default asset source IDs used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/cutouttype) # Type Alias: CutoutType ``` type CutoutType = typeof CutoutTypeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/custompanelmountfunction) # Type Alias: CustomPanelMountFunction ``` type CustomPanelMountFunction = (domElement) => PanelDisposer; ``` Represents a function that mounts a custom panel. The `CustomPanelMountFunction` type provides a function that mounts a custom panel to a specified HTMLDivElement. The function returns a `PanelDisposer` function that disposes of the panel when called. ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `domElement` | `HTMLDivElement` | ## Returns[#](#returns) [`PanelDisposer`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneldisposer/) --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/cutoutoperation) # Type Alias: CutoutOperation ``` type CutoutOperation = "Difference" | "Intersection" | "Union" | "XOR"; ``` Represents the type of a cutout. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/customactionfunction) # Type Alias: CustomActionFunction ``` type CustomActionFunction = (...args) => any | Promise; ``` A generic action function type for custom actions. Supports both synchronous and asynchronous implementations with flexible parameters. ## Parameters[#](#parameters) | Parameter | Type | Description | | --- | --- | --- | | …`args` | `any`\[\] | Variable number of arguments of any type | ## Returns[#](#returns) `any` | `Promise`<`any`\> Any value or a promise that resolves to any value --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/createsceneoptions) # Type Alias: CreateSceneOptions ``` type CreateSceneOptions = object; ``` Options for creating a video scene. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `page` | `object` | The page options | | `page.size` | | `number` | | `page.color?` | `Color` | The background color of the page | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/copyaction) # Type Alias: CopyAction ``` type CopyAction = () => void | Promise; ``` Action function for copying selected blocks to the clipboard ## Returns[#](#returns) `void` | `Promise`<`void`\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/configuration) # Type Alias: Configuration ``` type Configuration = Partial; ``` Represents the user-provided configuration for the Creative Editor SDK. This type allows for partial configuration settings, making all properties optional. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/contentfillmode) # Type Alias: ContentFillMode ``` type ContentFillMode = typeof ContentFillModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentid) # Type Alias: ComponentId ``` type ComponentId = | DockOrderComponentId | CanvasMenuComponentId | NavigationBarComponentId | CanvasBarComponentId | InspectorBarComponentId; ``` Represents the ID of a component. The ComponentId type defines the possible IDs for components that can be used in the editor. It includes predefined IDs for separators, spacers and various component types. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/colorspace) # Type Alias: ColorSpace ``` type ColorSpace = "sRGB" | "CMYK" | "SpotColor"; ``` Represents the color space used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/cmyk) # Type Alias: CMYK ``` type CMYK = [number, number, number, number]; ``` Represents a color in the CMYK color space. The `CMYK` type is a tuple that contains four numbers representing the cyan, magenta, yellow, and black components of the color. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/childrenorder) # Type Alias: ChildrenOrder ``` type ChildrenOrder = ( | ComponentId | OrderComponent)[]; ``` Represents the order of children components in a dropdown. The `ChildrenOrder` type provides a set of values that control the order of children components in a dropdown. These options include settings for the component ID or order component. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent) # Type Alias: CanvasMenuOrderComponent ``` type CanvasMenuOrderComponent = | CanvasMenuComponents| OrderComponentWithChildren; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponents) # Type Alias: CanvasMenuComponents ``` type CanvasMenuComponents = | CanvasMenuActionButton | CanvasMenuOptionsComponent | CanvasMenuCustomActionButton; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid) # Type Alias: CanvasMenuComponentId ``` type CanvasMenuComponentId = | "ly.img.separator" | "ly.img.spacer" | "ly.img.group.enter.canvasMenu" | "ly.img.group.select.canvasMenu" | "ly.img.page.moveUp.canvasMenu" | "ly.img.page.moveDown.canvasMenu" | "ly.img.text.edit.canvasMenu" | "ly.img.replace.canvasMenu" | "ly.img.placeholder.canvasMenu" | "ly.img.bringForward.canvasMenu" | "ly.img.sendBackward.canvasMenu" | "ly.img.duplicate.canvasMenu" | "ly.img.delete.canvasMenu" | "ly.img.options.canvasMenu" | "ly.img.flipX.canvasMenu" | "ly.img.flipY.canvasMenu" | "ly.img.copy.canvasMenu" | "ly.img.paste.canvasMenu" | "ly.img.text.color.canvasMenu" | "ly.img.text.bold.canvasMenu" | "ly.img.text.italic.canvasMenu" | "ly.img.text.variables.canvasMenu" | string & object; ``` A list of the component IDs that can be used in the canvas menu. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid) # Type Alias: CanvasBarComponentId ``` type CanvasBarComponentId = | "ly.img.separator" | "ly.img.spacer" | "ly.img.settings.canvasBar" | "ly.img.page.add.canvasBar" | string & object; ``` Represents the ID of a canvas bar component. The CanvasBarComponentId type defines the possible IDs for components that can be used in the canvas bar. It includes predefined IDs for separators, spacers, and various canvas items, as well as a catch-all type for custom IDs. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvas) # Type Alias: Canvas ``` type Canvas = | HTMLCanvasElement | OffscreenCanvas; ``` An HTML Canvas or an Offscreen Canvas --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/builderrenderfunction) # Type Alias: BuilderRenderFunction ``` type BuilderRenderFunction

= (context) => void; ``` Function that defines a component with the help of the passed builder object. ## Type Parameters[#](#type-parameters) | Type Parameter | Default type | | --- | --- | | `P` | `object` | ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `context` | [`BuilderRenderFunctionContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builderrenderfunctioncontext/)<`P`\> | ## Returns[#](#returns) `void` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/booleanoperation) # Type Alias: BooleanOperation ``` type BooleanOperation = "Difference" | "Intersection" | "Union" | "XOR"; ``` Represents the names of boolean operations. Defines the possible boolean operations. * ‘Difference’: The difference between two shapes. * ‘Intersection’: The intersection of two shapes. * ‘Union’: The union of two shapes. * ‘XOR’: The exclusive OR of two shapes. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blurtypelonghand) # Type Alias: BlurTypeLonghand ``` type BlurTypeLonghand = `//ly.img.ubq/blur/${BlurTypeShorthand}`; ``` The longhand block type IDs for the blur blocks. These are the IDs used to create new blurs using `cesdk.engine.block.createBlur(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blurtypeshorthand) # Type Alias: BlurTypeShorthand ``` type BlurTypeShorthand = typeof BLUR_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blurtype) # Type Alias: BlurType ``` type BlurType = | BlurTypeShorthand | BlurTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blurtypeshorthand/) and [BlurTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blurtypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blendmode) # Type Alias: BlendMode ``` type BlendMode = typeof BlendModeValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blockstate) # Type Alias: BlockState ``` type BlockState = BlockStateError | BlockStatePending | BlockStateReady; ``` Represents the state of a design block. The `BlockState` type is a union of the `BlockStateError`, `BlockStatePending`, and `BlockStateReady` interfaces, which describe the possible states of a design block. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/audiomimetype) # Type Alias: AudioMimeType ``` type AudioMimeType = Extract; ``` Represents the audio MIME types used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assettransformpreset) # Type Alias: AssetTransformPreset ``` type AssetTransformPreset = | AssetFixedAspectRatio | AssetFreeAspectRatio | AssetFixedSize; ``` Transform preset payload --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/audioexportoptions) # Type Alias: AudioExportOptions ``` type AudioExportOptions = object; ``` Represents the options for exporting audio. Defines the possible options for exporting audio. * ‘mimeType’: The MIME type of the output audio file. * ‘onProgress’: A callback which reports on the progress of the export. * ‘timeOffset’: The time offset in seconds relative to the target block. * ‘duration’: The duration in seconds of the final audio. * ‘sampleRate’: The sample rate of the exported audio. * ‘numberOfChannels’: The number of channels of the exported audio. * ‘skipEncoding’: Skip encoding (audio data will be returned immediately even if not compatible with target MIME type). ## Properties[#](#properties) | Property | Type | Default value | Description | | --- | --- | --- | --- | | `mimeType?` | [`AudioMimeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/audiomimetype/) | `'audio/wav'` | The MIME type of the output audio file. | | `onProgress?` | (`numberOfRenderedFrames`, `numberOfEncodedFrames`, `totalNumberOfFrames`) => `void` | `undefined` | A callback which reports on the progress of the export. | | `timeOffset?` | `number` | `0` | The time offset in seconds relative to the target block. | | `duration?` | `number` | `The duration of the block.` | The duration in seconds of the final audio. | | `sampleRate?` | `number` | `48000` | The sample rate of the exported audio. | | `numberOfChannels?` | `number` | `2` | The number of channels of the exported audio. | | `skipEncoding?` | `boolean` | `false` | Skip encoding (audio data will be returned immediately even if not compatible with target MIME type). | | `abortSignal?` | `AbortSignal` | `undefined` | An AbortSignal that can be used to cancel the audio export operation. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetproperty) # Type Alias: AssetProperty ``` type AssetProperty = | AssetBooleanProperty | AssetColorProperty | AssetEnumProperty | AssetNumberProperty | AssetStringProperty; ``` Asset property for payload --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetmetadata) # Type Alias: AssetMetaData ``` type AssetMetaData = object & Record; ``` Generic asset information ## Type declaration[#](#type-declaration) | Name | Type | Description | | --- | --- | --- | | `mimeType?` | `string` | The mime type of this asset or the data behind the asset’s uri. | | `blockType?` | `string` | The type id of the design block that should be created from this asset. | | `fillType?` | `string` | \- | | `shapeType?` | `string` | \- | | `kind?` | `string` | \- | | `uri?` | `string` | \- | | `thumbUri?` | `string` | \- | | `previewUri?` | `string` | \- | | `sourceSet?` | [`Source`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/source/)\[\] | \- | | `filename?` | `string` | \- | | `vectorPath?` | `string` | \- | | `width?` | `number` | \- | | `height?` | `number` | \- | | `duration?` | `string` | \- | | `effectType?` | [`EffectType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/effecttype/) | \- | | `blurType?` | [`BlurType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/blurtype/) | \- | | `looping?` | `boolean` | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetlibrarypanelpayload) # Type Alias: AssetLibraryPanelPayload ``` type AssetLibraryPanelPayload = object; ``` Represents the payload for the asset library panel in the Creative Editor SDK. This interface defines the title, entries, and placement options for the asset library panel. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `title?` | `string` | `string`\[\] | | `entries?` | `string`\[\] | \- | | `applyAssetContext?` | [`ApplyAssetOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/applyassetoptions/) | Context for asset application. Passed directly to engine.asset.apply() when an asset is selected. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetlibrarydockcomponent) # Type Alias: AssetLibraryDockComponent ``` type AssetLibraryDockComponent = object; ``` Represents an asset library dock component. The AssetLibraryDockComponent interface defines the structure of an asset library dock component. It includes properties for the ID, key, label, icon, entries, and optional button styling/behavior. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `id` | `"ly.img.assetLibrary.dock"` | \- | | `key?` | `string` | Individual and optional key for the component. | | `label?` | `string` | Label to display on the button. | | `icon?` | `string` | Icon to display on the button. | | `entries` | `string`\[\] | Determines with what entries the asset library is opened. | | `onClick?` | () => `void` | Custom onClick handler. If provided, overrides the default asset library toggle behavior. | | `selected?` | `boolean` | Controls the selected state of the button. If provided, overrides the automatic detection. | | `disabled?` | `boolean` | Controls the disabled state of the button. If provided, overrides the automatic detection. | | `size?` | `"normal"` | `"large"` | | `variant?` | `"regular"` | `"plain"` | | `color?` | `"accent"` | `"danger"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetgroups) # Type Alias: AssetGroups ``` type AssetGroups = string[]; ``` 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. Tags in comparison have are more loosely hold meaning used for extended searching/filtering. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid) # Type Alias: AssetEntryId ``` type AssetEntryId = | "ly.img.colors" | "ly.img.typefaces" | "ly.img.pagePresets" | "ly.img.cropPresets" | "ly.img.library.captionPresets" | "ly.img.animations" | "ly.img.textAnimations" | string & object; ``` Asset library entry IDs that can be used with asset library APIs. Includes built-in entry IDs registered by the SDK, and allows custom entry IDs. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetcolor) # Type Alias: AssetColor ``` type AssetColor = | AssetRGBColor | AssetCMYKColor | AssetSpotColor; ``` Asset Color payload --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/applicationmimetype) # Type Alias: ApplicationMimeType ``` type ApplicationMimeType = Extract; ``` Represents the application MIME types used in the editor. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationtypeshorthand) # Type Alias: AnimationTypeShorthand ``` type AnimationTypeShorthand = typeof ANIMATION_TYPES[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationtypelonghand) # Type Alias: AnimationTypeLonghand ``` type AnimationTypeLonghand = `//ly.img.ubq/animation/${AnimationTypeShorthand}`; ``` The longhand block type IDs for the animation blocks. These are the IDs used to create new animations using `cesdk.engine.block.createAnimation(id)`. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationtype) # Type Alias: AnimationType ``` type AnimationType = | AnimationTypeShorthand | AnimationTypeLonghand; ``` 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](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationtypeshorthand/) and [AnimationTypeLonghand](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationtypelonghand/) for more details. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationoptions) # Type Alias: AnimationOptions ``` type AnimationOptions = object; ``` Options for configuring animations (in, loop, out animations). ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `in?` | [`AnimationEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationentry/) | Animation when the element enters | | `loop?` | [`AnimationEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationentry/) | Animation that loops while the element is visible | | `out?` | [`AnimationEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationentry/) | Animation when the element exits | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationentry) # Type Alias: AnimationEntry ``` type AnimationEntry = object; ``` Configuration options for animations. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `type` | [`AnimationType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationtype/) | The type of animation to apply | | `duration` | `number` | Duration of the animation in seconds | | `easing?` | [`AnimationEasing`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationeasing/) | Easing function for the animation | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationeasing) # Type Alias: AnimationEasing ``` type AnimationEasing = typeof AnimationEasingValues[number]; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/addimageoptions) # Type Alias: AddImageOptions ``` type AddImageOptions = object; ``` Options for adding images to the scene. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `sizeMode?` | [`SizeMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sizemode/) | How the image should be sized and positioned | | `positionMode?` | [`PositionMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionmode/) | How the position should be interpreted | | `x?` | `number` | X position in scene design units | | `y?` | `number` | Y position in scene design units | | `cornerRadius?` | `number` | Corner radius for rounded corners in scene design units | | `size?` | | `number` | | `timeline?` | `object` | Timeline configuration for video scenes | | `timeline.timeOffset?` | `number` | Start time offset in seconds | | `timeline.duration?` | `number` | Duration in seconds | | `shadow?` | [`DropShadowOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dropshadowoptions/) | Drop shadow configuration | | `animation?` | [`AnimationOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/animationoptions/) | Animation configuration | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionid) # Type Alias: ActionId ``` type ActionId = | keyof RegisteredActions | string & object; ``` Available action event types that can be registered with the ActionsAPI. These correspond to different UI actions that can be customized. Supports both predefined action types from the Actions interface and custom string identifiers. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionfunction) # Type Alias: ActionFunction ``` type ActionFunction = T extends keyof RegisteredActions ? RegisteredActions[T] : C; ``` Type helper for retrieving the correct action function type based on the action ID. Returns the strongly-typed action for known actions, or a custom action type for unknown IDs. ## Type Parameters[#](#type-parameters) | Type Parameter | Default type | Description | | --- | --- | --- | | `T` _extends_ [`ActionId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionid/) | \- | The action ID type | | `C` | [`CustomActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/customactionfunction/) | The custom action function type (defaults to CustomActionFunction) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentaluserinterfaceapi) # Namespace: ExperimentalUserInterfaceAPI Provides experimental methods for controlling the UI of the Creative Editor SDK. The `Experimental` namespace contains classes and methods that are subject to change and are not guaranteed to be stable across different versions of the SDK. These methods offer advanced functionality that may not be suitable for all use cases but can be useful for developers who need more control over the editor’s behavior. ## Classes[#](#classes) | Class | Description | | --- | --- | | [UserInterfaceAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentaluserinterfaceapi/classes/userinterfaceapi/) | A public interface for controlling the UI of the Creative Editor SDK | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements) # Namespace: UserInterfaceElements ## Type Aliases[#](#type-aliases) | Type Alias | Description | | --- | --- | | [AssetLibraryEntries](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/assetlibraryentries/) | Represents a collection of asset library entries, which can be either a static array or a dynamic function. | | [CardBackground](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/cardbackground/) | Type representing the background of a card. - `path`: The path to the background resource. - `type`: The type of the background resource, either ‘svgVectorPath’ or ‘image’. | | [CustomCardBackground](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardbackground/) | Type representing the background of a custom card, which can be either an image or an SVG vector path. | | [CustomCardImageBackground](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardimagebackground/) | Type representing an image background for a custom card. - `url`: The URL of the image. - `type`: The type of the background, which is ‘image’. | | [CustomCardSvgVectorPathBackground](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardsvgvectorpathbackground/) | Type representing an SVG vector path background for a custom card. - `type`: The type of the background, which is ‘svgVectorPath’. - `viewBox`: The viewBox attribute for the SVG. - `width`: Optional width of the SVG. - `height`: Optional height of the SVG. - `d`: The path data for the SVG. - `stroke`: Optional stroke color for the SVG. - `strokeWidth`: Optional stroke width for the SVG. - `strokeLinecap`: Optional stroke line cap for the SVG. - `strokeLinejoin`: Optional stroke line join for the SVG. - `strokeDasharray`: Optional stroke dash array for the SVG. - `strokeDashoffset`: Optional stroke dash offset for the SVG. - `opacity`: Optional opacity for the SVG. - `clipPath`: Optional clip path for the SVG. - `fill`: Optional fill color for the SVG. - `fillRule`: Optional fill rule for the SVG. - `clipRule`: Optional clip rule for the SVG. | | [CustomIcon](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | Type representing a custom icon, which can be a string or a function. - If a string, it represents the name of the icon. - If a function, it takes an object with `theme` and `iconSize` properties and returns a string representing the icon. | | [ExportFormat](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/exportformat/) | Type representing the export format. - `image/png`: PNG image format. - `video/mp4`: MP4 video format. - `application/pdf`: PDF document format. | | [UserInterfaceCustomActionIconName](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/userinterfacecustomactioniconname/) | Type representing the name of a custom action icon. - `default`: Default icon. - `download`: Download icon. - `upload`: Upload icon. - `save`: Save icon. - Any other string: Custom icon name. | ## Enumerations[#](#enumerations) | Enumeration | Description | | --- | --- | | [NavigationPosition](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/enumerations/navigationposition/) | This enum is used to specify the position of the navigation bar within the user interface. | ## Interfaces[#](#interfaces) | Interface | Description | | --- | --- | | [AssetEntrySourceIdsContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetentrysourceidscontext/) | Context provided to the sourceIds callback function. - `cesdk`: The CreativeEditorSDK instance. - `engine`: The CreativeEngine instance. | | [AssetLibraryEntryData](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/) | Interface representing the data configuration for an asset library entry. - `id`: The unique identifier for the asset library entry. - `sourceIds`: An array of source IDs associated with the asset library entry, or a function that returns an array of source IDs. - `sceneMode`: Optional configuration for the scene mode, which can be a `SceneMode`, ‘All’, or a function returning a `SceneMode` or ‘All’. - `excludeGroups`: Optional array of group IDs to exclude from the asset library entry. - `includeGroups`: Optional array of group IDs to include in the asset library entry. - `title`: Optional title for the asset library entry, which can be a string or a function returning a string or undefined. - `canAdd`: Optional boolean or function indicating whether the asset can be added to the source. - `canRemove`: Optional boolean or function indicating whether the asset can be removed from the source. | | [AssetLibraryEntryView](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | Interface representing the view configuration for an asset library entry. - `showGroupOverview`: Optional boolean indicating whether to show the group overview. - `promptBeforeApply`: Optional configuration for showing a confirmation dialog before applying an asset. - `icon`: Optional custom icon for the asset. - `previewLength`: Optional number determining how many asset results will be shown in an overview or section overview. - `previewBackgroundType`: Optional type determining if the thumbUri is set as a background that will be contained or covered by the card in an overview or section overview. - `gridBackgroundType`: Optional type determining if the thumbUri is set as a background that will be contained or covered by the card in the grid view. - `gridColumns`: Optional number of columns in the grid view. - `gridItemHeight`: Optional height of an item in the grid view, either ‘auto’ or ‘square’. - `cardBackgroundPreferences`: Optional configuration for determining what will be used as the card background from the asset and in which priorities. - `cardBorder`: Optional boolean indicating whether to draw a border around the card. - `cardLabel`: Optional function to overwrite the label of a card for a specific asset result. - `cardStyle`: Optional function to add custom styles to a card for a specific asset result. - `cardLabelStyle`: Optional function to add custom styles to a label for a specific asset result. - `cardLabelPosition`: Optional function to position the label inside or below the card. - `cardLabelTruncateLines`: Optional function to control label truncation to occur at end of first line (‘single’) or at end of second line (‘multi’). - `sortBy`: Optional configuration for sorting the asset results. | | [~DockGroup~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/dockgroup/) | \- | | [UserInterfaceAssetLibrary](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceassetlibrary/) | Interface representing the asset library in the user interface. - `position`: Optional position of the asset library. | | [UserInterfaceCustomAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacecustomaction/) | Interface representing a custom action in the user interface. - `callback`: Function to be called when the action is triggered. - `label`: Label for the action. - `iconName`: Name of the icon for the action. | | [UserInterfaceElement](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | Interface representing an element in the user interface. - `show`: Optional boolean indicating whether the element should be shown. | | [UserInterfaceElements](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelements/) | Defines the configuration for user interface elements, including panels, dock, libraries, blocks, navigation, and inspector bar. | | [UserInterfaceExportAction](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceexportaction/) | Interface representing an export action in the user interface. - `format`: Optional array of export formats. | | [UserInterfaceInspector](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspector/) | Interface representing the inspector in the user interface. - `position`: Optional position of the inspector. - `floating`: Optional boolean indicating whether the inspector should be floating. | | [~UserInterfaceInspectorBlock~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) | Interface representing a block in the user interface inspector. | | [~UserInterfaceInspectorBlockGraphic~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockgraphic/) | Interface representing a graphic block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. - `filters`: Optional element or boolean indicating whether the filters section should be shown. - `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. - `effects`: Optional element or boolean indicating whether the effects section should be shown. - `blur`: Optional element or boolean indicating whether the blur section should be shown. | | [~UserInterfaceInspectorBlockImage~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockimage/) | Interface representing an image block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. - `filters`: Optional element or boolean indicating whether the filters section should be shown. - `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. - `effects`: Optional element or boolean indicating whether the effects section should be shown. - `blur`: Optional element or boolean indicating whether the blur section should be shown. | | [~UserInterfaceInspectorBlockPage~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockpage/) | Interface representing a page block in the user interface inspector. - `format`: Optional element or boolean indicating whether the format section should be shown. - `manage`: Optional element or boolean indicating whether the manage section should be shown. - `maxDuration`: Optional number controlling the maximum allowed duration of a page, if in video mode. - `crop`: Optional element or boolean indicating whether the crop section should be shown. - `filters`: Optional element or boolean indicating whether the filters section should be shown. - `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. - `effects`: Optional element or boolean indicating whether the effects section should be shown. - `blur`: Optional element or boolean indicating whether the blur section should be shown. | | [~UserInterfaceInspectorBlockRectShape~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockrectshape/) | Interface representing a rectangular shape block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. - `filters`: Optional element or boolean indicating whether the filters section should be shown. - `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. - `effects`: Optional element or boolean indicating whether the effects section should be shown. - `blur`: Optional element or boolean indicating whether the blur section should be shown. | | [~UserInterfaceInspectorBlocks~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocks/) | Interface representing the blocks in the user interface inspector. - `opacity`: Optional element or boolean indicating whether the opacity block should be shown. - `transform`: Optional element or boolean indicating whether the transform block should be shown. - `trim`: Optional element or boolean indicating whether the trim block should be shown. - `//ly.img.ubq/text`: Optional text block configuration. - `//ly.img.ubq/page`: Optional page block configuration. - `//ly.img.ubq/graphic`: Optional graphic block configuration. | | [~UserInterfaceInspectorBlockShape~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockshape/) | Interface representing a shape block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. | | [~UserInterfaceInspectorBlockText~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocktext/) | Interface representing a text block in the user interface inspector. - `advanced`: Optional element or boolean indicating whether the advanced section should be shown. - `color`: Optional element or boolean indicating whether the color section should be shown. | | [~UserInterfaceInspectorBlockVideoFill~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockvideofill/) | Interface representing a video fill block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. - `filters`: Optional element or boolean indicating whether the filters section should be shown. - `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. - `effects`: Optional element or boolean indicating whether the effects section should be shown. - `blur`: Optional element or boolean indicating whether the blur section should be shown. | | [UserInterfaceNavigation](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacenavigation/) | Interface representing the navigation in the user interface. - `position`: Optional position of the navigation. - `title`: Optional title for the navigation. - `action`: Optional object containing actions for the navigation. | | [UserInterfaceSettings](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacesettings/) | Interface representing the settings in the user interface. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder) # Namespace: ExperimentalBuilder Namespace containing experimental features for the builder. These features are subject to change and may not be stable for production use. ## Type Aliases[#](#type-aliases) | Type Alias | Description | | --- | --- | | [Placement](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/placement/) | \- | | [PreviewTypeImage](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/previewtypeimage/) | \- | | [PreviewTypeColor](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/previewtypecolor/) | \- | | [PreviewType](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/previewtype/) | \- | ## Interfaces[#](#interfaces) | Interface | Description | | --- | --- | | [BuilderRenderContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/builderrendercontext/) | \- | | [PopoverChildrenContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/popoverchildrencontext/) | \- | | [PopoverOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/popoveroptions/) | \- | | [MenuOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/menuoptions/) | \- | | [ButtonRowOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/buttonrowoptions/) | \- | | [MediaPreviewOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/mediapreviewoptions/) | \- | | [Builder](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/builder/) | Interface for all available builder. Depending on the context different implementation might be used. A “Button” in the canvas menu might render different component than a button in the topbar or a panel. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/cesdkconfiguration) # Namespace: CESDKConfiguration Namespace for `CESDKConfiguration` to include deprecated keys. This namespace includes deprecated keys that are part of the public API via the `CombinedConfiguration` type. These keys are used in the ConfigMigrations but are not used internally. ## Type Aliases[#](#type-aliases) | Type Alias | Description | | --- | --- | | [DeprecatedKeys](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/cesdkconfiguration/type-aliases/deprecatedkeys/) | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes) # Namespace: ConfigTypes ## Type Aliases[#](#type-aliases) | Type Alias | Description | | --- | --- | | [A11y](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/a11y/) | Represents the accessibility settings for the Creative Editor SDK. This type defines the heading hierarchy start level, which can be a number between 1 and 6. | | [~Callbacks~](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/callbacks/) | Represents the callback functions for various events in the Creative Editor SDK. This interface defines functions for handling back, close, share, save, load, load archive, download, export, upload, and unsupported browser events. | | [CombinedConfiguration](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/combinedconfiguration/) | Represents the combined configuration for the Creative Editor SDK. This type combines the `CESDKConfiguration` with the `EngineConfiguration` while omitting the `presets` key. It also includes deprecated keys from the `CESDKConfiguration`. | | [I18n](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/i18n/) | Represents the internationalization settings for the Creative Editor SDK. This type defines a record of locale strings to translation objects. Note: this will append keys and not override keys. | | [OnUploadCallback](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/onuploadcallback/) | Represents the upload callback function for the Creative Editor SDK. This type defines a function that handles file uploads, including progress updates and context. | | [OnUploadOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/onuploadoptions/) | Represents the options for the upload callback in the Creative Editor SDK. This type defines the supported MIME types for uploads. | | [Scale](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scale/) | Represents the base scale values for the Creative Editor SDK. This type defines the concrete scales that can be rendered. | | [ScaleConfig](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scaleconfig/) | Represents the scale configuration for the Creative Editor SDK. This can be a concrete scale or a function that returns a scale based on viewport properties. | | [ScaleFn](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scalefn/) | A function that returns a scale value based on viewport properties. This allows for dynamic scale selection based on runtime conditions. | | [Theme](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/theme/) | Represents the base theme values for the Creative Editor SDK. This type defines the concrete themes that can be rendered. | | [ThemeConfig](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/themeconfig/) | Represents the theme configuration for the Creative Editor SDK. This can be a concrete theme, a function that returns a theme, or ‘system’ to use OS preference. | | [ThemeFn](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/themefn/) | A function that returns a theme value. This allows for dynamic theme selection based on runtime conditions. The function is evaluated lazily whenever the theme is accessed. | ## Interfaces[#](#interfaces) | Interface | Description | | --- | --- | | [BleedMarginOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/bleedmarginoptions/) | Represents the bleed margin configuration options for a single design unit type in the Creative Editor SDK. This interface defines the dropdown options and the default bleed margin value. | | [FontSizeOptions](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/fontsizeoptions/) | Represents the font size configuration options in the Creative Editor SDK. This interface defines the dropdown options for font sizes. | | [UIOptionsForSingleDesignUnit](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uioptionsforsingledesignunit/) | Represents the UI options for a single design unit type in the Creative Editor SDK. This interface defines the bleed margin options for a single design unit. | | [UIOptionsPerDesignUnit](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uioptionsperdesignunit/) | Represents the UI options for different design units in the Creative Editor SDK. This interface defines the UI options for millimeters, pixels, and inches. | | [UploadCallbackContext](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uploadcallbackcontext/) | Represents the context for the upload callback in the Creative Editor SDK. This interface defines the source ID and an optional group for the upload context. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentaluserinterfaceapi/classes/userinterfaceapi) # Class: UserInterfaceAPI A public interface for controlling the UI of the Creative Editor SDK ## Constructors[#](#constructors) ### Constructor[#](#constructor) `UserInterfaceAPI` ## Methods[#](#methods) ### setGlobalStateValue()[#](#setglobalstatevalue) | Type Parameter | | ------ | | `T` | #### Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `id` | `string` | | `value` | `T` | #### Returns[#](#returns) `void` #### Signature[#](#signature) ``` setGlobalStateValue(id: string, value: T): void ``` * * * ### getGlobalStateValue()[#](#getglobalstatevalue) | Type Parameter | | ------ | | `T` | #### Parameters[#](#parameters-1) | Parameter | Type | | --- | --- | | `id` | `string` | | `defaultValue?` | `T` | #### Returns[#](#returns-1) `T` #### Signature[#](#signature-1) ``` getGlobalStateValue(id: string, defaultValue?: T): T ``` * * * ### hasGlobalStateValue()[#](#hasglobalstatevalue) | Parameter | Type | | ------ | ------ | | `id` | `string` | #### Returns[#](#returns-2) `boolean` #### Signature[#](#signature-2) ``` hasGlobalStateValue(id: string): boolean ``` * * * ### onGlobalStateChanged()[#](#onglobalstatechanged) | Type Parameter | | ------ | | `T` | #### Parameters[#](#parameters-2) | Parameter | Type | | --- | --- | | `id` | `string` | | `callback` | (`value`) => `void` | #### Returns[#](#returns-3) ``` (): void; ``` ##### Returns[#](#returns-4) `void` #### Signature[#](#signature-3) ``` onGlobalStateChanged(id: string, callback: (value: T) => void): () => void ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/userinterfacecustomactioniconname) # Type Alias: UserInterfaceCustomActionIconName ``` type UserInterfaceCustomActionIconName = "default" | "download" | "upload" | "save" | string & object; ``` Type representing the name of a custom action icon. * `default`: Default icon. * `download`: Download icon. * `upload`: Upload icon. * `save`: Save icon. * Any other string: Custom icon name. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/exportformat) # Type Alias: ExportFormat ``` type ExportFormat = "image/png" | "video/mp4" | "application/pdf"; ``` Type representing the export format. * `image/png`: PNG image format. * `video/mp4`: MP4 video format. * `application/pdf`: PDF document format. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon) # Type Alias: CustomIcon ``` type CustomIcon = string | ({ theme, iconSize }) => string; ``` Type representing a custom icon, which can be a string or a function. * If a string, it represents the name of the icon. * If a function, it takes an object with `theme` and `iconSize` properties and returns a string representing the icon. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardsvgvectorpathbackground) # Type Alias: CustomCardSvgVectorPathBackground ``` type CustomCardSvgVectorPathBackground = object; ``` Type representing an SVG vector path background for a custom card. * `type`: The type of the background, which is ‘svgVectorPath’. * `viewBox`: The viewBox attribute for the SVG. * `width`: Optional width of the SVG. * `height`: Optional height of the SVG. * `d`: The path data for the SVG. * `stroke`: Optional stroke color for the SVG. * `strokeWidth`: Optional stroke width for the SVG. * `strokeLinecap`: Optional stroke line cap for the SVG. * `strokeLinejoin`: Optional stroke line join for the SVG. * `strokeDasharray`: Optional stroke dash array for the SVG. * `strokeDashoffset`: Optional stroke dash offset for the SVG. * `opacity`: Optional opacity for the SVG. * `clipPath`: Optional clip path for the SVG. * `fill`: Optional fill color for the SVG. * `fillRule`: Optional fill rule for the SVG. * `clipRule`: Optional clip rule for the SVG. ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"svgVectorPath"` | | `viewBox` | `string` | | `width?` | `string` | | `height?` | `string` | | `d` | `string` | | `stroke?` | `string` | | `strokeWidth?` | `number` | | `strokeLinecap?` | `"butt"` | | `strokeLinejoin?` | `"miter"` | | `strokeDasharray?` | `string` | | `strokeDashoffset?` | `number` | | `opacity?` | `number` | | `clipPath?` | `string` | | `fill?` | `string` | | `fillRule?` | `"nonzero"` | | `clipRule?` | `"nonzero"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardimagebackground) # Type Alias: CustomCardImageBackground ``` type CustomCardImageBackground = object; ``` Type representing an image background for a custom card. * `url`: The URL of the image. * `type`: The type of the background, which is ‘image’. ## Properties[#](#properties) | Property | Type | | --- | --- | | `url` | `string` | | `type` | `"image"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardbackground) # Type Alias: CustomCardBackground ``` type CustomCardBackground = | CustomCardImageBackground | CustomCardSvgVectorPathBackground; ``` Type representing the background of a custom card, which can be either an image or an SVG vector path. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/cardbackground) # Type Alias: CardBackground ``` type CardBackground = object; ``` Type representing the background of a card. * `path`: The path to the background resource. * `type`: The type of the background resource, either ‘svgVectorPath’ or ‘image’. ## Properties[#](#properties) | Property | Type | | --- | --- | | `path` | `string` | | `type` | `"svgVectorPath"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/assetlibraryentries) # Type Alias: AssetLibraryEntries ``` type AssetLibraryEntries = | AssetLibraryEntry[] | (currentAssetLibraryEntries, context) => AssetLibraryEntry[]; ``` Represents a collection of asset library entries, which can be either a static array or a dynamic function. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacesettings) # Interface: UserInterfaceSettings Interface representing the settings in the user interface. ## Extends[#](#extends) * [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) ## Properties[#](#properties) | Property | Type | Inherited from | | --- | --- | --- | | `show?` | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/).[`show`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockvideofill) # Interface: UserInterfaceInspectorBlockVideoFill Interface representing a video fill block in the user interface inspector. * `crop`: Optional element or boolean indicating whether the crop section should be shown. * `filters`: Optional element or boolean indicating whether the filters section should be shown. * `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. * `effects`: Optional element or boolean indicating whether the effects section should be shown. * `blur`: Optional element or boolean indicating whether the blur section should be shown. ## Deprecated[#](#deprecated) Use `cesdk.feature.enable()` for video-related features instead. ## Extends[#](#extends) * [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`crop?`~ | | `boolean` | | ~`filters?`~ | | `boolean` | | ~`adjustments?`~ | | `boolean` | | ~`effects?`~ | | `boolean` | | ~`blur?`~ | | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacenavigation) # Interface: UserInterfaceNavigation Interface representing the navigation in the user interface. * `position`: Optional position of the navigation. * `title`: Optional title for the navigation. * `action`: Optional object containing actions for the navigation. ## Extends[#](#extends) * [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) ## Properties[#](#properties) | Property | Type | Description | Inherited from | | --- | --- | --- | --- | | `show?` | `boolean` | \- | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/).[`show`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | | `position?` | [`NavigationPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/enumerations/navigationposition/) | \- | \- | | `title?` | `string` | \- | \- | | ~`action?`~ | `object` | **Deprecated** Use the Order API to configure the actions instead. | \- | | `action.close?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | | `action.back?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | | `action.save?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | | `action.export?` | | `boolean` | [`UserInterfaceExportAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceexportaction/) | | `action.share?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | | `action.load?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | | `action.download?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | | `action.custom?` | [`UserInterfaceCustomAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacecustomaction/)\[\] | **Deprecated** Use the Order API to configure the actions instead. | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocktext) # Interface: UserInterfaceInspectorBlockText Interface representing a text block in the user interface inspector. * `advanced`: Optional element or boolean indicating whether the advanced section should be shown. * `color`: Optional element or boolean indicating whether the color section should be shown. ## Deprecated[#](#deprecated) Use `cesdk.feature.enable()` for text-related features instead. ## Extends[#](#extends) * [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`advanced?`~ | | `boolean` | | ~`color?`~ | | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockshape) # Interface: UserInterfaceInspectorBlockShape Interface representing a shape block in the user interface inspector. * `crop`: Optional element or boolean indicating whether the crop section should be shown. ## Deprecated[#](#deprecated) Use `cesdk.feature.enable()` for shape-related features instead. ## Extends[#](#extends) * [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`crop?`~ | | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocks) # Interface: UserInterfaceInspectorBlocks Interface representing the blocks in the user interface inspector. * `opacity`: Optional element or boolean indicating whether the opacity block should be shown. * `transform`: Optional element or boolean indicating whether the transform block should be shown. * `trim`: Optional element or boolean indicating whether the trim block should be shown. * `//ly.img.ubq/text`: Optional text block configuration. * `//ly.img.ubq/page`: Optional page block configuration. * `//ly.img.ubq/graphic`: Optional graphic block configuration. ## Deprecated[#](#deprecated) Use `cesdk.feature.enable()` instead. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`opacity?`~ | | `boolean` | | ~`transform?`~ | | `boolean` | | ~`trim?`~ | | `boolean` | | ~`//ly.img.ubq/text?`~ | [`UserInterfaceInspectorBlockText`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocktext/) | **Deprecated** Use `cesdk.feature.enable()` for text-related features instead. | | ~`//ly.img.ubq/page?`~ | [`UserInterfaceInspectorBlockPage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockpage/) | **Deprecated** Use `cesdk.feature.enable()` for page-related features instead. | | ~`//ly.img.ubq/graphic?`~ | [`UserInterfaceInspectorBlockGraphic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockgraphic/) | **Deprecated** Use `cesdk.feature.enable()` for graphic-related features instead. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockrectshape) # Interface: UserInterfaceInspectorBlockRectShape Interface representing a rectangular shape block in the user interface inspector. * `crop`: Optional element or boolean indicating whether the crop section should be shown. * `filters`: Optional element or boolean indicating whether the filters section should be shown. * `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. * `effects`: Optional element or boolean indicating whether the effects section should be shown. * `blur`: Optional element or boolean indicating whether the blur section should be shown. ## Deprecated[#](#deprecated) Use `cesdk.feature.enable()` for shape-related features instead. ## Extends[#](#extends) * [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`crop?`~ | | `boolean` | | ~`filters?`~ | | `boolean` | | ~`adjustments?`~ | | `boolean` | | ~`effects?`~ | | `boolean` | | ~`blur?`~ | | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockpage) # Interface: UserInterfaceInspectorBlockPage Interface representing a page block in the user interface inspector. * `format`: Optional element or boolean indicating whether the format section should be shown. * `manage`: Optional element or boolean indicating whether the manage section should be shown. * `maxDuration`: Optional number controlling the maximum allowed duration of a page, if in video mode. * `crop`: Optional element or boolean indicating whether the crop section should be shown. * `filters`: Optional element or boolean indicating whether the filters section should be shown. * `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. * `effects`: Optional element or boolean indicating whether the effects section should be shown. * `blur`: Optional element or boolean indicating whether the blur section should be shown. ## Deprecated[#](#deprecated) Use `cesdk.feature.enable()` for page-related features instead. ## Extends[#](#extends) * [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`format?`~ | | `boolean` | | ~`manage?`~ | | `boolean` | | ~`maxDuration?`~ | `number` | **Deprecated** Use feature API instead. Controls the maximum allowed duration of a page, if in video mode. | | ~`crop?`~ | | `boolean` | | ~`filters?`~ | | `boolean` | | ~`adjustments?`~ | | `boolean` | | ~`effects?`~ | | `boolean` | | ~`blur?`~ | | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockimage) # Interface: UserInterfaceInspectorBlockImage Interface representing an image block in the user interface inspector. * `crop`: Optional element or boolean indicating whether the crop section should be shown. * `filters`: Optional element or boolean indicating whether the filters section should be shown. * `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. * `effects`: Optional element or boolean indicating whether the effects section should be shown. * `blur`: Optional element or boolean indicating whether the blur section should be shown. ## Deprecated[#](#deprecated) Use `cesdk.feature.enable()` for image-related features instead. ## Extends[#](#extends) * [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`crop?`~ | | `boolean` | | ~`filters?`~ | | `boolean` | | ~`adjustments?`~ | | `boolean` | | ~`effects?`~ | | `boolean` | | ~`blur?`~ | | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockgraphic) # Interface: UserInterfaceInspectorBlockGraphic Interface representing a graphic block in the user interface inspector. * `crop`: Optional element or boolean indicating whether the crop section should be shown. * `filters`: Optional element or boolean indicating whether the filters section should be shown. * `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. * `effects`: Optional element or boolean indicating whether the effects section should be shown. * `blur`: Optional element or boolean indicating whether the blur section should be shown. ## Deprecated[#](#deprecated) Use `cesdk.feature.enable()` for graphic-related features instead. ## Extends[#](#extends) * [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`crop?`~ | | `boolean` | | ~`filters?`~ | | `boolean` | | ~`adjustments?`~ | | `boolean` | | ~`effects?`~ | | `boolean` | | ~`blur?`~ | | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspector) # Interface: UserInterfaceInspector Interface representing the inspector in the user interface. * `position`: Optional position of the inspector. * `floating`: Optional boolean indicating whether the inspector should be floating. ## Extends[#](#extends) * [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) ## Properties[#](#properties) | Property | Type | Inherited from | | --- | --- | --- | | `show?` | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/).[`show`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | | `position?` | [`PanelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/enumerations/panelposition/) | \- | | `floating?` | `boolean` | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock) # Interface: UserInterfaceInspectorBlock Interface representing a block in the user interface inspector. ## Deprecated[#](#deprecated) Use `cesdk.feature.enable()` instead. ## Extended by[#](#extended-by) * [`UserInterfaceInspectorBlockPage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockpage/) * [`UserInterfaceInspectorBlockText`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocktext/) * [`UserInterfaceInspectorBlockImage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockimage/) * [`UserInterfaceInspectorBlockVideoFill`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockvideofill/) * [`UserInterfaceInspectorBlockRectShape`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockrectshape/) * [`UserInterfaceInspectorBlockGraphic`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockgraphic/) * [`UserInterfaceInspectorBlockShape`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockshape/) --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceexportaction) # Interface: UserInterfaceExportAction Interface representing an export action in the user interface. * `format`: Optional array of export formats. ## Extends[#](#extends) * [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) ## Properties[#](#properties) | Property | Type | Inherited from | | --- | --- | --- | | `show?` | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/).[`show`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | | `format?` | [`ExportFormat`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/exportformat/)\[\] | \- | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelements) # Interface: UserInterfaceElements Defines the configuration for user interface elements, including panels, dock, libraries, blocks, navigation, and inspector bar. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`view?`~ | `"advanced"` | `"default"` | | `panels?` | `object` | \- | | `panels.inspector?` | | `boolean` | | `panels.settings?` | | `boolean` | | `panels.assetLibrary?` | | `boolean` | | `dock?` | `object` | \- | | `dock.show?` | `boolean` | **Deprecated** Please use `cesdk.feature.enable('ly.img.dock')` instead. | | `dock.iconSize?` | `"normal"` | `"large"` | | `dock.hideLabels?` | `boolean` | \- | | `dock.defaultGroupId?` | `string` | If groups are used this group will contain all entries that are not included in other groups. **Deprecated** Please use the AssetLibraryEntry & Dock API to control what is shown in the Dock. | | `dock.groups?` | | [`DockGroup`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/dockgroup/)\[\] | | `libraries?` | `object` | \- | | `libraries.insert?` | `object` | \- | | `libraries.insert.entries?` | [`AssetLibraryEntries`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/assetlibraryentries/) | **Deprecated** Please use the AssetLibraryEntry & Dock API to control what is shown in the Dock. | | `libraries.insert.autoClose?` | `boolean` | () => `boolean` | | `libraries.insert.floating?` | `boolean` | **Deprecated** Please use `cesdk.ui.setPanelFloating('//ly.img.panel/assetLibrary')` instead. | | `libraries.insert.backgroundTrackLibraryEntries?` | `string`\[\] | (`entries`) => `string`\[\] | | `libraries.replace?` | `object` | \- | | `libraries.replace.entries?` | [`AssetLibraryEntries`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/assetlibraryentries/) | **Deprecated** Please use the AssetLibraryEntry & Dock API to control what is shown in the Dock. | | `libraries.replace.autoClose?` | `boolean` | () => `boolean` | | `libraries.replace.floating?` | `boolean` | **Deprecated** Please use `cesdk.ui.setPanelFloating('//ly.img.panel/replaceAssetLibrary')` instead. | | ~`blocks?`~ | [`UserInterfaceInspectorBlocks`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocks/) | **Deprecated** Use `cesdk.feature.enable()` instead. | | `navigation?` | [`UserInterfaceNavigation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacenavigation/) | \- | | `inspectorBar?` | | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement) # Interface: UserInterfaceElement Interface representing an element in the user interface. * `show`: Optional boolean indicating whether the element should be shown. ## Extended by[#](#extended-by) * [`UserInterfaceInspector`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspector/) * [`UserInterfaceSettings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacesettings/) * [`UserInterfaceAssetLibrary`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceassetlibrary/) * [`UserInterfaceExportAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceexportaction/) * [`UserInterfaceNavigation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacenavigation/) ## Properties[#](#properties) | Property | Type | | --- | --- | | `show?` | `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceassetlibrary) # Interface: UserInterfaceAssetLibrary Interface representing the asset library in the user interface. * `position`: Optional position of the asset library. ## Extends[#](#extends) * [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) ## Properties[#](#properties) | Property | Type | Inherited from | | --- | --- | --- | | `position?` | [`PanelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/enumerations/panelposition/) | \- | | `show?` | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/).[`show`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacecustomaction) # Interface: UserInterfaceCustomAction Interface representing a custom action in the user interface. * `callback`: Function to be called when the action is triggered. * `label`: Label for the action. * `iconName`: Name of the icon for the action. ## Properties[#](#properties) | Property | Type | | --- | --- | | `callback` | () => `void` | | `label` | `string` | | `iconName` | [`UserInterfaceCustomActionIconName`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/userinterfacecustomactioniconname/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/dockgroup) # Interface: DockGroup ## Deprecated[#](#deprecated) Please use the AssetLibraryEntry & Dock API to control what is shown in the Dock. ## Properties[#](#properties) | Property | Type | | --- | --- | | ~`id`~ | `string` | | ~`showOverview?`~ | `boolean` | | ~`entryIds?`~ | `string`\[\] | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview) # Interface: AssetLibraryEntryView Interface representing the view configuration for an asset library entry. * `showGroupOverview`: Optional boolean indicating whether to show the group overview. * `promptBeforeApply`: Optional configuration for showing a confirmation dialog before applying an asset. * `icon`: Optional custom icon for the asset. * `previewLength`: Optional number determining how many asset results will be shown in an overview or section overview. * `previewBackgroundType`: Optional type determining if the thumbUri is set as a background that will be contained or covered by the card in an overview or section overview. * `gridBackgroundType`: Optional type determining if the thumbUri is set as a background that will be contained or covered by the card in the grid view. * `gridColumns`: Optional number of columns in the grid view. * `gridItemHeight`: Optional height of an item in the grid view, either ‘auto’ or ‘square’. * `cardBackgroundPreferences`: Optional configuration for determining what will be used as the card background from the asset and in which priorities. * `cardBorder`: Optional boolean indicating whether to draw a border around the card. * `cardLabel`: Optional function to overwrite the label of a card for a specific asset result. * `cardStyle`: Optional function to add custom styles to a card for a specific asset result. * `cardLabelStyle`: Optional function to add custom styles to a label for a specific asset result. * `cardLabelPosition`: Optional function to position the label inside or below the card. * `cardLabelTruncateLines`: Optional function to control label truncation to occur at end of first line (‘single’) or at end of second line (‘multi’). * `sortBy`: Optional configuration for sorting the asset results. ## Extended by[#](#extended-by) * [`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `showGroupOverview?` | `boolean` | \- | | `isSearchable?` | `boolean` | Indicates whether this asset library entry supports searching. When set to false, this entry’s assets cannot be searched. The search field in the panel will only be shown if at least one visible entry is searchable. Defaults to true (entry is searchable). | | `promptBeforeApply?` | | `boolean` | | `icon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | \- | | `previewLength?` | `number` | Determines how many asset results will be show in an overview or section overview. | | `previewBackgroundType?` | `"cover"` | `"contain"` | | `gridBackgroundType?` | `"cover"` | `"contain"` | | `gridColumns?` | `number` | Number of columns in the grid view | | `gridItemHeight?` | `"auto"` | `"square"` | | `cardBackgroundPreferences?` | | [`CardBackground`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/cardbackground/)\[\] | | `cardBorder?` | `boolean` | Draws a border around the card if set to true | | `cardLabel?` | (`assetResult`) => `string` | Overwrite the label of a card for a specific asset result | | `cardStyle?` | (`assetResult`) => `Record`<`string`, `string`\> | Add custom styles to a card for a specific asset result | | `cardLabelStyle?` | (`assetResult`) => `Record`<`string`, `string`\> | Add custom styles to a label for a specific asset result | | `cardLabelPosition?` | (`assetResult`) => `"inside"` | `"below"` | | `cardLabelTruncateLines?` | (`assetResult`) => `"single"` | `"multi"` | | `disableTooltips?` | `boolean` | Control whether tooltips should be disabled for asset library cards. When set to true, tooltips will not be shown on cards. Defaults to false (tooltips are shown). | | `sortBy?` | | [`SortingOrder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sortingorder/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata) # Interface: AssetLibraryEntryData Interface representing the data configuration for an asset library entry. * `id`: The unique identifier for the asset library entry. * `sourceIds`: An array of source IDs associated with the asset library entry, or a function that returns an array of source IDs. * `sceneMode`: Optional configuration for the scene mode, which can be a `SceneMode`, ‘All’, or a function returning a `SceneMode` or ‘All’. * `excludeGroups`: Optional array of group IDs to exclude from the asset library entry. * `includeGroups`: Optional array of group IDs to include in the asset library entry. * `title`: Optional title for the asset library entry, which can be a string or a function returning a string or undefined. * `canAdd`: Optional boolean or function indicating whether the asset can be added to the source. * `canRemove`: Optional boolean or function indicating whether the asset can be removed from the source. ## Extended by[#](#extended-by) * [`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/) ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `id` | `string` | \- | | `sourceIds` | `string`\[\] | (`context`) => `string`\[\] | | `sceneMode?` | | `"Design"` | | `excludeGroups?` | `string`\[\] | \- | | `includeGroups?` | `string`\[\] | \- | | `title?` | `string` | (`options`) => `string` | | `canAdd?` | `boolean` | (`sourceId`) => `boolean` | | `canRemove?` | `boolean` | (`sourceId`) => `boolean` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetentrysourceidscontext) # Interface: AssetEntrySourceIdsContext Context provided to the sourceIds callback function. * `cesdk`: The CreativeEditorSDK instance. * `engine`: The CreativeEngine instance. ## Properties[#](#properties) | Property | Type | | --- | --- | | `cesdk` | [`CreativeEditorSDK`](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeeditorsdk/) | | `engine` | [`CreativeEngine`](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeengine/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/enumerations/navigationposition) # Enum: NavigationPosition This enum is used to specify the position of the navigation bar within the user interface. By setting the position to `Top` or `Bottom`, you can control the layout and placement of the navigation bar to better suit the user’s workflow and preferences. ## Enumeration Members[#](#enumeration-members) | Enumeration Member | Value | | --- | --- | | `Top` | `"top"` | | `Bottom` | `"bottom"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/previewtypeimage) # Type Alias: PreviewTypeImage ``` type PreviewTypeImage = object; ``` ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"image"` | | `uri` | `string` | | `checkeredBackground?` | `boolean` | | `fillType?` | `"cover"` | | `fillPosition?` | `"center"` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/previewtypecolor) # Type Alias: PreviewTypeColor ``` type PreviewTypeColor = object; ``` ## Properties[#](#properties) | Property | Type | | --- | --- | | `type` | `"color"` | | `color` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/previewtype) # Type Alias: PreviewType ``` type PreviewType = | PreviewTypeImage | PreviewTypeColor; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/placement) # Type Alias: Placement ``` type Placement = | "top" | "bottom" | "right" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"; ``` --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/cesdkconfiguration/type-aliases/deprecatedkeys) # Type Alias: DeprecatedKeys ``` type DeprecatedKeys = object; ``` ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`presets`~ | `object` | **Deprecated** This config key is not used anymore and will be removed. | | `presets.typefaces?` | `object` | **Deprecated** The configuration options `presets.typefaces` has been deprecated. Please use the AssetAPI to add typefaces instead and use `ui.typefaceLibraries` to populate the typeface selection dropdown in the UI. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uploadcallbackcontext) # Interface: UploadCallbackContext Represents the context for the upload callback in the Creative Editor SDK. This interface defines the source ID and an optional group for the upload context. ## Properties[#](#properties) | Property | Type | | --- | --- | | `sourceId` | `string` | | `group?` | `string` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uioptionsperdesignunit) # Interface: UIOptionsPerDesignUnit Represents the UI options for different design units in the Creative Editor SDK. This interface defines the UI options for millimeters, pixels, and inches. ## Properties[#](#properties) | Property | Type | | --- | --- | | `mm` | [`UIOptionsForSingleDesignUnit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uioptionsforsingledesignunit/) | | `px` | [`UIOptionsForSingleDesignUnit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uioptionsforsingledesignunit/) | | `in` | [`UIOptionsForSingleDesignUnit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uioptionsforsingledesignunit/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uioptionsforsingledesignunit) # Interface: UIOptionsForSingleDesignUnit Represents the UI options for a single design unit type in the Creative Editor SDK. This interface defines the bleed margin options for a single design unit. ## Properties[#](#properties) | Property | Type | | --- | --- | | `bleedMargin` | [`BleedMarginOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/bleedmarginoptions/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/fontsizeoptions) # Interface: FontSizeOptions Represents the font size configuration options in the Creative Editor SDK. This interface defines the dropdown options for font sizes. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `dropdownOptions` | `number`\[\] | The font size options that can be selected from a dropdown in the UI. Other font size values can be entered directly using the input field. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/bleedmarginoptions) # Interface: BleedMarginOptions Represents the bleed margin configuration options for a single design unit type in the Creative Editor SDK. This interface defines the dropdown options and the default bleed margin value. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `dropdownOptions` | `number`\[\] | The bleed margin options that can be selected from a dropdown in the UI. Other bleed margin values can be entered directly using the input field. | | `defaultBleedMargin` | `number` | The default bleed margin value. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/themefn) # Type Alias: ThemeFn ``` type ThemeFn = () => Theme; ``` A function that returns a theme value. This allows for dynamic theme selection based on runtime conditions. The function is evaluated lazily whenever the theme is accessed. ## Returns[#](#returns) [`Theme`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/theme/) --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/theme) # Type Alias: Theme ``` type Theme = "light" | "dark"; ``` Represents the base theme values for the Creative Editor SDK. This type defines the concrete themes that can be rendered. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/themeconfig) # Type Alias: ThemeConfig ``` type ThemeConfig = | Theme | ThemeFn | "system"; ``` Represents the theme configuration for the Creative Editor SDK. This can be a concrete theme, a function that returns a theme, or ‘system’ to use OS preference. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scalefn) # Type Alias: ScaleFn ``` type ScaleFn = ({ containerWidth, isTouch }) => Scale; ``` A function that returns a scale value based on viewport properties. This allows for dynamic scale selection based on runtime conditions. ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `{ containerWidth, isTouch }` | { `containerWidth?`: `number`; `isTouch?`: `boolean`; } | | `{ containerWidth, isTouch }.containerWidth?` | `number` | | `{ containerWidth, isTouch }.isTouch?` | `boolean` | ## Returns[#](#returns) [`Scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scale/) --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scaleconfig) # Type Alias: ScaleConfig ``` type ScaleConfig = | Scale | ScaleFn; ``` Represents the scale configuration for the Creative Editor SDK. This can be a concrete scale or a function that returns a scale based on viewport properties. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scale) # Type Alias: Scale ``` type Scale = "normal" | "large" | "modern"; ``` Represents the base scale values for the Creative Editor SDK. This type defines the concrete scales that can be rendered. * `'normal'`: Standard UI scaling for desktop and larger screens * `'large'`: Increased UI scaling for touch devices and accessibility * `'modern'`: Modern theme with refined color palette and improved visual hierarchy --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/onuploadoptions) # Type Alias: OnUploadOptions ``` type OnUploadOptions = object; ``` Represents the options for the upload callback in the Creative Editor SDK. This type defines the supported MIME types for uploads. ## Properties[#](#properties) | Property | Type | | --- | --- | | `supportedMimeTypes?` | `string`\[\] | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/onuploadcallback) # Type Alias: OnUploadCallback ``` type OnUploadCallback = (file, onProgress, context?) => Promise; ``` Represents the upload callback function for the Creative Editor SDK. This type defines a function that handles file uploads, including progress updates and context. ## Parameters[#](#parameters) | Parameter | Type | | --- | --- | | `file` | `File` | | `onProgress` | (`progress`) => `void` | | `context?` | [`UploadCallbackContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uploadcallbackcontext/) | ## Returns[#](#returns) `Promise`<[`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetdefinition/)\> --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/i18n) # Type Alias: I18n ``` type I18n = Record>; ``` Represents the internationalization settings for the Creative Editor SDK. This type defines a record of locale strings to translation objects. Note: this will append keys and not override keys. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/callbacks) # Type Alias: Callbacks ``` type Callbacks = object; ``` Represents the callback functions for various events in the Creative Editor SDK. This interface defines functions for handling back, close, share, save, load, load archive, download, export, upload, and unsupported browser events. ## Deprecated[#](#deprecated) Use the `cesdk.actions` API and the Order API instead. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | ~`onBack?`~ | () => `void` | `Promise`<`void`\> | | ~`onClose?`~ | () => `void` | `Promise`<`void`\> | | ~`onShare?`~ | (`s`) => `void` | `Promise`<`void`\> | | ~`onSave?`~ | (`s`) => `void` | `Promise`<`void`\> | | ~`onLoad?`~ | () => `Promise`<`string`\> | `"upload"` | | ~`onLoadArchive?`~ | () => `Promise`<`string`\> | `"uploadArchive"` | | ~`onDownload?`~ | (`s`) => `void` | `Promise`<`void`\> | | ~`onExport?`~ | (`blobs`, `options`) => `void` | `Promise`<`void`\> | | ~`onUpload?`~ | | [`OnUploadCallback`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/onuploadcallback/) | | ~`onUnsupportedBrowser?`~ | () => `void` | **Deprecated** Use the `cesdk.actions.register('onUnsupportedBrowser', action)` instead. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/combinedconfiguration) # Type Alias: CombinedConfiguration ``` type CombinedConfiguration = CESDKConfiguration & Omit<_EngineConfiguration, "presets"> & DeprecatedKeys; ``` Represents the combined configuration for the Creative Editor SDK. This type combines the `CESDKConfiguration` with the `EngineConfiguration` while omitting the `presets` key. It also includes deprecated keys from the `CESDKConfiguration`. --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/a11y) # Type Alias: A11y ``` type A11y = object; ``` Represents the accessibility settings for the Creative Editor SDK. This type defines the heading hierarchy start level, which can be a number between 1 and 6. ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `headingsHierarchyStart` | `1` | `2` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/popoveroptions) # Interface: PopoverOptions ## Properties[#](#properties) | Property | Type | | --- | --- | | `inputLabel?` | `string` | | `inputLabelPosition?` | `"top"` | | `label?` | `string` | | `labelAlignment?` | `"left"` | | `tooltip?` | `string` | | `variant?` | `"regular"` | | `color?` | `"accent"` | | `size?` | `"normal"` | | `icon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | | `trailingIcon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | | `isActive?` | `boolean` | | `isSelected?` | `boolean` | | `isDisabled?` | `boolean` | | `isLoading?` | `boolean` | | `loadingProgress?` | `number` | | `placement?` | [`Placement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/placement/) | | `children?` | | | `suffix?` | `Partial` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/popoverchildrencontext) # Interface: PopoverChildrenContext ## Properties[#](#properties) | Property | Type | | --- | --- | | `close` | () => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/mediapreviewoptions) # Interface: MediaPreviewOptions ## Properties[#](#properties) | Property | Type | | --- | --- | | `size?` | `"square"` | | `preview?` | [`PreviewType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/previewtype/) | | `action?` | [`ButtonOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/buttonoptions/) | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/menuoptions) # Interface: MenuOptions ## Properties[#](#properties) | Property | Type | | --- | --- | | `children?` | () => `void` | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/buttonrowoptions) # Interface: ButtonRowOptions ## Properties[#](#properties) | Property | Type | | --- | --- | | `children?` | () => `void` | | `justifyContent?` | | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/builderrendercontext) # Interface: BuilderRenderContext ## Properties[#](#properties) | Property | Type | Description | | --- | --- | --- | | `builder` | [`Builder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/builder/) | \- | | `global` | { <`T`\> (`id`, `defaultValue`): `object`; <`T`\> (`id`): `object`; } | Global state object that can be used to store and retrieve values. It will take a unique identifier for this state that can be used to access this store later. `const { value, setValue } = global('unique-id', 'default-value');` If no default value is set, the `value` property may be undefined if no value was set before: `const { value, setValue } = global('unique-id', 'default-value');` **Param** The unique identifier for the state. **Param** The default value for the state. | --- [Source](https:/img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/builder) # Interface: Builder Interface for all available builder. Depending on the context different implementation might be used. A “Button” in the canvas menu might render different component than a button in the topbar or a panel. ## Properties[#](#properties) | Property | Type | | --- | --- | | `Menu` | (`id`, `options`) => `void` | | `Popover` | (`id`, `options`) => `void` | | `ButtonRow` | (`id`, `options`) => `void` | | `MediaPreview` | (`id`, `options`) => `void` |